@equinor/eds-data-grid-react 0.8.0 → 0.9.0

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

@@ -304,6 +304,12 @@ function TableHeaderCell({
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const {
+    density
+  } = edsCoreReact.useEds();
+  // Future improvement: If we down the line end up granting the ability to customize row height, we should move this to the table-context
+  const rowHeight = density === 'compact' ? 32 : 48;
+  const vertOffset = ctx.stickyHeader ? (header.depth - 1) * rowHeight : undefined;
   const tableCellPadding = react.useMemo(() => {
     if (canSort && canFilter) {
       return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
@@ -319,7 +325,8 @@ function TableHeaderCell({
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     style: {
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      top: vertOffset
     },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxRuntime.jsxs(TableCell, {
@@ -334,7 +341,8 @@ function TableHeaderCell({
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
       ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
-      padding: tableCellPadding
+      padding: tableCellPadding,
+      top: vertOffset
     },
     children: [canSort ? /*#__PURE__*/jsxRuntime.jsxs(SortButton, {
       tabIndex: -1,
@@ -505,13 +513,18 @@ function TableRow({
   onCellClick,
   onClick,
   onDoubleClick,
-  onContextMenu
+  onContextMenu,
+  rowVirtualizer,
+  virtualItem
 }) {
   const {
     rowClass,
     rowStyle
   } = useTableContext();
   return /*#__PURE__*/jsxRuntime.jsx(StyledTableRow, {
+    "data-index": virtualItem?.index,
+    ref: node => node && rowVirtualizer?.measureElement(node) //measure dynamic row height
+    ,
     style: {
       ...(rowStyle?.(row) ?? {})
     },
@@ -570,6 +583,12 @@ function logDevelopmentWarningOfPropUse(deprecatedProps) {
     }
   }
 }
+const isFirefox = () => {
+  return typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') !== -1;
+};
+const getMeasureElementHandler = () => {
+  return isFirefox() ? undefined : element => element?.getBoundingClientRect().height;
+};
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 function EdsDataGridInner({
@@ -882,7 +901,9 @@ function EdsDataGridInner({
   const virtualizer = reactVirtual.useVirtualizer({
     count: table.getRowModel().rows.length,
     getScrollElement: () => parentRef.current,
-    estimateSize
+    estimateSize,
+    //measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement: getMeasureElementHandler()
   });
   if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
 
@@ -939,7 +960,6 @@ function EdsDataGridInner({
         children: [caption && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Caption, {
           children: caption
         }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Head, {
-          sticky: stickyHeader,
           children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
             table: table,
             headerGroup: headerGroup,
@@ -970,6 +990,8 @@ function EdsDataGridInner({
             }), virtualRows.map(virtualItem => {
               const row = table.getRowModel().rows[virtualItem.index];
               return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+                virtualItem: virtualItem,
+                rowVirtualizer: virtualizer,
                 row: row,
                 onContextMenu: onRowContextMenu ? event => onRowContextMenu(row, event) : undefined,
                 onClick: onRowClick ? event => onRowClick(row, event) : undefined,

package/dist/esm/EdsDataGrid.js

@@ -7,7 +7,7 @@ import { TableProvider } from './EdsDataGridContext.js';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
 import { TableFooterRow } from './components/TableFooterRow.js';
 import { TableRow } from './components/TableRow.js';
-import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
+import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse, getMeasureElementHandler } from './utils.js';
 import { mergeRefs } from '@equinor/eds-utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -322,7 +322,9 @@ function EdsDataGridInner({
   const virtualizer = useVirtualizer({
     count: table.getRowModel().rows.length,
     getScrollElement: () => parentRef.current,
-    estimateSize
+    estimateSize,
+    //measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement: getMeasureElementHandler()
   });
   if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
 
@@ -379,7 +381,6 @@ function EdsDataGridInner({
         children: [caption && /*#__PURE__*/jsx(Table.Caption, {
           children: caption
         }), /*#__PURE__*/jsx(Table.Head, {
-          sticky: stickyHeader,
           children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsx(TableHeaderRow, {
             table: table,
             headerGroup: headerGroup,
@@ -410,6 +411,8 @@ function EdsDataGridInner({
             }), virtualRows.map(virtualItem => {
               const row = table.getRowModel().rows[virtualItem.index];
               return /*#__PURE__*/jsx(TableRow, {
+                virtualItem: virtualItem,
+                rowVirtualizer: virtualizer,
                 row: row,
                 onContextMenu: onRowContextMenu ? event => onRowContextMenu(row, event) : undefined,
                 onClick: onRowClick ? event => onRowClick(row, event) : undefined,

package/dist/esm/components/TableHeaderCell.js

@@ -6,6 +6,7 @@ import { SortIndicator } from './SortIndicator.js';
 import { Resizer, ResizeInner } from './Resizer.js';
 import { TableCell, FilterVisibility } from './TableCell.js';
 import styled from 'styled-components';
+import { useEds } from '@equinor/eds-core-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const SortButton = styled.button.withConfig({
@@ -46,6 +47,12 @@ function TableHeaderCell({
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const {
+    density
+  } = useEds();
+  // Future improvement: If we down the line end up granting the ability to customize row height, we should move this to the table-context
+  const rowHeight = density === 'compact' ? 32 : 48;
+  const vertOffset = ctx.stickyHeader ? (header.depth - 1) * rowHeight : undefined;
   const tableCellPadding = useMemo(() => {
     if (canSort && canFilter) {
       return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
@@ -61,7 +68,8 @@ function TableHeaderCell({
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     style: {
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      top: vertOffset
     },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxs(TableCell, {
@@ -76,7 +84,8 @@ function TableHeaderCell({
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
       ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
-      padding: tableCellPadding
+      padding: tableCellPadding,
+      top: vertOffset
     },
     children: [canSort ? /*#__PURE__*/jsxs(SortButton, {
       tabIndex: -1,

package/dist/esm/components/TableRow.js

@@ -9,13 +9,18 @@ function TableRow({
   onCellClick,
   onClick,
   onDoubleClick,
-  onContextMenu
+  onContextMenu,
+  rowVirtualizer,
+  virtualItem
 }) {
   const {
     rowClass,
     rowStyle
   } = useTableContext();
   return /*#__PURE__*/jsx(StyledTableRow, {
+    "data-index": virtualItem?.index,
+    ref: node => node && rowVirtualizer?.measureElement(node) //measure dynamic row height
+    ,
     style: {
       ...(rowStyle?.(row) ?? {})
     },

package/dist/esm/utils.js

@@ -36,5 +36,11 @@ function logDevelopmentWarningOfPropUse(deprecatedProps) {
     }
   }
 }
+const isFirefox = () => {
+  return typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') !== -1;
+};
+const getMeasureElementHandler = () => {
+  return isFirefox() ? undefined : element => element?.getBoundingClientRect().height;
+};
 
-export { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString, logDevelopmentWarningOfPropUse };
+export { addPxSuffixIfInputHasNoPrefix, getMeasureElementHandler, isFirefox, isNumberOnlyString, logDevelopmentWarningOfPropUse };

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

@@ -0,0 +1,12 @@
+import React, { ButtonHTMLAttributes } from 'react';
+export type ClickableCellProps = {
+    /** Cell content */
+    children: React.ReactNode;
+    /** Click handler */
+    onClick: () => void;
+    /** Accessible label for screen readers */
+    ariaLabel: string;
+    /** Indicates if the cell is selected */
+    isSelected?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'>;
+export declare function ClickableCell({ children, onClick, ariaLabel, isSelected, ...rest }: ClickableCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ClickableCell/ClickableCell.tokens.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+export type ClickableCellToken = ComponentToken;
+export declare const clickableCell: ClickableCellToken;

package/dist/types/components/ClickableCell/index.d.ts

@@ -0,0 +1 @@
+export { ClickableCell, type ClickableCellProps } from './ClickableCell';

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

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

package/dist/types/utils.d.ts

@@ -20,3 +20,5 @@ export declare function logDevelopmentWarningOfPropUse(deprecatedProps: Record<s
     value: unknown;
     mitigationInfo?: string;
 }>): void;
+export declare const isFirefox: () => boolean;
+export declare const getMeasureElementHandler: () => (element: HTMLTableRowElement) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -21,10 +21,10 @@
   },
   "dependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.6",
+    "@tanstack/react-virtual": "^3.13.12",
     "@equinor/eds-icons": "^0.22.0",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "^0.8.7"
+    "@equinor/eds-utils": "^0.8.8"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
@@ -54,16 +54,16 @@
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
     "postcss": "^8.5.3",
-    "ramda": "^0.30.1",
+    "ramda": "^0.31.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.56.1",
     "rollup": "^4.40.1",
     "rollup-plugin-delete": "^2.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.6.12",
-    "styled-components": "6.1.17",
-    "ts-jest": "29.3.2",
+    "storybook": "^8.6.14",
+    "styled-components": "6.1.19",
+    "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
     "tsc-watch": "^6.2.1",
     "typescript": "~5.8.3"