@equinor/eds-data-grid-react 0.3.0 → 0.5.0

package/dist/eds-data-grid-react.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var edsCoreReact = require('@equinor/eds-core-react');
 var reactTable = require('@tanstack/react-table');
+var edsCoreReact = require('@equinor/eds-core-react');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
-var edsIcons = require('@equinor/eds-icons');
-var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
 var edsTokens = require('@equinor/eds-tokens');
+var edsIcons = require('@equinor/eds-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -71,7 +71,6 @@ function DebouncedInput({
         /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
         label: `Select ${label ?? ''}`,
         placeholder: props.placeholder ?? 'Search',
-        disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
         selectedOptions: value,
         onOptionsChange: c => setValue(c.selectedItems),
         multiline: true
@@ -110,12 +109,6 @@ function Filter({
   table
 }) {
   const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
-  const [open, setOpen] = react.useState(false);
-  const filterIconRef = react.useRef();
-  const togglePopover = event => {
-    event.stopPropagation();
-    setOpen(!open);
-  };
   const columnText = react.useMemo(() => {
     let header;
     try {
@@ -136,6 +129,53 @@ function Filter({
   const sortedUniqueValues = react.useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [column.getFacetedUniqueValues()]);
+  return typeof firstValue === 'number' ? /*#__PURE__*/jsxRuntime.jsxs(NumberContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+      type: "number",
+      values: sortedUniqueValues,
+      min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+      max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+      value: columnFilterValue?.[0] ?? '',
+      onChange: value => column.setFilterValue(old => [value, old?.[1]]),
+      placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
+    }), /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+      type: "number",
+      values: sortedUniqueValues,
+      min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+      max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+      value: columnFilterValue?.[1] ?? '',
+      onChange: value => column.setFilterValue(old => [old?.[0], value]),
+      placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
+    })]
+  }) : /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+    type: "text",
+    label: columnText,
+    values: sortedUniqueValues,
+    debounce: 100,
+    value: columnFilterValue ?? [],
+    onChange: value => column.setFilterValue(value),
+    placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
+    list: column.id + 'list'
+  });
+}
+
+/* istanbul ignore file */
+
+function FilterWrapper({
+  column,
+  CustomComponent
+}) {
+  const {
+    table
+  } = useTableContext();
+  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
+  const [open, setOpen] = react.useState(false);
+  const filterIconRef = react.useRef();
+  const togglePopover = event => {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  const columnFilterValue = column.getFilterValue();
   const hasActiveFilters = value => {
     if (Array.isArray(value)) {
       if (typeof firstValue === 'number') {
@@ -146,6 +186,7 @@ function Filter({
     }
     return value;
   };
+  const onChange = react.useCallback(value => column.setFilterValue(value), [column]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Button, {
       "aria-haspopup": true,
@@ -154,6 +195,7 @@ function Filter({
       ref: filterIconRef,
       onClick: togglePopover,
       variant: 'ghost_icon',
+      "aria-label": 'Show column filters',
       children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
         color: edsTokens.tokens.colors.text.static_icons__default.hex,
         data: hasActiveFilters(columnFilterValue) ? edsIcons.filter_alt_active : edsIcons.filter_alt
@@ -169,39 +211,31 @@ function Filter({
         style: {
           width: typeof firstValue === 'number' ? '180px' : '310px'
         },
-        children: typeof firstValue === 'number' ? /*#__PURE__*/jsxRuntime.jsxs(NumberContainer, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
-            type: "number",
-            values: sortedUniqueValues,
-            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
-            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
-            value: columnFilterValue?.[0] ?? '',
-            onChange: value => column.setFilterValue(old => [value, old?.[1]]),
-            placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
-          }), /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
-            type: "number",
-            values: sortedUniqueValues,
-            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
-            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
-            value: columnFilterValue?.[1] ?? '',
-            onChange: value => column.setFilterValue(old => [old?.[0], value]),
-            placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
-          })]
-        }) : /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
-          type: "text",
-          label: columnText,
-          values: sortedUniqueValues,
-          debounce: 100,
-          value: columnFilterValue ?? [],
-          onChange: value => column.setFilterValue(value),
-          placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
-          list: column.id + 'list'
+        children: CustomComponent ? /*#__PURE__*/jsxRuntime.jsx(CustomComponent, {
+          onChange: onChange,
+          value: columnFilterValue
+        }) : /*#__PURE__*/jsxRuntime.jsx(Filter, {
+          column: column,
+          table: table
         })
       })
     })]
   });
 }
 
+const SortIndicator = ({
+  column
+}) => {
+  return {
+    asc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
+      data: edsIcons.arrow_up
+    }),
+    desc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
+      data: edsIcons.arrow_down
+    })
+  }[column.getIsSorted()] ?? null;
+};
+
 const getSortLabel = sorted => {
   if (sorted) {
     return `${sorted}ending`;
@@ -219,7 +253,7 @@ const Resizer = styled__default.default.div.withConfig({
 const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
   }
@@ -257,7 +291,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -274,22 +307,16 @@ function TableHeaderCell({
           className: "table-header-cell-label",
           children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), {
-        asc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
-          data: edsIcons.arrow_up
-        }),
-        desc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
-          data: edsIcons.arrow_down
-        })
-      }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
-      
+      }), header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsxRuntime.jsx(SortIndicator, {
+        column: header.column
+      }), header.column.getCanFilter() && !header.column.columnDef.meta?.customFilterInput ?
+      /*#__PURE__*/
       // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsxRuntime.jsx("div", {
         onClick: e => e.stopPropagation(),
-        children: /*#__PURE__*/jsxRuntime.jsx(Filter, {
-          column: header.column,
-          table: table
+        children: /*#__PURE__*/jsxRuntime.jsx(FilterWrapper, {
+          column: header.column
         })
       }) : null]
     }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
@@ -302,7 +329,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 function TableHeaderRow({
@@ -350,18 +377,19 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 function TableRow({
-  row
+  row,
+  onCellClick,
+  onClick
 }) {
   const {
     rowClass,
@@ -369,13 +397,13 @@ function TableRow({
   } = useTableContext();
   return /*#__PURE__*/jsxRuntime.jsx(StyledTableRow, {
     style: {
-      cursor: row.getCanSelect() ? 'pointer' : 'inherit',
       ...(rowStyle?.(row) ?? {})
     },
     className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
-    onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
+    onClick: onClick,
     children: row.getVisibleCells().map(cell => /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
-      cell: cell
+      cell: cell,
+      onClick: onCellClick ? event => onCellClick(cell, event) : undefined
     }, cell.id))
   });
 }
@@ -411,6 +439,19 @@ function addPxSuffixIfInputHasNoPrefix(size) {
   }
   return size;
 }
+function logDevelopmentWarningOfPropUse(deprecatedProps) {
+  if (process.env.NODE_ENV !== 'development') {
+    return;
+  }
+  for (const [key, {
+    value,
+    mitigationInfo
+  }] of Object.entries(deprecatedProps)) {
+    if (typeof value !== 'undefined') {
+      console.warn(`The prop '${key}' is deprecated and will be removed in a future release. ${mitigationInfo}`);
+    }
+  }
+}
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 function EdsDataGrid({
@@ -419,13 +460,17 @@ function EdsDataGrid({
   columnResizeMode,
   pageSize,
   rowSelection,
+  enableRowSelection,
+  enableMultiRowSelection,
   selectedRows,
+  rowSelectionState,
   enableColumnFiltering,
   debug,
   enablePagination,
   enableSorting,
   stickyHeader,
   onSelectRow,
+  onRowSelectionChange,
   caption,
   enableVirtual,
   virtualHeight,
@@ -451,10 +496,34 @@ function EdsDataGrid({
   getRowId,
   rowVirtualizerInstanceRef,
   columnSizing,
-  onColumnResize
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn,
+  onRowClick,
+  onCellClick
 }) {
+  logDevelopmentWarningOfPropUse({
+    virtualHeight: {
+      value: virtualHeight,
+      mitigationInfo: "Use 'height' instead."
+    },
+    rowSelection: {
+      value: rowSelection,
+      mitigationInfo: "Use 'enableRowSelection' instead."
+    },
+    onSelectRow: {
+      value: onSelectRow,
+      mitigationInfo: "Use 'onRowSelectionChange' instead."
+    },
+    selectedRows: {
+      value: selectedRows,
+      mitigationInfo: "Use 'rowSelectionState' instead."
+    }
+  });
   const [sorting, setSorting] = react.useState(sortingState ?? []);
-  const [selection, setSelection] = react.useState(selectedRows ?? {});
+  const [internalRowSelectionState, setInternalRowSelectionState] = react.useState(rowSelectionState ?? selectedRows ?? {});
   const [columnPin, setColumnPin] = react.useState(columnPinState ?? {});
   const [columnFilters, setColumnFilters] = react.useState([]);
   const [internalColumnSize, setInternalColumnSize] = react.useState(columnSizing ?? {});
@@ -465,6 +534,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  react.useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   react.useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -475,8 +549,8 @@ function EdsDataGrid({
     setSorting(sortingState);
   }, [sortingState]);
   react.useEffect(() => {
-    setSelection(selectedRows ?? {});
-  }, [selectedRows]);
+    setInternalRowSelectionState(rowSelectionState ?? selectedRows ?? {});
+  }, [rowSelectionState, selectedRows]);
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
@@ -520,7 +594,7 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
       size: 150,
       cell: context => {
         return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
@@ -549,10 +623,14 @@ function EdsDataGrid({
     state: {
       sorting,
       columnPinning: columnPin,
-      rowSelection: selection,
+      rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
-      columnSizing: columnSizing ?? internalColumnSize
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);
@@ -569,7 +647,8 @@ function EdsDataGrid({
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection ?? false,
+    enableRowSelection: enableRowSelection ?? rowSelection ?? false,
+    enableMultiRowSelection: enableMultiRowSelection ?? false,
     enableColumnPinning: true,
     enablePinning: true,
     getRowId
@@ -583,12 +662,11 @@ function EdsDataGrid({
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection ?? false) {
+  if (enableRowSelection ?? rowSelection ?? false) {
     options.onRowSelectionChange = updaterOrValue => {
-      if (onSelectRow) {
-        onSelectRow(updaterOrValue);
-      }
-      setSelection(updaterOrValue);
+      onSelectRow?.(updaterOrValue);
+      onRowSelectionChange?.(updaterOrValue);
+      setInternalRowSelectionState(updaterOrValue);
     };
   }
 
@@ -733,9 +811,14 @@ function EdsDataGrid({
                   height: `${paddingTop}px`
                 }
               })
-            }), virtualRows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-              row: table.getRowModel().rows[row.index]
-            }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
+            }), virtualRows.map(virtualItem => {
+              const row = table.getRowModel().rows[virtualItem.index];
+              return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+                row: row,
+                onClick: onRowClick ? event => onRowClick(row, event) : undefined,
+                onCellClick: onCellClick
+              }, virtualItem.index);
+            }), paddingBottom > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
               "data-testid": "virtual-padding-bottom",
               className: 'virtual-padding-bottom',
               style: {
@@ -748,7 +831,9 @@ function EdsDataGrid({
               })
             })]
           }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-            row: row
+            row: row,
+            onClick: onRowClick ? event => onRowClick(row, event) : undefined,
+            onCellClick: onCellClick
           }, row.id))]
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -784,4 +869,10 @@ const TableWrapper = styled__default.default.div.withConfig({
   $width
 }) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
 
+Object.defineProperty(exports, "createColumnHelper", {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});
 exports.EdsDataGrid = EdsDataGrid;
+exports.FilterWrapper = FilterWrapper;
+exports.SortIndicator = SortIndicator;

package/dist/esm/EdsDataGrid.js

@@ -1,12 +1,12 @@
 import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
-import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import styled from 'styled-components';
+import { TableProvider } from './EdsDataGridContext.js';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
 import { TableRow } from './components/TableRow.js';
-import { TableProvider } from './EdsDataGridContext.js';
-import styled from 'styled-components';
-import { addPxSuffixIfInputHasNoPrefix } from './utils.js';
+import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -16,13 +16,17 @@ function EdsDataGrid({
   columnResizeMode,
   pageSize,
   rowSelection,
+  enableRowSelection,
+  enableMultiRowSelection,
   selectedRows,
+  rowSelectionState,
   enableColumnFiltering,
   debug,
   enablePagination,
   enableSorting,
   stickyHeader,
   onSelectRow,
+  onRowSelectionChange,
   caption,
   enableVirtual,
   virtualHeight,
@@ -48,10 +52,34 @@ function EdsDataGrid({
   getRowId,
   rowVirtualizerInstanceRef,
   columnSizing,
-  onColumnResize
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn,
+  onRowClick,
+  onCellClick
 }) {
+  logDevelopmentWarningOfPropUse({
+    virtualHeight: {
+      value: virtualHeight,
+      mitigationInfo: "Use 'height' instead."
+    },
+    rowSelection: {
+      value: rowSelection,
+      mitigationInfo: "Use 'enableRowSelection' instead."
+    },
+    onSelectRow: {
+      value: onSelectRow,
+      mitigationInfo: "Use 'onRowSelectionChange' instead."
+    },
+    selectedRows: {
+      value: selectedRows,
+      mitigationInfo: "Use 'rowSelectionState' instead."
+    }
+  });
   const [sorting, setSorting] = useState(sortingState ?? []);
-  const [selection, setSelection] = useState(selectedRows ?? {});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState(rowSelectionState ?? selectedRows ?? {});
   const [columnPin, setColumnPin] = useState(columnPinState ?? {});
   const [columnFilters, setColumnFilters] = useState([]);
   const [internalColumnSize, setInternalColumnSize] = useState(columnSizing ?? {});
@@ -62,6 +90,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -72,8 +105,8 @@ function EdsDataGrid({
     setSorting(sortingState);
   }, [sortingState]);
   useEffect(() => {
-    setSelection(selectedRows ?? {});
-  }, [selectedRows]);
+    setInternalRowSelectionState(rowSelectionState ?? selectedRows ?? {});
+  }, [rowSelectionState, selectedRows]);
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
@@ -117,7 +150,7 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
       size: 150,
       cell: context => {
         return /*#__PURE__*/jsx(Typography, {
@@ -146,10 +179,14 @@ function EdsDataGrid({
     state: {
       sorting,
       columnPinning: columnPin,
-      rowSelection: selection,
+      rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
-      columnSizing: columnSizing ?? internalColumnSize
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);
@@ -166,7 +203,8 @@ function EdsDataGrid({
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection ?? false,
+    enableRowSelection: enableRowSelection ?? rowSelection ?? false,
+    enableMultiRowSelection: enableMultiRowSelection ?? false,
     enableColumnPinning: true,
     enablePinning: true,
     getRowId
@@ -180,12 +218,11 @@ function EdsDataGrid({
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection ?? false) {
+  if (enableRowSelection ?? rowSelection ?? false) {
     options.onRowSelectionChange = updaterOrValue => {
-      if (onSelectRow) {
-        onSelectRow(updaterOrValue);
-      }
-      setSelection(updaterOrValue);
+      onSelectRow?.(updaterOrValue);
+      onRowSelectionChange?.(updaterOrValue);
+      setInternalRowSelectionState(updaterOrValue);
     };
   }
 
@@ -330,9 +367,14 @@ function EdsDataGrid({
                   height: `${paddingTop}px`
                 }
               })
-            }), virtualRows.map(row => /*#__PURE__*/jsx(TableRow, {
-              row: table.getRowModel().rows[row.index]
-            }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsx(Table.Row, {
+            }), virtualRows.map(virtualItem => {
+              const row = table.getRowModel().rows[virtualItem.index];
+              return /*#__PURE__*/jsx(TableRow, {
+                row: row,
+                onClick: onRowClick ? event => onRowClick(row, event) : undefined,
+                onCellClick: onCellClick
+              }, virtualItem.index);
+            }), paddingBottom > 0 && /*#__PURE__*/jsx(Table.Row, {
               "data-testid": "virtual-padding-bottom",
               className: 'virtual-padding-bottom',
               style: {
@@ -345,7 +387,9 @@ function EdsDataGrid({
               })
             })]
           }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsx(TableRow, {
-            row: row
+            row: row,
+            onClick: onRowClick ? event => onRowClick(row, event) : undefined,
+            onCellClick: onCellClick
           }, row.id))]
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {

package/dist/esm/EdsDataGridContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/esm/components/DebouncedInput.js

@@ -42,7 +42,6 @@ function DebouncedInput({
         /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
         label: `Select ${label ?? ''}`,
         placeholder: props.placeholder ?? 'Search',
-        disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
         selectedOptions: value,
         onOptionsChange: c => setValue(c.selectedItems),
         multiline: true

package/dist/esm/components/Filter.js

@@ -1,10 +1,7 @@
-import { useState, useRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { DebouncedInput } from './DebouncedInput.js';
-import { Button, Icon, Popover } from '@equinor/eds-core-react';
-import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
 import styled from 'styled-components';
-import { tokens } from '@equinor/eds-tokens';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 /* istanbul ignore file */
 
@@ -17,12 +14,6 @@ function Filter({
   table
 }) {
   const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
-  const [open, setOpen] = useState(false);
-  const filterIconRef = useRef();
-  const togglePopover = event => {
-    event.stopPropagation();
-    setOpen(!open);
-  };
   const columnText = useMemo(() => {
     let header;
     try {
@@ -43,69 +34,33 @@ function Filter({
   const sortedUniqueValues = useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [column.getFacetedUniqueValues()]);
-  const hasActiveFilters = value => {
-    if (Array.isArray(value)) {
-      if (typeof firstValue === 'number') {
-        return value.some(v => !isNaN(v) && !!v);
-      } else {
-        return value.filter(v => !!v).length > 0;
-      }
-    }
-    return value;
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Button, {
-      "aria-haspopup": true,
-      "aria-expanded": open,
-      "data-testid": 'open-filters',
-      ref: filterIconRef,
-      onClick: togglePopover,
-      variant: 'ghost_icon',
-      children: /*#__PURE__*/jsx(Icon, {
-        color: tokens.colors.text.static_icons__default.hex,
-        data: hasActiveFilters(columnFilterValue) ? filter_alt_active : filter_alt
-      })
-    }), /*#__PURE__*/jsx(Popover, {
-      style: {
-        width: typeof firstValue === 'number' ? '220px' : '340px'
-      },
-      anchorEl: filterIconRef.current,
-      open: open,
-      onClose: () => setOpen(false),
-      children: /*#__PURE__*/jsx(Popover.Content, {
-        style: {
-          width: typeof firstValue === 'number' ? '180px' : '310px'
-        },
-        children: typeof firstValue === 'number' ? /*#__PURE__*/jsxs(NumberContainer, {
-          children: [/*#__PURE__*/jsx(DebouncedInput, {
-            type: "number",
-            values: sortedUniqueValues,
-            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
-            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
-            value: columnFilterValue?.[0] ?? '',
-            onChange: value => column.setFilterValue(old => [value, old?.[1]]),
-            placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
-          }), /*#__PURE__*/jsx(DebouncedInput, {
-            type: "number",
-            values: sortedUniqueValues,
-            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
-            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
-            value: columnFilterValue?.[1] ?? '',
-            onChange: value => column.setFilterValue(old => [old?.[0], value]),
-            placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
-          })]
-        }) : /*#__PURE__*/jsx(DebouncedInput, {
-          type: "text",
-          label: columnText,
-          values: sortedUniqueValues,
-          debounce: 100,
-          value: columnFilterValue ?? [],
-          onChange: value => column.setFilterValue(value),
-          placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
-          list: column.id + 'list'
-        })
-      })
+  return typeof firstValue === 'number' ? /*#__PURE__*/jsxs(NumberContainer, {
+    children: [/*#__PURE__*/jsx(DebouncedInput, {
+      type: "number",
+      values: sortedUniqueValues,
+      min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+      max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+      value: columnFilterValue?.[0] ?? '',
+      onChange: value => column.setFilterValue(old => [value, old?.[1]]),
+      placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
+    }), /*#__PURE__*/jsx(DebouncedInput, {
+      type: "number",
+      values: sortedUniqueValues,
+      min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+      max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+      value: columnFilterValue?.[1] ?? '',
+      onChange: value => column.setFilterValue(old => [old?.[0], value]),
+      placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
     })]
+  }) : /*#__PURE__*/jsx(DebouncedInput, {
+    type: "text",
+    label: columnText,
+    values: sortedUniqueValues,
+    debounce: 100,
+    value: columnFilterValue ?? [],
+    onChange: value => column.setFilterValue(value),
+    placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
+    list: column.id + 'list'
   });
 }
 

package/dist/esm/components/FilterWrapper.js

@@ -0,0 +1,73 @@
+import { useState, useRef, useCallback } from 'react';
+import { Button, Icon, Popover } from '@equinor/eds-core-react';
+import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
+import { tokens } from '@equinor/eds-tokens';
+import { Filter } from './Filter.js';
+import { useTableContext } from '../EdsDataGridContext.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+/* istanbul ignore file */
+
+function FilterWrapper({
+  column,
+  CustomComponent
+}) {
+  const {
+    table
+  } = useTableContext();
+  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
+  const [open, setOpen] = useState(false);
+  const filterIconRef = useRef();
+  const togglePopover = event => {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  const columnFilterValue = column.getFilterValue();
+  const hasActiveFilters = value => {
+    if (Array.isArray(value)) {
+      if (typeof firstValue === 'number') {
+        return value.some(v => !isNaN(v) && !!v);
+      } else {
+        return value.filter(v => !!v).length > 0;
+      }
+    }
+    return value;
+  };
+  const onChange = useCallback(value => column.setFilterValue(value), [column]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button, {
+      "aria-haspopup": true,
+      "aria-expanded": open,
+      "data-testid": 'open-filters',
+      ref: filterIconRef,
+      onClick: togglePopover,
+      variant: 'ghost_icon',
+      "aria-label": 'Show column filters',
+      children: /*#__PURE__*/jsx(Icon, {
+        color: tokens.colors.text.static_icons__default.hex,
+        data: hasActiveFilters(columnFilterValue) ? filter_alt_active : filter_alt
+      })
+    }), /*#__PURE__*/jsx(Popover, {
+      style: {
+        width: typeof firstValue === 'number' ? '220px' : '340px'
+      },
+      anchorEl: filterIconRef.current,
+      open: open,
+      onClose: () => setOpen(false),
+      children: /*#__PURE__*/jsx(Popover.Content, {
+        style: {
+          width: typeof firstValue === 'number' ? '180px' : '310px'
+        },
+        children: CustomComponent ? /*#__PURE__*/jsx(CustomComponent, {
+          onChange: onChange,
+          value: columnFilterValue
+        }) : /*#__PURE__*/jsx(Filter, {
+          column: column,
+          table: table
+        })
+      })
+    })]
+  });
+}
+
+export { FilterWrapper };

package/dist/esm/components/SortIndicator.js

@@ -0,0 +1,18 @@
+import { Icon } from '@equinor/eds-core-react';
+import { arrow_up, arrow_down } from '@equinor/eds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+const SortIndicator = ({
+  column
+}) => {
+  return {
+    asc: /*#__PURE__*/jsx(Icon, {
+      data: arrow_up
+    }),
+    desc: /*#__PURE__*/jsx(Icon, {
+      data: arrow_down
+    })
+  }[column.getIsSorted()] ?? null;
+};
+
+export { SortIndicator };

package/dist/esm/components/TableBodyCell.js

@@ -1,8 +1,8 @@
-import { flexRender } from '@tanstack/react-table';
 import { Table } from '@equinor/eds-core-react';
-import { useTableContext } from '../EdsDataGridContext.js';
+import { flexRender } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import styled from 'styled-components';
+import { useTableContext } from '../EdsDataGridContext.js';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledCell = styled(Table.Cell).withConfig({
@@ -34,14 +34,13 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 export { TableBodyCell };

package/dist/esm/components/TableHeaderCell.js

@@ -1,11 +1,11 @@
 import { flexRender } from '@tanstack/react-table';
-import { Table, Icon } from '@equinor/eds-core-react';
-import { arrow_up, arrow_down } from '@equinor/eds-icons';
+import { Table } from '@equinor/eds-core-react';
 import { useTableContext } from '../EdsDataGridContext.js';
-import { Filter } from './Filter.js';
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { useMemo } from 'react';
+import { FilterWrapper } from './FilterWrapper.js';
+import { SortIndicator } from './SortIndicator.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const getSortLabel = sorted => {
@@ -25,7 +25,7 @@ const Resizer = styled.div.withConfig({
 const Cell = styled(Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
   }
@@ -63,7 +63,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -80,22 +79,16 @@ function TableHeaderCell({
           className: "table-header-cell-label",
           children: flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), {
-        asc: /*#__PURE__*/jsx(Icon, {
-          data: arrow_up
-        }),
-        desc: /*#__PURE__*/jsx(Icon, {
-          data: arrow_down
-        })
-      }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
-      
+      }), header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
+        column: header.column
+      }), header.column.getCanFilter() && !header.column.columnDef.meta?.customFilterInput ?
+      /*#__PURE__*/
       // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
         onClick: e => e.stopPropagation(),
-        children: /*#__PURE__*/jsx(Filter, {
-          column: header.column,
-          table: table
+        children: /*#__PURE__*/jsx(FilterWrapper, {
+          column: header.column
         })
       }) : null]
     }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
@@ -108,7 +101,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 export { TableHeaderCell };

package/dist/esm/components/TableRow.js

@@ -1,11 +1,13 @@
 import { Table } from '@equinor/eds-core-react';
-import { TableBodyCell } from './TableBodyCell.js';
-import { useTableContext } from '../EdsDataGridContext.js';
 import styled from 'styled-components';
+import { useTableContext } from '../EdsDataGridContext.js';
+import { TableBodyCell } from './TableBodyCell.js';
 import { jsx } from 'react/jsx-runtime';
 
 function TableRow({
-  row
+  row,
+  onCellClick,
+  onClick
 }) {
   const {
     rowClass,
@@ -13,13 +15,13 @@ function TableRow({
   } = useTableContext();
   return /*#__PURE__*/jsx(StyledTableRow, {
     style: {
-      cursor: row.getCanSelect() ? 'pointer' : 'inherit',
       ...(rowStyle?.(row) ?? {})
     },
     className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
-    onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
+    onClick: onClick,
     children: row.getVisibleCells().map(cell => /*#__PURE__*/jsx(TableBodyCell, {
-      cell: cell
+      cell: cell,
+      onClick: onCellClick ? event => onCellClick(cell, event) : undefined
     }, cell.id))
   });
 }

package/dist/esm/index.js

@@ -1 +1,4 @@
+export { createColumnHelper } from '@tanstack/react-table';
 export { EdsDataGrid } from './EdsDataGrid.js';
+export { FilterWrapper } from './components/FilterWrapper.js';
+export { SortIndicator } from './components/SortIndicator.js';

package/dist/esm/utils.js

@@ -23,5 +23,18 @@ function addPxSuffixIfInputHasNoPrefix(size) {
   }
   return size;
 }
+function logDevelopmentWarningOfPropUse(deprecatedProps) {
+  if (process.env.NODE_ENV !== 'development') {
+    return;
+  }
+  for (const [key, {
+    value,
+    mitigationInfo
+  }] of Object.entries(deprecatedProps)) {
+    if (typeof value !== 'undefined') {
+      console.warn(`The prop '${key}' is deprecated and will be removed in a future release. ${mitigationInfo}`);
+    }
+  }
+}
 
-export { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString };
+export { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString, logDevelopmentWarningOfPropUse };

package/dist/types/EdsDataGrid.d.ts

@@ -1,2 +1,2 @@
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowClick, onCellClick, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridProps.d.ts

@@ -1,6 +1,6 @@
-import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
-import { CSSProperties, MutableRefObject, ReactElement } from 'react';
+import { CSSProperties, MouseEvent, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
     /**
      * The rows to display in the table
@@ -9,22 +9,13 @@ type BaseProps<T> = {
     /**
      * Definition of the columns to display in the table
      */
-    columns: ColumnDef<T>[];
+    columns: TableOptions<T>['columns'];
     /**
      * The mode of column resizing. If not set, column resizing is disabled.
      * Can be either 'onChange' or 'onEnd'
      * @default undefined
      */
     columnResizeMode?: ColumnResizeMode;
-    /**
-     * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
-     * @default false
-     */
-    rowSelection?: boolean | ((row: Row<T>) => boolean);
-    /**
-     * Callback for when row-selection changes
-     */
-    onSelectRow?: OnChangeFn<RowSelectionState>;
     /**
      * Enable debug mode. See https://tanstack.com/table/v8/docs/api/core/table#debugall
      * @default false
@@ -45,11 +36,6 @@ type BaseProps<T> = {
      * @default undefined
      */
     emptyMessage?: string;
-    /**
-     * The currently selected rows
-     * @default {}
-     */
-    selectedRows?: Record<string | number, boolean>;
     /**
      * Whether there should be horizontal scrolling.
      * This must be true for column pinning to work
@@ -84,6 +70,51 @@ type BaseProps<T> = {
      * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
      */
     getRowId?: TableOptions<T>['getRowId'];
+    /**
+     * Optional prop to override the default column setup (cell, header, size etc.)
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#defaultcolumn)
+     */
+    defaultColumn?: Partial<ColumnDef<T, unknown>>;
+};
+type RowSelectionProps<T> = {
+    /**
+     * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
+     * @default false
+     */
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    /**
+     * Only used if row selection has been enabled via `enableRowSelection`
+     * Enables/disables multiple row selection for all rows in the table OR
+     * A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren
+     * @default false
+     */
+    enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
+    /**
+     * The currently selected rows
+     * @deprecated Use `rowSelectionState`
+     * @default {}
+     */
+    selectedRows?: Record<string | number, boolean>;
+    /**
+     * The currently selected rows
+     * @default {}
+     */
+    rowSelectionState?: RowSelectionState;
+    /**
+     * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
+     * @deprecated Use `enableRowSelection`
+     * @default false
+     */
+    rowSelection?: boolean | ((row: Row<T>) => boolean);
+    /**
+     * Callback for when row-selection changes
+     * @deprecated Use `onRowSelectionChange`
+     */
+    onSelectRow?: OnChangeFn<RowSelectionState>;
+    /**
+     * Callback for when row-selection changes
+     */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
 };
 type StyleProps<T> = {
     /**
@@ -129,6 +160,24 @@ type FilterProps = {
      */
     enableColumnFiltering?: boolean;
 };
+type HandlersProps<T> = {
+    /**
+     * Row click handler.
+     *
+     * @param row The current row
+     * @param event The click event
+     * @returns
+     */
+    onRowClick?: (row: Row<T>, event: MouseEvent<HTMLTableRowElement>) => unknown;
+    /**
+     * Cell click handler.
+     *
+     * @param cell The current cell
+     * @param event The click event
+     * @returns
+     */
+    onCellClick?: (cell: Cell<T, unknown>, event: MouseEvent<HTMLTableCellElement>) => unknown;
+};
 type PagingProps = {
     /**
      * Whether pagination should be enabled.
@@ -155,6 +204,7 @@ type VirtualProps = {
     enableVirtual?: boolean;
     /**
      * The height of the virtualized table in pixels.
+     * @deprecated Use `height` prop over virtualHeight, this will be removed in a later version
      * @default 500
      */
     virtualHeight?: number;
@@ -187,7 +237,12 @@ type ColumnProps = {
 type RefProps = {
     rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;
 };
-export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & {
+type ExpansionProps<T> = {
+    expansionState?: ExpandedState;
+    setExpansionState?: React.Dispatch<React.SetStateAction<ExpandedState>>;
+    getSubRows?: (row: T, rowIndex: number) => Array<T>;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & RowSelectionProps<T> & StyleProps<T> & HandlersProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & ExpansionProps<T> & {
     /**
      * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
      * @default undefined

package/dist/types/components/FilterWrapper.d.ts

@@ -0,0 +1,11 @@
+import { Column } from '@tanstack/react-table';
+import { FC } from 'react';
+type FilterProps<T = unknown, U = unknown> = {
+    column: Column<T>;
+    CustomComponent?: FC<{
+        onChange: (value: U) => void;
+        value: U;
+    }>;
+};
+export declare function FilterWrapper<T = unknown>({ column, CustomComponent, }: FilterProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/SortIndicator.d.ts

@@ -0,0 +1,4 @@
+import { Column } from '@tanstack/react-table';
+export declare const SortIndicator: <T>({ column, }: {
+    column: Column<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/TableBodyCell.d.ts

@@ -1,6 +1,7 @@
 import { Cell } from '@tanstack/react-table';
+import { HTMLAttributes } from 'react';
 type Props<T> = {
     cell: Cell<T, unknown>;
-};
+} & HTMLAttributes<HTMLTableCellElement>;
 export declare function TableBodyCell<T>({ cell }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/TableRow.d.ts

@@ -1,7 +1,9 @@
 import { Row } from '@tanstack/react-table';
 import { HTMLAttributes } from 'react';
+import { EdsDataGridProps } from '../EdsDataGridProps';
 type Props<T> = {
     row: Row<T>;
+    onCellClick?: EdsDataGridProps<T>['onCellClick'];
 } & HTMLAttributes<HTMLTableRowElement>;
-export declare function TableRow<T>({ row }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow<T>({ row, onCellClick, onClick }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -1,3 +1,6 @@
+export { createColumnHelper } from '@tanstack/react-table';
 export * from './EdsDataGrid';
 export * from './EdsDataGridProps';
+export * from './components/FilterWrapper';
+export * from './components/SortIndicator';
 export * from './types';

package/dist/types/types.d.ts

@@ -1,3 +1,3 @@
 import type { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
 import type { Virtualizer } from '@tanstack/react-virtual';
-export type { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState, Virtualizer, };
+export type { Cell, CellContext, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSort, ExpandedState, HeaderContext, OnChangeFn, Row, RowSelectionState, SortingState, Table, Virtualizer, VisibilityState, };

package/dist/types/utils.d.ts

@@ -16,3 +16,7 @@
  */
 export declare function isNumberOnlyString(number: string): boolean;
 export declare function addPxSuffixIfInputHasNoPrefix(size: number | string): string;
+export declare function logDevelopmentWarningOfPropUse(deprecatedProps: Record<string, {
+    value: unknown;
+    mitigationInfo?: string;
+}>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -17,37 +17,35 @@
     "@equinor/eds-core-react": ">=0.36.0",
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2"
+    "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.4",
+    "@tanstack/react-table": "^8.16.0",
+    "@tanstack/react-virtual": "^3.5.0",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-utils": "^0.8.4",
+    "@equinor/eds-utils": "^0.8.5",
     "@equinor/eds-tokens": "0.9.2"
   },
   "devDependencies": {
-    "@mdx-js/react": "2.3.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-actions": "^7.5.1",
-    "@storybook/addon-docs": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/builder-vite": "^7.5.1",
-    "@storybook/client-api": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-vite": "^7.5.1",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-docs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/preview-api": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.6",
     "@types/node": "20.8.9",
-    "@types/ramda": "^0.29.7",
+    "@types/ramda": "^0.30.0",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "babel-loader": "^9.1.3",
@@ -57,16 +55,15 @@
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
     "postcss": "^8.4.31",
-    "ramda": "^0.29.1",
+    "ramda": "^0.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
-    "remark-gfm": "^4.0.0",
     "rollup": "^4.2.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.5.1",
-    "styled-components": "6.1.0",
+    "storybook": "^8.0.2",
+    "styled-components": "6.1.11",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "tsc-watch": "^6.0.4",