@equinor/eds-data-grid-react 0.1.0-beta.3 → 0.3.0-rc

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

@@ -1,443 +1,549 @@
 'use strict';
 
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var reactTable = require('@tanstack/react-table');
 var edsCoreReact = require('@equinor/eds-core-react');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 var edsIcons = require('@equinor/eds-icons');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
-var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _objectSpread__default = /*#__PURE__*/_interopDefault(_objectSpread);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _excluded$1 = ["children"];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var EdsDataGridContext = /*#__PURE__*/react.createContext({
+const EdsDataGridContext = /*#__PURE__*/react.createContext({
   enableSorting: false,
   stickyHeader: false,
   enableColumnFiltering: false,
   table: null
 });
-function TableProvider(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties__default.default(_ref, _excluded$1);
+function TableProvider({
+  children,
+  ...props
+}) {
   return /*#__PURE__*/jsxRuntime.jsx(EdsDataGridContext.Provider, {
     value: props,
     children: children
   });
 }
-var useTableContext = function useTableContext() {
-  return react.useContext(EdsDataGridContext);
-};
+const useTableContext = () => react.useContext(EdsDataGridContext);
 
-var _excluded = ["value", "values", "onChange", "debounce"];
+/* istanbul ignore file */
 // 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__default.default(_ref, _excluded);
-  var _useState = react.useState(initialValue),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  react.useEffect(function () {
+function DebouncedInput({
+  value: initialValue,
+  values,
+  onChange,
+  debounce = 500,
+  label,
+  ...props
+}) {
+  const [value, setValue] = react.useState(initialValue);
+  react.useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
-  react.useEffect(function () {
-    var timeout = setTimeout(function () {
+  react.useEffect(() => {
+    const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
-    return function () {
-      return clearTimeout(timeout);
-    };
+    return () => clearTimeout(timeout);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.EdsProvider, {
-    density: "compact",
-    children: props.type === 'number' ? /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.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__*/jsxRuntime.jsx(edsCoreReact.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);
-      }
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.type === 'number' ? /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.InputWrapper, {
+      label: props.placeholder,
+      children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Input, {
+        type: 'number',
+        placeholder: '0',
+        value: value,
+        onChange: e => setValue(e.target.valueAsNumber)
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Autocomplete, {
+        options: values,
+        autoWidth: true,
+        multiple: true,
+        optionComponent: opt => opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt,
+        "data-testid": 'autocomplete'
+        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
+        label: `Select ${label ?? ''}`,
+        placeholder: props.placeholder ?? 'Search',
+        disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
+        selectedOptions: value,
+        onOptionsChange: c => setValue(c.selectedItems),
+        multiline: true
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          marginTop: '8px'
+        },
+        children: value.map(v => /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Chip, {
+          title: v,
+          onKeyDownCapture: event => {
+            if (['Backspace', 'Delete'].includes(event.key)) {
+              onChange(value.filter(item => item !== v));
+            }
+          },
+          style: {
+            margin: '4px'
+          },
+          onDelete: () => onChange(value.filter(item => item !== v)),
+          children: [v.slice(0, 20), v.length > 20 ? '...' : '']
+        }, v))
+      })]
     })
   });
 }
 
 /* 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 = react.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 NumberContainer = styled__default.default.div.withConfig({
+  displayName: "Filter__NumberContainer",
+  componentId: "sc-ytpdpw-0"
+})(["display:grid;grid-template-columns:80px 80px;grid-column-gap:32px;"]);
+function Filter({
+  column,
+  table
+}) {
+  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
+  const [open, setOpen] = react.useState(false);
+  const filterIconRef = react.useRef();
+  const togglePopover = event => {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  const columnText = react.useMemo(() => {
+    let header;
+    try {
+      if (typeof column.columnDef.header === 'function') {
+        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 {
+      /*em all*/
+    }
+    return header;
+  }, [column.columnDef]);
+  const columnFilterValue = column.getFilterValue();
+  const sortedUniqueValues = react.useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [column.getFacetedUniqueValues()]);
-  return typeof firstValue === 'number' ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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];
-        });
+  const hasActiveFilters = value => {
+    if (Array.isArray(value)) {
+      if (typeof firstValue === 'number') {
+        return value.some(v => !isNaN(v) && !!v);
+      } else {
+        return value.filter(v => !!v).length > 0;
+      }
+    }
+    return value;
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Button, {
+      "aria-haspopup": true,
+      "aria-expanded": open,
+      "data-testid": 'open-filters',
+      ref: filterIconRef,
+      onClick: togglePopover,
+      variant: 'ghost_icon',
+      children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
+        color: edsTokens.tokens.colors.text.static_icons__default.hex,
+        data: hasActiveFilters(columnFilterValue) ? edsIcons.filter_alt_active : edsIcons.filter_alt
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Popover, {
+      style: {
+        width: typeof firstValue === 'number' ? '220px' : '340px'
       },
-      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], ")") : '')
+      anchorEl: filterIconRef.current,
+      open: open,
+      onClose: () => setOpen(false),
+      children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Popover.Content, {
+        style: {
+          width: typeof firstValue === 'number' ? '180px' : '310px'
+        },
+        children: typeof firstValue === 'number' ? /*#__PURE__*/jsxRuntime.jsxs(NumberContainer, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+            type: "number",
+            values: sortedUniqueValues,
+            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+            value: columnFilterValue?.[0] ?? '',
+            onChange: value => column.setFilterValue(old => [value, old?.[1]]),
+            placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
+          }), /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+            type: "number",
+            values: sortedUniqueValues,
+            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+            value: columnFilterValue?.[1] ?? '',
+            onChange: value => column.setFilterValue(old => [old?.[0], value]),
+            placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
+          type: "text",
+          label: columnText,
+          values: sortedUniqueValues,
+          debounce: 100,
+          value: columnFilterValue ?? [],
+          onChange: value => column.setFilterValue(value),
+          placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
+          list: column.id + 'list'
+        })
+      })
     })]
-  }) : /*#__PURE__*/jsxRuntime.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'
   });
 }
 
-var getSortLabel = function getSortLabel(sorted) {
+const getSortLabel = sorted => {
   if (sorted) {
-    return "".concat(sorted, "ending");
+    return `${sorted}ending`;
   }
   return 'none';
 };
-var Resizer = styled__default.default.div.withConfig({
-  displayName: "TableHeaderCell__Resizer",
+const ResizeInner = styled__default.default.div.withConfig({
+  displayName: "TableHeaderCell__ResizeInner",
   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__default.default(edsCoreReact.Table.Cell).withConfig({
-  displayName: "TableHeaderCell__Cell",
+})(["width:2px;opacity:0;height:100%;"]);
+const Resizer = styled__default.default.div.withConfig({
+  displayName: "TableHeaderCell__Resizer",
   componentId: "sc-1n0j3v0-1"
-})(["font-weight:bold;height:30px;position:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
-  return p.sticky ? 'sticky' : 'relative';
-}, Resizer, edsTokens.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;
+})(["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__default.default(edsCoreReact.Table.Cell).withConfig({
+  displayName: "TableHeaderCell__Cell",
+  componentId: "sc-1n0j3v0-2"
+})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+  if (p.$pinned) {
+    return `${p.$pinned}: ${p.$offset}px;`;
+  }
+  return '';
+}, p => {
+  if (p.$sticky && p.$pinned) return 'z-index: 13';
+  if (p.$sticky || p.$pinned) return 'z-index: 12';
+}, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
+function TableHeaderCell({
+  header,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = header.column.getIsPinned();
+  const offset = react.useMemo(() => {
+    if (!pinned) {
+      return null;
+    }
+    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
+  }, [pinned, header, table]);
   return header.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(Cell, {
-    sticky: ctx.stickyHeader,
+    $sticky: ctx.stickyHeader,
+    $offset: offset,
+    $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
-    style: ctx.headerStyle ? ctx.headerStyle(header.column) : {},
+    style: {
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxRuntime.jsxs(Cell, {
-    sticky: ctx.stickyHeader,
+    $sticky: ctx.stickyHeader,
+    $offset: offset,
+    $pinned: pinned,
     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__default.default({
+    style: {
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'baseline' : 'middle'
-    }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
           display: 'flex',
           flexDirection: 'column'
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
           className: "table-header-cell-label",
           children: reactTable.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
-        jsxRuntime.jsx("div", {
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(Filter, {
-            column: header.column,
-            table: table
-          })
-        }) : null]
-      }), (_asc$desc = {
+        })
+      }), {
         asc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
           data: edsIcons.arrow_up
         }),
         desc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
           data: edsIcons.arrow_down
         })
-      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
+      }[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
+      jsxRuntime.jsx("div", {
+        onClick: e => e.stopPropagation(),
+        children: /*#__PURE__*/jsxRuntime.jsx(Filter, {
+          column: header.column,
+          table: table
+        })
+      }) : null]
     }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
+      onClick: e => e.stopPropagation(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),
       $columnResizeMode: columnResizeMode,
       className: 'resize-handle',
-      "data-testid": 'resize-handle'
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
     })]
   });
 }
 
-function TableHeaderRow(_ref) {
-  var headerGroup = _ref.headerGroup,
-    columnResizeMode = _ref.columnResizeMode,
-    deltaOffset = _ref.deltaOffset,
-    table = _ref.table;
+function TableHeaderRow({
+  headerGroup,
+  columnResizeMode,
+  deltaOffset,
+  table
+}) {
   return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
-    children: headerGroup.headers.map(function (header) {
-      return /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
-        header: header,
-        table: table,
-        columnResizeMode: columnResizeMode,
-        deltaOffset: deltaOffset
-      }, header.id);
-    })
+    children: headerGroup.headers.map(header => /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
+      header: header,
+      table: table,
+      columnResizeMode: columnResizeMode,
+      deltaOffset: deltaOffset
+    }, header.id))
   });
 }
 
-function TableBodyCell(_ref) {
-  var _cellStyle;
-  var cell = _ref.cell;
-  var _useTableContext = useTableContext(),
-    cellClass = _useTableContext.cellClass,
-    cellStyle = _useTableContext.cellStyle;
-  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
+const StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
+  displayName: "TableBodyCell__StyledCell",
+  componentId: "sc-1gsd2k4-0"
+})(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
+  if (p.$pinned) {
+    return `${p.$pinned}: ${p.$offset}px;`;
+  }
+  return '';
+}, p => p.$pinned ? 11 : 'auto');
+function TableBodyCell({
+  cell
+}) {
+  const {
+    cellClass,
+    cellStyle,
+    table
+  } = useTableContext();
+  const pinned = cell.column.getIsPinned();
+  const pinnedOffset = react.useMemo(() => {
+    if (!pinned) {
+      return 0;
+    }
+    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__*/jsxRuntime.jsx(StyledCell, {
+    $pinned: pinned,
+    $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
     key: cell.id,
-    style: _objectSpread__default.default({
+    style: {
       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__*/jsxRuntime.jsx(edsCoreReact.Typography, {
-      as: "span",
-      group: "table",
-      variant: "cell_text",
-      children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-    })
+      ...(cellStyle?.(cell.row, cell.column.id) ?? {})
+    },
+    children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
   });
 }
 
-function TableRow(_ref) {
-  var _rowStyle;
-  var row = _ref.row;
-  var _useTableContext = useTableContext(),
-    rowClass = _useTableContext.rowClass,
-    rowStyle = _useTableContext.rowStyle;
-  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
-    style: _objectSpread__default.default({
-      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__*/jsxRuntime.jsx(StyledTableRow, {
+    style: {
+      cursor: row.getCanSelect() ? 'pointer' : 'inherit',
+      ...(rowStyle?.(row) ?? {})
     },
-    children: row.getVisibleCells().map(function (cell) {
-      return /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
-        cell: cell
-      }, cell.id);
-    })
+    className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
+    onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
+    children: row.getVisibleCells().map(cell => /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
+      cell: cell
+    }, cell.id))
   });
 }
 
-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 = react.useState([]),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    sorting = _useState2[0],
-    setSorting = _useState2[1];
-  var _useState3 = react.useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    selection = _useState4[0],
-    setSelection = _useState4[1];
-  var _useState5 = react.useState([]),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    columnFilters = _useState6[0],
-    setColumnFilters = _useState6[1];
-  var _useState7 = react.useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
-    _useState8 = _slicedToArray__default.default(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = react.useState(''),
-    _useState10 = _slicedToArray__default.default(_useState9, 2),
-    globalFilter = _useState10[0],
-    setGlobalFilter = _useState10[1];
-  var _useState11 = react.useState([]),
-    _useState12 = _slicedToArray__default.default(_useState11, 2),
-    columnOrderState = _useState12[0],
-    setColumnOrderState = _useState12[1];
-  var _useState13 = react.useState({
-      pageIndex: 0,
-      pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-    }),
-    _useState14 = _slicedToArray__default.default(_useState13, 2),
-    page = _useState14[0],
-    setPage = _useState14[1];
-  react.useEffect(function () {
-    setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
+// Neccessary to have this attribute as class to prevent overriding hover color
+const StyledTableRow = styled__default.default(edsCoreReact.Table.Row).withConfig({
+  displayName: "TableRow__StyledTableRow",
+  componentId: "sc-1vjfq5p-0"
+})(["background-color:inherit;"]);
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+function EdsDataGrid({
+  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
+}) {
+  const [sorting, setSorting] = react.useState(sortingState ?? []);
+  const [selection, setSelection] = react.useState(selectedRows ?? {});
+  const [columnPin, setColumnPin] = react.useState(columnPinState ?? {});
+  const [columnFilters, setColumnFilters] = react.useState([]);
+  const [visible, setVisible] = react.useState(columnVisibility ?? {});
+  const [globalFilter, setGlobalFilter] = react.useState('');
+  const [columnOrderState, setColumnOrderState] = react.useState([]);
+  const [page, setPage] = react.useState({
+    pageIndex: 0,
+    pageSize: pageSize ?? 25
+  });
+  react.useEffect(() => {
+    setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
-  react.useEffect(function () {
-    setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
+  react.useEffect(() => {
+    setColumnPin(s => columnPinState ?? s);
+  }, [columnPinState]);
+  react.useEffect(() => {
+    setSorting(sortingState);
+  }, [sortingState]);
+  react.useEffect(() => {
+    setSelection(selectedRows ?? {});
   }, [selectedRows]);
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
    */
-  var _columns = react.useMemo(function () {
-    return columns.map(function (column) {
+  const _columns = react.useMemo(() => {
+    return columns.map(column => {
       if (column.filterFn || column.enableColumnFilter === false) {
         return column;
       }
       /* istanbul ignore next */
-      return _objectSpread__default.default(_objectSpread__default.default({}, column), {}, {
-        filterFn: function filterFn(row, columnId, filterValue) {
-          var _row$getValue;
+      return {
+        ...column,
+        filterFn: (row, columnId, filterValue) => {
           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';
+          const value = row.getValue(columnId) ?? 'NULL_OR_UNDEFINED';
           if (Array.isArray(filterValue)) {
-            var numeric = filterValue.some(function (v) {
-              return typeof v === 'number';
-            });
+            const numeric = filterValue.some(v => typeof v === 'number');
             if (numeric) {
-              var _ref2 = filterValue,
-                _ref3 = _slicedToArray__default.default(_ref2, 2),
-                start = _ref3[0],
-                end = _ref3[1];
+              const [start, end] = filterValue;
               return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
             } else {
-              var validFilterValue = filterValue.filter(function (v) {
-                return !!v;
-              });
+              const validFilterValue = filterValue.filter(v => !!v);
               if (validFilterValue.length === 0) return true;
               return filterValue.includes(value);
             }
           }
           return value === filterValue;
         }
-      });
+      };
     });
   }, [debug, columns]);
 
   /**
    * Set up default table options
    */
-  var options = {
+  const options = {
     data: rows,
     columns: _columns,
+    defaultColumn: {
+      cell: context => {
+        return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
+          style: {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+          },
+          group: "table",
+          variant: "cell_text",
+          children: String(context.getValue() ?? '')
+        });
+      }
+    },
     columnResizeMode: columnResizeMode,
     state: {
-      sorting: sorting,
+      sorting,
+      columnPinning: columnPin,
       rowSelection: selection,
       columnOrder: columnOrderState
     },
-    onSortingChange: setSorting,
+    onSortingChange: changes => {
+      if (onSortingChange) {
+        onSortingChange(changes);
+      }
+      setSorting(changes);
+    },
     enableColumnFilters: !!enableColumnFiltering,
     enableFilters: !!enableColumnFiltering,
-    enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
+    enableSorting: enableSorting ?? false,
+    manualSorting: manualSorting ?? false,
     enableColumnResizing: !!columnResizeMode,
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false
+    enableRowSelection: rowSelection ?? false,
+    enableColumnPinning: true,
+    enablePinning: true,
+    getRowId
   };
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (columnOrder && columnOrder.length > 0) {
-      setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
+      setColumnOrderState(columnOrder ?? []);
     }
   }, [columnOrder]);
 
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
-    options.onRowSelectionChange = function (updaterOrValue) {
+  if (rowSelection ?? false) {
+    options.onRowSelectionChange = updaterOrValue => {
       if (onSelectRow) {
         onSelectRow(updaterOrValue);
       }
@@ -462,7 +568,7 @@ function EdsDataGrid(_ref) {
   /**
    * Set up config for pagination
    */
-  if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
+  if (enablePagination ?? false) {
     options.state.pagination = page;
     options.getPaginationRowModel = reactTable.getPaginationRowModel();
   }
@@ -472,8 +578,8 @@ function EdsDataGrid(_ref) {
    */
   if (columnVisibility) {
     options.state.columnVisibility = visible;
-    options.onColumnVisibilityChange = function (vis) {
-      var updated;
+    options.onColumnVisibilityChange = vis => {
+      let updated;
       if (typeof vis === 'function') {
         updated = vis(visible);
       } else {
@@ -483,15 +589,14 @@ function EdsDataGrid(_ref) {
       setVisible(updated);
     };
   }
-  react.useEffect(function () {
-    setPage(function (prev) {
-      return _objectSpread__default.default(_objectSpread__default.default({}, prev), {}, {
-        pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-      });
-    });
+  react.useEffect(() => {
+    setPage(prev => ({
+      ...prev,
+      pageSize: pageSize ?? 25
+    }));
   }, [pageSize]);
-  var table = reactTable.useReactTable(options);
-  var parentRefStyle = {};
+  const table = reactTable.useReactTable(options);
+  let parentRefStyle = {};
 
   /**
    * Style the parent container to enable virtualization.
@@ -499,34 +604,34 @@ function EdsDataGrid(_ref) {
    */
   if (enableVirtual) {
     parentRefStyle = {
-      height: virtualHeight !== null && virtualHeight !== void 0 ? virtualHeight : 500,
+      height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative'
     };
   }
-  var parentRef = react.useRef(null);
+  const parentRef = react.useRef(null);
 
   /**
    * Virtualization setup
    */
-  var _useEds = edsCoreReact.useEds(),
-    density = _useEds.density;
-  var estimateSize = react.useCallback(function () {
+  const {
+    density
+  } = edsCoreReact.useEds();
+  const estimateSize = react.useCallback(() => {
     return density === 'compact' ? 32 : 48;
   }, [density]);
-  var virtualizer = reactVirtual.useVirtualizer({
+  const virtualizer = reactVirtual.useVirtualizer({
     count: table.getRowModel().rows.length,
-    getScrollElement: function getScrollElement() {
-      return parentRef.current;
-    },
-    estimateSize: estimateSize
+    getScrollElement: () => parentRef.current,
+    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;
+  if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = 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;
 
   // These classes are primarily used to allow for feature-detection in the test-suite
-  var classList = {
+  const classList = {
     'sticky-header': !!stickyHeader,
     virtual: !!enableVirtual,
     paging: !!enablePagination
@@ -544,82 +649,82 @@ function EdsDataGrid(_ref) {
     stickyHeader: !!stickyHeader,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "table-wrapper",
-      style: parentRefStyle,
+      style: {
+        height: height ?? 'auto',
+        ...parentRefStyle,
+        width: scrollbarHorizontal ? width ?? '100%' : 'auto',
+        overflow: 'auto',
+        contain: 'layout paint style'
+      },
       ref: parentRef,
       children: [/*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table, {
-        className: Object.entries(classList).filter(function (_ref4) {
-          var _ref5 = _slicedToArray__default.default(_ref4, 2),
-            k = _ref5[1];
-          return k;
-        }).map(function (_ref6) {
-          var _ref7 = _slicedToArray__default.default(_ref6, 1),
-            k = _ref7[0];
-          return k;
-        }).join(' '),
+        className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
         style: {
-          width: table.getTotalSize()
+          tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
+          width: table.getTotalSize(),
+          minWidth: scrollbarHorizontal ? minWidth : 'auto'
         },
         children: [caption && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Caption, {
           children: caption
         }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Head, {
           sticky: stickyHeader,
-          children: table.getHeaderGroups().map(function (headerGroup) {
-            return /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
-              table: table,
-              headerGroup: headerGroup,
-              columnResizeMode: columnResizeMode,
-              deltaOffset: table.getState().columnSizingInfo.deltaOffset
-            }, headerGroup.id);
-          })
+          children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
+            table: table,
+            headerGroup: headerGroup,
+            columnResizeMode: columnResizeMode,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset
+          }, headerGroup.id))
         }), /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table.Body, {
+          style: {
+            backgroundColor: 'inherit'
+          },
           children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
             children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
-              colSpan: table.getHeaderGroups().length,
+              colSpan: table.getFlatHeaders().length,
               children: emptyMessage
             })
           }), enableVirtual && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
+            children: [paddingTop > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
               "data-testid": "virtual-padding-top",
               className: 'virtual-padding-top',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
                 style: {
-                  height: "".concat(paddingTop, "px")
+                  height: `${paddingTop}px`
                 }
               })
-            }), virtualRows.map(function (row) {
-              return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-                row: table.getRowModel().rows[row.index]
-              }, row.index);
-            }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
+            }), virtualRows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+              row: table.getRowModel().rows[row.index]
+            }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
               "data-testid": "virtual-padding-bottom",
               className: 'virtual-padding-bottom',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
                 style: {
-                  height: "".concat(paddingBottom, "px")
+                  height: `${paddingBottom}px`
                 }
               })
             })]
-          }), !enableVirtual && table.getRowModel().rows.map(function (row) {
-            return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
-              row: row
-            }, row.id);
-          })]
+          }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+            row: row
+          }, row.id))]
         })]
-      }), enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
-          maxWidth: "".concat(table.getTotalSize(), "px")
+          maxWidth: `${table.getTotalSize()}px`
         },
         children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Pagination, {
           totalItems: table.getFilteredRowModel().rows.length,
           withItemIndicator: true,
           itemsPerPage: page.pageSize,
-          onChange: function onChange(e, p) {
-            return setPage(function (s) {
-              return _objectSpread__default.default(_objectSpread__default.default({}, s), {}, {
-                pageIndex: p - 1
-              });
-            });
-          },
+          onChange: (e, p) => setPage(s => ({
+            ...s,
+            pageIndex: p - 1
+          })),
           defaultPage: 1
         })
       })]