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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/eds-data-grid-react.cjs +319 -405
  2. package/dist/esm/EdsDataGrid.js +163 -186
  3. package/dist/esm/EdsDataGridContext.js +6 -9
  4. package/dist/esm/components/DebouncedInput.js +33 -55
  5. package/dist/esm/components/Filter.js +34 -56
  6. package/dist/esm/components/TableBodyCell.js +21 -34
  7. package/dist/esm/components/TableHeaderCell.js +30 -39
  8. package/dist/esm/components/TableHeaderRow.js +12 -13
  9. package/dist/esm/components/TableRow.js +23 -19
  10. package/dist/types/EdsDataGrid.d.ts +1 -1
  11. package/dist/types/EdsDataGridProps.d.ts +27 -5
  12. package/dist/types/index.d.ts +1 -0
  13. package/dist/types/types.d.ts +3 -0
  14. package/package.json +7 -8
package/dist/eds-data-grid-react.cjs CHANGED
@@ -1,69 +1,55 @@
1
1
  'use strict';
2
2
 
3
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
4
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
- var reactTable = require('@tanstack/react-table');
6
3
  var edsCoreReact = require('@equinor/eds-core-react');
4
+ var reactTable = require('@tanstack/react-table');
5
+ var reactVirtual = require('@tanstack/react-virtual');
7
6
  var react = require('react');
8
7
  var edsIcons = require('@equinor/eds-icons');
9
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
10
8
  var jsxRuntime = require('react/jsx-runtime');
11
9
  var styled = require('styled-components');
12
10
  var edsTokens = require('@equinor/eds-tokens');
13
- var reactVirtual = require('@tanstack/react-virtual');
14
11
 
15
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
13
 
17
- var _objectSpread__default = /*#__PURE__*/_interopDefault(_objectSpread);
18
- var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
19
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
20
14
  var styled__default = /*#__PURE__*/_interopDefault(styled);
21
15
 
22
- var _excluded$1 = ["children"];
23
16
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
- var EdsDataGridContext = /*#__PURE__*/react.createContext({
17
+ const EdsDataGridContext = /*#__PURE__*/react.createContext({
25
18
  enableSorting: false,
26
19
  stickyHeader: false,
27
20
  enableColumnFiltering: false,
28
21
  table: null
29
22
  });
30
- function TableProvider(_ref) {
31
- var children = _ref.children,
32
- props = _objectWithoutProperties__default.default(_ref, _excluded$1);
23
+ function TableProvider({
24
+ children,
25
+ ...props
26
+ }) {
33
27
  return /*#__PURE__*/jsxRuntime.jsx(EdsDataGridContext.Provider, {
34
28
  value: props,
35
29
  children: children
36
30
  });
37
31
  }
38
- var useTableContext = function useTableContext() {
39
- return react.useContext(EdsDataGridContext);
40
- };
32
+ const useTableContext = () => react.useContext(EdsDataGridContext);
41
33
 
42
- var _excluded = ["value", "values", "onChange", "debounce", "label"];
34
+ /* istanbul ignore file */
43
35
  // File ignored, as relevant actions are covered via Filter.test.tsx
44
- function DebouncedInput(_ref) {
45
- var _props$placeholder;
46
- var initialValue = _ref.value,
47
- values = _ref.values,
48
- onChange = _ref.onChange,
49
- _ref$debounce = _ref.debounce,
50
- debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
51
- label = _ref.label,
52
- props = _objectWithoutProperties__default.default(_ref, _excluded);
53
- var _useState = react.useState(initialValue),
54
- _useState2 = _slicedToArray__default.default(_useState, 2),
55
- value = _useState2[0],
56
- setValue = _useState2[1];
57
- react.useEffect(function () {
36
+ function DebouncedInput({
37
+ value: initialValue,
38
+ values,
39
+ onChange,
40
+ debounce = 500,
41
+ label,
42
+ ...props
43
+ }) {
44
+ const [value, setValue] = react.useState(initialValue);
45
+ react.useEffect(() => {
58
46
  setValue(initialValue);
59
47
  }, [initialValue]);
60
- react.useEffect(function () {
61
- var timeout = setTimeout(function () {
48
+ react.useEffect(() => {
49
+ const timeout = setTimeout(() => {
62
50
  onChange(value);
63
51
  }, debounce);
64
- return function () {
65
- return clearTimeout(timeout);
66
- };
52
+ return () => clearTimeout(timeout);
67
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
68
54
  }, [value]);
69
55
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -73,112 +59,89 @@ function DebouncedInput(_ref) {
73
59
  type: 'number',
74
60
  placeholder: '0',
75
61
  value: value,
76
- onChange: function onChange(e) {
77
- return setValue(e.target.valueAsNumber);
78
- }
62
+ onChange: e => setValue(e.target.valueAsNumber)
79
63
  })
80
64
  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
81
65
  children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Autocomplete, {
82
66
  options: values,
83
67
  autoWidth: true,
84
68
  multiple: true,
85
- optionComponent: function optionComponent(opt) {
86
- return opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt;
87
- },
69
+ optionComponent: opt => opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt,
88
70
  "data-testid": 'autocomplete'
89
71
  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
90
- label: "Select ".concat(label !== null && label !== void 0 ? label : ''),
91
- placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Search',
72
+ label: `Select ${label ?? ''}`,
73
+ placeholder: props.placeholder ?? 'Search',
92
74
  disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
93
-
94
75
  selectedOptions: value,
95
- onOptionsChange: function onOptionsChange(c) {
96
- return setValue(c.selectedItems);
97
- }
76
+ onOptionsChange: c => setValue(c.selectedItems),
77
+ multiline: true
98
78
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
99
79
  style: {
100
80
  display: 'flex',
101
81
  flexWrap: 'wrap',
102
82
  marginTop: '8px'
103
83
  },
104
- children: value.map(function (v) {
105
- return /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Chip, {
106
- title: v,
107
- onKeyDownCapture: function onKeyDownCapture(event) {
108
- if (['Backspace', 'Delete'].includes(event.key)) {
109
- onChange(value.filter(function (item) {
110
- return item !== v;
111
- }));
112
- }
113
- },
114
- style: {
115
- margin: '4px'
116
- },
117
- onDelete: function onDelete() {
118
- return onChange(value.filter(function (item) {
119
- return item !== v;
120
- }));
121
- },
122
- children: [v.slice(0, 20), v.length > 20 ? '...' : '']
123
- }, v);
124
- })
84
+ children: value.map(v => /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Chip, {
85
+ title: v,
86
+ onKeyDownCapture: event => {
87
+ if (['Backspace', 'Delete'].includes(event.key)) {
88
+ onChange(value.filter(item => item !== v));
89
+ }
90
+ },
91
+ style: {
92
+ margin: '4px'
93
+ },
94
+ onDelete: () => onChange(value.filter(item => item !== v)),
95
+ children: [v.slice(0, 20), v.length > 20 ? '...' : '']
96
+ }, v))
125
97
  })]
126
98
  })
127
99
  });
128
100
  }
129
101
 
130
- var NumberContainer = styled__default.default.div.withConfig({
102
+ /* istanbul ignore file */
103
+
104
+ const NumberContainer = styled__default.default.div.withConfig({
131
105
  displayName: "Filter__NumberContainer",
132
106
  componentId: "sc-ytpdpw-0"
133
107
  })(["display:grid;grid-template-columns:80px 80px;grid-column-gap:32px;"]);
134
- function Filter(_ref) {
135
- 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;
136
- var column = _ref.column,
137
- table = _ref.table;
138
- var firstValue = (_table$getPreFiltered = table.getPreFilteredRowModel().flatRows[0]) === null || _table$getPreFiltered === void 0 ? void 0 : _table$getPreFiltered.getValue(column.id);
139
- var _useState = react.useState(false),
140
- _useState2 = _slicedToArray__default.default(_useState, 2),
141
- open = _useState2[0],
142
- setOpen = _useState2[1];
143
- var filterIconRef = react.useRef();
144
- var togglePopover = function togglePopover(event) {
108
+ function Filter({
109
+ column,
110
+ table
111
+ }) {
112
+ const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
113
+ const [open, setOpen] = react.useState(false);
114
+ const filterIconRef = react.useRef();
115
+ const togglePopover = event => {
145
116
  event.stopPropagation();
146
117
  setOpen(!open);
147
118
  };
148
- var columnText = react.useMemo(function () {
149
- var header;
119
+ const columnText = react.useMemo(() => {
120
+ let header;
150
121
  try {
151
122
  if (typeof column.columnDef.header === 'function') {
152
- var obj = column.columnDef.header(
123
+ const obj = column.columnDef.header(
153
124
  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument
154
125
  {});
155
126
  header = obj.props.children;
156
127
  } else {
157
128
  header = column.columnDef.header;
158
129
  }
159
- } catch (_unused) {
130
+ } catch {
160
131
  /*em all*/
161
132
  }
162
133
  return header;
163
134
  }, [column.columnDef]);
164
- var columnFilterValue = column.getFilterValue();
165
- var sortedUniqueValues = react.useMemo(function () {
166
- return typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(function (v) {
167
- return v !== null && v !== void 0 ? v : 'NULL_OR_UNDEFINED';
168
- });
169
- },
135
+ const columnFilterValue = column.getFilterValue();
136
+ const sortedUniqueValues = react.useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
170
137
  // eslint-disable-next-line react-hooks/exhaustive-deps
171
138
  [column.getFacetedUniqueValues()]);
172
- var hasActiveFilters = function hasActiveFilters(value) {
139
+ const hasActiveFilters = value => {
173
140
  if (Array.isArray(value)) {
174
141
  if (typeof firstValue === 'number') {
175
- return value.some(function (v) {
176
- return !isNaN(v) && !!v;
177
- });
142
+ return value.some(v => !isNaN(v) && !!v);
178
143
  } else {
179
- return value.filter(function (v) {
180
- return !!v;
181
- }).length > 0;
144
+ return value.filter(v => !!v).length > 0;
182
145
  }
183
146
  }
184
147
  return value;
@@ -201,9 +164,7 @@ function Filter(_ref) {
201
164
  },
202
165
  anchorEl: filterIconRef.current,
203
166
  open: open,
204
- onClose: function onClose() {
205
- return setOpen(false);
206
- },
167
+ onClose: () => setOpen(false),
207
168
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Popover.Content, {
208
169
  style: {
209
170
  width: typeof firstValue === 'number' ? '180px' : '310px'
@@ -212,38 +173,28 @@ function Filter(_ref) {
212
173
  children: [/*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
213
174
  type: "number",
214
175
  values: sortedUniqueValues,
215
- 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 : ''),
216
- 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 : ''),
217
- value: (_ = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) !== null && _ !== void 0 ? _ : '',
218
- onChange: function onChange(value) {
219
- return column.setFilterValue(function (old) {
220
- return [value, old === null || old === void 0 ? void 0 : old[1]];
221
- });
222
- },
223
- 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], ")") : '')
176
+ min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
177
+ max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
178
+ value: columnFilterValue?.[0] ?? '',
179
+ onChange: value => column.setFilterValue(old => [value, old?.[1]]),
180
+ placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
224
181
  }), /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
225
182
  type: "number",
226
183
  values: sortedUniqueValues,
227
- 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 : ''),
228
- 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 : ''),
229
- value: (_2 = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) !== null && _2 !== void 0 ? _2 : '',
230
- onChange: function onChange(value) {
231
- return column.setFilterValue(function (old) {
232
- return [old === null || old === void 0 ? void 0 : old[0], value];
233
- });
234
- },
235
- 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], ")") : '')
184
+ min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
185
+ max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
186
+ value: columnFilterValue?.[1] ?? '',
187
+ onChange: value => column.setFilterValue(old => [old?.[0], value]),
188
+ placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
236
189
  })]
237
190
  }) : /*#__PURE__*/jsxRuntime.jsx(DebouncedInput, {
238
191
  type: "text",
239
192
  label: columnText,
240
193
  values: sortedUniqueValues,
241
194
  debounce: 100,
242
- value: columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : [],
243
- onChange: function onChange(value) {
244
- return column.setFilterValue(value);
245
- },
246
- placeholder: "".concat((columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : []).length, " / ").concat(column.getFacetedUniqueValues().size, " selected"),
195
+ value: columnFilterValue ?? [],
196
+ onChange: value => column.setFilterValue(value),
197
+ placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
247
198
  list: column.id + 'list'
248
199
  })
249
200
  })
@@ -251,47 +202,40 @@ function Filter(_ref) {
251
202
  });
252
203
  }
253
204
 
254
- var getSortLabel = function getSortLabel(sorted) {
205
+ const getSortLabel = sorted => {
255
206
  if (sorted) {
256
- return "".concat(sorted, "ending");
207
+ return `${sorted}ending`;
257
208
  }
258
209
  return 'none';
259
210
  };
260
- var ResizeInner = styled__default.default.div.withConfig({
211
+ const ResizeInner = styled__default.default.div.withConfig({
261
212
  displayName: "TableHeaderCell__ResizeInner",
262
213
  componentId: "sc-1n0j3v0-0"
263
214
  })(["width:2px;opacity:0;height:100%;"]);
264
- var Resizer = styled__default.default.div.withConfig({
215
+ const Resizer = styled__default.default.div.withConfig({
265
216
  displayName: "TableHeaderCell__Resizer",
266
217
  componentId: "sc-1n0j3v0-1"
267
- })(["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) {
268
- return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
269
- }, ResizeInner, function (props) {
270
- return props.$isResizing ? 1 : 0;
271
- });
272
- var Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
218
+ })(["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);
219
+ const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
273
220
  displayName: "TableHeaderCell__Cell",
274
221
  componentId: "sc-1n0j3v0-2"
275
- })(["font-weight:bold;height:30px;position:", ";top:0;", " z-index:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
276
- return p.$sticky || p.$pinned ? 'sticky' : 'relative';
277
- }, function (p) {
222
+ })(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
278
223
  if (p.$pinned) {
279
- return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
224
+ return `${p.$pinned}: ${p.$offset}px;`;
280
225
  }
281
226
  return '';
282
- }, function (p) {
283
- if (p.$sticky && p.$pinned) return 13;
284
- if (p.$sticky || p.$pinned) return 12;
285
- return 'auto';
227
+ }, p => {
228
+ if (p.$sticky && p.$pinned) return 'z-index: 13';
229
+ if (p.$sticky || p.$pinned) return 'z-index: 12';
286
230
  }, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
287
- function TableHeaderCell(_ref) {
288
- var _asc$desc;
289
- var header = _ref.header,
290
- columnResizeMode = _ref.columnResizeMode;
291
- var ctx = useTableContext();
292
- var table = ctx.table;
293
- var pinned = header.column.getIsPinned();
294
- var offset = react.useMemo(function () {
231
+ function TableHeaderCell({
232
+ header,
233
+ columnResizeMode
234
+ }) {
235
+ const ctx = useTableContext();
236
+ const table = ctx.table;
237
+ const pinned = header.column.getIsPinned();
238
+ const offset = react.useMemo(() => {
295
239
  if (!pinned) {
296
240
  return null;
297
241
  }
@@ -302,7 +246,9 @@ function TableHeaderCell(_ref) {
302
246
  $offset: offset,
303
247
  $pinned: pinned,
304
248
  className: ctx.headerClass ? ctx.headerClass(header.column) : '',
305
- style: _objectSpread__default.default({}, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
249
+ style: {
250
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
251
+ },
306
252
  "aria-hidden": true
307
253
  }) : /*#__PURE__*/jsxRuntime.jsxs(Cell, {
308
254
  $sticky: ctx.stickyHeader,
@@ -313,10 +259,11 @@ function TableHeaderCell(_ref) {
313
259
  onClick: header.column.getToggleSortingHandler(),
314
260
  key: header.id,
315
261
  colSpan: header.colSpan,
316
- style: _objectSpread__default.default({
262
+ style: {
317
263
  width: header.getSize(),
318
- verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle'
319
- }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
264
+ verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
265
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
266
+ },
320
267
  children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
321
268
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
322
269
  style: {
@@ -327,30 +274,26 @@ function TableHeaderCell(_ref) {
327
274
  className: "table-header-cell-label",
328
275
  children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
329
276
  })
330
- }), (_asc$desc = {
277
+ }), {
331
278
  asc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
332
279
  data: edsIcons.arrow_up
333
280
  }),
334
281
  desc: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Icon, {
335
282
  data: edsIcons.arrow_down
336
283
  })
337
- }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null, header.column.getCanFilter() ?
284
+ }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
338
285
 
339
286
  // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
340
287
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
341
288
  jsxRuntime.jsx("div", {
342
- onClick: function onClick(e) {
343
- return e.stopPropagation();
344
- },
289
+ onClick: e => e.stopPropagation(),
345
290
  children: /*#__PURE__*/jsxRuntime.jsx(Filter, {
346
291
  column: header.column,
347
292
  table: table
348
293
  })
349
294
  }) : null]
350
295
  }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
351
- onClick: function onClick(e) {
352
- return e.stopPropagation();
353
- },
296
+ onClick: e => e.stopPropagation(),
354
297
  onMouseDown: header.getResizeHandler(),
355
298
  onTouchStart: header.getResizeHandler(),
356
299
  $isResizing: header.column.getIsResizing(),
@@ -362,53 +305,45 @@ function TableHeaderCell(_ref) {
362
305
  });
363
306
  }
364
307
 
365
- function TableHeaderRow(_ref) {
366
- var headerGroup = _ref.headerGroup,
367
- columnResizeMode = _ref.columnResizeMode,
368
- deltaOffset = _ref.deltaOffset,
369
- table = _ref.table;
308
+ function TableHeaderRow({
309
+ headerGroup,
310
+ columnResizeMode,
311
+ deltaOffset,
312
+ table
313
+ }) {
370
314
  return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
371
- children: headerGroup.headers.map(function (header) {
372
- return /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
373
- header: header,
374
- table: table,
375
- columnResizeMode: columnResizeMode,
376
- deltaOffset: deltaOffset
377
- }, header.id);
378
- })
315
+ children: headerGroup.headers.map(header => /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
316
+ header: header,
317
+ table: table,
318
+ columnResizeMode: columnResizeMode,
319
+ deltaOffset: deltaOffset
320
+ }, header.id))
379
321
  });
380
322
  }
381
323
 
382
- var StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
324
+ const StyledCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
383
325
  displayName: "TableBodyCell__StyledCell",
384
326
  componentId: "sc-1gsd2k4-0"
385
- })(["position:", ";", " z-index:", ";background-color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], function (p) {
386
- return p.$pinned ? 'sticky' : 'relative';
387
- }, function (p) {
327
+ })(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
388
328
  if (p.$pinned) {
389
- return "".concat(p.$pinned, ": ").concat(p.$offset, "px;");
329
+ return `${p.$pinned}: ${p.$offset}px;`;
390
330
  }
391
331
  return '';
392
- }, function (p) {
393
- return p.$pinned ? 11 : 'auto';
394
- }, function (p) {
395
- return p.$pinned ? edsTokens.tokens.colors.ui.background__default.hex : 'inherit';
396
- });
397
- function TableBodyCell(_ref) {
398
- var _cellStyle;
399
- var cell = _ref.cell;
400
- var _useTableContext = useTableContext(),
401
- cellClass = _useTableContext.cellClass,
402
- cellStyle = _useTableContext.cellStyle,
403
- table = _useTableContext.table;
404
- var pinned = cell.column.getIsPinned();
405
- var pinnedOffset = react.useMemo(function () {
332
+ }, p => p.$pinned ? 11 : 'auto');
333
+ function TableBodyCell({
334
+ cell
335
+ }) {
336
+ const {
337
+ cellClass,
338
+ cellStyle,
339
+ table
340
+ } = useTableContext();
341
+ const pinned = cell.column.getIsPinned();
342
+ const pinnedOffset = react.useMemo(() => {
406
343
  if (!pinned) {
407
344
  return 0;
408
345
  }
409
- var header = table.getFlatHeaders().find(function (h) {
410
- return h.id === cell.column.id;
411
- });
346
+ const header = table.getFlatHeaders().find(h => h.id === cell.column.id);
412
347
  return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - cell.column.getSize();
413
348
  }, [pinned, cell.column, table]);
414
349
  return /*#__PURE__*/jsxRuntime.jsx(StyledCell, {
@@ -416,212 +351,199 @@ function TableBodyCell(_ref) {
416
351
  $offset: pinnedOffset,
417
352
  className: cellClass ? cellClass(cell.row, cell.column.id) : '',
418
353
  key: cell.id,
419
- style: _objectSpread__default.default({
354
+ style: {
420
355
  width: cell.column.getSize(),
421
- maxWidth: cell.column.getSize()
422
- }, (_cellStyle = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle(cell.row, cell.column.id)) !== null && _cellStyle !== void 0 ? _cellStyle : {}),
423
- children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
424
- as: "span",
425
- group: "table",
426
- variant: "cell_text",
427
- children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
428
- })
356
+ maxWidth: cell.column.getSize(),
357
+ ...(cellStyle?.(cell.row, cell.column.id) ?? {})
358
+ },
359
+ children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
429
360
  });
430
361
  }
431
362
 
432
- function TableRow(_ref) {
433
- var _rowStyle;
434
- var row = _ref.row;
435
- var _useTableContext = useTableContext(),
436
- rowClass = _useTableContext.rowClass,
437
- rowStyle = _useTableContext.rowStyle;
438
- return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
439
- style: _objectSpread__default.default({
440
- cursor: row.getCanSelect() ? 'pointer' : 'inherit'
441
- }, (_rowStyle = rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle(row)) !== null && _rowStyle !== void 0 ? _rowStyle : {}),
442
- className: "".concat(row.getIsSelected() ? 'selected' : '', " ").concat(rowClass === null || rowClass === void 0 ? void 0 : rowClass(row)),
443
- onClick: function onClick() {
444
- return row.getCanSelect() ? row.toggleSelected() : null;
363
+ function TableRow({
364
+ row
365
+ }) {
366
+ const {
367
+ rowClass,
368
+ rowStyle
369
+ } = useTableContext();
370
+ return /*#__PURE__*/jsxRuntime.jsx(StyledTableRow, {
371
+ style: {
372
+ cursor: row.getCanSelect() ? 'pointer' : 'inherit',
373
+ ...(rowStyle?.(row) ?? {})
445
374
  },
446
- children: row.getVisibleCells().map(function (cell) {
447
- return /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
448
- cell: cell
449
- }, cell.id);
450
- })
375
+ className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
376
+ onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
377
+ children: row.getVisibleCells().map(cell => /*#__PURE__*/jsxRuntime.jsx(TableBodyCell, {
378
+ cell: cell
379
+ }, cell.id))
451
380
  });
452
381
  }
453
382
 
454
- function EdsDataGrid(_ref) {
455
- var rows = _ref.rows,
456
- columns = _ref.columns,
457
- columnResizeMode = _ref.columnResizeMode,
458
- pageSize = _ref.pageSize,
459
- rowSelection = _ref.rowSelection,
460
- selectedRows = _ref.selectedRows,
461
- enableColumnFiltering = _ref.enableColumnFiltering,
462
- debug = _ref.debug,
463
- enablePagination = _ref.enablePagination,
464
- enableSorting = _ref.enableSorting,
465
- stickyHeader = _ref.stickyHeader,
466
- onSelectRow = _ref.onSelectRow,
467
- caption = _ref.caption,
468
- enableVirtual = _ref.enableVirtual,
469
- virtualHeight = _ref.virtualHeight,
470
- columnVisibility = _ref.columnVisibility,
471
- columnVisibilityChange = _ref.columnVisibilityChange,
472
- emptyMessage = _ref.emptyMessage,
473
- columnOrder = _ref.columnOrder,
474
- cellClass = _ref.cellClass,
475
- cellStyle = _ref.cellStyle,
476
- rowClass = _ref.rowClass,
477
- rowStyle = _ref.rowStyle,
478
- headerClass = _ref.headerClass,
479
- headerStyle = _ref.headerStyle,
480
- externalPaginator = _ref.externalPaginator,
481
- _onSortingChange = _ref.onSortingChange,
482
- manualSorting = _ref.manualSorting,
483
- sortingState = _ref.sortingState,
484
- columnPinState = _ref.columnPinState,
485
- scrollbarHorizontal = _ref.scrollbarHorizontal,
486
- width = _ref.width,
487
- height = _ref.height;
488
- var _useState = react.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []),
489
- _useState2 = _slicedToArray__default.default(_useState, 2),
490
- sorting = _useState2[0],
491
- setSorting = _useState2[1];
492
- var _useState3 = react.useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
493
- _useState4 = _slicedToArray__default.default(_useState3, 2),
494
- selection = _useState4[0],
495
- setSelection = _useState4[1];
496
- var _useState5 = react.useState(columnPinState !== null && columnPinState !== void 0 ? columnPinState : {}),
497
- _useState6 = _slicedToArray__default.default(_useState5, 2),
498
- columnPin = _useState6[0],
499
- setColumnPin = _useState6[1];
500
- var _useState7 = react.useState([]),
501
- _useState8 = _slicedToArray__default.default(_useState7, 2),
502
- columnFilters = _useState8[0],
503
- setColumnFilters = _useState8[1];
504
- var _useState9 = react.useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
505
- _useState10 = _slicedToArray__default.default(_useState9, 2),
506
- visible = _useState10[0],
507
- setVisible = _useState10[1];
508
- var _useState11 = react.useState(''),
509
- _useState12 = _slicedToArray__default.default(_useState11, 2),
510
- globalFilter = _useState12[0],
511
- setGlobalFilter = _useState12[1];
512
- var _useState13 = react.useState([]),
513
- _useState14 = _slicedToArray__default.default(_useState13, 2),
514
- columnOrderState = _useState14[0],
515
- setColumnOrderState = _useState14[1];
516
- var _useState15 = react.useState({
517
- pageIndex: 0,
518
- pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
519
- }),
520
- _useState16 = _slicedToArray__default.default(_useState15, 2),
521
- page = _useState16[0],
522
- setPage = _useState16[1];
523
- react.useEffect(function () {
524
- setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
383
+ // Neccessary to have this attribute as class to prevent overriding hover color
384
+ const StyledTableRow = styled__default.default(edsCoreReact.Table.Row).withConfig({
385
+ displayName: "TableRow__StyledTableRow",
386
+ componentId: "sc-1vjfq5p-0"
387
+ })(["background-color:inherit;"]);
388
+
389
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
390
+ function EdsDataGrid({
391
+ rows,
392
+ columns,
393
+ columnResizeMode,
394
+ pageSize,
395
+ rowSelection,
396
+ selectedRows,
397
+ enableColumnFiltering,
398
+ debug,
399
+ enablePagination,
400
+ enableSorting,
401
+ stickyHeader,
402
+ onSelectRow,
403
+ caption,
404
+ enableVirtual,
405
+ virtualHeight,
406
+ columnVisibility,
407
+ columnVisibilityChange,
408
+ emptyMessage,
409
+ columnOrder,
410
+ cellClass,
411
+ cellStyle,
412
+ rowClass,
413
+ rowStyle,
414
+ headerClass,
415
+ headerStyle,
416
+ externalPaginator,
417
+ onSortingChange,
418
+ manualSorting,
419
+ sortingState,
420
+ columnPinState,
421
+ scrollbarHorizontal,
422
+ width,
423
+ minWidth,
424
+ height,
425
+ getRowId,
426
+ rowVirtualizerInstanceRef
427
+ }) {
428
+ const [sorting, setSorting] = react.useState(sortingState ?? []);
429
+ const [selection, setSelection] = react.useState(selectedRows ?? {});
430
+ const [columnPin, setColumnPin] = react.useState(columnPinState ?? {});
431
+ const [columnFilters, setColumnFilters] = react.useState([]);
432
+ const [visible, setVisible] = react.useState(columnVisibility ?? {});
433
+ const [globalFilter, setGlobalFilter] = react.useState('');
434
+ const [columnOrderState, setColumnOrderState] = react.useState([]);
435
+ const [page, setPage] = react.useState({
436
+ pageIndex: 0,
437
+ pageSize: pageSize ?? 25
438
+ });
439
+ react.useEffect(() => {
440
+ setVisible(columnVisibility ?? {});
525
441
  }, [columnVisibility, setVisible]);
526
- react.useEffect(function () {
527
- setColumnPin(function (s) {
528
- return columnPinState !== null && columnPinState !== void 0 ? columnPinState : s;
529
- });
442
+ react.useEffect(() => {
443
+ setColumnPin(s => columnPinState ?? s);
530
444
  }, [columnPinState]);
531
- react.useEffect(function () {
445
+ react.useEffect(() => {
532
446
  setSorting(sortingState);
533
447
  }, [sortingState]);
534
- react.useEffect(function () {
535
- setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
448
+ react.useEffect(() => {
449
+ setSelection(selectedRows ?? {});
536
450
  }, [selectedRows]);
537
451
 
538
452
  /**
539
453
  * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
540
454
  */
541
- var _columns = react.useMemo(function () {
542
- return columns.map(function (column) {
455
+ const _columns = react.useMemo(() => {
456
+ return columns.map(column => {
543
457
  if (column.filterFn || column.enableColumnFilter === false) {
544
458
  return column;
545
459
  }
546
460
  /* istanbul ignore next */
547
- return _objectSpread__default.default(_objectSpread__default.default({}, column), {}, {
548
- filterFn: function filterFn(row, columnId, filterValue) {
549
- var _row$getValue;
461
+ return {
462
+ ...column,
463
+ filterFn: (row, columnId, filterValue) => {
550
464
  if (debug) {
551
465
  console.log('filterFn', row, columnId, filterValue);
552
466
  }
553
467
  if (!filterValue || (Array.isArray(filterValue) || typeof filterValue === 'string') && filterValue.length === 0) {
554
468
  return true;
555
469
  }
556
- var value = (_row$getValue = row.getValue(columnId)) !== null && _row$getValue !== void 0 ? _row$getValue : 'NULL_OR_UNDEFINED';
470
+ const value = row.getValue(columnId) ?? 'NULL_OR_UNDEFINED';
557
471
  if (Array.isArray(filterValue)) {
558
- var numeric = filterValue.some(function (v) {
559
- return typeof v === 'number';
560
- });
472
+ const numeric = filterValue.some(v => typeof v === 'number');
561
473
  if (numeric) {
562
- var _ref2 = filterValue,
563
- _ref3 = _slicedToArray__default.default(_ref2, 2),
564
- start = _ref3[0],
565
- end = _ref3[1];
474
+ const [start, end] = filterValue;
566
475
  return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
567
476
  } else {
568
- var validFilterValue = filterValue.filter(function (v) {
569
- return !!v;
570
- });
477
+ const validFilterValue = filterValue.filter(v => !!v);
571
478
  if (validFilterValue.length === 0) return true;
572
479
  return filterValue.includes(value);
573
480
  }
574
481
  }
575
482
  return value === filterValue;
576
483
  }
577
- });
484
+ };
578
485
  });
579
486
  }, [debug, columns]);
580
487
 
581
488
  /**
582
489
  * Set up default table options
583
490
  */
584
- var options = {
491
+ const options = {
585
492
  data: rows,
586
493
  columns: _columns,
494
+ defaultColumn: {
495
+ cell: context => {
496
+ return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
497
+ style: {
498
+ overflow: 'hidden',
499
+ whiteSpace: 'nowrap',
500
+ textOverflow: 'ellipsis'
501
+ },
502
+ group: "table",
503
+ variant: "cell_text",
504
+ children: String(context.getValue() ?? '')
505
+ });
506
+ }
507
+ },
587
508
  columnResizeMode: columnResizeMode,
588
509
  state: {
589
- sorting: sorting,
510
+ sorting,
590
511
  columnPinning: columnPin,
591
512
  rowSelection: selection,
592
513
  columnOrder: columnOrderState
593
514
  },
594
- onSortingChange: function onSortingChange(changes) {
595
- if (_onSortingChange) {
596
- _onSortingChange(changes);
515
+ onSortingChange: changes => {
516
+ if (onSortingChange) {
517
+ onSortingChange(changes);
597
518
  }
598
519
  setSorting(changes);
599
520
  },
600
521
  enableColumnFilters: !!enableColumnFiltering,
601
522
  enableFilters: !!enableColumnFiltering,
602
- enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
603
- manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
523
+ enableSorting: enableSorting ?? false,
524
+ manualSorting: manualSorting ?? false,
604
525
  enableColumnResizing: !!columnResizeMode,
605
526
  getCoreRowModel: reactTable.getCoreRowModel(),
606
527
  getSortedRowModel: reactTable.getSortedRowModel(),
607
528
  debugTable: debug,
608
529
  debugHeaders: debug,
609
530
  debugColumns: debug,
610
- enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false,
531
+ enableRowSelection: rowSelection ?? false,
611
532
  enableColumnPinning: true,
612
- enablePinning: true
533
+ enablePinning: true,
534
+ getRowId
613
535
  };
614
- react.useEffect(function () {
536
+ react.useEffect(() => {
615
537
  if (columnOrder && columnOrder.length > 0) {
616
- setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
538
+ setColumnOrderState(columnOrder ?? []);
617
539
  }
618
540
  }, [columnOrder]);
619
541
 
620
542
  /**
621
543
  * Set up handlers for rowSelection
622
544
  */
623
- if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
624
- options.onRowSelectionChange = function (updaterOrValue) {
545
+ if (rowSelection ?? false) {
546
+ options.onRowSelectionChange = updaterOrValue => {
625
547
  if (onSelectRow) {
626
548
  onSelectRow(updaterOrValue);
627
549
  }
@@ -646,7 +568,7 @@ function EdsDataGrid(_ref) {
646
568
  /**
647
569
  * Set up config for pagination
648
570
  */
649
- if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
571
+ if (enablePagination ?? false) {
650
572
  options.state.pagination = page;
651
573
  options.getPaginationRowModel = reactTable.getPaginationRowModel();
652
574
  }
@@ -656,8 +578,8 @@ function EdsDataGrid(_ref) {
656
578
  */
657
579
  if (columnVisibility) {
658
580
  options.state.columnVisibility = visible;
659
- options.onColumnVisibilityChange = function (vis) {
660
- var updated;
581
+ options.onColumnVisibilityChange = vis => {
582
+ let updated;
661
583
  if (typeof vis === 'function') {
662
584
  updated = vis(visible);
663
585
  } else {
@@ -667,51 +589,49 @@ function EdsDataGrid(_ref) {
667
589
  setVisible(updated);
668
590
  };
669
591
  }
670
- react.useEffect(function () {
671
- setPage(function (prev) {
672
- return _objectSpread__default.default(_objectSpread__default.default({}, prev), {}, {
673
- pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
674
- });
675
- });
592
+ react.useEffect(() => {
593
+ setPage(prev => ({
594
+ ...prev,
595
+ pageSize: pageSize ?? 25
596
+ }));
676
597
  }, [pageSize]);
677
- var table = reactTable.useReactTable(options);
678
- var parentRefStyle = {};
598
+ const table = reactTable.useReactTable(options);
599
+ let parentRefStyle = {};
679
600
 
680
601
  /**
681
602
  * Style the parent container to enable virtualization.
682
603
  * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
683
604
  */
684
605
  if (enableVirtual) {
685
- var _ref4;
686
606
  parentRefStyle = {
687
- height: (_ref4 = height !== null && height !== void 0 ? height : virtualHeight) !== null && _ref4 !== void 0 ? _ref4 : 500,
607
+ height: height ?? virtualHeight ?? 500,
688
608
  overflow: 'auto',
689
609
  position: 'relative'
690
610
  };
691
611
  }
692
- var parentRef = react.useRef(null);
612
+ const parentRef = react.useRef(null);
693
613
 
694
614
  /**
695
615
  * Virtualization setup
696
616
  */
697
- var _useEds = edsCoreReact.useEds(),
698
- density = _useEds.density;
699
- var estimateSize = react.useCallback(function () {
617
+ const {
618
+ density
619
+ } = edsCoreReact.useEds();
620
+ const estimateSize = react.useCallback(() => {
700
621
  return density === 'compact' ? 32 : 48;
701
622
  }, [density]);
702
- var virtualizer = reactVirtual.useVirtualizer({
623
+ const virtualizer = reactVirtual.useVirtualizer({
703
624
  count: table.getRowModel().rows.length,
704
- getScrollElement: function getScrollElement() {
705
- return parentRef.current;
706
- },
707
- estimateSize: estimateSize
625
+ getScrollElement: () => parentRef.current,
626
+ estimateSize
708
627
  });
709
- var virtualRows = virtualizer.getVirtualItems();
710
- var paddingTop = virtualRows.length ? virtualRows[0].start : 0;
711
- var paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
628
+ if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
629
+ const virtualRows = virtualizer.getVirtualItems();
630
+ const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
631
+ const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
712
632
 
713
633
  // These classes are primarily used to allow for feature-detection in the test-suite
714
- var classList = {
634
+ const classList = {
715
635
  'sticky-header': !!stickyHeader,
716
636
  virtual: !!enableVirtual,
717
637
  paging: !!enablePagination
@@ -729,88 +649,82 @@ function EdsDataGrid(_ref) {
729
649
  stickyHeader: !!stickyHeader,
730
650
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
731
651
  className: "table-wrapper",
732
- style: _objectSpread__default.default(_objectSpread__default.default({
733
- height: height !== null && height !== void 0 ? height : 'auto'
734
- }, parentRefStyle), {}, {
735
- width: scrollbarHorizontal ? width : 'auto',
736
- tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
737
- overflow: 'auto'
738
- }),
652
+ style: {
653
+ height: height ?? 'auto',
654
+ ...parentRefStyle,
655
+ width: scrollbarHorizontal ? width ?? '100%' : 'auto',
656
+ overflow: 'auto',
657
+ contain: 'layout paint style'
658
+ },
739
659
  ref: parentRef,
740
660
  children: [/*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table, {
741
- className: Object.entries(classList).filter(function (_ref5) {
742
- var _ref6 = _slicedToArray__default.default(_ref5, 2),
743
- k = _ref6[1];
744
- return k;
745
- }).map(function (_ref7) {
746
- var _ref8 = _slicedToArray__default.default(_ref7, 1),
747
- k = _ref8[0];
748
- return k;
749
- }).join(' '),
661
+ className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
750
662
  style: {
751
- width: table.getTotalSize()
663
+ tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
664
+ width: table.getTotalSize(),
665
+ minWidth: scrollbarHorizontal ? minWidth : 'auto'
752
666
  },
753
667
  children: [caption && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Caption, {
754
668
  children: caption
755
669
  }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Head, {
756
670
  sticky: stickyHeader,
757
- children: table.getHeaderGroups().map(function (headerGroup) {
758
- return /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
759
- table: table,
760
- headerGroup: headerGroup,
761
- columnResizeMode: columnResizeMode,
762
- deltaOffset: table.getState().columnSizingInfo.deltaOffset
763
- }, headerGroup.id);
764
- })
671
+ children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
672
+ table: table,
673
+ headerGroup: headerGroup,
674
+ columnResizeMode: columnResizeMode,
675
+ deltaOffset: table.getState().columnSizingInfo.deltaOffset
676
+ }, headerGroup.id))
765
677
  }), /*#__PURE__*/jsxRuntime.jsxs(edsCoreReact.Table.Body, {
678
+ style: {
679
+ backgroundColor: 'inherit'
680
+ },
766
681
  children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
767
682
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
768
- colSpan: table.getHeaderGroups().length,
683
+ colSpan: table.getFlatHeaders().length,
769
684
  children: emptyMessage
770
685
  })
771
686
  }), enableVirtual && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
772
- children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
687
+ children: [paddingTop > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
773
688
  "data-testid": "virtual-padding-top",
774
689
  className: 'virtual-padding-top',
690
+ style: {
691
+ pointerEvents: 'none'
692
+ },
775
693
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
776
694
  style: {
777
- height: "".concat(paddingTop, "px")
695
+ height: `${paddingTop}px`
778
696
  }
779
697
  })
780
- }), virtualRows.map(function (row) {
781
- return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
782
- row: table.getRowModel().rows[row.index]
783
- }, row.index);
784
- }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
698
+ }), virtualRows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
699
+ row: table.getRowModel().rows[row.index]
700
+ }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Row, {
785
701
  "data-testid": "virtual-padding-bottom",
786
702
  className: 'virtual-padding-bottom',
703
+ style: {
704
+ pointerEvents: 'none'
705
+ },
787
706
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Cell, {
788
707
  style: {
789
- height: "".concat(paddingBottom, "px")
708
+ height: `${paddingBottom}px`
790
709
  }
791
710
  })
792
711
  })]
793
- }), !enableVirtual && table.getRowModel().rows.map(function (row) {
794
- return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
795
- row: row
796
- }, row.id);
797
- })]
712
+ }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsxRuntime.jsx(TableRow, {
713
+ row: row
714
+ }, row.id))]
798
715
  })]
799
716
  }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
800
717
  style: {
801
- maxWidth: "".concat(table.getTotalSize(), "px")
718
+ maxWidth: `${table.getTotalSize()}px`
802
719
  },
803
720
  children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Pagination, {
804
721
  totalItems: table.getFilteredRowModel().rows.length,
805
722
  withItemIndicator: true,
806
723
  itemsPerPage: page.pageSize,
807
- onChange: function onChange(e, p) {
808
- return setPage(function (s) {
809
- return _objectSpread__default.default(_objectSpread__default.default({}, s), {}, {
810
- pageIndex: p - 1
811
- });
812
- });
813
- },
724
+ onChange: (e, p) => setPage(s => ({
725
+ ...s,
726
+ pageIndex: p - 1
727
+ })),
814
728
  defaultPage: 1
815
729
  })
816
730
  })]