@equinor/eds-data-grid-react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Equinor ASA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# EDS Data Grid
+
+This component is the result of a contribution by MSS in collaboration with the EDS Core Team.

package/dist/esm/EdsDataGrid.js

@@ -0,0 +1,345 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { useEds, Table, Pagination } from '@equinor/eds-core-react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { TableHeaderRow } from './components/TableHeaderRow.js';
+import { TableRow } from './components/TableRow.js';
+import { TableProvider } from './EdsDataGridContext.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function EdsDataGrid(_ref) {
+  var rows = _ref.rows,
+    columns = _ref.columns,
+    columnResizeMode = _ref.columnResizeMode,
+    pageSize = _ref.pageSize,
+    rowSelection = _ref.rowSelection,
+    selectedRows = _ref.selectedRows,
+    enableColumnFiltering = _ref.enableColumnFiltering,
+    debug = _ref.debug,
+    enablePagination = _ref.enablePagination,
+    enableSorting = _ref.enableSorting,
+    stickyHeader = _ref.stickyHeader,
+    onSelectRow = _ref.onSelectRow,
+    caption = _ref.caption,
+    enableVirtual = _ref.enableVirtual,
+    virtualHeight = _ref.virtualHeight,
+    columnVisibility = _ref.columnVisibility,
+    columnVisibilityChange = _ref.columnVisibilityChange,
+    emptyMessage = _ref.emptyMessage,
+    columnOrder = _ref.columnOrder,
+    cellClass = _ref.cellClass,
+    cellStyle = _ref.cellStyle,
+    rowClass = _ref.rowClass,
+    rowStyle = _ref.rowStyle,
+    headerClass = _ref.headerClass,
+    headerStyle = _ref.headerStyle;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    sorting = _useState2[0],
+    setSorting = _useState2[1];
+  var _useState3 = useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selection = _useState4[0],
+    setSelection = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    columnFilters = _useState6[0],
+    setColumnFilters = _useState6[1];
+  var _useState7 = useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    visible = _useState8[0],
+    setVisible = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    globalFilter = _useState10[0],
+    setGlobalFilter = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    columnOrderState = _useState12[0],
+    setColumnOrderState = _useState12[1];
+  var _useState13 = useState({
+      pageIndex: 0,
+      pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    page = _useState14[0],
+    setPage = _useState14[1];
+  useEffect(function () {
+    setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
+  }, [columnVisibility, setVisible]);
+  useEffect(function () {
+    setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
+  }, [selectedRows]);
+
+  /**
+   * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
+   */
+  var _columns = useMemo(function () {
+    return columns.map(function (column) {
+      if (column.filterFn || column.enableColumnFilter === false) {
+        return column;
+      }
+      /* istanbul ignore next */
+      return _objectSpread(_objectSpread({}, column), {}, {
+        filterFn: function filterFn(row, columnId, filterValue) {
+          var _row$getValue;
+          if (debug) {
+            console.log('filterFn', row, columnId, filterValue);
+          }
+          if (!filterValue || (Array.isArray(filterValue) || typeof filterValue === 'string') && filterValue.length === 0) {
+            return true;
+          }
+          var value = (_row$getValue = row.getValue(columnId)) !== null && _row$getValue !== void 0 ? _row$getValue : 'NULL_OR_UNDEFINED';
+          if (Array.isArray(filterValue)) {
+            var numeric = filterValue.some(function (v) {
+              return typeof v === 'number';
+            });
+            if (numeric) {
+              var _ref2 = filterValue,
+                _ref3 = _slicedToArray(_ref2, 2),
+                start = _ref3[0],
+                end = _ref3[1];
+              return value >= (isNaN(start) ? 0 : start) && value <= (!end || isNaN(end) ? Infinity : end);
+            } else {
+              var validFilterValue = filterValue.filter(function (v) {
+                return !!v;
+              });
+              if (validFilterValue.length === 0) return true;
+              return filterValue.includes(value);
+            }
+          }
+          return value === filterValue;
+        }
+      });
+    });
+  }, [debug, columns]);
+
+  /**
+   * Set up default table options
+   */
+  var options = {
+    data: rows,
+    columns: _columns,
+    columnResizeMode: columnResizeMode,
+    state: {
+      sorting: sorting,
+      rowSelection: selection,
+      columnOrder: columnOrderState
+    },
+    onSortingChange: setSorting,
+    enableColumnFilters: !!enableColumnFiltering,
+    enableFilters: !!enableColumnFiltering,
+    enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
+    enableColumnResizing: !!columnResizeMode,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    debugTable: debug,
+    debugHeaders: debug,
+    debugColumns: debug,
+    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false
+  };
+  useEffect(function () {
+    if (columnOrder && columnOrder.length > 0) {
+      setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
+    }
+  }, [columnOrder]);
+
+  /**
+   * Set up handlers for rowSelection
+   */
+  if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
+    options.onRowSelectionChange = function (updaterOrValue) {
+      if (onSelectRow) {
+        onSelectRow(updaterOrValue);
+      }
+      setSelection(updaterOrValue);
+    };
+  }
+
+  /**
+   * Set up config for column filtering
+   */
+  if (enableColumnFiltering) {
+    options.state.columnFilters = columnFilters;
+    options.state.globalFilter = globalFilter;
+    options.onColumnFiltersChange = setColumnFilters;
+    options.onGlobalFilterChange = setGlobalFilter;
+    options.getFacetedRowModel = getFacetedRowModel();
+    options.getFacetedUniqueValues = getFacetedUniqueValues();
+    options.getFacetedMinMaxValues = getFacetedMinMaxValues();
+    options.getFilteredRowModel = getFilteredRowModel();
+  }
+
+  /**
+   * Set up config for pagination
+   */
+  if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
+    options.state.pagination = page;
+    options.getPaginationRowModel = getPaginationRowModel();
+  }
+
+  /**
+   * Set up config to handle column visibility controls
+   */
+  if (columnVisibility) {
+    options.state.columnVisibility = visible;
+    options.onColumnVisibilityChange = function (vis) {
+      var updated;
+      if (typeof vis === 'function') {
+        updated = vis(visible);
+      } else {
+        updated = vis;
+      }
+      if (columnVisibilityChange) columnVisibilityChange(updated);
+      setVisible(updated);
+    };
+  }
+  useEffect(function () {
+    setPage(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
+      });
+    });
+  }, [pageSize]);
+  var table = useReactTable(options);
+  var parentRefStyle = {};
+
+  /**
+   * Style the parent container to enable virtualization.
+   * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
+   */
+  if (enableVirtual) {
+    parentRefStyle = {
+      height: virtualHeight !== null && virtualHeight !== void 0 ? virtualHeight : 500,
+      overflow: 'auto',
+      position: 'relative'
+    };
+  }
+  var parentRef = useRef(null);
+
+  /**
+   * Virtualization setup
+   */
+  var _useEds = useEds(),
+    density = _useEds.density;
+  var estimateSize = useCallback(function () {
+    return density === 'compact' ? 32 : 48;
+  }, [density]);
+  var virtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: function getScrollElement() {
+      return parentRef.current;
+    },
+    estimateSize: estimateSize
+  });
+  var virtualRows = virtualizer.getVirtualItems();
+  var paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+  var paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+
+  // These classes are primarily used to allow for feature-detection in the test-suite
+  var classList = {
+    'sticky-header': !!stickyHeader,
+    virtual: !!enableVirtual,
+    paging: !!enablePagination
+  };
+  return /*#__PURE__*/jsxs(TableProvider, {
+    cellClass: cellClass,
+    cellStyle: cellStyle,
+    rowClass: rowClass,
+    rowStyle: rowStyle,
+    headerClass: headerClass,
+    headerStyle: headerStyle,
+    table: table,
+    enableSorting: !!enableSorting,
+    enableColumnFiltering: !!enableColumnFiltering,
+    stickyHeader: !!stickyHeader,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "table-wrapper",
+      style: parentRefStyle,
+      ref: parentRef,
+      children: [/*#__PURE__*/jsxs(Table, {
+        className: Object.entries(classList).filter(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+            k = _ref5[1];
+          return k;
+        }).map(function (_ref6) {
+          var _ref7 = _slicedToArray(_ref6, 1),
+            k = _ref7[0];
+          return k;
+        }).join(' '),
+        style: {
+          width: table.getTotalSize()
+        },
+        children: [caption && /*#__PURE__*/jsx(Table.Caption, {
+          children: caption
+        }), /*#__PURE__*/jsx(Table.Head, {
+          sticky: stickyHeader,
+          children: table.getHeaderGroups().map(function (headerGroup) {
+            return /*#__PURE__*/jsx(TableHeaderRow, {
+              table: table,
+              headerGroup: headerGroup,
+              columnResizeMode: columnResizeMode,
+              deltaOffset: table.getState().columnSizingInfo.deltaOffset
+            }, headerGroup.id);
+          })
+        }), /*#__PURE__*/jsxs(Table.Body, {
+          children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsx(Table.Row, {
+            children: /*#__PURE__*/jsx(Table.Cell, {
+              colSpan: table.getHeaderGroups().length,
+              children: emptyMessage
+            })
+          }), enableVirtual && /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Table.Row, {
+              "data-testid": "virtual-padding-top",
+              className: 'virtual-padding-top',
+              children: /*#__PURE__*/jsx(Table.Cell, {
+                style: {
+                  height: "".concat(paddingTop, "px")
+                }
+              })
+            }), virtualRows.map(function (row) {
+              return /*#__PURE__*/jsx(TableRow, {
+                row: table.getRowModel().rows[row.index]
+              }, row.index);
+            }), /*#__PURE__*/jsx(Table.Row, {
+              "data-testid": "virtual-padding-bottom",
+              className: 'virtual-padding-bottom',
+              children: /*#__PURE__*/jsx(Table.Cell, {
+                style: {
+                  height: "".concat(paddingBottom, "px")
+                }
+              })
+            })]
+          }), !enableVirtual && table.getRowModel().rows.map(function (row) {
+            return /*#__PURE__*/jsx(TableRow, {
+              row: row
+            }, row.id);
+          })]
+        })]
+      }), enablePagination && /*#__PURE__*/jsx("div", {
+        style: {
+          maxWidth: "".concat(table.getTotalSize(), "px")
+        },
+        children: /*#__PURE__*/jsx(Pagination, {
+          totalItems: table.getFilteredRowModel().rows.length,
+          withItemIndicator: true,
+          itemsPerPage: page.pageSize,
+          onChange: function onChange(e, p) {
+            return setPage(function (s) {
+              return _objectSpread(_objectSpread({}, s), {}, {
+                pageIndex: p - 1
+              });
+            });
+          },
+          defaultPage: 1
+        })
+      })]
+    }), debug && enableVirtual && /*#__PURE__*/jsxs("span", {
+      children: ["Visible items: ", virtualizer.range.startIndex, " -", ' ', virtualizer.range.endIndex, " / ", rows.length]
+    })]
+  });
+}
+
+export { EdsDataGrid };

package/dist/esm/EdsDataGridContext.js

@@ -0,0 +1,25 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { createContext, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children"];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var EdsDataGridContext = /*#__PURE__*/createContext({
+  enableSorting: false,
+  stickyHeader: false,
+  enableColumnFiltering: false,
+  table: null
+});
+function TableProvider(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(EdsDataGridContext.Provider, {
+    value: props,
+    children: children
+  });
+}
+var useTableContext = function useTableContext() {
+  return useContext(EdsDataGridContext);
+};
+
+export { EdsDataGridContext, TableProvider, useTableContext };

package/dist/esm/components/DebouncedInput.js

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useState, useEffect } from 'react';
+import { EdsProvider, Input, Autocomplete } from '@equinor/eds-core-react';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["value", "values", "onChange", "debounce"];
+// File ignored, as relevant actions are covered via Filter.test.tsx
+function DebouncedInput(_ref) {
+  var _props$placeholder, _props$placeholder2;
+  var initialValue = _ref.value,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    _ref$debounce = _ref.debounce,
+    debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  useEffect(function () {
+    setValue(initialValue);
+  }, [initialValue]);
+  useEffect(function () {
+    var timeout = setTimeout(function () {
+      onChange(value);
+    }, debounce);
+    return function () {
+      return clearTimeout(timeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  return /*#__PURE__*/jsx(EdsProvider, {
+    density: "compact",
+    children: props.type === 'number' ? /*#__PURE__*/jsx(Input, {
+      type: 'number',
+      placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Search',
+      value: value,
+      onChange: function onChange(e) {
+        return setValue(e.target.valueAsNumber);
+      }
+    }) : /*#__PURE__*/jsx(Autocomplete, {
+      options: values,
+      multiple: true,
+      optionComponent: function optionComponent(opt) {
+        return opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt;
+      },
+      "data-testid": 'autocomplete'
+      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+      // @ts-ignore
+      ,
+      label: null,
+      placeholder: (_props$placeholder2 = props.placeholder) !== null && _props$placeholder2 !== void 0 ? _props$placeholder2 : 'Search',
+      onOptionsChange: function onOptionsChange(c) {
+        return setValue(c.selectedItems);
+      }
+    })
+  });
+}
+
+export { DebouncedInput };

package/dist/esm/components/Filter.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { DebouncedInput } from './DebouncedInput.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/* istanbul ignore file */
+
+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 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';
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [column.getFacetedUniqueValues()]);
+  return typeof firstValue === 'number' ? /*#__PURE__*/jsxs("div", {
+    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], ")") : '')
+    }), /*#__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], ")") : '')
+    })]
+  }) : /*#__PURE__*/jsx(DebouncedInput, {
+    type: "text",
+    values: sortedUniqueValues,
+    value: columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : '',
+    onChange: function onChange(value) {
+      return column.setFilterValue(value);
+    },
+    placeholder: "Search (".concat(column.getFacetedUniqueValues().size, ")"),
+    list: column.id + 'list'
+  });
+}
+
+export { Filter };

package/dist/esm/components/TableBodyCell.js

@@ -0,0 +1,32 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { flexRender } from '@tanstack/react-table';
+import { Table, Typography } from '@equinor/eds-core-react';
+import { useTableContext } from '../EdsDataGridContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+function TableBodyCell(_ref) {
+  var _cellStyle;
+  var cell = _ref.cell;
+  var _useTableContext = useTableContext(),
+    cellClass = _useTableContext.cellClass,
+    cellStyle = _useTableContext.cellStyle;
+  return /*#__PURE__*/jsx(Table.Cell, {
+    className: cellClass ? cellClass(cell.row, cell.column.id) : '',
+    key: cell.id,
+    style: _objectSpread({
+      width: cell.column.getSize(),
+      maxWidth: cell.column.getSize(),
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }, (_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())
+    })
+  });
+}
+
+export { TableBodyCell };

package/dist/esm/components/TableHeaderCell.js

@@ -0,0 +1,97 @@
+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';
+import { useTableContext } from '../EdsDataGridContext.js';
+import { Filter } from './Filter.js';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var getSortLabel = function getSortLabel(sorted) {
+  if (sorted) {
+    return "".concat(sorted, "ending");
+  }
+  return 'none';
+};
+var Resizer = styled.div.withConfig({
+  displayName: "TableHeaderCell__Resizer",
+  componentId: "sc-1n0j3v0-0"
+})(["transform:", ";opacity:", ";position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;"], function (props) {
+  return props.columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
+}, function (props) {
+  return props.isResizing ? 1 : 0;
+});
+var Cell = styled(Table.Cell).withConfig({
+  displayName: "TableHeaderCell__Cell",
+  componentId: "sc-1n0j3v0-1"
+})(["font-weight:bold;height:30px;position:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
+  return p.sticky ? 'sticky' : 'relative';
+}, Resizer, 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;
+  return header.isPlaceholder ? /*#__PURE__*/jsx(Cell, {
+    sticky: ctx.stickyHeader,
+    className: ctx.headerClass ? ctx.headerClass(header.column) : '',
+    style: ctx.headerStyle ? ctx.headerStyle(header.column) : {},
+    "aria-hidden": true
+  }) : /*#__PURE__*/jsxs(Cell, {
+    sticky: ctx.stickyHeader,
+    className: ctx.headerClass ? ctx.headerClass(header.column) : '',
+    "aria-sort": getSortLabel(header.column.getIsSorted()),
+    onClick: header.column.getToggleSortingHandler(),
+    key: header.id,
+    colSpan: header.colSpan,
+    style: _objectSpread({
+      width: header.getSize(),
+      verticalAlign: ctx.enableColumnFiltering ? 'baseline' : 'middle'
+    }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+    children: [/*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/jsx("span", {
+          className: "table-header-cell-label",
+          children: flexRender(header.column.columnDef.header, header.getContext())
+        }), header.column.getCanFilter() ?
+        /*#__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: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: /*#__PURE__*/jsx(Filter, {
+            column: header.column,
+            table: table
+          })
+        }) : null]
+      }), (_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]
+    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      onMouseDown: header.getResizeHandler(),
+      onTouchStart: header.getResizeHandler(),
+      isResizing: header.column.getIsResizing(),
+      columnResizeMode: columnResizeMode,
+      className: 'resize-handle',
+      "data-testid": 'resize-handle'
+    })]
+  });
+}
+
+export { TableHeaderCell };

package/dist/esm/components/TableHeaderRow.js

@@ -0,0 +1,22 @@
+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;
+  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);
+    })
+  });
+}
+
+export { TableHeaderRow };

package/dist/esm/components/TableRow.js

@@ -0,0 +1,29 @@
+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 { 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;
+    },
+    children: row.getVisibleCells().map(function (cell) {
+      return /*#__PURE__*/jsx(TableBodyCell, {
+        cell: cell
+      }, cell.id);
+    })
+  });
+}
+
+export { TableRow };

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { EdsDataGrid } from './EdsDataGrid.js';

package/dist/types/EdsDataGrid.d.ts

@@ -0,0 +1,133 @@
+import { Column, ColumnDef, ColumnResizeMode, OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
+import { CSSProperties, ReactElement } from 'react';
+export type EdsDataGridProps<T> = {
+    /**
+     * The rows to display in the table
+     */
+    rows: Array<T>;
+    /**
+     * Definition of the columns to display in the table
+     */
+    columns: ColumnDef<T>[];
+    /**
+     * 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
+     */
+    debug?: boolean;
+    /**
+     * Enable sorting.
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * Make the table header sticky
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Element to display in Table.Caption
+     * @default undefined
+     */
+    caption?: ReactElement;
+    /**
+     * Whether to enable column filtering, adding inputs to the header cells
+     * Individual columns can be configured to disable filtering
+     * @default false
+     */
+    enableColumnFiltering?: boolean;
+    /**
+     * Whether pagination should be enabled.
+     * @default false
+     */
+    enablePagination?: boolean;
+    /**
+     * The number of rows per page
+     * Only used if enablePagination is true
+     * @default 25
+     */
+    pageSize?: number;
+    /**
+     * The message to display when there are no rows
+     * @default undefined
+     */
+    emptyMessage?: string;
+    /**
+     * The currently selected rows
+     * @default {}
+     */
+    selectedRows?: Record<string | number, boolean>;
+    /**
+     * Whether to enable virtualization. This will render only the visible rows currently in view.
+     * @default false
+     */
+    enableVirtual?: boolean;
+    /**
+     * The height of the virtualized table in pixels.
+     * @default 500
+     */
+    virtualHeight?: number;
+    /**
+     * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
+     * @default undefined
+     */
+    columnVisibility?: Record<string, boolean>;
+    /**
+     * Callback for when column visibility changes. Only called if columnVisibility is set.
+     * @param columnVisibility
+     */
+    columnVisibilityChange?: (columnVisibility: Record<string, boolean>) => void;
+    /**
+     * An array of the columnIds in the order they should be displayed.
+     */
+    columnOrder?: Array<string>;
+    /**
+     * Function that can be used to set custom css on a cell
+     * @param row
+     * @param columnId
+     */
+    cellStyle?: (row: Row<T>, columnId: string) => CSSProperties;
+    /**
+     * Function that can be used to set a custom class on a cell
+     * @param row
+     * @param columnId
+     * @returns string with list of classes
+     */
+    cellClass?: (row: Row<T>, columnId: string) => string;
+    /**
+     * Function that can be used to set a custom class on a row
+     * @param row
+     * @returns string with list of classes
+     */
+    rowClass?: (row: Row<T>) => string;
+    /**
+     * Function that can be used to set custom css on a row
+     * @param row
+     */
+    rowStyle?: (row: Row<T>) => CSSProperties;
+    /**
+     * Function that can be used to set custom classes on a header cell
+     * @param column
+     */
+    headerClass?: (column: Column<T>) => string;
+    /**
+     * Function that can be used to set custom styles on a header cell
+     * @param column
+     */
+    headerStyle?: (column: Column<T>) => CSSProperties;
+};
+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, }: EdsDataGridProps<T>): JSX.Element;

package/dist/types/EdsDataGridContext.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactElement } from 'react';
+import { Column, Row, Table as TanStackTable } from '@tanstack/react-table';
+type Context<T> = {
+    enableSorting: boolean;
+    stickyHeader: boolean;
+    enableColumnFiltering: boolean;
+    table: TanStackTable<T> | null;
+    cellClass?: (row: Row<T>, columnId: string) => string;
+    rowClass?: (row: Row<T>) => string;
+    cellStyle?: (row: Row<T>, columnId: string) => CSSProperties;
+    rowStyle?: (row: Row<T>) => CSSProperties;
+    headerClass?: (column: Column<T>) => string;
+    headerStyle?: (column: Column<T>) => CSSProperties;
+};
+export declare const EdsDataGridContext: import("react").Context<Context<any>>;
+export declare function TableProvider<T>({ children, ...props }: Context<T> & {
+    children: ReactElement | Array<ReactElement>;
+}): JSX.Element;
+export declare const useTableContext: () => Context<any>;
+export {};

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

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from 'react';
+type Value = string | number | Array<string | number>;
+export declare function DebouncedInput({ value: initialValue, values, onChange, debounce, ...props }: {
+    value: Value;
+    values: Array<string | number>;
+    onChange: (value: Value) => void;
+    debounce?: number;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { Column, Table as TanStackTable } from '@tanstack/react-table';
+type FilterProps<T = unknown> = {
+    column: Column<T>;
+    table: TanStackTable<T>;
+};
+export declare function Filter<T = unknown>({ column, table }: FilterProps<T>): JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,9 @@
+import { ColumnResizeMode, Header, Table as TanStackTable } from '@tanstack/react-table';
+type Props<T> = {
+    header: Header<T, unknown>;
+    columnResizeMode: ColumnResizeMode | null | undefined;
+    deltaOffset: number | null;
+    table: TanStackTable<T>;
+};
+export declare function TableHeaderCell<T>({ header, columnResizeMode }: Props<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { ColumnResizeMode, HeaderGroup, Table as TanStackTable } from '@tanstack/react-table';
+type Props<T> = {
+    headerGroup: HeaderGroup<T>;
+    columnResizeMode?: ColumnResizeMode | null;
+    deltaOffset: number | null;
+    table: TanStackTable<T>;
+};
+export declare function TableHeaderRow<T>({ headerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { Row } from '@tanstack/react-table';
+import { HTMLAttributes } from 'react';
+type Props<T> = {
+    row: Row<T>;
+} & HTMLAttributes<HTMLTableRowElement>;
+export declare function TableRow<T>({ row }: Props<T>): JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './EdsDataGrid';

package/dist/types/tests/columns.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDef } from '@tanstack/react-table';
+type Data = {
+    qty: number;
+    cargoId: string;
+    status: string;
+    parcels: Array<string>;
+    carrier: string;
+};
+export declare const columns: Array<ColumnDef<Data>>;
+export {};

package/dist/types/tests/data.d.ts

@@ -0,0 +1,8 @@
+export type Data = {
+    qty: number;
+    cargoId: string;
+    status: string;
+    parcels: Array<string>;
+    carrier: string;
+};
+export declare const data: Data[];

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@equinor/eds-data-grid-react",
+  "version": "0.0.1",
+  "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
+  "license": "MIT",
+  "exports": "./dist/esm/index.js",
+  "type": "module",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "author": {
+    "name": "EDS Core Team",
+    "email": "fg_eds@equinor.com"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
+    "styled-components": ">=4.2"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.8.5",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
+    "@equinor/eds-core-react": "0.32.0",
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-icons": "0.19.2",
+    "@equinor/eds-utils": "0.8.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.5",
+    "ts-jest": "29.0.5",
+    "ts-node": "10.9.1",
+    "@types/node": "18.14.2",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.10",
+    "@types/styled-components": "^5.1.26",
+    "rollup": "^3.25.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.0.11",
+    "styled-components": "5.3.9",
+    "@mdx-js/react": "1.6.22",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-docs": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/blocks": "^7.0.11",
+    "@storybook/builder-vite": "^7.0.11",
+    "@storybook/client-api": "^7.0.11",
+    "@storybook/react": "^7.0.11",
+    "@storybook/react-vite": "^7.0.11",
+    "@testing-library/dom": "^9.2.0",
+    "@types/ramda": "^0.28.24",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-styled-components": "^2.1.1",
+    "jest-styled-components": "^7.1.1",
+    "js-file-download": "^0.4.12",
+    "postcss": "^8.4.21",
+    "ramda": "^0.29.0",
+    "react-hook-form": "^7.43.9",
+    "remark-gfm": "^3.0.1",
+    "tsc-watch": "^6.0.0"
+  },
+  "homepage": "https://eds.equinor.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/equinor/design-system",
+    "directory": "packages/eds-core-react"
+  },
+  "bugs": {
+    "url": "https://github.com/equinor/design-system/issues"
+  },
+  "keywords": [
+    "eds",
+    "design system",
+    "equinor",
+    "react",
+    "data grid"
+  ],
+  "engines": {
+    "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",
+    "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
+    "test:update-snapshots": "jest --updateSnapshot",
+    "storybook": "storybook dev -p 9000 --ci",
+    "build:storybook": "storybook build -o storybook-build",
+    "types": "tsc -p tsconfig.build.json"
+  }
+}