@bmsuisse/datagrid 0.23.1 → 0.23.2

package/dist/index.d.ts

@@ -772,7 +772,7 @@ interface DataGridProps<TRow> {
  * (`"server"`). Column filter UI defaults to the type-appropriate widget
  * from `src/filter` unless a column supplies its own `cell` renderer.
  */
-declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, }: DataGridProps<TRow>): ReactElement;
+declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;

package/dist/index.js

@@ -1743,9 +1743,12 @@ function useGridState(dataSource, initialState, externalState) {
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
-function pinnedOffsets(visibleColumns, side, getSize) {
+var DETAIL_COLUMN_WIDTH = 44;
+var SELECTION_COLUMN_WIDTH = 44;
+var ROW_ACTIONS_COLUMN_WIDTH = 44;
+function pinnedOffsets(visibleColumns, side, getSize, leadingOffset) {
   const offsets = /* @__PURE__ */ new Map();
-  let cursor = 0;
+  let cursor = leadingOffset;
   const ordered = side === "left" ? visibleColumns : [...visibleColumns].reverse();
   for (const column of ordered) {
     if (column.pinned !== side) continue;
@@ -1789,7 +1792,7 @@ function DataGrid({
   renderDetail,
   enableColumnResizing = false,
   columnResizeMode = "onChange",
-  columnSizing,
+  columnSizing: controlledColumnSizing,
   onColumnSizingChange,
   virtualize,
   showPagination = true,
@@ -1812,6 +1815,12 @@ function DataGrid({
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
+  const [internalColumnSizing, setInternalColumnSizing] = useState6({});
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
+  function updateColumnSizing(next) {
+    setInternalColumnSizing(next);
+    onColumnSizingChange?.(next);
+  }
   const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
@@ -1862,13 +1871,11 @@ function DataGrid({
     getRowId,
     enableColumnResizing,
     columnResizeMode,
-    ...columnSizing ? {
-      state: { columnSizing },
-      onColumnSizingChange: (updater) => {
-        const next = typeof updater === "function" ? updater(columnSizing) : updater;
-        onColumnSizingChange?.(next);
-      }
-    } : {}
+    state: { columnSizing },
+    onColumnSizingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(columnSizing) : updater;
+      updateColumnSizing(next);
+    }
   });
   const pageCount = Math.max(1, Math.ceil(rowCount / state.pageSize));
   const loading = loadingProp || (dataSource.mode === "server" ? Boolean(dataSource.loading) : false);
@@ -1885,8 +1892,10 @@ function DataGrid({
     return column.renderFilter ? column.renderFilter(value, onChange, state.filter) : renderDefaultFilterWidget(column, value, onChange);
   }
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
-  const leftPinnedOffsets = pinnedOffsets(visibleColumns, "left", columnSize);
-  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize);
+  const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
+  const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
+  const leftPinnedOffsets = pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth);
+  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth);
   function pinnedCellProps(column, area = "body") {
     const bg = area === "header" ? "bg-muted" : "bg-background";
     if (column.pinned === "left") {
@@ -1898,6 +1907,25 @@ function DataGrid({
     if (enableColumnResizing) return { style: { width: columnSize(column.id) } };
     return { style: column.width ? { width: column.width } : void 0 };
   }
+  function structuralCellProps(side, offset, width, area = "body") {
+    const bg = area === "header" ? "bg-muted" : "bg-background";
+    return { className: cn("sticky z-10", bg), style: { [side]: offset, width } };
+  }
+  const detailCellProps = structuralCellProps("left", 0, DETAIL_COLUMN_WIDTH);
+  const selectionCellProps = structuralCellProps(
+    "left",
+    showDetailColumn ? DETAIL_COLUMN_WIDTH : 0,
+    SELECTION_COLUMN_WIDTH
+  );
+  const rowActionsCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH);
+  const detailHeaderCellProps = structuralCellProps("left", 0, DETAIL_COLUMN_WIDTH, "header");
+  const selectionHeaderCellProps = structuralCellProps(
+    "left",
+    showDetailColumn ? DETAIL_COLUMN_WIDTH : 0,
+    SELECTION_COLUMN_WIDTH,
+    "header"
+  );
+  const rowActionsHeaderCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH, "header");
   const tableRows = table.getRowModel().rows;
   const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
   const scrollRef = useRef5(null);
@@ -1933,10 +1961,12 @@ function DataGrid({
           "data-testid": rowTestId,
           className: cn(rowProps?.className, row.index % 2 === 1 && "bg-foreground/5"),
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-              "button",
+            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", detailCellProps.className), style: detailCellProps.style, children: /* @__PURE__ */ jsx19(
+              Button,
               {
                 type: "button",
+                variant: "ghost",
+                size: "icon",
                 "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
                 "aria-expanded": isExpanded,
                 onClick: (event) => {
@@ -1946,7 +1976,7 @@ function DataGrid({
                 children: /* @__PURE__ */ jsx19(ChevronRight, { className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-90"), "aria-hidden": true })
               }
             ) }),
-            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", selectionCellProps.className), style: selectionCellProps.style, children: /* @__PURE__ */ jsx19(
               "input",
               {
                 type: "checkbox",
@@ -1961,7 +1991,7 @@ function DataGrid({
               const pinnedProps = cellColumn && (cellColumn.pinned || enableColumnResizing) ? pinnedCellProps(cellColumn) : void 0;
               return /* @__PURE__ */ jsx19("td", { style: pinnedProps?.style, className: cn("border-b p-2", pinnedProps?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", rowActionsCellProps.className), style: rowActionsCellProps.style, children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
           ]
         }
       ),
@@ -1992,7 +2022,7 @@ function DataGrid({
           "data-testid": testId,
           className: cn("overflow-x-auto rounded-md border", shouldVirtualize && "overflow-y-auto"),
           style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-          children: /* @__PURE__ */ jsxs12("table", { className: "w-full border-collapse text-sm", children: [
+          children: /* @__PURE__ */ jsxs12("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
             /* @__PURE__ */ jsxs12("thead", { className: "bg-muted", children: [
               table.getHeaderGroups().map((headerGroup) => {
                 const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
@@ -2049,16 +2079,32 @@ function DataGrid({
                 }
                 return /* @__PURE__ */ jsxs12(Fragment2, { children: [
                   hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", children: [
-                    showDetailColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-hidden": true }),
-                    showSelectionColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-                      "input",
+                    showDetailColumn && /* @__PURE__ */ jsx19(
+                      "th",
                       {
-                        type: "checkbox",
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        onChange: toggleAllOnPageSelected
+                        rowSpan: 2,
+                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        style: detailHeaderCellProps.style,
+                        "aria-hidden": true
                       }
-                    ) }),
+                    ),
+                    showSelectionColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        rowSpan: 2,
+                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        style: selectionHeaderCellProps.style,
+                        children: /* @__PURE__ */ jsx19(
+                          "input",
+                          {
+                            type: "checkbox",
+                            "aria-label": "Select all rows on this page",
+                            checked: allOnPageSelected,
+                            onChange: toggleAllOnPageSelected
+                          }
+                        )
+                      }
+                    ),
                     headerRuns.map(
                       (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
                         "th",
@@ -2070,31 +2116,66 @@ function DataGrid({
                         `group-${run.label}-${run.columns[0].id}`
                       )
                     ),
-                    showRowActionsColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-label": "Row actions" })
+                    showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        rowSpan: 2,
+                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        style: rowActionsHeaderCellProps.style,
+                        "aria-label": "Row actions"
+                      }
+                    )
                   ] }, `${headerGroup.id}-groups`),
                   /* @__PURE__ */ jsxs12("tr", { children: [
-                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-hidden": true }),
-                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-                      "input",
+                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        style: detailHeaderCellProps.style,
+                        "aria-hidden": true
+                      }
+                    ),
+                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
+                      "th",
                       {
-                        type: "checkbox",
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        onChange: toggleAllOnPageSelected
+                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        style: selectionHeaderCellProps.style,
+                        children: /* @__PURE__ */ jsx19(
+                          "input",
+                          {
+                            type: "checkbox",
+                            "aria-label": "Select all rows on this page",
+                            checked: allOnPageSelected,
+                            onChange: toggleAllOnPageSelected
+                          }
+                        )
                       }
-                    ) }),
+                    ),
                     headerGroup.headers.map((header) => {
                       const column = columnById.get(header.id);
                       if (!column || hasHeaderGroups && !column.headerGroup) return null;
                       return renderLeafHeaderCell(column);
                     }),
-                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-label": "Row actions" })
+                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        style: rowActionsHeaderCellProps.style,
+                        "aria-label": "Row actions"
+                      }
+                    )
                   ] }, headerGroup.id)
                 ] }, headerGroup.id);
               }),
               hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
-                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
-                showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
+                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: cn("border-b p-1", detailHeaderCellProps.className), style: detailHeaderCellProps.style }),
+                showSelectionColumn && /* @__PURE__ */ jsx19(
+                  "th",
+                  {
+                    className: cn("border-b p-1", selectionHeaderCellProps.className),
+                    style: selectionHeaderCellProps.style
+                  }
+                ),
                 visibleColumns.map((column) => {
                   const pinnedProps = pinnedCellProps(column, "header");
                   return /* @__PURE__ */ jsx19(
@@ -2107,7 +2188,13 @@ function DataGrid({
                     column.id
                   );
                 }),
-                showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" })
+                showRowActionsColumn && /* @__PURE__ */ jsx19(
+                  "th",
+                  {
+                    className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                    style: rowActionsHeaderCellProps.style
+                  }
+                )
               ] })
             ] }),
             rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [