Add sticky header to data table and update UI package

Added a sticky header to the data table story in the documentation app. Also, refined table styling in the UI package, enhancing hover feedback. These changes help improve user interaction and provide better visual cues. The UI package version was also incrementally updated.

Author: thevuong

apps/docs/src/stories/data-table/data-table.stories.tsx

@@ -159,6 +159,21 @@ export const Basic: Story = {
   render: () => <DataTable columns={columns} data={data} />,
 };
 
+export const StickyHeader: Story = {
+  render: () => (
+    <DataTable
+      classNames={{
+        root: 'h-[21.875rem]',
+        header: 'sticky top-0 z-20',
+        headerRow: 'bg-neutral-100 shadow',
+        row: '*:first:border-t-transparent',
+      }}
+      columns={columns}
+      data={data}
+    />
+  ),
+};
+
 export const WithFooter: Story = {
   render: () => <DataTable columns={columns} data={data} showFooter />,
 };

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.77
+
+### Patch Changes
+
+- Refine table styling and enhance hover feedback
+
 ## 0.1.76
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/src/react/data-table.tsx

@@ -829,7 +829,10 @@ export function DataTable<TData>({
   });
 
   return (
-    <div className={twMerge('space-y-4', classNames.root)} data-test-id="root">
+    <div
+      className={twMerge('flex flex-col space-y-4', classNames.root)}
+      data-test-id="root"
+    >
       <DataTableToolbar
         className={classNames.toolbar}
         endToolbar={endToolbar}

packages/ui/src/react/table.tsx

@@ -15,7 +15,7 @@ export const Table = forwardRef<
   }
 >(({ className, classNames, ...props }, forwardedRef) => (
   <div
-    className={twMerge('w-full overflow-auto', classNames?.wrapper)}
+    className={twMerge('size-full overflow-auto', classNames?.wrapper)}
     data-test-id="wrapper"
   >
     <table
@@ -88,7 +88,7 @@ export const TableHead = forwardRef<
 >(({ className, ...props }, forwardedRef) => (
   <th
     className={twMerge(
-      'text-muted-foreground relative h-12 whitespace-nowrap px-4 text-left font-medium [&:has([role=checkbox])]:pr-1',
+      'text-muted-foreground relative h-12 whitespace-nowrap px-4 text-left font-medium',
       className,
     )}
     ref={forwardedRef}
@@ -108,10 +108,10 @@ export const TableRow = forwardRef<
 >(({ className, ...props }, forwardedRef) => (
   <tr
     className={twMerge(
-      'bg-background hover:bg-accent',
-      'group transition-colors',
+      'bg-background group transition-colors',
       'data-state-selected:bg-muted',
       'empty:hidden',
+      'hover:bg-accent',
       className,
     )}
     ref={forwardedRef}
@@ -132,7 +132,7 @@ export const TableCell = forwardRef<
   <td
     className={twMerge(
       'border-y border-b-transparent',
-      'relative px-4 py-2 text-left [&:has([role=checkbox])]:pr-1',
+      'relative px-4 py-2 text-left',
       className,
     )}
     ref={forwardedRef}