@veeqo/ui 13.8.1 → 13.9.0

package/dist/components/DataGrid/DataGrid.cjs

@@ -42,7 +42,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+    var _a;
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -58,17 +59,25 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     const showFooter = React.useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
+    const allDisabledRows = React.useMemo(() => {
+        const unique = new Set(disabledRows || []);
+        if (hideSelectionForRows) {
+            hideSelectionForRows.forEach((rowId) => unique.add(rowId));
+        }
+        return Array.from(unique);
+    }, [disabledRows, hideSelectionForRows]);
     /**
      * Hooks to handle state for selection, sorting, and expanded/collapsed.
      */
     const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
         selectionMode,
         selectedRows,
-        disabledRows,
+        disabledRows: allDisabledRows,
         onSelectionChanged,
     });
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
     const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState.useExpandedState(rowGrouping);
+    const showExpandButton = (_a = rowGrouping === null || rowGrouping === undefined ? undefined : rowGrouping.showExpandButton) !== null && _a !== undefined ? _a : true;
     /**
      * Hooks to setup column state, including visibility, ordering, pinning, and width(s).
      */
@@ -128,6 +137,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         },
         meta: {
             rangeSelectionState,
+            showExpandButton,
+            hideSelectionForRows,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  /**\n   * Mutable object to track shift key state and last selected row for range selection.\n   */\n  const rangeSelectionState = useRef({\n    lastSelectedRowId: undefined as string | undefined,\n    isShiftKeyPressed: false,\n  }).current;\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n    meta: {\n      rangeSelectionState,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      id={id}\n      className={className}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  hideSelectionForRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  /**\n   * Mutable object to track shift key state and last selected row for range selection.\n   */\n  const rangeSelectionState = useRef({\n    lastSelectedRowId: undefined as string | undefined,\n    isShiftKeyPressed: false,\n  }).current;\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  const allDisabledRows = useMemo(() => {\n    const unique = new Set(disabledRows || []);\n    if (hideSelectionForRows) {\n      hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n    }\n    return Array.from(unique);\n  }, [disabledRows, hideSelectionForRows]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows: allDisabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n    meta: {\n      rangeSelectionState,\n      showExpandButton,\n      hideSelectionForRows,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      id={id}\n      className={className}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts

@@ -16,4 +16,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -36,7 +36,8 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, hideSelectionForRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, id, className, 'aria-label': ariaLabel, }) => {
+    var _a;
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -52,17 +53,25 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     const showFooter = useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = useMemo(() => getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
+    const allDisabledRows = useMemo(() => {
+        const unique = new Set(disabledRows || []);
+        if (hideSelectionForRows) {
+            hideSelectionForRows.forEach((rowId) => unique.add(rowId));
+        }
+        return Array.from(unique);
+    }, [disabledRows, hideSelectionForRows]);
     /**
      * Hooks to handle state for selection, sorting, and expanded/collapsed.
      */
     const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState({
         selectionMode,
         selectedRows,
-        disabledRows,
+        disabledRows: allDisabledRows,
         onSelectionChanged,
     });
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
     const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState(rowGrouping);
+    const showExpandButton = (_a = rowGrouping === null || rowGrouping === undefined ? undefined : rowGrouping.showExpandButton) !== null && _a !== undefined ? _a : true;
     /**
      * Hooks to setup column state, including visibility, ordering, pinning, and width(s).
      */
@@ -122,6 +131,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         },
         meta: {
             rangeSelectionState,
+            showExpandButton,
+            hideSelectionForRows,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  /**\n   * Mutable object to track shift key state and last selected row for range selection.\n   */\n  const rangeSelectionState = useRef({\n    lastSelectedRowId: undefined as string | undefined,\n    isShiftKeyPressed: false,\n  }).current;\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n    meta: {\n      rangeSelectionState,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      id={id}\n      className={className}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  hideSelectionForRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  /**\n   * Mutable object to track shift key state and last selected row for range selection.\n   */\n  const rangeSelectionState = useRef({\n    lastSelectedRowId: undefined as string | undefined,\n    isShiftKeyPressed: false,\n  }).current;\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  const allDisabledRows = useMemo(() => {\n    const unique = new Set(disabledRows || []);\n    if (hideSelectionForRows) {\n      hideSelectionForRows.forEach((rowId) => unique.add(rowId));\n    }\n    return Array.from(unique);\n  }, [disabledRows, hideSelectionForRows]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows: allDisabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  const showExpandButton = rowGrouping?.showExpandButton ?? true;\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n    meta: {\n      rangeSelectionState,\n      showExpandButton,\n      hideSelectionForRows,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      id={id}\n      className={className}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs

@@ -19,7 +19,10 @@ const headerRenderer = ({ table }) => {
         } })));
 };
 const cellRenderer = ({ row, table }) => {
-    const { rangeSelectionState } = table.options.meta || {};
+    const { rangeSelectionState, hideSelectionForRows } = table.options.meta || {};
+    // Don't render the selection cells that are to be hidden
+    if (hideSelectionForRows === null || hideSelectionForRows === undefined ? undefined : hideSelectionForRows.includes(row.id))
+        return null;
     const handleChange = () => {
         const isShiftKeyPressed = (rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.isShiftKeyPressed) || false;
         const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;

package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionColumnDefinition.cjs","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  return (\n    table.options.enableMultiRowSelection && (\n      <Checkbox\n        ariaLabel=\"Select all rows\"\n        indeterminate={table.getIsSomeRowsSelected()}\n        checked={table.getIsAllRowsSelected()}\n        onChange={() => {\n          table.toggleAllRowsSelected();\n          if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n        }}\n      />\n    )\n  );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  const handleChange = () => {\n    const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed || false;\n    const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n    const newSelection = canUseRangeSelection\n      ? getRangeSelection({\n          table,\n          currentRow: row,\n          lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n        })\n      : null;\n\n    if (newSelection) {\n      table.setRowSelection(newSelection);\n    } else {\n      row.toggleSelected();\n    }\n\n    if (rangeSelectionState) {\n      rangeSelectionState.lastSelectedRowId = row.id;\n      rangeSelectionState.isShiftKeyPressed = false;\n    }\n  };\n\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={handleChange}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React","Checkbox","getRangeSelection","Radio","SELECTION_COLUMN_ID"],"mappings":";;;;;;;;;;;;AAUA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KAAI;IAC1D,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AAExD,IAAA,QACE,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAK;YACb,KAAK,CAAC,qBAAqB,EAAE;AAC7B,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,SAAS;SAC3E,EAAA,CACD,CACH;AAEL,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,EAAwC,KAAI;IAC5E,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;IAExD,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,MAAM,iBAAiB,GAAG,CAAA,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB,KAAI,KAAK;QACzE,MAAM,oBAAoB,GAAG,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB;QAEvF,MAAM,YAAY,GAAG;cACjBC,mCAAiB,CAAC;gBAChB,KAAK;AACL,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,iBAAiB,EAAE,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB;aAC1D;cACD,IAAI;AAER,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC;AACpC;AAAM,aAAA;YACL,GAAG,CAAC,cAAc,EAAE;AACrB;AAED,QAAA,IAAI,mBAAmB,EAAE;AACvB,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAAE;AAC9C,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,KAAK;AAC9C;AACH,KAAC;AAED,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAC7B,CAAA;AAEL;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAEC,6BAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}
+{"version":3,"file":"SelectionColumnDefinition.cjs","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  return (\n    table.options.enableMultiRowSelection && (\n      <Checkbox\n        ariaLabel=\"Select all rows\"\n        indeterminate={table.getIsSomeRowsSelected()}\n        checked={table.getIsAllRowsSelected()}\n        onChange={() => {\n          table.toggleAllRowsSelected();\n          if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n        }}\n      />\n    )\n  );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n  const { rangeSelectionState, hideSelectionForRows } = table.options.meta || {};\n\n  // Don't render the selection cells that are to be hidden\n  if (hideSelectionForRows?.includes(row.id)) return null;\n\n  const handleChange = () => {\n    const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed || false;\n    const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n    const newSelection = canUseRangeSelection\n      ? getRangeSelection({\n          table,\n          currentRow: row,\n          lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n        })\n      : null;\n\n    if (newSelection) {\n      table.setRowSelection(newSelection);\n    } else {\n      row.toggleSelected();\n    }\n\n    if (rangeSelectionState) {\n      rangeSelectionState.lastSelectedRowId = row.id;\n      rangeSelectionState.isShiftKeyPressed = false;\n    }\n  };\n\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={handleChange}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React","Checkbox","getRangeSelection","Radio","SELECTION_COLUMN_ID"],"mappings":"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"}

package/dist/components/DataGrid/columns/SelectionColumnDefinition.js

@@ -13,7 +13,10 @@ const headerRenderer = ({ table }) => {
         } })));
 };
 const cellRenderer = ({ row, table }) => {
-    const { rangeSelectionState } = table.options.meta || {};
+    const { rangeSelectionState, hideSelectionForRows } = table.options.meta || {};
+    // Don't render the selection cells that are to be hidden
+    if (hideSelectionForRows === null || hideSelectionForRows === undefined ? undefined : hideSelectionForRows.includes(row.id))
+        return null;
     const handleChange = () => {
         const isShiftKeyPressed = (rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.isShiftKeyPressed) || false;
         const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;

package/dist/components/DataGrid/columns/SelectionColumnDefinition.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionColumnDefinition.js","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  return (\n    table.options.enableMultiRowSelection && (\n      <Checkbox\n        ariaLabel=\"Select all rows\"\n        indeterminate={table.getIsSomeRowsSelected()}\n        checked={table.getIsAllRowsSelected()}\n        onChange={() => {\n          table.toggleAllRowsSelected();\n          if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n        }}\n      />\n    )\n  );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  const handleChange = () => {\n    const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed || false;\n    const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n    const newSelection = canUseRangeSelection\n      ? getRangeSelection({\n          table,\n          currentRow: row,\n          lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n        })\n      : null;\n\n    if (newSelection) {\n      table.setRowSelection(newSelection);\n    } else {\n      row.toggleSelected();\n    }\n\n    if (rangeSelectionState) {\n      rangeSelectionState.lastSelectedRowId = row.id;\n      rangeSelectionState.isShiftKeyPressed = false;\n    }\n  };\n\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={handleChange}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React"],"mappings":";;;;;;AAUA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KAAI;IAC1D,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AAExD,IAAA,QACE,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAK;YACb,KAAK,CAAC,qBAAqB,EAAE;AAC7B,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,SAAS;SAC3E,EAAA,CACD,CACH;AAEL,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,EAAwC,KAAI;IAC5E,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;IAExD,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,MAAM,iBAAiB,GAAG,CAAA,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB,KAAI,KAAK;QACzE,MAAM,oBAAoB,GAAG,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB;QAEvF,MAAM,YAAY,GAAG;cACjB,iBAAiB,CAAC;gBAChB,KAAK;AACL,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,iBAAiB,EAAE,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB;aAC1D;cACD,IAAI;AAER,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC;AACpC;AAAM,aAAA;YACL,GAAG,CAAC,cAAc,EAAE;AACrB;AAED,QAAA,IAAI,mBAAmB,EAAE;AACvB,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAAE;AAC9C,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,KAAK;AAC9C;AACH,KAAC;AAED,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAC7B,CAAA;AAEL;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAE,mBAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}
+{"version":3,"file":"SelectionColumnDefinition.js","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n  const { rangeSelectionState } = table.options.meta || {};\n\n  return (\n    table.options.enableMultiRowSelection && (\n      <Checkbox\n        ariaLabel=\"Select all rows\"\n        indeterminate={table.getIsSomeRowsSelected()}\n        checked={table.getIsAllRowsSelected()}\n        onChange={() => {\n          table.toggleAllRowsSelected();\n          if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n        }}\n      />\n    )\n  );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n  const { rangeSelectionState, hideSelectionForRows } = table.options.meta || {};\n\n  // Don't render the selection cells that are to be hidden\n  if (hideSelectionForRows?.includes(row.id)) return null;\n\n  const handleChange = () => {\n    const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed || false;\n    const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n    const newSelection = canUseRangeSelection\n      ? getRangeSelection({\n          table,\n          currentRow: row,\n          lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n        })\n      : null;\n\n    if (newSelection) {\n      table.setRowSelection(newSelection);\n    } else {\n      row.toggleSelected();\n    }\n\n    if (rangeSelectionState) {\n      rangeSelectionState.lastSelectedRowId = row.id;\n      rangeSelectionState.isShiftKeyPressed = false;\n    }\n  };\n\n  if (row.getCanMultiSelect()) {\n    return (\n      <Checkbox\n        ariaLabel=\"Select row\"\n        checked={row.getIsSelected()}\n        onChange={handleChange}\n        disabled={!row.getCanSelect()}\n      />\n    );\n  }\n\n  return (\n    <Radio\n      aria-label=\"Select row\"\n      checked={row.getIsSelected()}\n      onChange={row.getToggleSelectedHandler()}\n      disabled={!row.getCanSelect()}\n    />\n  );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n  id: SELECTION_COLUMN_ID,\n  header: headerRenderer,\n  cell: cellRenderer,\n  size: 50,\n  minSize: 50,\n  maxSize: 50,\n  enableResizing: false,\n  enableSorting: false,\n  meta: {\n    rowHeader: false,\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs

@@ -3,30 +3,32 @@
 var React = require('react');
 
 const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
-    /**
-     * If this cell is the first column, and the row can be expanded, then we need to show the expand button.
-     */
+    var _a;
     const isFirstColumn = enableRowSelection
         ? cell.column.getIndex() === 1
         : cell.column.getIndex() === 0;
     const isExpanded = cell.row.getIsExpanded();
-    // Margin to use for the expand button, based on the row depth.
-    const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;
-    // Props for the expand button within the cell content.
+    const showExpandButton = (_a = cell.getContext().table.options.meta) === null || _a === undefined ? undefined : _a.showExpandButton;
+    const canExpand = cell.row.getCanExpand();
+    const { depth } = cell.row;
+    const indentMargin = showExpandButton
+        ? `calc(var(--sizes-6) * ${cell.row.depth + 1})`
+        : `calc(var(--sizes-6) * ${cell.row.depth})`;
+    const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;
     const expandButtonProps = React.useMemo(() => {
-        // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).
-        if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {
+        if (!shouldShowExpandButton) {
             return undefined;
         }
         return {
             isExpanded,
             onToggle: cell.row.getToggleExpandedHandler(),
             containerStyle: {
-                width: expandMargin,
+                width: indentMargin,
             },
         };
-    }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);
-    const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;
+    }, [shouldShowExpandButton, isExpanded, indentMargin, cell.row]);
+    const shouldApplyMargin = isFirstColumn && enableExpanding && (depth > 0 || shouldShowExpandButton);
+    const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;
     return { expandButtonProps, contentMarginLeft };
 };
 

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useExpandableCell.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  /**\n   * If this cell is the first column, and the row can be expanded, then we need to show the expand button.\n   */\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n\n  // Margin to use for the expand button, based on the row depth.\n  const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;\n\n  // Props for the expand button within the cell content.\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).\n    if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: expandMargin,\n      },\n    };\n  }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);\n\n  const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":["useMemo"],"mappings":";;;;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;AAC3B;;AAEG;IACH,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;IAG3C,MAAM,YAAY,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG;;AAGnE,IAAA,MAAM,iBAAiB,GAAkCA,aAAO,CAAC,MAAK;;AAEpE,QAAA,IAAI,CAAC,eAAe,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE;AAClE,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;AAExE,IAAA,MAAM,iBAAiB,GAAG,aAAa,IAAI,eAAe,GAAG,YAAY,GAAG,SAAS;AAErF,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}
+{"version":3,"file":"useExpandableCell.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n  const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n  const canExpand = cell.row.getCanExpand();\n  const { depth } = cell.row;\n\n  const indentMargin = showExpandButton\n    ? `calc(var(--sizes-6) * ${cell.row.depth + 1})`\n    : `calc(var(--sizes-6) * ${cell.row.depth})`;\n\n  const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;\n\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    if (!shouldShowExpandButton) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: indentMargin,\n      },\n    };\n  }, [shouldShowExpandButton, isExpanded, indentMargin, cell.row]);\n\n  const shouldApplyMargin =\n    isFirstColumn && enableExpanding && (depth > 0 || shouldShowExpandButton);\n  const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":["useMemo"],"mappings":";;;;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;;IAC3B,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;AAC3C,IAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzC,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG;IAE1B,MAAM,YAAY,GAAG;UACjB,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAG,CAAA;UAC9C,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG;IAE9C,MAAM,sBAAsB,GAAG,gBAAgB,IAAI,eAAe,IAAI,aAAa,IAAI,SAAS;AAEhG,IAAA,MAAM,iBAAiB,GAAkCA,aAAO,CAAC,MAAK;QACpE,IAAI,CAAC,sBAAsB,EAAE;AAC3B,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,sBAAsB,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;AAEhE,IAAA,MAAM,iBAAiB,GACrB,aAAa,IAAI,eAAe,KAAK,KAAK,GAAG,CAAC,IAAI,sBAAsB,CAAC;IAC3E,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,YAAY,GAAG,SAAS;AAEtE,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js

@@ -1,30 +1,32 @@
 import { useMemo } from 'react';
 
 const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
-    /**
-     * If this cell is the first column, and the row can be expanded, then we need to show the expand button.
-     */
+    var _a;
     const isFirstColumn = enableRowSelection
         ? cell.column.getIndex() === 1
         : cell.column.getIndex() === 0;
     const isExpanded = cell.row.getIsExpanded();
-    // Margin to use for the expand button, based on the row depth.
-    const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;
-    // Props for the expand button within the cell content.
+    const showExpandButton = (_a = cell.getContext().table.options.meta) === null || _a === undefined ? undefined : _a.showExpandButton;
+    const canExpand = cell.row.getCanExpand();
+    const { depth } = cell.row;
+    const indentMargin = showExpandButton
+        ? `calc(var(--sizes-6) * ${cell.row.depth + 1})`
+        : `calc(var(--sizes-6) * ${cell.row.depth})`;
+    const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;
     const expandButtonProps = useMemo(() => {
-        // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).
-        if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {
+        if (!shouldShowExpandButton) {
             return undefined;
         }
         return {
             isExpanded,
             onToggle: cell.row.getToggleExpandedHandler(),
             containerStyle: {
-                width: expandMargin,
+                width: indentMargin,
             },
         };
-    }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);
-    const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;
+    }, [shouldShowExpandButton, isExpanded, indentMargin, cell.row]);
+    const shouldApplyMargin = isFirstColumn && enableExpanding && (depth > 0 || shouldShowExpandButton);
+    const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;
     return { expandButtonProps, contentMarginLeft };
 };
 

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpandableCell.js","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  /**\n   * If this cell is the first column, and the row can be expanded, then we need to show the expand button.\n   */\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n\n  // Margin to use for the expand button, based on the row depth.\n  const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;\n\n  // Props for the expand button within the cell content.\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).\n    if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: expandMargin,\n      },\n    };\n  }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);\n\n  const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;AAC3B;;AAEG;IACH,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;IAG3C,MAAM,YAAY,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG;;AAGnE,IAAA,MAAM,iBAAiB,GAAkC,OAAO,CAAC,MAAK;;AAEpE,QAAA,IAAI,CAAC,eAAe,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE;AAClE,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;AAExE,IAAA,MAAM,iBAAiB,GAAG,aAAa,IAAI,eAAe,GAAG,YAAY,GAAG,SAAS;AAErF,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}
+{"version":3,"file":"useExpandableCell.js","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n  const showExpandButton = cell.getContext().table.options.meta?.showExpandButton;\n  const canExpand = cell.row.getCanExpand();\n  const { depth } = cell.row;\n\n  const indentMargin = showExpandButton\n    ? `calc(var(--sizes-6) * ${cell.row.depth + 1})`\n    : `calc(var(--sizes-6) * ${cell.row.depth})`;\n\n  const shouldShowExpandButton = showExpandButton && enableExpanding && isFirstColumn && canExpand;\n\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    if (!shouldShowExpandButton) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: indentMargin,\n      },\n    };\n  }, [shouldShowExpandButton, isExpanded, indentMargin, cell.row]);\n\n  const shouldApplyMargin =\n    isFirstColumn && enableExpanding && (depth > 0 || shouldShowExpandButton);\n  const contentMarginLeft = shouldApplyMargin ? indentMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;;IAC3B,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;AAC3C,IAAA,MAAM,gBAAgB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzC,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG;IAE1B,MAAM,YAAY,GAAG;UACjB,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAG,CAAA;UAC9C,yBAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG;IAE9C,MAAM,sBAAsB,GAAG,gBAAgB,IAAI,eAAe,IAAI,aAAa,IAAI,SAAS;AAEhG,IAAA,MAAM,iBAAiB,GAAkC,OAAO,CAAC,MAAK;QACpE,IAAI,CAAC,sBAAsB,EAAE;AAC3B,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,sBAAsB,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;AAEhE,IAAA,MAAM,iBAAiB,GACrB,aAAa,IAAI,eAAe,KAAK,KAAK,GAAG,CAAC,IAAI,sBAAsB,CAAC;IAC3E,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,YAAY,GAAG,SAAS;AAEtE,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs

@@ -9,7 +9,7 @@ var Row_module = require('../Row.module.scss.cjs');
  * Hook to generate theming variables and classes for a given row theme.
  */
 const useRowTheme = ({ rowTheme }) => {
-    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) && !(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.density)) {
         return {
             themeVars: {},
             themeClasses: undefined,

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRowTheme.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":["buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAGA,+BAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAGC,UAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAEC,2BAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}
+{"version":3,"file":"useRowTheme.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor && !rowTheme?.density) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":["buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,WAAW,CAAA,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,CAAA,EAAE;QAChD,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAGA,+BAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAGC,UAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAEC,2BAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js

@@ -7,7 +7,7 @@ import styles from '../Row.module.scss.js';
  * Hook to generate theming variables and classes for a given row theme.
  */
 const useRowTheme = ({ rowTheme }) => {
-    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) && !(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.density)) {
         return {
             themeVars: {},
             themeClasses: undefined,

package/dist/components/DataGrid/components/Body/Row/hooks/useRowTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRowTheme.js","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":[],"mappings":";;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAG,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAE,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}
+{"version":3,"file":"useRowTheme.js","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor && !rowTheme?.density) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":[],"mappings":";;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,WAAW,CAAA,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,CAAA,EAAE;QAChD,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAG,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAE,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

package/dist/components/DataGrid/types/ColumnDefinition.d.ts

@@ -2,6 +2,11 @@ import { ReactElement } from 'react';
 import { DeepKeys } from '@tanstack/react-table';
 export type ColumnAlignment = 'left' | 'center' | 'right';
 export type ColumnAccessor<T> = (row: T) => any;
+export type RowExpansion = {
+    isExpanded: boolean;
+    canExpand: boolean;
+    toggleExpanded: () => void;
+};
 /**
  * Basic column definition.
  */
@@ -72,12 +77,23 @@ export type BaseColumnDefinition<T> = {
  */
 export type DataColumnDefinition<T> = BaseColumnDefinition<T> & {
     field: DeepKeys<T> | ColumnAccessor<T>;
-    renderCell?: (fieldValue: any, row: T) => ReactElement | null | string;
+    /**
+     * Optional custom cell renderer.
+     * @param fieldValue The value of the field for this cell.
+     * @param row The row data.
+     * @param expansion Row expansion state and controls (isExpanded, canExpand, toggleExpanded).
+     */
+    renderCell?: (fieldValue: any, row: T, expansion?: RowExpansion) => ReactElement | null | string;
 };
 /**
  * Column which is purely for display, not part of the model, cannot be sorted.
  */
 export type DisplayColumnDefinition<T> = BaseColumnDefinition<T> & {
-    renderCell: (row: T) => ReactElement | null | string;
+    /**
+     * Custom cell renderer for display-only columns.
+     * @param row The row data.
+     * @param expansion Row expansion state and controls (isExpanded, canExpand, toggleExpanded).
+     */
+    renderCell: (row: T, expansion?: RowExpansion) => ReactElement | null | string;
 };
 export type ColumnDefinition<T> = DataColumnDefinition<T> | DisplayColumnDefinition<T>;

package/dist/components/DataGrid/types/DataGridProps.d.ts

@@ -106,6 +106,11 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTML
      * An array of row ID's that are disabled.
      */
     disabledRows?: string[];
+    /**
+     * An array of row IDs whose selection checkboxes should be hidden.
+     * Note: These rows will also be treated as disabled for selection purposes.
+     */
+    hideSelectionForRows?: string[];
     /**
      * Handler called when the row selection is changed.
      */

package/dist/components/DataGrid/types/RowGroupingConfiguration.d.ts

@@ -19,4 +19,13 @@ export type RowGroupingConfiguration<TRow = any> = {
      * Setter called when a row is expanded within the table.
      */
     onRowExpanded: (expandedRows: ExpandedRows) => void;
+    /**
+     * Enable/disable the default Expand Button for expandable rows.
+     *
+     * When set to false, the default expand button will be hidden, allowing you to use the expansion parameter in renderCell to create custom expand buttons within specific columns instead
+     * of the default left-most column.
+     *
+     * @default true
+     */
+    showExpandButton?: boolean | undefined;
 };

package/dist/components/DataGrid/types/RowTheme.d.ts

@@ -6,6 +6,10 @@ export type RowTheme = {
      * The accent color for the row.
      */
     accentColor?: string;
+    /**
+     * The density for the row. Can be a theme density key or a custom CSS value (e.g., '0.75rem').
+     */
+    density?: 'compact' | 'base' | 'comfortable' | (string & {});
 };
 /**
  * A map of row ID's to custom theming properties.

package/dist/components/DataGrid/types/declarations.d.ts

@@ -12,5 +12,7 @@ declare module '@tanstack/react-table' {
             isShiftKeyPressed: boolean;
             lastSelectedRowId: string | undefined;
         };
+        showExpandButton: boolean | undefined;
+        hideSelectionForRows: string[] | undefined;
     }
 }

package/dist/components/DataGrid/utils/ColumnMapper.cjs

@@ -81,7 +81,14 @@ class ColumnMapper {
             return this.columnHelper.accessor(definition.field, {
                 ...sharedColumnProps,
                 cell: definition.renderCell
-                    ? (context) => definition.renderCell(context.getValue(), context.row.original)
+                    ? (context) => {
+                        const expansion = {
+                            isExpanded: context.row.getIsExpanded(),
+                            canExpand: context.row.getCanExpand(),
+                            toggleExpanded: () => context.row.toggleExpanded(),
+                        };
+                        return definition.renderCell(context.getValue(), context.row.original, expansion);
+                    }
                     : (context) => context.getValue(),
             });
         }
@@ -91,12 +98,26 @@ class ColumnMapper {
         if (definition.sortable && !isDataColumn(definition)) {
             return this.columnHelper.accessor((row) => row, {
                 ...sharedColumnProps,
-                cell: (context) => definition.renderCell(context.row.original),
+                cell: (context) => {
+                    const expansion = {
+                        isExpanded: context.row.getIsExpanded(),
+                        canExpand: context.row.getCanExpand(),
+                        toggleExpanded: () => context.row.toggleExpanded(),
+                    };
+                    return definition.renderCell(context.row.original, expansion);
+                },
             });
         }
         return this.columnHelper.display({
             ...sharedColumnProps,
-            cell: (context) => definition.renderCell(context.row.original),
+            cell: (context) => {
+                const expansion = {
+                    isExpanded: context.row.getIsExpanded(),
+                    canExpand: context.row.getCanExpand(),
+                    toggleExpanded: () => context.row.toggleExpanded(),
+                };
+                return definition.renderCell(context.row.original, expansion);
+            },
         });
     }
 }

package/dist/components/DataGrid/utils/ColumnMapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => definition.renderCell(context.row.original),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n  ColumnDefinition,\n  DataColumnDefinition,\n  ColumnAlignment,\n  RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        cell: definition.renderCell\n          ? (context) => {\n              const expansion: RowExpansion = {\n                isExpanded: context.row.getIsExpanded(),\n                canExpand: context.row.getCanExpand(),\n                toggleExpanded: () => context.row.toggleExpanded(),\n              };\n              return definition.renderCell!(context.getValue(), context.row.original, expansion);\n            }\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => {\n          const expansion: RowExpansion = {\n            isExpanded: context.row.getIsExpanded(),\n            canExpand: context.row.getCanExpand(),\n            toggleExpanded: () => context.row.toggleExpanded(),\n          };\n          return definition.renderCell(context.row.original, expansion);\n        },\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => {\n        const expansion: RowExpansion = {\n          isExpanded: context.row.getIsExpanded(),\n          canExpand: context.row.getCanExpand(),\n          toggleExpanded: () => context.row.toggleExpanded(),\n        };\n        return definition.renderCell(context.row.original, expansion);\n      },\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}

package/dist/components/DataGrid/utils/ColumnMapper.js

@@ -79,7 +79,14 @@ class ColumnMapper {
             return this.columnHelper.accessor(definition.field, {
                 ...sharedColumnProps,
                 cell: definition.renderCell
-                    ? (context) => definition.renderCell(context.getValue(), context.row.original)
+                    ? (context) => {
+                        const expansion = {
+                            isExpanded: context.row.getIsExpanded(),
+                            canExpand: context.row.getCanExpand(),
+                            toggleExpanded: () => context.row.toggleExpanded(),
+                        };
+                        return definition.renderCell(context.getValue(), context.row.original, expansion);
+                    }
                     : (context) => context.getValue(),
             });
         }
@@ -89,12 +96,26 @@ class ColumnMapper {
         if (definition.sortable && !isDataColumn(definition)) {
             return this.columnHelper.accessor((row) => row, {
                 ...sharedColumnProps,
-                cell: (context) => definition.renderCell(context.row.original),
+                cell: (context) => {
+                    const expansion = {
+                        isExpanded: context.row.getIsExpanded(),
+                        canExpand: context.row.getCanExpand(),
+                        toggleExpanded: () => context.row.toggleExpanded(),
+                    };
+                    return definition.renderCell(context.row.original, expansion);
+                },
             });
         }
         return this.columnHelper.display({
             ...sharedColumnProps,
-            cell: (context) => definition.renderCell(context.row.original),
+            cell: (context) => {
+                const expansion = {
+                    isExpanded: context.row.getIsExpanded(),
+                    canExpand: context.row.getCanExpand(),
+                    toggleExpanded: () => context.row.toggleExpanded(),
+                };
+                return definition.renderCell(context.row.original, expansion);
+            },
         });
     }
 }

package/dist/components/DataGrid/utils/ColumnMapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => definition.renderCell(context.row.original),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport {\n  ColumnDefinition,\n  DataColumnDefinition,\n  ColumnAlignment,\n  RowExpansion,\n} from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        cell: definition.renderCell\n          ? (context) => {\n              const expansion: RowExpansion = {\n                isExpanded: context.row.getIsExpanded(),\n                canExpand: context.row.getCanExpand(),\n                toggleExpanded: () => context.row.toggleExpanded(),\n              };\n              return definition.renderCell!(context.getValue(), context.row.original, expansion);\n            }\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => {\n          const expansion: RowExpansion = {\n            isExpanded: context.row.getIsExpanded(),\n            canExpand: context.row.getCanExpand(),\n            toggleExpanded: () => context.row.toggleExpanded(),\n          };\n          return definition.renderCell(context.row.original, expansion);\n        },\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => {\n        const expansion: RowExpansion = {\n          isExpanded: context.row.getIsExpanded(),\n          canExpand: context.row.getCanExpand(),\n          toggleExpanded: () => context.row.toggleExpanded(),\n        };\n        return definition.renderCell(context.row.original, expansion);\n      },\n    });\n  }\n}\n"],"names":[],"mappings":";;;AAcA;;;;AAIG;AACH,MAAM,YAAY,GAAG,CAAI,MAA2B,KAAuC;AACzF,IAAA,OAAQ,MAAkC,CAAC,KAAK,KAAK,SAAS;AAChE,CAAC;AAED;;;;AAIG;AACH,SAAS,eAAe,CAAC,KAAsB,EAAA;AAC7C,IAAA,QAAQ,KAAK;AACX,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,YAAY;AACrB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;AACjB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,UAAU;AACnB,QAAA;AACE,YAAA,OAAO,YAAY;AACtB;AACH;AAEA;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,CAAC,UAAiC,KAAI;AACrE,IAAA,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE;AAClB,QAAA,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC;AACjF;AAED,IAAA,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE;YAC1B,MAAM,IAAI,KAAK,CACb,CAAA,uBAAA,EAA0B,UAAU,CAAC,EAAE,CAA+D,6DAAA,CAAA,CACvG;AACF;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA8C,2CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC/I;AACF;AAED,IAAA,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE;AACrF,QAAA,MAAM,IAAI,KAAK,CACb,CAA0B,uBAAA,EAAA,UAAU,CAAC,EAAE,CAAA,gBAAA,EAAmB,UAAU,CAAC,KAAK,CAA6C,0CAAA,EAAA,UAAU,CAAC,QAAQ,CAAA,CAAA,CAAG,CAC9I;AACF;AACH,CAAC;AAED;;AAEG;MACU,YAAY,CAAA;AAGvB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAO;;AAG/C,IAAA,mBAAmB,CAAC,UAAiC,EAAA;;AACnD,QAAA,MAAM,iBAAiB,GAAG;YACxB,EAAE,EAAE,UAAU,CAAC,EAAE;AACjB,YAAA,cAAc,EAAE,CAAC,CAAC,UAAU,CAAC,UAAU;AACvC,YAAA,aAAa,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAEpC,MAAM,EAAE,MAAA,UAAU,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,UAAU,CAAC,KAAK;YACnD,MAAM,EAAE,UAAU,CAAC,YAAY;AAE/B,YAAA,IAAI,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,oBAAoB;AAC9C,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAC5D,YAAA,OAAO,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,QAAQ,sCAAI,4BAA4B;AAE5D,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,SAAS;;gBAEjC,cAAc,EAAE,eAAe,CAAC,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,kBAAkB,CAAC;AACvE,gBAAA,SAAS,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,KAAK,sCAAI,kBAAkB;gBACjD,YAAY,EAAE,UAAU,CAAC,YAAY;gBACrC,kBAAkB,EAAE,UAAU,CAAC,kBAAkB;AAClD,aAAA;SACF;QAED,wBAAwB,CAAC,UAAU,CAAC;AAEpC,QAAA,IAAI,YAAY,CAAC,UAAU,CAAC,EAAE;YAC5B,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAE;AAClD,gBAAA,GAAG,iBAAiB;gBACpB,IAAI,EAAE,UAAU,CAAC;AACf,sBAAE,CAAC,OAAO,KAAI;AACV,wBAAA,MAAM,SAAS,GAAiB;AAC9B,4BAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,4BAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;4BACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;yBACnD;AACD,wBAAA,OAAO,UAAU,CAAC,UAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;;sBAEpF,CAAC,OAAO,KAAK,OAAO,CAAC,QAAQ,EAAE;AACpC,aAAA,CAAC;AACH;;;;QAKD,IAAI,UAAU,CAAC,QAAQ,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACpD,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;AAC9C,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,IAAI,EAAE,CAAC,OAAO,KAAI;AAChB,oBAAA,MAAM,SAAS,GAAiB;AAC9B,wBAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,wBAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;wBACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;qBACnD;AACD,oBAAA,OAAO,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;iBAC9D;AACF,aAAA,CAAC;AACH;AAED,QAAA,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/B,YAAA,GAAG,iBAAiB;AACpB,YAAA,IAAI,EAAE,CAAC,OAAO,KAAI;AAChB,gBAAA,MAAM,SAAS,GAAiB;AAC9B,oBAAA,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE;AACvC,oBAAA,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;oBACrC,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE;iBACnD;AACD,gBAAA,OAAO,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;aAC9D;AACF,SAAA,CAAC;;AAEL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.8.1",
+  "version": "13.9.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",