@equinor/eds-data-grid-react 0.2.0 → 0.3.0-rc

package/dist/esm/components/Filter.js

@@ -1,4 +1,3 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef, useMemo } from 'react';
 import { DebouncedInput } from './DebouncedInput.js';
 import { Button, Icon, Popover } from '@equinor/eds-core-react';
@@ -7,58 +6,49 @@ import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var NumberContainer = styled.div.withConfig({
+/* istanbul ignore file */
+
+const NumberContainer = styled.div.withConfig({
   displayName: "Filter__NumberContainer",
   componentId: "sc-ytpdpw-0"
 })(["display:grid;grid-template-columns:80px 80px;grid-column-gap:32px;"]);
-function Filter(_ref) {
-  var _table$getPreFiltered, _column$getFacetedMin, _column$getFacetedMin2, _column$getFacetedMin3, _column$getFacetedMin4, _, _column$getFacetedMin5, _column$getFacetedMin6, _column$getFacetedMin7, _column$getFacetedMin8, _column$getFacetedMin9, _column$getFacetedMin10, _2, _column$getFacetedMin11, _column$getFacetedMin12;
-  var column = _ref.column,
-    table = _ref.table;
-  var firstValue = (_table$getPreFiltered = table.getPreFilteredRowModel().flatRows[0]) === null || _table$getPreFiltered === void 0 ? void 0 : _table$getPreFiltered.getValue(column.id);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var filterIconRef = useRef();
-  var togglePopover = function togglePopover(event) {
+function Filter({
+  column,
+  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);
   };
-  var columnText = useMemo(function () {
-    var header;
+  const columnText = useMemo(() => {
+    let header;
     try {
       if (typeof column.columnDef.header === 'function') {
-        var obj = column.columnDef.header(
+        const obj = column.columnDef.header(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument
         {});
         header = obj.props.children;
       } else {
         header = column.columnDef.header;
       }
-    } catch (_unused) {
+    } catch {
       /*em all*/
     }
     return header;
   }, [column.columnDef]);
-  var columnFilterValue = column.getFilterValue();
-  var sortedUniqueValues = useMemo(function () {
-    return typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(function (v) {
-      return v !== null && v !== void 0 ? v : 'NULL_OR_UNDEFINED';
-    });
-  },
+  const columnFilterValue = column.getFilterValue();
+  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()]);
-  var hasActiveFilters = function hasActiveFilters(value) {
+  const hasActiveFilters = value => {
     if (Array.isArray(value)) {
       if (typeof firstValue === 'number') {
-        return value.some(function (v) {
-          return !isNaN(v) && !!v;
-        });
+        return value.some(v => !isNaN(v) && !!v);
       } else {
-        return value.filter(function (v) {
-          return !!v;
-        }).length > 0;
+        return value.filter(v => !!v).length > 0;
       }
     }
     return value;
@@ -81,9 +71,7 @@ function Filter(_ref) {
       },
       anchorEl: filterIconRef.current,
       open: open,
-      onClose: function onClose() {
-        return setOpen(false);
-      },
+      onClose: () => setOpen(false),
       children: /*#__PURE__*/jsx(Popover.Content, {
         style: {
           width: typeof firstValue === 'number' ? '180px' : '310px'
@@ -92,38 +80,28 @@ function Filter(_ref) {
           children: [/*#__PURE__*/jsx(DebouncedInput, {
             type: "number",
             values: sortedUniqueValues,
-            min: Number((_column$getFacetedMin = (_column$getFacetedMin2 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin2 === void 0 ? void 0 : _column$getFacetedMin2[0]) !== null && _column$getFacetedMin !== void 0 ? _column$getFacetedMin : ''),
-            max: Number((_column$getFacetedMin3 = (_column$getFacetedMin4 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin4 === void 0 ? void 0 : _column$getFacetedMin4[1]) !== null && _column$getFacetedMin3 !== void 0 ? _column$getFacetedMin3 : ''),
-            value: (_ = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) !== null && _ !== void 0 ? _ : '',
-            onChange: function onChange(value) {
-              return column.setFilterValue(function (old) {
-                return [value, old === null || old === void 0 ? void 0 : old[1]];
-              });
-            },
-            placeholder: "Min ".concat((_column$getFacetedMin5 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin5 !== void 0 && _column$getFacetedMin5[0] ? "(".concat((_column$getFacetedMin6 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin6 === void 0 ? void 0 : _column$getFacetedMin6[0], ")") : '')
+            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$getFacetedMin7 = (_column$getFacetedMin8 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin8 === void 0 ? void 0 : _column$getFacetedMin8[0]) !== null && _column$getFacetedMin7 !== void 0 ? _column$getFacetedMin7 : ''),
-            max: Number((_column$getFacetedMin9 = (_column$getFacetedMin10 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin10 === void 0 ? void 0 : _column$getFacetedMin10[1]) !== null && _column$getFacetedMin9 !== void 0 ? _column$getFacetedMin9 : ''),
-            value: (_2 = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) !== null && _2 !== void 0 ? _2 : '',
-            onChange: function onChange(value) {
-              return column.setFilterValue(function (old) {
-                return [old === null || old === void 0 ? void 0 : old[0], value];
-              });
-            },
-            placeholder: "Max ".concat((_column$getFacetedMin11 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin11 !== void 0 && _column$getFacetedMin11[1] ? "(".concat((_column$getFacetedMin12 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin12 === void 0 ? void 0 : _column$getFacetedMin12[1], ")") : '')
+            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 !== null && columnFilterValue !== void 0 ? columnFilterValue : [],
-          onChange: function onChange(value) {
-            return column.setFilterValue(value);
-          },
-          placeholder: "".concat((columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : []).length, " / ").concat(column.getFacetedUniqueValues().size, " selected"),
+          value: columnFilterValue ?? [],
+          onChange: value => column.setFilterValue(value),
+          placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
           list: column.id + 'list'
         })
       })

package/dist/esm/components/TableBodyCell.js

@@ -1,42 +1,33 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { flexRender } from '@tanstack/react-table';
-import { Table, Typography } from '@equinor/eds-core-react';
+import { Table } from '@equinor/eds-core-react';
 import { useTableContext } from '../EdsDataGridContext.js';
 import { useMemo } from 'react';
-import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var StyledCell = styled(Table.Cell).withConfig({
+const StyledCell = styled(Table.Cell).withConfig({
   displayName: "TableBodyCell__StyledCell",
   componentId: "sc-1gsd2k4-0"
-})(["position:", ";", " z-index:", ";background-color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], function (p) {
-  return p.$pinned ? 'sticky' : 'relative';
-}, function (p) {
+})(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
-    return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
+    return `${p.$pinned}: ${p.$offset}px;`;
   }
   return '';
-}, function (p) {
-  return p.$pinned ? 11 : 'auto';
-}, function (p) {
-  return p.$pinned ? tokens.colors.ui.background__default.hex : 'inherit';
-});
-function TableBodyCell(_ref) {
-  var _cellStyle;
-  var cell = _ref.cell;
-  var _useTableContext = useTableContext(),
-    cellClass = _useTableContext.cellClass,
-    cellStyle = _useTableContext.cellStyle,
-    table = _useTableContext.table;
-  var pinned = cell.column.getIsPinned();
-  var pinnedOffset = useMemo(function () {
+}, p => p.$pinned ? 11 : 'auto');
+function TableBodyCell({
+  cell
+}) {
+  const {
+    cellClass,
+    cellStyle,
+    table
+  } = useTableContext();
+  const pinned = cell.column.getIsPinned();
+  const pinnedOffset = useMemo(() => {
     if (!pinned) {
       return 0;
     }
-    var header = table.getFlatHeaders().find(function (h) {
-      return h.id === cell.column.id;
-    });
+    const header = table.getFlatHeaders().find(h => h.id === cell.column.id);
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - cell.column.getSize();
   }, [pinned, cell.column, table]);
   return /*#__PURE__*/jsx(StyledCell, {
@@ -44,16 +35,12 @@ function TableBodyCell(_ref) {
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
     key: cell.id,
-    style: _objectSpread({
+    style: {
       width: cell.column.getSize(),
-      maxWidth: cell.column.getSize()
-    }, (_cellStyle = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle(cell.row, cell.column.id)) !== null && _cellStyle !== void 0 ? _cellStyle : {}),
-    children: /*#__PURE__*/jsx(Typography, {
-      as: "span",
-      group: "table",
-      variant: "cell_text",
-      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-    })
+      maxWidth: cell.column.getSize(),
+      ...(cellStyle?.(cell.row, cell.column.id) ?? {})
+    },
+    children: flexRender(cell.column.columnDef.cell, cell.getContext())
   });
 }
 

package/dist/esm/components/TableHeaderCell.js

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { flexRender } from '@tanstack/react-table';
 import { Table, Icon } from '@equinor/eds-core-react';
 import { arrow_up, arrow_down } from '@equinor/eds-icons';
@@ -9,47 +8,40 @@ import { tokens } from '@equinor/eds-tokens';
 import { useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var getSortLabel = function getSortLabel(sorted) {
+const getSortLabel = sorted => {
   if (sorted) {
-    return "".concat(sorted, "ending");
+    return `${sorted}ending`;
   }
   return 'none';
 };
-var ResizeInner = styled.div.withConfig({
+const ResizeInner = styled.div.withConfig({
   displayName: "TableHeaderCell__ResizeInner",
   componentId: "sc-1n0j3v0-0"
 })(["width:2px;opacity:0;height:100%;"]);
-var Resizer = styled.div.withConfig({
+const Resizer = styled.div.withConfig({
   displayName: "TableHeaderCell__Resizer",
   componentId: "sc-1n0j3v0-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;"], function (props) {
-  return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
-}, ResizeInner, function (props) {
-  return props.$isResizing ? 1 : 0;
-});
-var Cell = styled(Table.Cell).withConfig({
+})(["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);
+const Cell = styled(Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " z-index:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
-  return p.$sticky || p.$pinned ? 'sticky' : 'relative';
-}, function (p) {
+})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
-    return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
+    return `${p.$pinned}: ${p.$offset}px;`;
   }
   return '';
-}, function (p) {
-  if (p.$sticky && p.$pinned) return 13;
-  if (p.$sticky || p.$pinned) return 12;
-  return 'auto';
+}, p => {
+  if (p.$sticky && p.$pinned) return 'z-index: 13';
+  if (p.$sticky || p.$pinned) return 'z-index: 12';
 }, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
-function TableHeaderCell(_ref) {
-  var _asc$desc;
-  var header = _ref.header,
-    columnResizeMode = _ref.columnResizeMode;
-  var ctx = useTableContext();
-  var table = ctx.table;
-  var pinned = header.column.getIsPinned();
-  var offset = useMemo(function () {
+function TableHeaderCell({
+  header,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = header.column.getIsPinned();
+  const offset = useMemo(() => {
     if (!pinned) {
       return null;
     }
@@ -60,7 +52,9 @@ function TableHeaderCell(_ref) {
     $offset: offset,
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
-    style: _objectSpread({}, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+    style: {
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxs(Cell, {
     $sticky: ctx.stickyHeader,
@@ -71,10 +65,11 @@ function TableHeaderCell(_ref) {
     onClick: header.column.getToggleSortingHandler(),
     key: header.id,
     colSpan: header.colSpan,
-    style: _objectSpread({
+    style: {
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle'
-    }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     children: [/*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("div", {
         style: {
@@ -85,30 +80,26 @@ function TableHeaderCell(_ref) {
           className: "table-header-cell-label",
           children: flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), (_asc$desc = {
+      }), {
         asc: /*#__PURE__*/jsx(Icon, {
           data: arrow_up
         }),
         desc: /*#__PURE__*/jsx(Icon, {
           data: arrow_down
         })
-      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null, header.column.getCanFilter() ?
+      }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
       
       // 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: function onClick(e) {
-          return e.stopPropagation();
-        },
+        onClick: e => e.stopPropagation(),
         children: /*#__PURE__*/jsx(Filter, {
           column: header.column,
           table: table
         })
       }) : null]
     }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
+      onClick: e => e.stopPropagation(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),

package/dist/esm/components/TableHeaderRow.js

@@ -2,20 +2,19 @@ import { Table } from '@equinor/eds-core-react';
 import { TableHeaderCell } from './TableHeaderCell.js';
 import { jsx } from 'react/jsx-runtime';
 
-function TableHeaderRow(_ref) {
-  var headerGroup = _ref.headerGroup,
-    columnResizeMode = _ref.columnResizeMode,
-    deltaOffset = _ref.deltaOffset,
-    table = _ref.table;
+function TableHeaderRow({
+  headerGroup,
+  columnResizeMode,
+  deltaOffset,
+  table
+}) {
   return /*#__PURE__*/jsx(Table.Row, {
-    children: headerGroup.headers.map(function (header) {
-      return /*#__PURE__*/jsx(TableHeaderCell, {
-        header: header,
-        table: table,
-        columnResizeMode: columnResizeMode,
-        deltaOffset: deltaOffset
-      }, header.id);
-    })
+    children: headerGroup.headers.map(header => /*#__PURE__*/jsx(TableHeaderCell, {
+      header: header,
+      table: table,
+      columnResizeMode: columnResizeMode,
+      deltaOffset: deltaOffset
+    }, header.id))
   });
 }
 

package/dist/esm/components/TableRow.js

@@ -1,29 +1,33 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { Table } from '@equinor/eds-core-react';
 import { TableBodyCell } from './TableBodyCell.js';
 import { useTableContext } from '../EdsDataGridContext.js';
+import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-function TableRow(_ref) {
-  var _rowStyle;
-  var row = _ref.row;
-  var _useTableContext = useTableContext(),
-    rowClass = _useTableContext.rowClass,
-    rowStyle = _useTableContext.rowStyle;
-  return /*#__PURE__*/jsx(Table.Row, {
-    style: _objectSpread({
-      cursor: row.getCanSelect() ? 'pointer' : 'inherit'
-    }, (_rowStyle = rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle(row)) !== null && _rowStyle !== void 0 ? _rowStyle : {}),
-    className: "".concat(row.getIsSelected() ? 'selected' : '', " ").concat(rowClass === null || rowClass === void 0 ? void 0 : rowClass(row)),
-    onClick: function onClick() {
-      return row.getCanSelect() ? row.toggleSelected() : null;
+function TableRow({
+  row
+}) {
+  const {
+    rowClass,
+    rowStyle
+  } = useTableContext();
+  return /*#__PURE__*/jsx(StyledTableRow, {
+    style: {
+      cursor: row.getCanSelect() ? 'pointer' : 'inherit',
+      ...(rowStyle?.(row) ?? {})
     },
-    children: row.getVisibleCells().map(function (cell) {
-      return /*#__PURE__*/jsx(TableBodyCell, {
-        cell: cell
-      }, cell.id);
-    })
+    className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
+    onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
+    children: row.getVisibleCells().map(cell => /*#__PURE__*/jsx(TableBodyCell, {
+      cell: cell
+    }, cell.id))
   });
 }
 
+// Neccessary to have this attribute as class to prevent overriding hover color
+const StyledTableRow = styled(Table.Row).withConfig({
+  displayName: "TableRow__StyledTableRow",
+  componentId: "sc-1vjfq5p-0"
+})(["background-color:inherit;"]);
+
 export { TableRow };

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, height, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+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, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridProps.d.ts

@@ -1,5 +1,6 @@
-import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, OnChangeFn, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
-import { CSSProperties, ReactElement } from 'react';
+import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { CSSProperties, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
     /**
      * The rows to display in the table
@@ -57,14 +58,32 @@ type BaseProps<T> = {
     scrollbarHorizontal?: boolean;
     /**
      * Width of the table. Only takes effect if {@link scrollbarHorizontal} is true.
+     *
+     * No suffix (like `px` or `rem`) equals to `px`.
      * @default 800
      */
-    width?: number;
+    width?: string | number;
+    /**
+     * Min width of the table element.
+     *
+     * @example minWidth: 800
+     * @default none
+     */
+    minWidth?: string | number;
     /**
      * Height of the table.
+     *
+     * No suffix (like `px` or `rem`) equals to `px`.
      * @default none
      */
-    height?: number;
+    height?: string | number;
+    /**
+     * This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+     * @example getRowId: row => row.userId
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#getrowid)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
+     */
+    getRowId?: TableOptions<T>['getRowId'];
 };
 type StyleProps<T> = {
     /**
@@ -163,7 +182,10 @@ type SortProps = {
 type ColumnProps = {
     columnPinState?: ColumnPinningState;
 };
-export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & {
+type RefProps = {
+    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & {
     /**
      * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
      * @default undefined

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './EdsDataGrid';
 export * from './EdsDataGridProps';
+export * from './types';

package/dist/types/types.d.ts

@@ -0,0 +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, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.2.0",
+  "version": "0.3.0-rc",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -16,15 +16,15 @@
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2"
+    "styled-components": ">=4.2",
+    "@equinor/eds-core-react": "^0.35.1"
   },
   "dependencies": {
     "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "@equinor/eds-core-react": "^0.35.0",
-    "@equinor/eds-icons": "^0.20.0",
-    "@equinor/eds-utils": "^0.8.3",
-    "@equinor/eds-tokens": "0.9.2"
+    "@tanstack/react-virtual": "^3.0.1",
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "^0.8.3"
   },
   "devDependencies": {
     "@mdx-js/react": "2.3.0",
@@ -92,7 +92,6 @@
     "pnpm": ">=4",
     "node": ">=10.0.0"
   },
-  "browserslist": "defaults, not IE 11",
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.spec.json && jest",