feat(Table): add "fixed" prop for fixed table layouts (#1708)

Co-authored-by: Thayanan Tharmapalan <[email protected]> Co-authored-by: Thayanan Tharmapalan <[email protected]>
dnbexperience · Nov 8, 2022 · 241ee0f · 241ee0f
1 parent 7429455
commit 241ee0f
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 6 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
@@ -177,7 +177,7 @@ export const TableSticky = () => (
     <ComponentBox hideCode data-visual-test="table-sticky">
       {
         /* jsx */ `
-<Table sticky={true} sticky_offset="4rem" className="dnb-table--fixed">
+<Table sticky={true} stickyOffset="4rem" fixed>
   <caption className="dnb-sr-only">A Table Caption</caption>
   <thead>
     <Tr>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.md
@@ -8,7 +8,7 @@ The following table has a default style. But in future, there will be several ex
 
 ## Fixed layout
 
-You may consider using `table-layout: fixed;`. You can use the modifier class in doing so: `.dnb-table--fixed`
+You may consider using `table-layout: fixed;`. You can use the modifier property `fixed` for doing so.
 
 ## Accessibility
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md
@@ -12,6 +12,7 @@ showTabs: true
 | `stickyOffset`                              | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`. |
 | ~~`variant`~~ (not implemented yet)         | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`.                                                                                                       |
 | ~~`size`~~ (not implemented yet)            | _(coming)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`.                                                                          |
+| `fixed`                                     | _(optional)_ if set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Defaults to `false`.                                                                |
 | `skeleton`                                  | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                              |
 

diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx
@@ -53,6 +53,12 @@ export interface TableProps extends StickyTableHeaderProps {
    * Default: generic.
    */
   variant?: TableVariants
+
+  /**
+   * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
+   * Default: null.
+   */
+  fixed?: boolean
 }
 
 export const defaultProps = {
@@ -84,6 +90,7 @@ const Table = (
     variant,
     sticky,
     stickyOffset, // eslint-disable-line
+    fixed,
     ...props
   } = allProps
 
@@ -112,6 +119,7 @@ const Table = (
             variant && `dnb-table__variant--${variant}`,
             size && `dnb-table__size--${size}`,
             sticky && `dnb-table--sticky`,
+            fixed && `dnb-table--fixed`,
             spacingClasses,
             skeletonClasses,
             className

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.test.tsx
@@ -72,9 +72,9 @@ describe('Table', () => {
     ])
   })
 
-  it('should include custom className and HTML attributes', () => {
+  it('should include custom className', () => {
     render(
-      <Table className="dnb-table--fixed" aria-label="custom-label">
+      <Table className="custom-class" aria-label="custom-label">
         <BasicTable />
       </Table>
     )
@@ -84,15 +84,40 @@ describe('Table', () => {
         'dnb-table',
         'dnb-table__variant--generic',
         'dnb-table__size--large',
-        'dnb-table--fixed',
+        'custom-class',
       ])
     )
+  })
+
+  it('should include custom HTML attributes', () => {
+    render(
+      <Table aria-label="custom-label">
+        <BasicTable />
+      </Table>
+    )
 
     expect(screen.queryByRole('table').getAttribute('aria-label')).toEqual(
       'custom-label'
     )
   })
 
+  it('should set the fixed class', () => {
+    render(
+      <Table fixed>
+        <BasicTable />
+      </Table>
+    )
+
+    expect(Array.from(screen.queryByRole('table').classList)).toEqual(
+      expect.arrayContaining([
+        'dnb-table',
+        'dnb-table__variant--generic',
+        'dnb-table__size--large',
+        'dnb-table--fixed',
+      ])
+    )
+  })
+
   it('should support spacing props', () => {
     render(
       <Table top="2rem">

diff --git a/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx b/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
@@ -22,7 +22,7 @@ export const StickyBasicTable = () => {
       top="5rem"
       // skeleton // toggle
       sticky
-      // className="dnb-table--fixed"
+      // fixed
       stickyOffset="4rem"
     >
       <caption className="dnb-sr-only">A Table Caption</caption>