@equinor/eds-data-grid-react - npm Package Compare versions

Comparing version 0.1.0-beta.3 to 0.2.0

dist/esm/components/DebouncedInput.js

 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';
+import { InputWrapper, Input, Autocomplete, Chip } from '@equinor/eds-core-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["value", "values", "onChange", "debounce"];
+var _excluded = ["value", "values", "onChange", "debounce", "label"];
 // File ignored, as relevant actions are covered via Filter.test.tsx
 function DebouncedInput(_ref) {
-  var _props$placeholder, _props$placeholder2;
+  var _props$placeholder;
   var initialValue = _ref.value,
@@ -16,2 +16,3 @@ values = _ref.values,
     debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
+    label = _ref.label,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -34,26 +35,59 @@ var _useState = useState(initialValue),
   }, [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);
-      }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: props.type === 'number' ? /*#__PURE__*/jsx(InputWrapper, {
+      label: props.placeholder,
+      children: /*#__PURE__*/jsx(Input, {
+        type: 'number',
+        placeholder: '0',
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.target.valueAsNumber);
+        }
+      })
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Autocomplete, {
+        options: values,
+        autoWidth: true,
+        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 */,
+        label: "Select ".concat(label !== null && label !== void 0 ? label : ''),
+        placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Search',
+        disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
+
+        selectedOptions: value,
+        onOptionsChange: function onOptionsChange(c) {
+          return setValue(c.selectedItems);
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          marginTop: '8px'
+        },
+        children: value.map(function (v) {
+          return /*#__PURE__*/jsxs(Chip, {
+            title: v,
+            onKeyDownCapture: function onKeyDownCapture(event) {
+              if (['Backspace', 'Delete'].includes(event.key)) {
+                onChange(value.filter(function (item) {
+                  return item !== v;
+                }));
+              }
+            },
+            style: {
+              margin: '4px'
+            },
+            onDelete: function onDelete() {
+              return onChange(value.filter(function (item) {
+                return item !== v;
+              }));
+            },
+            children: [v.slice(0, 20), v.length > 20 ? '...' : '']
+          }, v);
+        })
+      })]
     })
@@ -60,0 +94,0 @@ });

dist/esm/components/Filter.js

@@ -1,7 +0,14 @@
-import { useMemo } from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useMemo } from 'react';
 import { DebouncedInput } from './DebouncedInput.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button, Icon, Popover } from '@equinor/eds-core-react';
+import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-/* istanbul ignore file */
-
+var 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) {
@@ -12,2 +19,27 @@ 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 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) {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  var columnText = useMemo(function () {
+    var header;
+    try {
+      if (typeof column.columnDef.header === 'function') {
+        var 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) {
+      /*em all*/
+    }
+    return header;
+  }, [column.columnDef]);
   var columnFilterValue = column.getFilterValue();
@@ -21,37 +53,81 @@ var sortedUniqueValues = useMemo(function () {
   [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]];
+  var hasActiveFilters = function hasActiveFilters(value) {
+    if (Array.isArray(value)) {
+      if (typeof firstValue === 'number') {
+        return value.some(function (v) {
+          return !isNaN(v) && !!v;
         });
+      } else {
+        return value.filter(function (v) {
+          return !!v;
+        }).length > 0;
+      }
+    }
+    return value;
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button, {
+      "aria-haspopup": true,
+      "aria-expanded": open,
+      "data-testid": 'open-filters',
+      ref: filterIconRef,
+      onClick: togglePopover,
+      variant: 'ghost_icon',
+      children: /*#__PURE__*/jsx(Icon, {
+        color: tokens.colors.text.static_icons__default.hex,
+        data: hasActiveFilters(columnFilterValue) ? filter_alt_active : filter_alt
+      })
+    }), /*#__PURE__*/jsx(Popover, {
+      style: {
+        width: typeof firstValue === 'number' ? '220px' : '340px'
       },
-      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];
-        });
+      anchorEl: filterIconRef.current,
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
       },
-      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], ")") : '')
+      children: /*#__PURE__*/jsx(Popover.Content, {
+        style: {
+          width: typeof firstValue === 'number' ? '180px' : '310px'
+        },
+        children: typeof firstValue === 'number' ? /*#__PURE__*/jsxs(NumberContainer, {
+          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",
+          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"),
+          list: column.id + 'list'
+        })
+      })
     })]
-  }) : /*#__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'
   });
@@ -58,0 +134,0 @@ }

dist/esm/components/TableBodyCell.js

@@ -5,4 +5,22 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 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({
+  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) {
+  if (p.$pinned) {
+    return "".concat(p.$pinned, ": ").concat(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) {
@@ -13,4 +31,17 @@ var _cellStyle;
     cellClass = _useTableContext.cellClass,
-    cellStyle = _useTableContext.cellStyle;
-  return /*#__PURE__*/jsx(Table.Cell, {
+    cellStyle = _useTableContext.cellStyle,
+    table = _useTableContext.table;
+  var pinned = cell.column.getIsPinned();
+  var pinnedOffset = useMemo(function () {
+    if (!pinned) {
+      return 0;
+    }
+    var header = table.getFlatHeaders().find(function (h) {
+      return 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, {
+    $pinned: pinned,
+    $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
@@ -20,6 +51,3 @@ key: cell.id,
       width: cell.column.getSize(),
-      maxWidth: cell.column.getSize(),
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      maxWidth: cell.column.getSize()
     }, (_cellStyle = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle(cell.row, cell.column.id)) !== null && _cellStyle !== void 0 ? _cellStyle : {}),
@@ -26,0 +54,0 @@ children: /*#__PURE__*/jsx(Typography, {

dist/esm/components/TableHeaderCell.js

@@ -9,2 +9,3 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
+import { useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -18,8 +19,12 @@
 };
+var ResizeInner = styled.div.withConfig({
+  displayName: "TableHeaderCell__ResizeInner",
+  componentId: "sc-1n0j3v0-0"
+})(["width:2px;opacity:0;height:100%;"]);
 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) {
+  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';
-}, function (props) {
+}, ResizeInner, function (props) {
   return props.$isResizing ? 1 : 0;
@@ -29,6 +34,15 @@ });
   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);
+  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) {
+  if (p.$pinned) {
+    return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
+  }
+  return '';
+}, function (p) {
+  if (p.$sticky && p.$pinned) return 13;
+  if (p.$sticky || p.$pinned) return 12;
+  return 'auto';
+}, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
 function TableHeaderCell(_ref) {
@@ -40,9 +54,20 @@ var _asc$desc;
   var table = ctx.table;
+  var pinned = header.column.getIsPinned();
+  var offset = useMemo(function () {
+    if (!pinned) {
+      return null;
+    }
+    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
+  }, [pinned, header, table]);
   return header.isPlaceholder ? /*#__PURE__*/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: _objectSpread({}, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
     "aria-hidden": true
   }) : /*#__PURE__*/jsxs(Cell, {
-    sticky: ctx.stickyHeader,
+    $sticky: ctx.stickyHeader,
+    $offset: offset,
+    $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
@@ -55,6 +80,6 @@ "aria-sort": getSortLabel(header.column.getIsSorted()),
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'baseline' : 'middle'
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle'
     }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
     children: [/*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
         style: {
@@ -64,18 +89,6 @@ display: 'flex',
         },
-        children: [/*#__PURE__*/jsx("span", {
+        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 = {
@@ -88,3 +101,15 @@ asc: /*#__PURE__*/jsx(Icon, {
         })
-      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
+      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : 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();
+        },
+        children: /*#__PURE__*/jsx(Filter, {
+          column: header.column,
+          table: table
+        })
+      }) : null]
     }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
@@ -99,3 +124,4 @@ onClick: function onClick(e) {
       className: 'resize-handle',
-      "data-testid": 'resize-handle'
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsx(ResizeInner, {})
     })]
@@ -102,0 +128,0 @@ });

dist/esm/EdsDataGrid.js

@@ -37,4 +37,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
     headerClass = _ref.headerClass,
-    headerStyle = _ref.headerStyle;
-  var _useState = useState([]),
+    headerStyle = _ref.headerStyle,
+    externalPaginator = _ref.externalPaginator,
+    _onSortingChange = _ref.onSortingChange,
+    manualSorting = _ref.manualSorting,
+    sortingState = _ref.sortingState,
+    columnPinState = _ref.columnPinState,
+    scrollbarHorizontal = _ref.scrollbarHorizontal,
+    width = _ref.width,
+    height = _ref.height;
+  var _useState = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47,25 +55,29 @@ sorting = _useState2[0],
     setSelection = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState(columnPinState !== null && columnPinState !== void 0 ? columnPinState : {}),
     _useState6 = _slicedToArray(_useState5, 2),
-    columnFilters = _useState6[0],
-    setColumnFilters = _useState6[1];
-  var _useState7 = useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
+    columnPin = _useState6[0],
+    setColumnPin = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = useState(''),
+    columnFilters = _useState8[0],
+    setColumnFilters = _useState8[1];
+  var _useState9 = useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
     _useState10 = _slicedToArray(_useState9, 2),
-    globalFilter = _useState10[0],
-    setGlobalFilter = _useState10[1];
-  var _useState11 = useState([]),
+    visible = _useState10[0],
+    setVisible = _useState10[1];
+  var _useState11 = useState(''),
     _useState12 = _slicedToArray(_useState11, 2),
-    columnOrderState = _useState12[0],
-    setColumnOrderState = _useState12[1];
-  var _useState13 = useState({
+    globalFilter = _useState12[0],
+    setGlobalFilter = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    columnOrderState = _useState14[0],
+    setColumnOrderState = _useState14[1];
+  var _useState15 = useState({
       pageIndex: 0,
       pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
     }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    page = _useState14[0],
-    setPage = _useState14[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    page = _useState16[0],
+    setPage = _useState16[1];
   useEffect(function () {
@@ -75,2 +87,10 @@ setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
   useEffect(function () {
+    setColumnPin(function (s) {
+      return columnPinState !== null && columnPinState !== void 0 ? columnPinState : s;
+    });
+  }, [columnPinState]);
+  useEffect(function () {
+    setSorting(sortingState);
+  }, [sortingState]);
+  useEffect(function () {
     setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
@@ -131,9 +151,16 @@ }, [selectedRows]);
       sorting: sorting,
+      columnPinning: columnPin,
       rowSelection: selection,
       columnOrder: columnOrderState
     },
-    onSortingChange: setSorting,
+    onSortingChange: function onSortingChange(changes) {
+      if (_onSortingChange) {
+        _onSortingChange(changes);
+      }
+      setSorting(changes);
+    },
     enableColumnFilters: !!enableColumnFiltering,
     enableFilters: !!enableColumnFiltering,
     enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
+    manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
     enableColumnResizing: !!columnResizeMode,
@@ -145,3 +172,5 @@ getCoreRowModel: getCoreRowModel(),
     debugColumns: debug,
-    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false
+    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false,
+    enableColumnPinning: true,
+    enablePinning: true
   };
@@ -219,4 +248,5 @@ useEffect(function () {
   if (enableVirtual) {
+    var _ref4;
     parentRefStyle = {
-      height: virtualHeight !== null && virtualHeight !== void 0 ? virtualHeight : 500,
+      height: (_ref4 = height !== null && height !== void 0 ? height : virtualHeight) !== null && _ref4 !== void 0 ? _ref4 : 500,
       overflow: 'auto',
@@ -266,12 +296,18 @@ position: 'relative'
       className: "table-wrapper",
-      style: parentRefStyle,
+      style: _objectSpread(_objectSpread({
+        height: height !== null && height !== void 0 ? height : 'auto'
+      }, parentRefStyle), {}, {
+        width: scrollbarHorizontal ? width : 'auto',
+        tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
+        overflow: 'auto'
+      }),
       ref: parentRef,
       children: [/*#__PURE__*/jsxs(Table, {
-        className: Object.entries(classList).filter(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            k = _ref5[1];
+        className: Object.entries(classList).filter(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            k = _ref6[1];
           return k;
-        }).map(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 1),
-            k = _ref7[0];
+        }).map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 1),
+            k = _ref8[0];
           return k;
@@ -328,3 +364,3 @@ }).join(' '),
         })]
-      }), enablePagination && /*#__PURE__*/jsx("div", {
+      }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
         style: {
@@ -331,0 +367,0 @@ maxWidth: "".concat(table.getTotalSize(), "px")

dist/types/components/DebouncedInput.d.ts

 import { InputHTMLAttributes } from 'react';
 type Value = string | number | Array<string | number>;
-export declare function DebouncedInput({ value: initialValue, values, onChange, debounce, ...props }: {
+export declare function DebouncedInput({ value: initialValue, values, onChange, debounce, label, ...props }: {
     value: Value;
@@ -8,3 +8,4 @@ values: Array<string | number>;
     debounce?: number;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
+    label?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/components/Filter.d.ts

@@ -6,3 +6,3 @@ import { Column, Table as TanStackTable } from '@tanstack/react-table';
 };
-export declare function Filter<T = unknown>({ column, table }: FilterProps<T>): JSX.Element;
+export declare function Filter<T = unknown>({ column, table }: FilterProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/components/TableBodyCell.d.ts

@@ -5,3 +5,3 @@ import { Cell } from '@tanstack/react-table';
 };
-export declare function TableBodyCell<T>({ cell }: Props<T>): JSX.Element;
+export declare function TableBodyCell<T>({ cell }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/components/TableHeaderCell.d.ts

@@ -8,3 +8,3 @@ import { ColumnResizeMode, Header, Table as TanStackTable } from '@tanstack/react-table';
 };
-export declare function TableHeaderCell<T>({ header, columnResizeMode }: Props<T>): JSX.Element;
+export declare function TableHeaderCell<T>({ header, columnResizeMode }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/components/TableHeaderRow.d.ts

@@ -8,3 +8,3 @@ import { ColumnResizeMode, HeaderGroup, Table as TanStackTable } from '@tanstack/react-table';
 };
-export declare function TableHeaderRow<T>({ headerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): JSX.Element;
+export declare function TableHeaderRow<T>({ headerGroup, columnResizeMode, deltaOffset, table, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/components/TableRow.d.ts

@@ -6,3 +6,3 @@ import { Row } from '@tanstack/react-table';
 } & HTMLAttributes<HTMLTableRowElement>;
-export declare function TableRow<T>({ row }: Props<T>): JSX.Element;
+export declare function TableRow<T>({ row }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

dist/types/EdsDataGrid.d.ts

@@ -1,133 +0,2 @@
-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;
+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;

dist/types/EdsDataGridContext.d.ts

@@ -18,4 +18,4 @@ import { CSSProperties, ReactElement } from 'react';
     children: ReactElement | Array<ReactElement>;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const useTableContext: () => Context<any>;
 export {};

dist/types/index.d.ts

 export * from './EdsDataGrid';
+export * from './EdsDataGridProps';

package.json

 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.1.0-beta.3",
+  "version": "0.2.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
@@ -22,55 +22,54 @@ "license": "MIT",
   "dependencies": {
-    "@tanstack/react-table": "^8.8.5",
+    "@tanstack/react-table": "^8.10.7",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "@equinor/eds-core-react": "^0.33.0",
-    "@equinor/eds-icons": "^0.19.3",
-    "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "^0.8.2"
+    "@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"
   },
   "devDependencies": {
-    "@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.3.0",
-    "@storybook/addon-actions": "^7.3.0",
-    "@storybook/addon-docs": "^7.3.0",
-    "@storybook/addon-essentials": "^7.3.0",
-    "@storybook/addon-links": "^7.3.0",
-    "@storybook/blocks": "^7.3.0",
-    "@storybook/builder-vite": "^7.3.0",
-    "@storybook/client-api": "^7.3.0",
-    "@storybook/react": "^7.3.0",
-    "@storybook/react-vite": "^7.3.0",
-    "@testing-library/dom": "^9.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@mdx-js/react": "2.3.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/builder-vite": "^7.5.1",
+    "@storybook/client-api": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.0",
-    "@types/node": "18.14.2",
-    "@types/ramda": "^0.28.24",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.10",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-loader": "^9.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.6",
+    "@types/node": "20.8.9",
+    "@types/ramda": "^0.29.7",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
-    "jest": "29.4.3",
-    "jest-environment-jsdom": "29.4.3",
-    "jest-styled-components": "^7.1.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.21",
-    "ramda": "^0.29.0",
+    "postcss": "^8.4.31",
+    "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
-    "remark-gfm": "^3.0.1",
-    "rollup": "^3.25.1",
+    "react-hook-form": "^7.47.0",
+    "remark-gfm": "^4.0.0",
+    "rollup": "^4.2.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.3.0",
-    "styled-components": "6.0.8",
-    "ts-jest": "29.0.5",
+    "storybook": "^7.5.1",
+    "styled-components": "6.1.0",
+    "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
-    "tsc-watch": "^6.0.0",
-    "typescript": "~5.1.6"
+    "tsc-watch": "^6.0.4",
+    "typescript": "~5.2.2"
   },
@@ -77,0 +76,0 @@ "homepage": "https://eds.equinor.com",

No alert changes

Improved metrics

Total package byte prevSize

82488

increased by25.21%

Dev dependency count

44

decreased by-2.22%

Number of package files

25

increased by4.17%

Lines of code

1923

increased by29.93%

Dependency changes

• + Added@equinor/eds-core-react@0.35.1(transitive)

• + Added@equinor/eds-icons@0.20.0(transitive)

• + Added@floating-ui/react@0.26.28(transitive)

• - Removed@equinor/eds-core-react@0.33.1(transitive)

• - Removed@equinor/eds-icons@0.19.3(transitive)

• - Removed@floating-ui/react@0.25.4(transitive)

• - Removed@floating-ui/utils@0.1.6(transitive)

• Updated@equinor/eds-core-react@^0.35.0

• Updated@equinor/eds-icons@^0.20.0

• Updated@equinor/eds-utils@^0.8.3

• Updated@tanstack/react-table@^8.10.7