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

@@ -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>

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} />
 }
 

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>

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>

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;
-
 }