@bmsuisse/datagrid 0.24.1 → 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}` })
               }
@@ -2635,7 +2637,8 @@ function TreeDataGrid({
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
-  isRowSelectionDisabled
+  isRowSelectionDisabled,
+  zebra = true
 }) {
   const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
@@ -2711,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",
       {
@@ -2720,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);