@equinor/eds-data-grid-react 0.7.5 → 0.7.7

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

@@ -189,7 +189,7 @@ function FilterWrapper({
     return value;
   };
   const onChange = react.useCallback(value => column.setFilterValue(value), [column]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
     children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Button, {
       "aria-haspopup": true,
       "aria-expanded": open,
@@ -245,7 +245,7 @@ const ResizeInner = styled__default.default.div.withConfig({
 const Resizer = styled__default.default.div.withConfig({
   displayName: "Resizer",
   componentId: "sc-plcbjs-1"
-})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;z-index:1;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
 
 const TableCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   displayName: "TableCell",
@@ -260,6 +260,14 @@ const TableCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   if (p.$sticky || p.$pinned) return 'z-index: 12';
 }, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
 
+const SortButton = styled__default.default.button.withConfig({
+  displayName: "TableHeaderCell__SortButton",
+  componentId: "sc-1n0j3v0-0"
+})(["cursor:pointer;height:100%;width:calc(100% - 5px);display:flex;flex-direction:row;align-items:center;background:transparent;border:none;padding-left:var(--eds_table__cell__padding_x,16px);padding-right:var(--eds_table__cell__padding_x,16px);margin:0;outline:none;color:inherit;text-align:left;font:inherit;"]);
+const TableHeaderCellLabel = styled__default.default.div.withConfig({
+  displayName: "TableHeaderCell__TableHeaderCellLabel",
+  componentId: "sc-1n0j3v0-1"
+})(["display:flex;flex-direction:column;"]);
 const getSortLabel = sorted => {
   if (sorted) {
     return `${sorted}ending`;
@@ -273,12 +281,23 @@ function TableHeaderCell({
   const ctx = useTableContext();
   const table = ctx.table;
   const pinned = header.column.getIsPinned();
+  const canSort = header.column.getCanSort();
+  const canFilter = header.column.getCanFilter();
   const offset = react.useMemo(() => {
     if (!pinned) {
       return null;
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const tableCellPadding = react.useMemo(() => {
+    if (canSort && canFilter) {
+      return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
+    }
+    if (canSort) {
+      return '0';
+    }
+    return '0 var(--eds_table__cell__padding_x, 16px) 0 var(--eds_table__cell__padding_x, 16px)';
+  }, [canSort, canFilter]);
   return header.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
@@ -294,37 +313,29 @@ function TableHeaderCell({
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
-    onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      padding: tableCellPadding
     },
-    children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "table-header-cell-label",
-          children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
-        })
+    children: [canSort ? /*#__PURE__*/jsxRuntime.jsxs(SortButton, {
+      tabIndex: -1,
+      onClick: header.column.getToggleSortingHandler(),
+      "data-testid": `sort-button-${header.id}`,
+      children: [/*#__PURE__*/jsxRuntime.jsx(TableHeaderCellLabel, {
+        className: "table-header-cell-label",
+        children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
       }), !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(FilterWrapper, {
-          column: header.column
-        })
-      }) : null]
-    }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
-      onClick: e => e.stopPropagation(),
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsx(TableHeaderCellLabel, {
+      className: "table-header-cell-label",
+      children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
+    }), canFilter && !header.column.columnDef.meta?.customFilterInput ? /*#__PURE__*/jsxRuntime.jsx(FilterWrapper, {
+      column: header.column
+    }) : null, columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),
@@ -845,6 +856,14 @@ function EdsDataGridInner({
     estimateSize
   });
   if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
+
+  // Add effect to recalculate virtualization when density changes
+  react.useEffect(() => {
+    if (enableVirtual && virtualizer) {
+      // Force the virtualizer to recalculate when density changes
+      virtualizer.measure();
+    }
+  }, [density, enableVirtual, virtualizer]);
   const virtualRows = virtualizer.getVirtualItems();
   const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
   const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
@@ -957,6 +976,7 @@ function EdsDataGridInner({
           }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "table-pagination",
         style: {
           maxWidth: `${table.getTotalSize()}px`
         },

package/dist/esm/EdsDataGrid.js

@@ -1,5 +1,5 @@
-import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
-import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { useEds, Table, Pagination, Typography } from '@equinor/eds-core-react';
+import { getSortedRowModel, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import styled from 'styled-components';
@@ -9,7 +9,7 @@ import { TableFooterRow } from './components/TableFooterRow.js';
 import { TableRow } from './components/TableRow.js';
 import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
 import { mergeRefs } from '@equinor/eds-utils';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 function EdsDataGridInner({
@@ -319,6 +319,14 @@ function EdsDataGridInner({
     estimateSize
   });
   if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
+
+  // Add effect to recalculate virtualization when density changes
+  useEffect(() => {
+    if (enableVirtual && virtualizer) {
+      // Force the virtualizer to recalculate when density changes
+      virtualizer.measure();
+    }
+  }, [density, enableVirtual, virtualizer]);
   const virtualRows = virtualizer.getVirtualItems();
   const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
   const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
@@ -431,6 +439,7 @@ function EdsDataGridInner({
           }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
+        className: "table-pagination",
         style: {
           maxWidth: `${table.getTotalSize()}px`
         },

package/dist/esm/components/FilterWrapper.js

@@ -4,7 +4,7 @@ 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';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 /* istanbul ignore file */
 
@@ -34,7 +34,7 @@ function FilterWrapper({
     return value;
   };
   const onChange = useCallback(value => column.setFilterValue(value), [column]);
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs("span", {
     children: [/*#__PURE__*/jsx(Button, {
       "aria-haspopup": true,
       "aria-expanded": open,

package/dist/esm/components/Resizer.js

@@ -7,6 +7,6 @@ const ResizeInner = styled.div.withConfig({
 const Resizer = styled.div.withConfig({
   displayName: "Resizer",
   componentId: "sc-plcbjs-1"
-})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;z-index:1;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
 
 export { ResizeInner, Resizer };

package/dist/esm/components/SortIndicator.js

@@ -1,5 +1,5 @@
 import { Icon } from '@equinor/eds-core-react';
-import { arrow_up, arrow_down } from '@equinor/eds-icons';
+import { arrow_down, arrow_up } from '@equinor/eds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 const SortIndicator = ({

package/dist/esm/components/TableHeaderCell.js

@@ -5,8 +5,17 @@ import { FilterWrapper } from './FilterWrapper.js';
 import { SortIndicator } from './SortIndicator.js';
 import { Resizer, ResizeInner } from './Resizer.js';
 import { TableCell } from './TableCell.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+const SortButton = styled.button.withConfig({
+  displayName: "TableHeaderCell__SortButton",
+  componentId: "sc-1n0j3v0-0"
+})(["cursor:pointer;height:100%;width:calc(100% - 5px);display:flex;flex-direction:row;align-items:center;background:transparent;border:none;padding-left:var(--eds_table__cell__padding_x,16px);padding-right:var(--eds_table__cell__padding_x,16px);margin:0;outline:none;color:inherit;text-align:left;font:inherit;"]);
+const TableHeaderCellLabel = styled.div.withConfig({
+  displayName: "TableHeaderCell__TableHeaderCellLabel",
+  componentId: "sc-1n0j3v0-1"
+})(["display:flex;flex-direction:column;"]);
 const getSortLabel = sorted => {
   if (sorted) {
     return `${sorted}ending`;
@@ -20,12 +29,23 @@ function TableHeaderCell({
   const ctx = useTableContext();
   const table = ctx.table;
   const pinned = header.column.getIsPinned();
+  const canSort = header.column.getCanSort();
+  const canFilter = header.column.getCanFilter();
   const offset = useMemo(() => {
     if (!pinned) {
       return null;
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const tableCellPadding = useMemo(() => {
+    if (canSort && canFilter) {
+      return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
+    }
+    if (canSort) {
+      return '0';
+    }
+    return '0 var(--eds_table__cell__padding_x, 16px) 0 var(--eds_table__cell__padding_x, 16px)';
+  }, [canSort, canFilter]);
   return header.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
@@ -41,37 +61,29 @@ function TableHeaderCell({
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
-    onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      padding: tableCellPadding
     },
-    children: [/*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        children: /*#__PURE__*/jsx("span", {
-          className: "table-header-cell-label",
-          children: flexRender(header.column.columnDef.header, header.getContext())
-        })
+    children: [canSort ? /*#__PURE__*/jsxs(SortButton, {
+      tabIndex: -1,
+      onClick: header.column.getToggleSortingHandler(),
+      "data-testid": `sort-button-${header.id}`,
+      children: [/*#__PURE__*/jsx(TableHeaderCellLabel, {
+        className: "table-header-cell-label",
+        children: flexRender(header.column.columnDef.header, header.getContext())
       }), !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(FilterWrapper, {
-          column: header.column
-        })
-      }) : null]
-    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
-      onClick: e => e.stopPropagation(),
+      })]
+    }) : /*#__PURE__*/jsx(TableHeaderCellLabel, {
+      className: "table-header-cell-label",
+      children: flexRender(header.column.columnDef.header, header.getContext())
+    }), canFilter && !header.column.columnDef.meta?.customFilterInput ? /*#__PURE__*/jsx(FilterWrapper, {
+      column: header.column
+    }) : null, columnResizeMode && /*#__PURE__*/jsx(Resizer, {
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -20,53 +20,53 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.20.6",
-    "@tanstack/react-virtual": "^3.11.2",
-    "@equinor/eds-utils": "^0.8.6",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.6",
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "^0.8.7"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "22.10.5",
+    "@types/node": "^22.15.3",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "babel-plugin-styled-components": "^2.1.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
-    "rollup": "^4.29.1",
-    "rollup-plugin-delete": "^2.1.0",
+    "react-hook-form": "^7.56.1",
+    "rollup": "^4.40.1",
+    "rollup-plugin-delete": "^2.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.4.7",
-    "styled-components": "6.1.13",
-    "ts-jest": "29.2.5",
+    "storybook": "^8.6.12",
+    "styled-components": "6.1.17",
+    "ts-jest": "29.3.1",
     "ts-node": "10.9.2",
     "tsc-watch": "^6.2.1",
-    "typescript": "~5.7.2"
+    "typescript": "~5.8.3"
   },
   "homepage": "https://eds.equinor.com",
   "repository": {