@equinor/eds-data-grid-react 0.8.0 → 0.8.1

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 (4) hide show
  1. package/dist/eds-data-grid-react.cjs +10 -3
  2. package/dist/esm/EdsDataGrid.js +0 -1
  3. package/dist/esm/components/TableHeaderCell.js +11 -2
  4. package/package.json +5 -5
package/dist/eds-data-grid-react.cjs CHANGED
@@ -304,6 +304,12 @@ function TableHeaderCell({
304
304
  }
305
305
  return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
306
306
  }, [pinned, header, table]);
307
+ const {
308
+ density
309
+ } = edsCoreReact.useEds();
310
+ // Future improvement: If we down the line end up granting the ability to customize row height, we should move this to the table-context
311
+ const rowHeight = density === 'compact' ? 32 : 48;
312
+ const vertOffset = ctx.stickyHeader ? (header.depth - 1) * rowHeight : undefined;
307
313
  const tableCellPadding = react.useMemo(() => {
308
314
  if (canSort && canFilter) {
309
315
  return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
@@ -319,7 +325,8 @@ function TableHeaderCell({
319
325
  $pinned: pinned,
320
326
  className: ctx.headerClass ? ctx.headerClass(header.column) : '',
321
327
  style: {
322
- ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
328
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
329
+ top: vertOffset
323
330
  },
324
331
  "aria-hidden": true
325
332
  }) : /*#__PURE__*/jsxRuntime.jsxs(TableCell, {
@@ -334,7 +341,8 @@ function TableHeaderCell({
334
341
  width: header.getSize(),
335
342
  verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
336
343
  ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
337
- padding: tableCellPadding
344
+ padding: tableCellPadding,
345
+ top: vertOffset
338
346
  },
339
347
  children: [canSort ? /*#__PURE__*/jsxRuntime.jsxs(SortButton, {
340
348
  tabIndex: -1,
@@ -939,7 +947,6 @@ function EdsDataGridInner({
939
947
  children: [caption && /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Caption, {
940
948
  children: caption
941
949
  }), /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Table.Head, {
942
- sticky: stickyHeader,
943
950
  children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsxRuntime.jsx(TableHeaderRow, {
944
951
  table: table,
945
952
  headerGroup: headerGroup,
package/dist/esm/EdsDataGrid.js CHANGED
@@ -379,7 +379,6 @@ function EdsDataGridInner({
379
379
  children: [caption && /*#__PURE__*/jsx(Table.Caption, {
380
380
  children: caption
381
381
  }), /*#__PURE__*/jsx(Table.Head, {
382
- sticky: stickyHeader,
383
382
  children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsx(TableHeaderRow, {
384
383
  table: table,
385
384
  headerGroup: headerGroup,
package/dist/esm/components/TableHeaderCell.js CHANGED
@@ -6,6 +6,7 @@ import { SortIndicator } from './SortIndicator.js';
6
6
  import { Resizer, ResizeInner } from './Resizer.js';
7
7
  import { TableCell, FilterVisibility } from './TableCell.js';
8
8
  import styled from 'styled-components';
9
+ import { useEds } from '@equinor/eds-core-react';
9
10
  import { jsx, jsxs } from 'react/jsx-runtime';
10
11
 
11
12
  const SortButton = styled.button.withConfig({
@@ -46,6 +47,12 @@ function TableHeaderCell({
46
47
  }
47
48
  return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
48
49
  }, [pinned, header, table]);
50
+ const {
51
+ density
52
+ } = useEds();
53
+ // Future improvement: If we down the line end up granting the ability to customize row height, we should move this to the table-context
54
+ const rowHeight = density === 'compact' ? 32 : 48;
55
+ const vertOffset = ctx.stickyHeader ? (header.depth - 1) * rowHeight : undefined;
49
56
  const tableCellPadding = useMemo(() => {
50
57
  if (canSort && canFilter) {
51
58
  return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
@@ -61,7 +68,8 @@ function TableHeaderCell({
61
68
  $pinned: pinned,
62
69
  className: ctx.headerClass ? ctx.headerClass(header.column) : '',
63
70
  style: {
64
- ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
71
+ ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
72
+ top: vertOffset
65
73
  },
66
74
  "aria-hidden": true
67
75
  }) : /*#__PURE__*/jsxs(TableCell, {
@@ -76,7 +84,8 @@ function TableHeaderCell({
76
84
  width: header.getSize(),
77
85
  verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
78
86
  ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
79
- padding: tableCellPadding
87
+ padding: tableCellPadding,
88
+ top: vertOffset
80
89
  },
81
90
  children: [canSort ? /*#__PURE__*/jsxs(SortButton, {
82
91
  tabIndex: -1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/eds-data-grid-react",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
5
5
  "license": "MIT",
6
6
  "types": "dist/types/index.d.ts",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@tanstack/react-table": "^8.21.3",
24
- "@tanstack/react-virtual": "^3.13.6",
24
+ "@tanstack/react-virtual": "^3.13.8",
25
25
  "@equinor/eds-icons": "^0.22.0",
26
26
  "@equinor/eds-tokens": "0.9.2",
27
27
  "@equinor/eds-utils": "^0.8.7"
@@ -61,9 +61,9 @@
61
61
  "rollup": "^4.40.1",
62
62
  "rollup-plugin-delete": "^2.2.0",
63
63
  "rollup-plugin-postcss": "^4.0.2",
64
- "storybook": "^8.6.12",
65
- "styled-components": "6.1.17",
66
- "ts-jest": "29.3.2",
64
+ "storybook": "^8.6.14",
65
+ "styled-components": "6.1.18",
66
+ "ts-jest": "29.3.3",
67
67
  "ts-node": "10.9.2",
68
68
  "tsc-watch": "^6.2.1",
69
69
  "typescript": "~5.8.3"