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

package/dist/esm/components/DebouncedInput.js

@@ -1,34 +1,26 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useEffect } from 'react';
 import { InputWrapper, Input, Autocomplete, Chip } from '@equinor/eds-core-react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["value", "values", "onChange", "debounce", "label"];
+/* istanbul ignore file */
 // File ignored, as relevant actions are covered via Filter.test.tsx
-function DebouncedInput(_ref) {
-  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(_ref, _excluded);
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  useEffect(function () {
+function DebouncedInput({
+  value: initialValue,
+  values,
+  onChange,
+  debounce = 500,
+  label,
+  ...props
+}) {
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
-  useEffect(function () {
-    var timeout = setTimeout(function () {
+  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__*/jsx(Fragment, {
@@ -38,55 +30,41 @@ function DebouncedInput(_ref) {
         type: 'number',
         placeholder: '0',
         value: value,
-        onChange: function onChange(e) {
-          return setValue(e.target.valueAsNumber);
-        }
+        onChange: e => 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;
-        },
+        optionComponent: opt => 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',
+        label: `Select ${label ?? ''}`,
+        placeholder: props.placeholder ?? 'Search',
         disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
-
         selectedOptions: value,
-        onOptionsChange: function onOptionsChange(c) {
-          return setValue(c.selectedItems);
-        }
+        onOptionsChange: c => setValue(c.selectedItems),
+        multiline: true
       }), /*#__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);
-        })
+        children: value.map(v => /*#__PURE__*/jsxs(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))
       })]
     })
   });

package/dist/esm/components/Filter.js

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

package/dist/esm/components/TableBodyCell.js

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

package/dist/esm/components/TableHeaderCell.js

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { flexRender } from '@tanstack/react-table';
 import { Table, Icon } from '@equinor/eds-core-react';
 import { arrow_up, arrow_down } from '@equinor/eds-icons';
@@ -9,47 +8,40 @@ import { tokens } from '@equinor/eds-tokens';
 import { useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var getSortLabel = function getSortLabel(sorted) {
+const getSortLabel = sorted => {
   if (sorted) {
-    return "".concat(sorted, "ending");
+    return `${sorted}ending`;
   }
   return 'none';
 };
-var ResizeInner = styled.div.withConfig({
+const ResizeInner = styled.div.withConfig({
   displayName: "TableHeaderCell__ResizeInner",
   componentId: "sc-1n0j3v0-0"
 })(["width:2px;opacity:0;height:100%;"]);
-var Resizer = styled.div.withConfig({
+const Resizer = styled.div.withConfig({
   displayName: "TableHeaderCell__Resizer",
   componentId: "sc-1n0j3v0-1"
-})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], function (props) {
-  return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
-}, ResizeInner, function (props) {
-  return props.$isResizing ? 1 : 0;
-});
-var Cell = styled(Table.Cell).withConfig({
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+const Cell = styled(Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " z-index:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
-  return p.$sticky || p.$pinned ? 'sticky' : 'relative';
-}, function (p) {
+})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
-    return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
+    return `${p.$pinned}: ${p.$offset}px;`;
   }
   return '';
-}, function (p) {
-  if (p.$sticky && p.$pinned) return 13;
-  if (p.$sticky || p.$pinned) return 12;
-  return 'auto';
+}, p => {
+  if (p.$sticky && p.$pinned) return 'z-index: 13';
+  if (p.$sticky || p.$pinned) return 'z-index: 12';
 }, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
-function TableHeaderCell(_ref) {
-  var _asc$desc;
-  var header = _ref.header,
-    columnResizeMode = _ref.columnResizeMode;
-  var ctx = useTableContext();
-  var table = ctx.table;
-  var pinned = header.column.getIsPinned();
-  var offset = useMemo(function () {
+function TableHeaderCell({
+  header,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = header.column.getIsPinned();
+  const offset = useMemo(() => {
     if (!pinned) {
       return null;
     }
@@ -60,7 +52,9 @@ function TableHeaderCell(_ref) {
     $offset: offset,
     $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
-    style: _objectSpread({}, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+    style: {
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxs(Cell, {
     $sticky: ctx.stickyHeader,
@@ -71,10 +65,11 @@ function TableHeaderCell(_ref) {
     onClick: header.column.getToggleSortingHandler(),
     key: header.id,
     colSpan: header.colSpan,
-    style: _objectSpread({
+    style: {
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle'
-    }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     children: [/*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("div", {
         style: {
@@ -85,30 +80,26 @@ function TableHeaderCell(_ref) {
           className: "table-header-cell-label",
           children: flexRender(header.column.columnDef.header, header.getContext())
         })
-      }), (_asc$desc = {
+      }), {
         asc: /*#__PURE__*/jsx(Icon, {
           data: arrow_up
         }),
         desc: /*#__PURE__*/jsx(Icon, {
           data: arrow_down
         })
-      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null, header.column.getCanFilter() ?
+      }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
       
       // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
+        onClick: e => e.stopPropagation(),
         children: /*#__PURE__*/jsx(Filter, {
           column: header.column,
           table: table
         })
       }) : null]
     }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
+      onClick: e => e.stopPropagation(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),

package/dist/esm/components/TableHeaderRow.js

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

package/dist/esm/components/TableRow.js

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

package/dist/esm/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+function isNumberOnlyString(number) {
+  return !isNaN(Number(number)) && !isNaN(parseFloat(number));
+}
+function addPxSuffixIfInputHasNoPrefix(size) {
+  if (typeof size === 'number' || isNumberOnlyString(size)) {
+    return `${size}px`;
+  }
+  return size;
+}
+
+export { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString };

package/dist/types/EdsDataGrid.d.ts

@@ -1,2 +1,2 @@
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, height, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;