From 927c785342def7ea6c427bf213270f5194a1a4f2 Mon Sep 17 00:00:00 2001
From: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com>
Date: Fri, 1 Sep 2023 12:28:02 +0800
Subject: [PATCH] Hasan/Pr 00 table refactor (#5515)

* fix: fixed table layout and typescript issue

* fix: added layout to faq table
---
 src/features/components/atoms/table/base/index.tsx     |  4 +++-
 .../components/atoms/table/shadow-table/index.tsx      |  2 +-
 .../deriv-prime/browse-our-faq/faq-commercial-plan.tsx |  1 +
 .../partners/deriv-prime/commercial-plan/index.tsx     |  1 +
 src/features/styles/theme/table.scss                   | 10 +++++-----
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/features/components/atoms/table/base/index.tsx b/src/features/components/atoms/table/base/index.tsx
index a1721bdf05e..7a5a4fd6b32 100644
--- a/src/features/components/atoms/table/base/index.tsx
+++ b/src/features/components/atoms/table/base/index.tsx
@@ -8,6 +8,7 @@ import { ClassProps } from 'features/types'
 
 export interface TableProps<T, K extends keyof T> extends BoxProps, ClassProps {
     striped?: boolean
+    layout?: 'fixed' | 'auto'
     data: T[]
     columns: Array<TableColumnType<T, K>>
 }
@@ -16,6 +17,7 @@ function BaseTable<T, K extends keyof T>({
     data,
     columns,
     striped,
+    layout,
     className,
     ...rest
 }: TableProps<T, K>) {
@@ -24,7 +26,7 @@ function BaseTable<T, K extends keyof T>({
             className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
             {...rest}
         >
-            <table className={dclsx('table')}>
+            <table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
                 <TableHeader columns={columns} />
                 <TableRow data={data} columns={columns} />
             </table>
diff --git a/src/features/components/atoms/table/shadow-table/index.tsx b/src/features/components/atoms/table/shadow-table/index.tsx
index 9f5264194e3..a9a8f51dae8 100644
--- a/src/features/components/atoms/table/shadow-table/index.tsx
+++ b/src/features/components/atoms/table/shadow-table/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import BaseTable, { TableProps } from '../base'
 import dclsx from 'features/utils/dclsx'
 
-const ShadowTable = ({ className, ...rest }: TableProps) => {
+function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
     return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
 }
 
diff --git a/src/features/pages/partners/deriv-prime/browse-our-faq/faq-commercial-plan.tsx b/src/features/pages/partners/deriv-prime/browse-our-faq/faq-commercial-plan.tsx
index 0feb8927b2b..640bd62994e 100644
--- a/src/features/pages/partners/deriv-prime/browse-our-faq/faq-commercial-plan.tsx
+++ b/src/features/pages/partners/deriv-prime/browse-our-faq/faq-commercial-plan.tsx
@@ -23,6 +23,7 @@ const FAQCommercialPlan = () => {
                     data={data}
                     columns={column_data}
                     striped
+                    layout="fixed"
                     className={commercial_table_faq}
                 />
             </Container.Fixed>
diff --git a/src/features/pages/partners/deriv-prime/commercial-plan/index.tsx b/src/features/pages/partners/deriv-prime/commercial-plan/index.tsx
index 0c736dc7660..381dbf8eeb7 100644
--- a/src/features/pages/partners/deriv-prime/commercial-plan/index.tsx
+++ b/src/features/pages/partners/deriv-prime/commercial-plan/index.tsx
@@ -27,6 +27,7 @@ const CommercialPlan = () => {
                     data={data}
                     columns={column_data}
                     striped
+                    layout="fixed"
                     className={commercial_table}
                 />
             </Container.Fluid>
diff --git a/src/features/styles/theme/table.scss b/src/features/styles/theme/table.scss
index 4383f215d3e..ce7d9401f4b 100644
--- a/src/features/styles/theme/table.scss
+++ b/src/features/styles/theme/table.scss
@@ -9,6 +9,11 @@
 .table {
     inline-size: 100%;
     background-color: transparent;
+    th, td {
+        line-height: 1.8;
+    }
+}
+.table-layout-fixed {
     table-layout: fixed;
 }
 .table-shadow {
@@ -29,9 +34,4 @@
             background-color: $color-white-1;
         }
     }
-}
-
-th, td {
-    line-height: 1.8!important;
-
 }
\ No newline at end of file