feat(tables): add isTableHeadHidden prop to DataTable

MTES-MCT · Oct 24, 2024 · fb723b0 · fb723b0
1 parent e75b525
commit fb723b0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/tables/DataTable/index.tsx b/src/tables/DataTable/index.tsx
@@ -7,6 +7,7 @@ import {
   useReactTable
 } from '@tanstack/react-table'
 import { useState } from 'react'
+import styled from 'styled-components'
 
 import { Td } from './Td'
 import { Th } from './Th'
@@ -18,9 +19,16 @@ export type DataTableProps<T extends AnyObject> = {
   columns: Array<ColumnDef<T>>
   data: T[] | undefined
   initialSorting: SortingState
+  isTableHeadHidden?: boolean | undefined
   tableOptions?: TableOptions<T> | undefined
 }
-export function DataTable<T extends AnyObject>({ columns, data, initialSorting, tableOptions }: DataTableProps<T>) {
+export function DataTable<T extends AnyObject>({
+  columns,
+  data,
+  initialSorting,
+  isTableHeadHidden = false,
+  tableOptions
+}: DataTableProps<T>) {
   const [sorting, setSorting] = useState<SortingState>(initialSorting)
 
   const table = useReactTable({
@@ -49,29 +57,41 @@ export function DataTable<T extends AnyObject>({ columns, data, initialSorting,
 
           {data.length > 0 && (
             <SimpleTable.Table>
-              <SimpleTable.Head>
-                {table.getHeaderGroups().map(headerGroup => (
-                  <tr key={headerGroup.id}>
-                    {headerGroup.headers.map(header => (
-                      <Th key={header.id} header={header} />
-                    ))}
-                  </tr>
-                ))}
-              </SimpleTable.Head>
+              {!isTableHeadHidden && (
+                <SimpleTable.Head>
+                  {table.getHeaderGroups().map(headerGroup => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map(header => (
+                        <Th key={header.id} header={header} />
+                      ))}
+                    </tr>
+                  ))}
+                </SimpleTable.Head>
+              )}
 
-              <tbody>
+              <TBody $withTopBorder={isTableHeadHidden!}>
                 {rows.map(row => (
                   <SimpleTable.BodyTr key={row.id} data-id={'id' in row.original ? row.original.id : row.id}>
                     {row.getVisibleCells().map(cell => (
                       <Td key={cell.id} cell={cell} />
                     ))}
                   </SimpleTable.BodyTr>
                 ))}
-              </tbody>
+              </TBody>
             </SimpleTable.Table>
           )}
         </>
       )}
     </>
   )
 }
+
+const TBody = styled.tbody<{
+  $withTopBorder: boolean
+}>`
+  > tr {
+    > td {
+      border-top: ${p => (p.$withTopBorder ? `1px solid ${p.theme.color.lightGray}` : 0)};
+    }
+  }
+`
diff --git a/stories/tables/DataTable.stories.tsx b/stories/tables/DataTable.stories.tsx
@@ -19,6 +19,7 @@ const args: DataTableProps<FakeBasicTableDataItem> = {
       id: 'lastName'
     }
   ],
+  isTableHeadHidden: false,
   tableOptions: undefined
 }
 
@@ -28,6 +29,7 @@ const meta: Meta<DataTableProps<FakeBasicTableDataItem>> = {
   component: DataTable,
 
   argTypes: {
+    isTableHeadHidden: ARG_TYPE.OPTIONAL_BOOLEAN,
     tableOptions: {
       ...ARG_TYPE.NO_CONTROL_INPUT,
       table: {