Merge pull request #34 from FiligranHQ/fix-table-layout

* feat: column size is optional if set to -1 --------- Co-authored-by: Jean-Philippe Kha <[email protected]>
FiligranHQ · Dec 11, 2024 · 327d12e · 327d12e
2 parents f4adf1f + 26dc100
commit 327d12e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/packages/filigran-ui/src/components/clients/data-table.tsx b/packages/filigran-ui/src/components/clients/data-table.tsx
@@ -48,6 +48,7 @@ import {
   useContext,
   useId,
   useImperativeHandle,
+  useMemo,
   useState,
 } from 'react'
 import {cn, fixedForwardRef} from '../../lib/utils'
@@ -296,6 +297,19 @@ const DraggableTableHeader = <TData, TValue>({
       id: header.column.id,
     } as Arguments)
 
+  const thStyles = useMemo(() => {
+    const styles: Record<string, string | number> = {
+      transform: transform ? getTransformString(transform) : '',
+    }
+    const size = header.getSize();
+    // if size is -1, it means the column has no size and will expand to fit the available space
+    if (size !== -1) {
+      styles.minWidth = size
+      styles.width = size
+    }
+    return styles;
+  }, [header, transform]);
+
   return (
     <TableHead
       key={header.id}
@@ -305,11 +319,7 @@ const DraggableTableHeader = <TData, TValue>({
         isDragging && 'z-10 bg-text-secondary/50 opacity-80'
       )}
       ref={setNodeRef}
-      style={{
-        minWidth: header.getSize(),
-        width: header.getSize(),
-        transform: transform ? getTransformString(transform) : '',
-      }}>
+      style={thStyles}>
       <div className="flex h-full items-center justify-between">
         {header.isPlaceholder ? null : typeof header.column.columnDef.header ===
           'string' ? (
@@ -484,6 +494,9 @@ function GenericDataTable<TData extends {id: string}, TValue>(
       columnOrder,
       ...tableState,
     },
+    defaultColumn: {
+      minSize: -1,
+    },
     ...tableOptions,
   })
 

diff --git a/projects/filigran-website/components/example/example-data-table.tsx b/projects/filigran-website/components/example/example-data-table.tsx
@@ -128,16 +128,19 @@ export function ExampleDataTable() {
         id: 'age',
         accessorKey: 'age',
         header: 'Age',
+        size: 200,
       },
       {
         id: 'visits',
         accessorKey: 'visits',
+        size: 200,
         header: () => <span className="font-title txt-category"> Visits</span>,
       },
       {
         id: 'status',
         accessorKey: 'status',
         header: 'Status',
+        size: 150,
       },
       {
         id: 'description',
@@ -166,7 +169,7 @@ export function ExampleDataTable() {
         id: 'actions',
         enableHiding: false,
         enableResizing: false,
-        size: 40,
+        size: -1,
         cell: () => (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>