@bmsuisse/datagrid 0.24.0 → 0.25.0

package/dist/index.d.ts

@@ -793,6 +793,8 @@ interface DataGridProps<TRow> {
      */
     expandedGroups?: Record<string, boolean>;
     onExpandedGroupsChange?: (expanded: Record<string, boolean>) => void;
+    /** Alternates body row backgrounds for readability on wide/dense tables. Defaults to true. */
+    zebra?: boolean;
 }
 
 /**
@@ -803,7 +805,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: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, }: 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, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;
@@ -1027,6 +1029,8 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     } | undefined;
     /** Disables just the checkbox for a specific row. Defaults to `() => false`. */
     isRowSelectionDisabled?: (row: TRow) => boolean;
+    /** Alternates body row backgrounds for readability on wide/dense tables. Defaults to true. */
+    zebra?: boolean;
 }
 
 /**
@@ -1043,7 +1047,7 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
  * column's cell matches `treeColumnId` (defaults to `columns[0]`); every
  * other column renders exactly like it would in `<DataGrid>`.
  */
-declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, }: TreeDataGridProps<TRow>): ReactElement;
+declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, zebra, }: TreeDataGridProps<TRow>): ReactElement;
 
 interface FlatTreeRow<TRow> {
     row: TRow;

package/dist/index.js

@@ -1869,7 +1869,8 @@ function DataGrid({
   renderGroupHeader,
   defaultGroupsExpanded = true,
   expandedGroups: controlledExpandedGroups,
-  onExpandedGroupsChange
+  onExpandedGroupsChange,
+  zebra = true
 }) {
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
@@ -2081,18 +2082,19 @@ function DataGrid({
     const isExpanded = expandedIds.has(row.id);
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
+    const isOddRow = zebra && row.index % 2 === 1;
     return /* @__PURE__ */ jsxs12("tbody", { ref: measureRef, "data-index": row.index, children: [
       /* @__PURE__ */ jsxs12(
         "tr",
         {
           ...rowProps,
           "data-testid": rowTestId,
-          className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, row.index % 2 === 1 && "bg-foreground/5") : `divide-x divide-border${row.index % 2 === 1 ? " bg-foreground/5" : ""}`,
+          className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
             showDetailColumn && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? detailCellProps.classNameOdd : detailCellProps.className,
+                className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
                 children: /* @__PURE__ */ jsx19(
                   Button,
@@ -2120,7 +2122,7 @@ function DataGrid({
             showSelectionColumn && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? selectionCellProps.classNameOdd : selectionCellProps.className,
+                className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
                 children: /* @__PURE__ */ jsx19(
                   "input",
@@ -2141,7 +2143,7 @@ function DataGrid({
             showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
+                className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
                 children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
@@ -2213,24 +2215,28 @@ function DataGrid({
                   const sortable = isSortable(column);
                   const filterable = isFilterable(column) && column.filterDisplay !== "row";
                   const cellProps = leafHeaderCellPropsByColumn.get(column.id);
+                  const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
                   return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
                     /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsxs12(
+                      sortable ? /* @__PURE__ */ jsxs12(
                         "button",
                         {
                           type: "button",
-                          className: cn(
-                            "flex items-center gap-1 rounded-sm px-1",
-                            sortable && "hover:bg-accent hover:text-accent-foreground"
-                          ),
-                          disabled: !sortable,
-                          onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                          className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
+                          onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                           children: [
-                            column.renderHeader ? column.renderHeader(column) : column.header,
-                            sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                            sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                            headerContent,
+                            sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                            sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                           ]
                         }
+                      ) : (
+                        // Not wrapped in a `<button>` (unlike the sortable branch above): a
+                        // disabled `<button>` swallows pointer events for its entire subtree,
+                        // silently breaking any interactive content a column's own `renderHeader`
+                        // embeds directly (bare filter inputs, "select/reject all" buttons) —
+                        // clicks never reach them at all, even though nothing looks wrong visually.
+                        /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                       ),
                       filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
                         /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(
@@ -2631,7 +2637,8 @@ function TreeDataGrid({
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
-  isRowSelectionDisabled
+  isRowSelectionDisabled,
+  zebra = true
 }) {
   const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
@@ -2707,6 +2714,7 @@ function TreeDataGrid({
   function renderRow(flatRow, index, measureRef) {
     const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
     const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
+    const isOddRow = zebra && index % 2 === 1;
     return /* @__PURE__ */ jsxs13(
       "tr",
       {
@@ -2716,8 +2724,8 @@ function TreeDataGrid({
         className: rowProps?.className ? cn(
           "border-b border-border divide-x divide-border",
           rowProps.className,
-          index % 2 === 1 && "bg-foreground/5"
-        ) : `border-b border-border divide-x divide-border${index % 2 === 1 ? " bg-foreground/5" : ""}`,
+          isOddRow && "bg-foreground/5"
+        ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
           showSelectionColumn && /* @__PURE__ */ jsx20("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);