@equinor/eds-data-grid-react 0.1.0-beta.2 → 0.2.0

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

@@ -39,15 +39,16 @@ var useTableContext = function useTableContext() {
   return react.useContext(EdsDataGridContext);
 };
 
-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,
     values = _ref.values,
     onChange = _ref.onChange,
     _ref$debounce = _ref.debounce,
     debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
+    label = _ref.label,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
   var _useState = react.useState(initialValue),
     _useState2 = _slicedToArray__default.default(_useState, 2),
@@ -65,41 +66,101 @@ function DebouncedInput(_ref) {
     };
     // 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: function onChange(e) {
+          return setValue(e.target.valueAsNumber);
+        }
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.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__*/jsxRuntime.jsx("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          marginTop: '8px'
+        },
+        children: value.map(function (v) {
+          return /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.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);
+        })
+      })]
     })
   });
 }
 
-/* istanbul ignore file */
-
+var 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(_ref) {
   var _table$getPreFiltered, _column$getFacetedMin, _column$getFacetedMin2, _column$getFacetedMin3, _column$getFacetedMin4, _, _column$getFacetedMin5, _column$getFacetedMin6, _column$getFacetedMin7, _column$getFacetedMin8, _column$getFacetedMin9, _column$getFacetedMin10, _2, _column$getFacetedMin11, _column$getFacetedMin12;
   var column = _ref.column,
     table = _ref.table;
   var firstValue = (_table$getPreFiltered = table.getPreFilteredRowModel().flatRows[0]) === null || _table$getPreFiltered === void 0 ? void 0 : _table$getPreFiltered.getValue(column.id);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var filterIconRef = react.useRef();
+  var togglePopover = function togglePopover(event) {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  var columnText = react.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();
   var sortedUniqueValues = react.useMemo(function () {
     return typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(function (v) {
@@ -108,41 +169,85 @@ function Filter(_ref) {
   },
   // 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]];
+  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__*/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: "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];
-        });
+      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__*/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$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];
+              });
+            },
+            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__*/jsxRuntime.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__*/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'
   });
 }
 
@@ -152,33 +257,57 @@ var getSortLabel = function getSortLabel(sorted) {
   }
   return 'none';
 };
+var ResizeInner = styled__default.default.div.withConfig({
+  displayName: "TableHeaderCell__ResizeInner",
+  componentId: "sc-1n0j3v0-0"
+})(["width:2px;opacity:0;height:100%;"]);
 var Resizer = styled__default.default.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;
+  componentId: "sc-1n0j3v0-1"
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], function (props) {
+  return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
+}, ResizeInner, function (props) {
+  return props.$isResizing ? 1 : 0;
 });
 var Cell = styled__default.default(edsCoreReact.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, edsTokens.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, 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;
+  var pinned = header.column.getIsPinned();
+  var offset = react.useMemo(function () {
+    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: _objectSpread__default.default({}, 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(),
@@ -186,30 +315,18 @@ function TableHeaderCell(_ref) {
     colSpan: header.colSpan,
     style: _objectSpread__default.default({
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'baseline' : 'middle'
+      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
@@ -217,17 +334,30 @@ function TableHeaderCell(_ref) {
         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 && _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
+      jsxRuntime.jsx("div", {
+        onClick: function onClick(e) {
+          return 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();
       },
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
-      isResizing: header.column.getIsResizing(),
-      columnResizeMode: columnResizeMode,
+      $isResizing: header.column.getIsResizing(),
+      $columnResizeMode: columnResizeMode,
       className: 'resize-handle',
-      "data-testid": 'resize-handle'
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
     })]
   });
 }
@@ -249,21 +379,46 @@ function TableHeaderRow(_ref) {
   });
 }
 
+var StyledCell = styled__default.default(edsCoreReact.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 ? edsTokens.tokens.colors.ui.background__default.hex : 'inherit';
+});
 function TableBodyCell(_ref) {
   var _cellStyle;
   var cell = _ref.cell;
   var _useTableContext = useTableContext(),
     cellClass = _useTableContext.cellClass,
-    cellStyle = _useTableContext.cellStyle;
-  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
+    cellStyle = _useTableContext.cellStyle,
+    table = _useTableContext.table;
+  var pinned = cell.column.getIsPinned();
+  var pinnedOffset = react.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__*/jsxRuntime.jsx(StyledCell, {
+    $pinned: pinned,
+    $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
     key: cell.id,
     style: _objectSpread__default.default({
       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 : {}),
     children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
       as: "span",
@@ -321,8 +476,16 @@ function EdsDataGrid(_ref) {
     rowClass = _ref.rowClass,
     rowStyle = _ref.rowStyle,
     headerClass = _ref.headerClass,
-    headerStyle = _ref.headerStyle;
-  var _useState = react.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 = react.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     sorting = _useState2[0],
     setSorting = _useState2[1];
@@ -330,32 +493,44 @@ function EdsDataGrid(_ref) {
     _useState4 = _slicedToArray__default.default(_useState3, 2),
     selection = _useState4[0],
     setSelection = _useState4[1];
-  var _useState5 = react.useState([]),
+  var _useState5 = react.useState(columnPinState !== null && columnPinState !== void 0 ? columnPinState : {}),
     _useState6 = _slicedToArray__default.default(_useState5, 2),
-    columnFilters = _useState6[0],
-    setColumnFilters = _useState6[1];
-  var _useState7 = react.useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
+    columnPin = _useState6[0],
+    setColumnPin = _useState6[1];
+  var _useState7 = react.useState([]),
     _useState8 = _slicedToArray__default.default(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = react.useState(''),
+    columnFilters = _useState8[0],
+    setColumnFilters = _useState8[1];
+  var _useState9 = react.useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
     _useState10 = _slicedToArray__default.default(_useState9, 2),
-    globalFilter = _useState10[0],
-    setGlobalFilter = _useState10[1];
-  var _useState11 = react.useState([]),
+    visible = _useState10[0],
+    setVisible = _useState10[1];
+  var _useState11 = react.useState(''),
     _useState12 = _slicedToArray__default.default(_useState11, 2),
-    columnOrderState = _useState12[0],
-    setColumnOrderState = _useState12[1];
-  var _useState13 = react.useState({
+    globalFilter = _useState12[0],
+    setGlobalFilter = _useState12[1];
+  var _useState13 = react.useState([]),
+    _useState14 = _slicedToArray__default.default(_useState13, 2),
+    columnOrderState = _useState14[0],
+    setColumnOrderState = _useState14[1];
+  var _useState15 = react.useState({
       pageIndex: 0,
       pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
     }),
-    _useState14 = _slicedToArray__default.default(_useState13, 2),
-    page = _useState14[0],
-    setPage = _useState14[1];
+    _useState16 = _slicedToArray__default.default(_useState15, 2),
+    page = _useState16[0],
+    setPage = _useState16[1];
   react.useEffect(function () {
     setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
   }, [columnVisibility, setVisible]);
+  react.useEffect(function () {
+    setColumnPin(function (s) {
+      return columnPinState !== null && columnPinState !== void 0 ? columnPinState : s;
+    });
+  }, [columnPinState]);
+  react.useEffect(function () {
+    setSorting(sortingState);
+  }, [sortingState]);
   react.useEffect(function () {
     setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
   }, [selectedRows]);
@@ -388,7 +563,7 @@ function EdsDataGrid(_ref) {
                 _ref3 = _slicedToArray__default.default(_ref2, 2),
                 start = _ref3[0],
                 end = _ref3[1];
-              return value >= (isNaN(start) ? 0 : start) && value <= (!end || isNaN(end) ? Infinity : end);
+              return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
             } else {
               var validFilterValue = filterValue.filter(function (v) {
                 return !!v;
@@ -412,20 +587,29 @@ function EdsDataGrid(_ref) {
     columnResizeMode: columnResizeMode,
     state: {
       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,
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false
+    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false,
+    enableColumnPinning: true,
+    enablePinning: true
   };
   react.useEffect(function () {
     if (columnOrder && columnOrder.length > 0) {
@@ -498,8 +682,9 @@ function EdsDataGrid(_ref) {
    * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
    */
   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',
       position: 'relative'
     };
@@ -544,16 +729,22 @@ function EdsDataGrid(_ref) {
     stickyHeader: !!stickyHeader,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "table-wrapper",
-      style: parentRefStyle,
+      style: _objectSpread__default.default(_objectSpread__default.default({
+        height: height !== null && height !== void 0 ? height : 'auto'
+      }, parentRefStyle), {}, {
+        width: scrollbarHorizontal ? width : 'auto',
+        tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
+        overflow: 'auto'
+      }),
       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];
+        className: Object.entries(classList).filter(function (_ref5) {
+          var _ref6 = _slicedToArray__default.default(_ref5, 2),
+            k = _ref6[1];
           return k;
-        }).map(function (_ref6) {
-          var _ref7 = _slicedToArray__default.default(_ref6, 1),
-            k = _ref7[0];
+        }).map(function (_ref7) {
+          var _ref8 = _slicedToArray__default.default(_ref7, 1),
+            k = _ref8[0];
           return k;
         }).join(' '),
         style: {
@@ -605,7 +796,7 @@ function EdsDataGrid(_ref) {
             }, row.id);
           })]
         })]
-      }), enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
+      }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
         style: {
           maxWidth: "".concat(table.getTotalSize(), "px")
         },