@polastack/design-system 0.1.36 → 0.1.37

package/dist/index.d.ts

@@ -463,12 +463,13 @@ interface DataTableProps<TData> {
     enablePagination?: boolean;
     pageSize?: number;
     pageSizeOptions?: number[];
+    stickyColumns?: number;
     onRowSelectionChange?: (selectedRows: TData[]) => void;
     emptyState?: React.ReactNode;
     className?: string;
     'aria-label'?: string;
 }
-declare function DataTable<TData>({ columns, data, variant, enableSorting, enableRowSelection, enableColumnVisibility, enablePagination, pageSize, pageSizeOptions, onRowSelectionChange, emptyState, className, 'aria-label': ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, variant, enableSorting, enableRowSelection, enableColumnVisibility, enablePagination, pageSize, pageSizeOptions, stickyColumns, onRowSelectionChange, emptyState, className, 'aria-label': ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/index.js

@@ -2467,7 +2467,7 @@ var Table = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30("thead", { ref, className: cn("[&_tr]:border-b bg-[var(--color-surface-sunken)]", className), ...props }));
 TableHeader.displayName = "TableHeader";
 var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   "tbody",
@@ -2703,6 +2703,7 @@ function DataTable({
   enablePagination = false,
   pageSize = 10,
   pageSizeOptions,
+  stickyColumns = 0,
   onRowSelectionChange,
   emptyState,
   className,
@@ -2711,6 +2712,8 @@ function DataTable({
   const isGrid = variant === "grid";
   const gridCellClass = isGrid ? "border-r border-[var(--color-border)] last:border-r-0" : "";
   const [sorting, setSorting] = React33.useState([]);
+  const headerRowRef = React33.useRef(null);
+  const [stickyOffsets, setStickyOffsets] = React33.useState([]);
   const [rowSelection, setRowSelection] = React33.useState({});
   const [columnVisibility, setColumnVisibility] = React33.useState({});
   const allColumns = React33.useMemo(() => {
@@ -2759,6 +2762,28 @@ function DataTable({
       onRowSelectionChange(selectedRows);
     }
   }, [rowSelection, table, onRowSelectionChange]);
+  React33.useEffect(() => {
+    if (stickyColumns > 0 && headerRowRef.current) {
+      const ths = headerRowRef.current.querySelectorAll("th");
+      const offsets = [];
+      let left = 0;
+      for (let i = 0; i < stickyColumns && i < ths.length; i++) {
+        offsets.push(left);
+        left += ths[i].offsetWidth;
+      }
+      setStickyOffsets(offsets);
+    }
+  }, [stickyColumns, columnVisibility]);
+  const getStickyStyle = (colIndex) => {
+    if (colIndex >= stickyColumns || stickyOffsets.length === 0) return void 0;
+    return {
+      position: "sticky",
+      left: stickyOffsets[colIndex] ?? 0,
+      zIndex: 1
+    };
+  };
+  const stickyCellClass = (colIndex) => colIndex < stickyColumns ? "bg-[var(--color-surface)] [tr:hover>&]:bg-[var(--color-surface-muted)] [tr[data-state=selected]>&]:bg-[var(--color-surface-accent)]" : "";
+  const stickyHeadClass = (colIndex) => colIndex < stickyColumns ? "bg-[var(--color-surface-sunken)]" : "";
   const showToolbar = enableRowSelection || enableColumnVisibility;
   return /* @__PURE__ */ jsxs14("div", { className: cn("rounded-md border border-[var(--color-border)]", className), children: [
     showToolbar && /* @__PURE__ */ jsx33(
@@ -2769,7 +2794,7 @@ function DataTable({
       }
     ),
     /* @__PURE__ */ jsxs14(Table, { "aria-label": ariaLabel, children: [
-      /* @__PURE__ */ jsx33(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx33(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx33(TableHead, { className: gridCellClass, children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx33(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx33(TableRow, { ref: headerRowRef, children: headerGroup.headers.map((header, colIndex) => /* @__PURE__ */ jsx33(TableHead, { className: cn(gridCellClass, stickyHeadClass(colIndex)), style: getStickyStyle(colIndex), children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs14(
         "button",
         {
           className: "flex items-center gap-1 -ml-2 px-2 py-1 rounded-md hover:bg-[var(--color-surface-muted)] transition-colors duration-fast",
@@ -2803,7 +2828,7 @@ function DataTable({
             onClick: () => row.toggleSelected(),
             className: "cursor-pointer"
           },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx33(TableCell, { className: gridCellClass, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          children: row.getVisibleCells().map((cell, colIndex) => /* @__PURE__ */ jsx33(TableCell, { className: cn(gridCellClass, stickyCellClass(colIndex)), style: getStickyStyle(colIndex), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
         },
         row.id
       )) : /* @__PURE__ */ jsx33(TableRow, { children: /* @__PURE__ */ jsx33(
@@ -3011,7 +3036,7 @@ function FilterSelector({
               type: "checkbox",
               checked: selected.includes(opt.id),
               onChange: (e) => onToggle(opt.id, e.target.checked),
-              className: "h-4 w-4"
+              className: "h-4 w-4 cursor-pointer"
             }
           ),
           opt.label