@dmsi/wedgekit-react 0.0.172 → 0.0.174

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 (11) hide show
  1. package/dist/{chunk-O4JGGMFE.js → chunk-Z2KZO4J3.js} +20 -9
  2. package/dist/components/DataGridCell.cjs +20 -9
  3. package/dist/components/DataGridCell.js +1 -1
  4. package/dist/components/index.cjs +213 -181
  5. package/dist/components/index.js +194 -173
  6. package/package.json +1 -1
  7. package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx +1 -1
  8. package/src/components/DataGrid/PinnedColumns.tsx +19 -6
  9. package/src/components/DataGrid/TableBody/TableBodyRow.tsx +7 -2
  10. package/src/components/DataGrid/index.tsx +38 -9
  11. package/src/components/DataGridCell.tsx +16 -4
package/dist/components/index.js CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  DataGridCell,
13
13
  DragAlongCell,
14
14
  DraggableCellHeader
15
- } from "../chunk-O4JGGMFE.js";
15
+ } from "../chunk-Z2KZO4J3.js";
16
16
  import {
17
17
  Menu
18
18
  } from "../chunk-UBU6IJML.js";
@@ -170,7 +170,7 @@ function TableBodyRow({
170
170
  /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
171
171
  ) : null,
172
172
  columns.map((column) => {
173
- var _a2, _b;
173
+ var _a2, _b, _c;
174
174
  const cell = locked ? column : visibleCells[column.index];
175
175
  if (!cell) {
176
176
  return;
@@ -185,7 +185,7 @@ function TableBodyRow({
185
185
  className: clsx2({
186
186
  "justify-end": typeof cellValue === "number"
187
187
  }),
188
- width: (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth,
188
+ width: (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth) != null ? _c : `${cell.column.getSize()}px`,
189
189
  children: /* @__PURE__ */ jsx2(
190
190
  Tooltip,
191
191
  {
@@ -412,68 +412,75 @@ function PinnedColumns(_a) {
412
412
  "data-testid": pinnedTestId,
413
413
  children: [
414
414
  /* @__PURE__ */ jsx5("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
415
- return /* @__PURE__ */ jsx5("tr", { "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: headerGroup.headers.map((header) => {
416
- var _a3, _b2, _c;
417
- if (!header) {
418
- return;
419
- }
420
- if (typeof header.column.columnDef.header === "string") {
421
- const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
422
- return /* @__PURE__ */ jsxs3(
423
- DataCellHeader,
424
- {
425
- locked: true,
426
- testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
427
- header,
428
- center: centerHeader,
429
- width: customHeaderWidth,
430
- className: clsx4(
431
- header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
432
- "group"
433
- ),
434
- children: [
435
- /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.columnDef.header }),
436
- getSortIcon(header.column.getIsSorted()),
437
- !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
438
- header.column.getNextSortingOrder(),
439
- true
440
- ),
441
- header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
442
- !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx5(
443
- "div",
444
- {
445
- onDoubleClick: (e) => {
446
- e.stopPropagation();
447
- header.column.resetSize();
448
- },
449
- onMouseDown: (e) => {
450
- e.stopPropagation();
451
- header.getResizeHandler()(e);
452
- },
453
- onTouchStart: (e) => {
454
- e.stopPropagation();
455
- header.getResizeHandler()(e);
456
- },
457
- className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
458
- }
459
- )
460
- ]
461
- },
462
- header.id
463
- );
464
- }
465
- return /* @__PURE__ */ jsx5(React2.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx5(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx5(
466
- Checkbox,
467
- {
468
- checked: allSelectedAcrossPages,
469
- indeterminate: someSelectedAcrossPages,
470
- onChange: toggleSelectAllAcrossPages
471
- }
472
- ) }) : flexRender2(
473
- header.column.columnDef.header,
474
- header.getContext()
475
- ) }, header.id);
476
- }) }, headerGroup.id);
415
+ return /* @__PURE__ */ jsx5(
416
+ "tr",
417
+ {
418
+ "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0,
419
+ className: "flex w-full",
420
+ children: headerGroup.headers.map((header) => {
421
+ var _a3, _b2, _c, _d;
422
+ if (!header) {
423
+ return;
424
+ }
425
+ if (typeof header.column.columnDef.header === "string") {
426
+ return /* @__PURE__ */ jsxs3(
427
+ DataCellHeader,
428
+ {
429
+ locked: true,
430
+ testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
431
+ header,
432
+ center: centerHeader,
433
+ width: (_b2 = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth) != null ? _b2 : `${header.column.getSize()}px`,
434
+ className: clsx4(
435
+ header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
436
+ "group"
437
+ ),
438
+ children: [
439
+ /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.columnDef.header }),
440
+ getSortIcon(header.column.getIsSorted()),
441
+ !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
442
+ header.column.getNextSortingOrder(),
443
+ true
444
+ ),
445
+ header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
446
+ !((_c = header.column.columnDef.meta) == null ? void 0 : _c.locked) && /* @__PURE__ */ jsx5(
447
+ "div",
448
+ {
449
+ onDoubleClick: (e) => {
450
+ e.stopPropagation();
451
+ header.column.resetSize();
452
+ },
453
+ onMouseDown: (e) => {
454
+ e.stopPropagation();
455
+ header.getResizeHandler()(e);
456
+ },
457
+ onTouchStart: (e) => {
458
+ e.stopPropagation();
459
+ header.getResizeHandler()(e);
460
+ },
461
+ className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
462
+ }
463
+ )
464
+ ]
465
+ },
466
+ header.id
467
+ );
468
+ }
469
+ return /* @__PURE__ */ jsx5(React2.Fragment, { children: ((_d = header.column.columnDef.meta) == null ? void 0 : _d.checkbox) ? /* @__PURE__ */ jsx5(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx5(
470
+ Checkbox,
471
+ {
472
+ checked: allSelectedAcrossPages,
473
+ indeterminate: someSelectedAcrossPages,
474
+ onChange: toggleSelectAllAcrossPages
475
+ }
476
+ ) }) : flexRender2(
477
+ header.column.columnDef.header,
478
+ header.getContext()
479
+ ) }, header.id);
480
+ })
481
+ },
482
+ headerGroup.id
483
+ );
477
484
  }) }),
478
485
  /* @__PURE__ */ jsx5(
479
486
  TableBody,
@@ -535,7 +542,7 @@ function ColumnSelectorHeaderCell({
535
542
  {
536
543
  id,
537
544
  testid,
538
- width: "48",
545
+ width: "48px",
539
546
  type: "header",
540
547
  color: "text-secondary-normal",
541
548
  ref,
@@ -781,7 +788,7 @@ function DataGrid({
781
788
  //estimate width of each column for accurate scrollbar dragging
782
789
  getScrollElement: () => containerRef.current,
783
790
  horizontal: true,
784
- overscan: 3
791
+ overscan: 8
785
792
  //how many columns to render on each side off screen each way
786
793
  });
787
794
  const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -836,118 +843,126 @@ function DataGrid({
836
843
  }
837
844
  ),
838
845
  /* @__PURE__ */ jsxs5("table", { className: "flex-1 flex flex-col min-h-min", children: [
839
- /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5("tr", { "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: [
840
- virtualPaddingLeft ? (
841
- // fake empty column to the left for virtualization scroll padding
842
- /* @__PURE__ */ jsx8(
843
- "th",
844
- {
845
- style: { display: "flex", width: virtualPaddingLeft }
846
- }
847
- )
848
- ) : null,
849
- virtualColumns.map((virtualColumn) => {
850
- var _a2, _b2, _c2, _d2;
851
- const header = headerGroup.headers[virtualColumn.index];
852
- if (!header) {
853
- return;
854
- }
855
- if (typeof header.column.columnDef.header === "string") {
856
- const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
857
- const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
858
- return /* @__PURE__ */ jsxs5(
859
- DraggableCellHeader,
860
- {
861
- id: id ? `${id}-header-${header.id}` : void 0,
862
- testid: testid ? `${testid}-header-${header.id}` : void 0,
863
- header,
864
- locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
865
- center: centerHeader,
866
- width: customHeaderWidth,
867
- className: clsx5(
868
- header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
869
- "group",
846
+ /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(
847
+ "tr",
848
+ {
849
+ "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0,
850
+ className: "flex w-full",
851
+ children: [
852
+ virtualPaddingLeft ? (
853
+ // fake empty column to the left for virtualization scroll padding
854
+ /* @__PURE__ */ jsx8(
855
+ "th",
856
+ {
857
+ style: { display: "flex", width: virtualPaddingLeft }
858
+ }
859
+ )
860
+ ) : null,
861
+ virtualColumns.map((virtualColumn) => {
862
+ var _a2, _b2, _c2, _d2;
863
+ const header = headerGroup.headers[virtualColumn.index];
864
+ if (!header) {
865
+ return;
866
+ }
867
+ if (typeof header.column.columnDef.header === "string") {
868
+ const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
869
+ const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
870
+ return /* @__PURE__ */ jsxs5(
871
+ DraggableCellHeader,
870
872
  {
871
- "justify-end": typeof cellValue === "number"
872
- }
873
- ),
874
- useMenuDefaultMinWidth,
875
- children: [
876
- typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
877
- getSortIcon(header.column.getIsSorted()),
878
- !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
879
- header.column.getNextSortingOrder(),
880
- true
881
- ),
882
- header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
883
- typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
884
- /* @__PURE__ */ jsx8(
885
- "div",
873
+ id: id ? `${id}-header-${header.id}` : void 0,
874
+ testid: testid ? `${testid}-header-${header.id}` : void 0,
875
+ header,
876
+ locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
877
+ center: centerHeader,
878
+ width: customHeaderWidth,
879
+ className: clsx5(
880
+ header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
881
+ "group",
882
+ {
883
+ "justify-end": typeof cellValue === "number"
884
+ }
885
+ ),
886
+ useMenuDefaultMinWidth,
887
+ children: [
888
+ typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
889
+ getSortIcon(header.column.getIsSorted()),
890
+ !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
891
+ header.column.getNextSortingOrder(),
892
+ true
893
+ ),
894
+ header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
895
+ typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
896
+ /* @__PURE__ */ jsx8(
897
+ "div",
898
+ {
899
+ onDoubleClick: (e) => {
900
+ e.stopPropagation();
901
+ header.column.resetSize();
902
+ },
903
+ onMouseDown: (e) => {
904
+ e.stopPropagation();
905
+ header.getResizeHandler()(e);
906
+ },
907
+ onTouchStart: (e) => {
908
+ e.stopPropagation();
909
+ header.getResizeHandler()(e);
910
+ },
911
+ className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
912
+ }
913
+ )
914
+ ]
915
+ },
916
+ header.id
917
+ );
918
+ }
919
+ return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
920
+ DataGridCell,
921
+ {
922
+ id: id ? `${id}-header-${header.id}` : void 0,
923
+ testid: testid ? `${testid}-header-${header.id}` : void 0,
924
+ type: "header",
925
+ component: "checkbox",
926
+ locked: true,
927
+ children: /* @__PURE__ */ jsx8(
928
+ Checkbox,
886
929
  {
887
- onDoubleClick: (e) => {
888
- e.stopPropagation();
889
- header.column.resetSize();
890
- },
891
- onMouseDown: (e) => {
892
- e.stopPropagation();
893
- header.getResizeHandler()(e);
894
- },
895
- onTouchStart: (e) => {
896
- e.stopPropagation();
897
- header.getResizeHandler()(e);
898
- },
899
- className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
930
+ id: id ? `${id}-select-all-checkbox` : void 0,
931
+ testid: testid ? `${testid}-select-all-checkbox` : void 0,
932
+ checked: allSelectedAcrossPages,
933
+ indeterminate: someSelectedAcrossPages,
934
+ onChange: toggleSelectAllAcrossPages
900
935
  }
901
936
  )
902
- ]
903
- },
904
- header.id
905
- );
906
- }
907
- return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
908
- DataGridCell,
909
- {
910
- id: id ? `${id}-header-${header.id}` : void 0,
911
- testid: testid ? `${testid}-header-${header.id}` : void 0,
912
- type: "header",
913
- component: "checkbox",
914
- locked: true,
915
- children: /* @__PURE__ */ jsx8(
916
- Checkbox,
937
+ }
938
+ ) : flexRender3(
939
+ header.column.columnDef.header,
940
+ header.getContext()
941
+ ) }, header.id);
942
+ }),
943
+ virtualPaddingRight ? (
944
+ //fake empty column to the right for virtualization scroll padding
945
+ /* @__PURE__ */ jsx8(
946
+ "th",
917
947
  {
918
- id: id ? `${id}-select-all-checkbox` : void 0,
919
- testid: testid ? `${testid}-select-all-checkbox` : void 0,
920
- checked: allSelectedAcrossPages,
921
- indeterminate: someSelectedAcrossPages,
922
- onChange: toggleSelectAllAcrossPages
948
+ style: { display: "flex", width: virtualPaddingRight }
923
949
  }
924
950
  )
925
- }
926
- ) : flexRender3(
927
- header.column.columnDef.header,
928
- header.getContext()
929
- ) }, header.id);
930
- }),
931
- virtualPaddingRight ? (
932
- //fake empty column to the right for virtualization scroll padding
933
- /* @__PURE__ */ jsx8(
934
- "th",
935
- {
936
- style: { display: "flex", width: virtualPaddingRight }
937
- }
938
- )
939
- ) : null,
940
- enableColumnSelector && /* @__PURE__ */ jsx8(
941
- ColumnSelectorHeaderCell,
942
- {
943
- id: id ? `${id}-column-selector` : void 0,
944
- testid: testid ? `${testid}-column-selector` : void 0,
945
- table,
946
- toggleColumnVisibility,
947
- resetColumnVisibility
948
- }
949
- )
950
- ] }, headerGroup.id)) }),
951
+ ) : null,
952
+ enableColumnSelector && /* @__PURE__ */ jsx8(
953
+ ColumnSelectorHeaderCell,
954
+ {
955
+ id: id ? `${id}-column-selector` : void 0,
956
+ testid: testid ? `${testid}-column-selector` : void 0,
957
+ table,
958
+ toggleColumnVisibility,
959
+ resetColumnVisibility
960
+ }
961
+ )
962
+ ]
963
+ },
964
+ headerGroup.id
965
+ )) }),
951
966
  /* @__PURE__ */ jsx8(
952
967
  TableBody,
953
968
  {
@@ -1076,7 +1091,13 @@ function DataGrid({
1076
1091
  )
1077
1092
  ] })
1078
1093
  ] }),
1079
- status && /* @__PURE__ */ jsx8(Paragraph, { testid: testid ? `${testid}-status-text` : void 0, children: status })
1094
+ status && /* @__PURE__ */ jsx8(
1095
+ Paragraph,
1096
+ {
1097
+ testid: testid ? `${testid}-status-text` : void 0,
1098
+ children: status
1099
+ }
1100
+ )
1080
1101
  ] })
1081
1102
  ]
1082
1103
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dmsi/wedgekit-react",
3
3
  "private": false,
4
- "version": "0.0.172",
4
+ "version": "0.0.174",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "tsup",
package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx CHANGED
@@ -23,7 +23,7 @@ export function ColumnSelectorHeaderCell<T>({
23
23
  <DataGridCell
24
24
  id={id}
25
25
  testid={testid}
26
- width="48"
26
+ width="48px"
27
27
  type="header"
28
28
  color="text-secondary-normal"
29
29
  ref={ref}
package/src/components/DataGrid/PinnedColumns.tsx CHANGED
@@ -50,24 +50,37 @@ export function PinnedColumns<TData>({
50
50
  <thead className="sticky top-0 z-20 grid">
51
51
  {headerGroups.map((headerGroup) => {
52
52
  return (
53
- <tr key={headerGroup.id} data-testid={pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : undefined} className="flex w-full">
53
+ <tr
54
+ key={headerGroup.id}
55
+ data-testid={
56
+ pinnedTestId
57
+ ? `${pinnedTestId}-header-row-${headerGroup.id}`
58
+ : undefined
59
+ }
60
+ className="flex w-full"
61
+ >
54
62
  {headerGroup.headers.map((header) => {
55
63
  if (!header) {
56
64
  return;
57
65
  }
58
66
 
59
67
  if (typeof header.column.columnDef.header === "string") {
60
- const customHeaderWidth =
61
- header.column.columnDef.meta?.headerWidth;
62
-
63
68
  return (
64
69
  <DataCellHeader
65
70
  locked
66
71
  key={header.id}
67
- testid={pinnedTestId ? `${pinnedTestId}-header-${header.id}` : undefined}
72
+ testid={
73
+ pinnedTestId
74
+ ? `${pinnedTestId}-header-${header.id}`
75
+ : undefined
76
+ }
68
77
  header={header}
69
78
  center={centerHeader}
70
- width={customHeaderWidth}
79
+ width={
80
+ (header.column.columnDef.meta?.headerWidth as
81
+ | string
82
+ | undefined) ?? `${header.column.getSize()}px`
83
+ }
71
84
  className={clsx(
72
85
  header.column.getCanSort()
73
86
  ? "cursor-pointer"
package/src/components/DataGrid/TableBody/TableBodyRow.tsx CHANGED
@@ -100,12 +100,17 @@ export function TableBodyRow<T>({
100
100
  <CellElement
101
101
  key={cell.id}
102
102
  id={id ? `${id}-row-${row.id}-cell-${cell.id}` : undefined}
103
- testid={testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined}
103
+ testid={
104
+ testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined
105
+ }
104
106
  cell={cell}
105
107
  className={clsx({
106
108
  "justify-end": typeof cellValue === "number",
107
109
  })}
108
- width={cell.column.columnDef.meta?.headerWidth}
110
+ width={
111
+ (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
112
+ `${cell.column.getSize()}px`
113
+ }
109
114
  >
110
115
  <Tooltip
111
116
  id={id ? `${id}-tooltip-${cell.id}` : undefined}
package/src/components/DataGrid/index.tsx CHANGED
@@ -299,7 +299,7 @@ export function DataGrid<T extends Record<string, unknown>>({
299
299
  estimateSize: (index) => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
300
300
  getScrollElement: () => containerRef.current,
301
301
  horizontal: true,
302
- overscan: 3, //how many columns to render on each side off screen each way
302
+ overscan: 8, //how many columns to render on each side off screen each way
303
303
  });
304
304
 
305
305
  const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -355,7 +355,15 @@ export function DataGrid<T extends Record<string, unknown>>({
355
355
  <table className="flex-1 flex flex-col min-h-min">
356
356
  <thead className="sticky top-0 z-10 grid">
357
357
  {table.getCenterHeaderGroups().map((headerGroup) => (
358
- <tr data-testid={testid ? `${testid}-header-row-${headerGroup.id}` : undefined} key={headerGroup.id} className="flex w-full">
358
+ <tr
359
+ data-testid={
360
+ testid
361
+ ? `${testid}-header-row-${headerGroup.id}`
362
+ : undefined
363
+ }
364
+ key={headerGroup.id}
365
+ className="flex w-full"
366
+ >
359
367
  {virtualPaddingLeft ? (
360
368
  // fake empty column to the left for virtualization scroll padding
361
369
  <th
@@ -381,7 +389,11 @@ export function DataGrid<T extends Record<string, unknown>>({
381
389
  <DraggableCellHeader
382
390
  key={header.id}
383
391
  id={id ? `${id}-header-${header.id}` : undefined}
384
- testid={testid ? `${testid}-header-${header.id}` : undefined}
392
+ testid={
393
+ testid
394
+ ? `${testid}-header-${header.id}`
395
+ : undefined
396
+ }
385
397
  header={header}
386
398
  locked={header.column.columnDef.meta?.locked}
387
399
  center={centerHeader}
@@ -446,16 +458,23 @@ export function DataGrid<T extends Record<string, unknown>>({
446
458
  {header.column.columnDef.meta?.checkbox ? (
447
459
  <DataGridCell
448
460
  id={id ? `${id}-header-${header.id}` : undefined}
449
- testid={testid ? `${testid}-header-${header.id}` : undefined}
461
+ testid={
462
+ testid
463
+ ? `${testid}-header-${header.id}`
464
+ : undefined
465
+ }
450
466
  type="header"
451
- component="checkbox" locked
467
+ component="checkbox"
468
+ locked
452
469
  >
453
470
  <Checkbox
454
471
  id={
455
472
  id ? `${id}-select-all-checkbox` : undefined
456
473
  }
457
474
  testid={
458
- testid ? `${testid}-select-all-checkbox` : undefined
475
+ testid
476
+ ? `${testid}-select-all-checkbox`
477
+ : undefined
459
478
  }
460
479
  checked={allSelectedAcrossPages}
461
480
  indeterminate={someSelectedAcrossPages}
@@ -481,7 +500,9 @@ export function DataGrid<T extends Record<string, unknown>>({
481
500
  {enableColumnSelector && (
482
501
  <ColumnSelectorHeaderCell
483
502
  id={id ? `${id}-column-selector` : undefined}
484
- testid={testid ? `${testid}-column-selector` : undefined}
503
+ testid={
504
+ testid ? `${testid}-column-selector` : undefined
505
+ }
485
506
  table={table}
486
507
  toggleColumnVisibility={toggleColumnVisibility}
487
508
  resetColumnVisibility={resetColumnVisibility}
@@ -554,7 +575,9 @@ export function DataGrid<T extends Record<string, unknown>>({
554
575
  <Menu
555
576
  {...props}
556
577
  id={id ? `${id}-pagesize-menu` : undefined}
557
- testid={testid ? `${testid}-pagesize-menu` : undefined}
578
+ testid={
579
+ testid ? `${testid}-pagesize-menu` : undefined
580
+ }
558
581
  >
559
582
  {PAGE_SIZE_OPTIONS.map((option) => (
560
583
  <MenuOption
@@ -616,7 +639,13 @@ export function DataGrid<T extends Record<string, unknown>>({
616
639
  </div>
617
640
  )}
618
641
 
619
- {status && <Paragraph testid={testid ? `${testid}-status-text` : undefined}>{status}</Paragraph>}
642
+ {status && (
643
+ <Paragraph
644
+ testid={testid ? `${testid}-status-text` : undefined}
645
+ >
646
+ {status}
647
+ </Paragraph>
648
+ )}
620
649
  </div>
621
650
  )}
622
651
  </div>