@trackunit/react-table 1.0.17 → 1.0.18
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.
- package/index.cjs.js +39 -56
- package/index.esm.js +39 -56
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -316,7 +316,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
|
|
|
316
316
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
317
317
|
}, []); //This should only run once, at page load
|
|
318
318
|
const resetHiddenColumns = React__namespace.useCallback(() => {
|
|
319
|
-
columns.forEach(column =>
|
|
319
|
+
columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
|
|
320
320
|
setColumnOrder(defaultColumnOrder);
|
|
321
321
|
}, [columns, defaultColumnOrder, setColumnOrder]);
|
|
322
322
|
const sortedColumns = React.useMemo(() => {
|
|
@@ -342,9 +342,8 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
342
342
|
setLocalColumns(columns);
|
|
343
343
|
}, [columns]);
|
|
344
344
|
const onColumDrop = React__namespace.useCallback(() => {
|
|
345
|
-
var _a;
|
|
346
345
|
const firstElement = defaultColumnOrder[0];
|
|
347
|
-
const firstLocalColumnId =
|
|
346
|
+
const firstLocalColumnId = localColumns[0]?.id;
|
|
348
347
|
const newColumnOrder = firstElement === firstLocalColumnId
|
|
349
348
|
? localColumns.map(column => column.id)
|
|
350
349
|
: [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
|
|
@@ -354,7 +353,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
354
353
|
setLocalColumns(columns);
|
|
355
354
|
}, [columns]);
|
|
356
355
|
const moveColumn = React__namespace.useCallback((dragIndex, hoverIndex) => {
|
|
357
|
-
var _a;
|
|
358
356
|
const dragColumn = localColumns[dragIndex];
|
|
359
357
|
if (dragColumn) {
|
|
360
358
|
setLocalColumns(update(localColumns, {
|
|
@@ -364,20 +362,19 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
364
362
|
],
|
|
365
363
|
}));
|
|
366
364
|
}
|
|
367
|
-
onUserEvent
|
|
368
|
-
columnReordered:
|
|
365
|
+
onUserEvent?.("Column Reordering", {
|
|
366
|
+
columnReordered: dragColumn?.columnDef.header ?? "",
|
|
369
367
|
});
|
|
370
368
|
}, [localColumns, onUserEvent]);
|
|
371
369
|
return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
|
|
372
|
-
var _a, _b, _c, _d, _e, _f;
|
|
373
370
|
const { columnDef } = column;
|
|
374
|
-
if (!
|
|
371
|
+
if (!columnDef.meta?.columnFilterLabel &&
|
|
375
372
|
(!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
|
|
376
373
|
return null;
|
|
377
374
|
}
|
|
378
|
-
return (jsxRuntime.jsx(ColumnFilterItem, { disabled: !!
|
|
375
|
+
return (jsxRuntime.jsx(ColumnFilterItem, { disabled: !!column.columnDef.meta?.required, id: column.id, index: index, moveColumn: moveColumn, name: columnDef.meta?.columnFilterLabel ?? columnDef.header?.toString() ?? "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
379
376
|
column.getToggleVisibilityHandler()(event);
|
|
380
|
-
onUserEvent
|
|
377
|
+
onUserEvent?.("Column Filter", {
|
|
381
378
|
columnName: column.id,
|
|
382
379
|
hidden: !toggled,
|
|
383
380
|
});
|
|
@@ -445,7 +442,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
445
442
|
const [t] = useTranslation();
|
|
446
443
|
const handleClick = (selectedDensity) => {
|
|
447
444
|
setRowDensity(selectedDensity);
|
|
448
|
-
onUserEvent
|
|
445
|
+
onUserEvent?.("Row Spacing", {
|
|
449
446
|
densityChosen: selectedDensity,
|
|
450
447
|
});
|
|
451
448
|
};
|
|
@@ -470,28 +467,24 @@ const CompactIcon = () => {
|
|
|
470
467
|
* @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
|
|
471
468
|
*/
|
|
472
469
|
const Sorting = ({ columns, }) => {
|
|
473
|
-
var _a, _b;
|
|
474
470
|
const [t] = useTranslation();
|
|
475
471
|
const sortableColumns = columns.filter(column => column.getCanSort());
|
|
476
|
-
const currentSortValue =
|
|
477
|
-
const currentSortDirection =
|
|
472
|
+
const currentSortValue = sortableColumns.find(column => column.getIsSorted())?.id;
|
|
473
|
+
const currentSortDirection = sortableColumns.find(column => column.getIsSorted())?.getIsSorted() || "desc";
|
|
478
474
|
if (sortableColumns.length === 0) {
|
|
479
475
|
return null;
|
|
480
476
|
}
|
|
481
477
|
const handleSelectionChange = (e) => {
|
|
482
478
|
const selectedValue = e.currentTarget.value;
|
|
483
479
|
const chosenColumn = sortableColumns.find(column => column.id === selectedValue);
|
|
484
|
-
chosenColumn
|
|
480
|
+
chosenColumn?.toggleSorting(currentSortDirection === "desc");
|
|
485
481
|
};
|
|
486
482
|
const onSelectOrder = (e) => {
|
|
487
483
|
const selectedValue = e.currentTarget.value;
|
|
488
484
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
489
|
-
chosenColumn
|
|
485
|
+
chosenColumn?.toggleSorting(selectedValue === "desc");
|
|
490
486
|
};
|
|
491
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue
|
|
492
|
-
var _a, _b;
|
|
493
|
-
return (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: (_b = (_a = column.columnDef.header) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "", value: column.id }, column.id));
|
|
494
|
-
}) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
|
|
487
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
|
|
495
488
|
};
|
|
496
489
|
|
|
497
490
|
/**
|
|
@@ -502,7 +495,6 @@ const Sorting = ({ columns, }) => {
|
|
|
502
495
|
*/
|
|
503
496
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
504
497
|
const Table = ({ rowHeight = 75, ...props }) => {
|
|
505
|
-
var _a, _b, _c;
|
|
506
498
|
//we need a reference to the scrolling element for logic down below
|
|
507
499
|
const tableContainerRef = React.useRef(null);
|
|
508
500
|
const [t] = useTranslation();
|
|
@@ -518,16 +510,16 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
518
510
|
width: "100%",
|
|
519
511
|
position: "relative",
|
|
520
512
|
}, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
521
|
-
|
|
522
|
-
|
|
513
|
+
const tooltipLabel = header.column.columnDef.meta?.tootipLabel ??
|
|
514
|
+
(typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
|
|
523
515
|
return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
|
|
524
516
|
width: header.getSize(),
|
|
525
517
|
minWidth: header.column.columnDef.minSize,
|
|
526
518
|
maxWidth: header.column.columnDef.maxSize,
|
|
527
|
-
textAlign:
|
|
528
|
-
flexGrow:
|
|
519
|
+
textAlign: header.column.columnDef.meta?.alignment || "left",
|
|
520
|
+
flexGrow: header.column.columnDef.meta?.shouldGrow ? 1 : 0,
|
|
529
521
|
}, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
|
|
530
|
-
onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
522
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
531
523
|
}) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
|
|
532
524
|
height: `${getTotalSize()}px`,
|
|
533
525
|
flexGrow: 1,
|
|
@@ -555,7 +547,6 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
555
547
|
height: `${virtualRow.size}px`,
|
|
556
548
|
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
557
549
|
}, children: row.getVisibleCells().map(cell => {
|
|
558
|
-
var _a, _b;
|
|
559
550
|
return (jsxRuntime.jsx(reactTableBaseComponents.Td, { onClick: event => {
|
|
560
551
|
// prevent onRowClick action when clicking on a "selectable" cell with checkbox
|
|
561
552
|
if (props.selectionColId && cell.column.id === props.selectionColId) {
|
|
@@ -565,15 +556,15 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
565
556
|
width: cell.column.getSize(),
|
|
566
557
|
minWidth: cell.column.columnDef.minSize,
|
|
567
558
|
maxWidth: cell.column.columnDef.maxSize,
|
|
568
|
-
textAlign:
|
|
569
|
-
flexGrow:
|
|
559
|
+
textAlign: cell.column.columnDef.meta?.alignment || "left",
|
|
560
|
+
flexGrow: cell.column.columnDef.meta?.shouldGrow ? 1 : 0,
|
|
570
561
|
}, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
|
|
571
562
|
}) }, row.id));
|
|
572
563
|
}
|
|
573
564
|
}) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
|
|
574
565
|
count: props.getRowModel().rows.length,
|
|
575
|
-
total:
|
|
576
|
-
}) }),
|
|
566
|
+
total: props.pagination?.pageInfo?.count || 0,
|
|
567
|
+
}) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
|
|
577
568
|
};
|
|
578
569
|
const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
|
|
579
570
|
variants: {
|
|
@@ -603,9 +594,8 @@ const useColumnHelper = () => {
|
|
|
603
594
|
* @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
|
|
604
595
|
*/
|
|
605
596
|
const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
|
|
606
|
-
var _a, _b, _c, _d;
|
|
607
597
|
const updatedInitialColumnVisibility = React.useMemo(() => {
|
|
608
|
-
const initialStateColumnVisibility = initialState
|
|
598
|
+
const initialStateColumnVisibility = initialState?.columnVisibility;
|
|
609
599
|
const resultFromInitialState = initialStateColumnVisibility
|
|
610
600
|
? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
|
|
611
601
|
Object.fromEntries(columns
|
|
@@ -618,26 +608,25 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
618
608
|
.filter(sharedUtils.nonNullable))
|
|
619
609
|
: {};
|
|
620
610
|
columns.forEach(column => {
|
|
621
|
-
var _a;
|
|
622
611
|
if (column.id && !resultFromInitialState[column.id]) {
|
|
623
|
-
resultFromInitialState[column.id] =
|
|
612
|
+
resultFromInitialState[column.id] = column.meta?.hiddenByDefault === true ? false : true;
|
|
624
613
|
}
|
|
625
614
|
});
|
|
626
615
|
return resultFromInitialState;
|
|
627
|
-
}, [columns, initialState
|
|
616
|
+
}, [columns, initialState?.columnVisibility]);
|
|
628
617
|
const updatedInitialColumnOrder = React.useMemo(() => {
|
|
629
|
-
const resultFromInitialState =
|
|
618
|
+
const resultFromInitialState = initialState?.columnOrder || [];
|
|
630
619
|
columns.forEach(column => {
|
|
631
620
|
if (column.id && !resultFromInitialState.includes(column.id)) {
|
|
632
621
|
resultFromInitialState.push(column.id);
|
|
633
622
|
}
|
|
634
623
|
});
|
|
635
624
|
return resultFromInitialState;
|
|
636
|
-
}, [columns, initialState
|
|
637
|
-
const [columnVisibility, setColumnVisibility] = React.useState(
|
|
638
|
-
const [columnOrder, setColumnOrder] = React.useState(
|
|
639
|
-
const [sorting, setSorting] = React.useState(
|
|
640
|
-
const [columnSizing, setColumnSizing] = React.useState(
|
|
625
|
+
}, [columns, initialState?.columnOrder]);
|
|
626
|
+
const [columnVisibility, setColumnVisibility] = React.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
|
|
627
|
+
const [columnOrder, setColumnOrder] = React.useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
|
|
628
|
+
const [sorting, setSorting] = React.useState(reactTableProps.state?.sorting || initialState?.sorting || []);
|
|
629
|
+
const [columnSizing, setColumnSizing] = React.useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
|
|
641
630
|
React.useEffect(() => {
|
|
642
631
|
if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
|
|
643
632
|
setColumnVisibility(updatedInitialColumnVisibility);
|
|
@@ -663,24 +652,20 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
663
652
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
664
653
|
...reactTableProps,
|
|
665
654
|
onColumnVisibilityChange: value => {
|
|
666
|
-
var _a;
|
|
667
655
|
setColumnVisibility(value);
|
|
668
|
-
|
|
656
|
+
reactTableProps.onColumnVisibilityChange?.(value);
|
|
669
657
|
},
|
|
670
658
|
onColumnSizingChange: value => {
|
|
671
|
-
var _a;
|
|
672
659
|
setColumnSizing(value);
|
|
673
|
-
|
|
660
|
+
reactTableProps.onColumnSizingChange?.(value);
|
|
674
661
|
},
|
|
675
662
|
onColumnOrderChange: value => {
|
|
676
|
-
var _a;
|
|
677
663
|
setColumnOrder(value);
|
|
678
|
-
|
|
664
|
+
reactTableProps.onColumnOrderChange?.(value);
|
|
679
665
|
},
|
|
680
666
|
onSortingChange: value => {
|
|
681
|
-
var _a;
|
|
682
667
|
setSorting(value);
|
|
683
|
-
|
|
668
|
+
reactTableProps.onSortingChange?.(value);
|
|
684
669
|
},
|
|
685
670
|
columns,
|
|
686
671
|
state,
|
|
@@ -727,7 +712,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
727
712
|
const [rowSelection, setRowSelection] = React.useState({});
|
|
728
713
|
React.useEffect(() => {
|
|
729
714
|
const initialSelection = {};
|
|
730
|
-
defaultSelectedIds
|
|
715
|
+
defaultSelectedIds?.forEach(id => {
|
|
731
716
|
initialSelection[id] = true;
|
|
732
717
|
});
|
|
733
718
|
setRowSelection(() => ({ ...initialSelection }));
|
|
@@ -794,8 +779,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
794
779
|
* @returns {TanStackSortingState} The sorting state in TanStack format.
|
|
795
780
|
*/
|
|
796
781
|
const fromTUSortToTanStack = (input) => {
|
|
797
|
-
|
|
798
|
-
return [{ id: (_a = input.customFieldDefinitionId) !== null && _a !== void 0 ? _a : input.sortBy, desc: input.order === reactCoreContextsApi.SortOrder.Desc }];
|
|
782
|
+
return [{ id: input.customFieldDefinitionId ?? input.sortBy, desc: input.order === reactCoreContextsApi.SortOrder.Desc }];
|
|
799
783
|
};
|
|
800
784
|
/**
|
|
801
785
|
* Convert a sorting state from the TanStack format to the TUSort format.
|
|
@@ -804,10 +788,9 @@ const fromTUSortToTanStack = (input) => {
|
|
|
804
788
|
* @returns {SortingState} The sorting state in TUSort format.
|
|
805
789
|
*/
|
|
806
790
|
const fromTanStackToTUSort = (input) => {
|
|
807
|
-
var _a, _b;
|
|
808
791
|
return {
|
|
809
|
-
...reactCoreContextsApi.validateStringAsAssetSortByProperty(
|
|
810
|
-
order:
|
|
792
|
+
...reactCoreContextsApi.validateStringAsAssetSortByProperty(input[0]?.id),
|
|
793
|
+
order: input[0]?.desc ? reactCoreContextsApi.SortOrder.Desc : reactCoreContextsApi.SortOrder.Asc,
|
|
811
794
|
};
|
|
812
795
|
};
|
|
813
796
|
|
package/index.esm.js
CHANGED
|
@@ -297,7 +297,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
|
|
|
297
297
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
298
298
|
}, []); //This should only run once, at page load
|
|
299
299
|
const resetHiddenColumns = React.useCallback(() => {
|
|
300
|
-
columns.forEach(column =>
|
|
300
|
+
columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
|
|
301
301
|
setColumnOrder(defaultColumnOrder);
|
|
302
302
|
}, [columns, defaultColumnOrder, setColumnOrder]);
|
|
303
303
|
const sortedColumns = useMemo(() => {
|
|
@@ -323,9 +323,8 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
323
323
|
setLocalColumns(columns);
|
|
324
324
|
}, [columns]);
|
|
325
325
|
const onColumDrop = React.useCallback(() => {
|
|
326
|
-
var _a;
|
|
327
326
|
const firstElement = defaultColumnOrder[0];
|
|
328
|
-
const firstLocalColumnId =
|
|
327
|
+
const firstLocalColumnId = localColumns[0]?.id;
|
|
329
328
|
const newColumnOrder = firstElement === firstLocalColumnId
|
|
330
329
|
? localColumns.map(column => column.id)
|
|
331
330
|
: [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
|
|
@@ -335,7 +334,6 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
335
334
|
setLocalColumns(columns);
|
|
336
335
|
}, [columns]);
|
|
337
336
|
const moveColumn = React.useCallback((dragIndex, hoverIndex) => {
|
|
338
|
-
var _a;
|
|
339
337
|
const dragColumn = localColumns[dragIndex];
|
|
340
338
|
if (dragColumn) {
|
|
341
339
|
setLocalColumns(update(localColumns, {
|
|
@@ -345,20 +343,19 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
345
343
|
],
|
|
346
344
|
}));
|
|
347
345
|
}
|
|
348
|
-
onUserEvent
|
|
349
|
-
columnReordered:
|
|
346
|
+
onUserEvent?.("Column Reordering", {
|
|
347
|
+
columnReordered: dragColumn?.columnDef.header ?? "",
|
|
350
348
|
});
|
|
351
349
|
}, [localColumns, onUserEvent]);
|
|
352
350
|
return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
|
|
353
|
-
var _a, _b, _c, _d, _e, _f;
|
|
354
351
|
const { columnDef } = column;
|
|
355
|
-
if (!
|
|
352
|
+
if (!columnDef.meta?.columnFilterLabel &&
|
|
356
353
|
(!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
|
|
357
354
|
return null;
|
|
358
355
|
}
|
|
359
|
-
return (jsx(ColumnFilterItem, { disabled: !!
|
|
356
|
+
return (jsx(ColumnFilterItem, { disabled: !!column.columnDef.meta?.required, id: column.id, index: index, moveColumn: moveColumn, name: columnDef.meta?.columnFilterLabel ?? columnDef.header?.toString() ?? "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
360
357
|
column.getToggleVisibilityHandler()(event);
|
|
361
|
-
onUserEvent
|
|
358
|
+
onUserEvent?.("Column Filter", {
|
|
362
359
|
columnName: column.id,
|
|
363
360
|
hidden: !toggled,
|
|
364
361
|
});
|
|
@@ -426,7 +423,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
426
423
|
const [t] = useTranslation();
|
|
427
424
|
const handleClick = (selectedDensity) => {
|
|
428
425
|
setRowDensity(selectedDensity);
|
|
429
|
-
onUserEvent
|
|
426
|
+
onUserEvent?.("Row Spacing", {
|
|
430
427
|
densityChosen: selectedDensity,
|
|
431
428
|
});
|
|
432
429
|
};
|
|
@@ -451,28 +448,24 @@ const CompactIcon = () => {
|
|
|
451
448
|
* @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
|
|
452
449
|
*/
|
|
453
450
|
const Sorting = ({ columns, }) => {
|
|
454
|
-
var _a, _b;
|
|
455
451
|
const [t] = useTranslation();
|
|
456
452
|
const sortableColumns = columns.filter(column => column.getCanSort());
|
|
457
|
-
const currentSortValue =
|
|
458
|
-
const currentSortDirection =
|
|
453
|
+
const currentSortValue = sortableColumns.find(column => column.getIsSorted())?.id;
|
|
454
|
+
const currentSortDirection = sortableColumns.find(column => column.getIsSorted())?.getIsSorted() || "desc";
|
|
459
455
|
if (sortableColumns.length === 0) {
|
|
460
456
|
return null;
|
|
461
457
|
}
|
|
462
458
|
const handleSelectionChange = (e) => {
|
|
463
459
|
const selectedValue = e.currentTarget.value;
|
|
464
460
|
const chosenColumn = sortableColumns.find(column => column.id === selectedValue);
|
|
465
|
-
chosenColumn
|
|
461
|
+
chosenColumn?.toggleSorting(currentSortDirection === "desc");
|
|
466
462
|
};
|
|
467
463
|
const onSelectOrder = (e) => {
|
|
468
464
|
const selectedValue = e.currentTarget.value;
|
|
469
465
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
470
|
-
chosenColumn
|
|
466
|
+
chosenColumn?.toggleSorting(selectedValue === "desc");
|
|
471
467
|
};
|
|
472
|
-
return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue
|
|
473
|
-
var _a, _b;
|
|
474
|
-
return (jsx(RadioItem, { className: "w-full", label: (_b = (_a = column.columnDef.header) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "", value: column.id }, column.id));
|
|
475
|
-
}) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
|
|
468
|
+
return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsx(RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
|
|
476
469
|
};
|
|
477
470
|
|
|
478
471
|
/**
|
|
@@ -483,7 +476,6 @@ const Sorting = ({ columns, }) => {
|
|
|
483
476
|
*/
|
|
484
477
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
485
478
|
const Table = ({ rowHeight = 75, ...props }) => {
|
|
486
|
-
var _a, _b, _c;
|
|
487
479
|
//we need a reference to the scrolling element for logic down below
|
|
488
480
|
const tableContainerRef = useRef(null);
|
|
489
481
|
const [t] = useTranslation();
|
|
@@ -499,16 +491,16 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
499
491
|
width: "100%",
|
|
500
492
|
position: "relative",
|
|
501
493
|
}, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
502
|
-
|
|
503
|
-
|
|
494
|
+
const tooltipLabel = header.column.columnDef.meta?.tootipLabel ??
|
|
495
|
+
(typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
|
|
504
496
|
return (jsxs(Th, { className: "relative", style: {
|
|
505
497
|
width: header.getSize(),
|
|
506
498
|
minWidth: header.column.columnDef.minSize,
|
|
507
499
|
maxWidth: header.column.columnDef.maxSize,
|
|
508
|
-
textAlign:
|
|
509
|
-
flexGrow:
|
|
500
|
+
textAlign: header.column.columnDef.meta?.alignment || "left",
|
|
501
|
+
flexGrow: header.column.columnDef.meta?.shouldGrow ? 1 : 0,
|
|
510
502
|
}, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
|
|
511
|
-
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()),
|
|
503
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.subHeader ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
512
504
|
}) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
|
|
513
505
|
height: `${getTotalSize()}px`,
|
|
514
506
|
flexGrow: 1,
|
|
@@ -536,7 +528,6 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
536
528
|
height: `${virtualRow.size}px`,
|
|
537
529
|
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
538
530
|
}, children: row.getVisibleCells().map(cell => {
|
|
539
|
-
var _a, _b;
|
|
540
531
|
return (jsx(Td, { onClick: event => {
|
|
541
532
|
// prevent onRowClick action when clicking on a "selectable" cell with checkbox
|
|
542
533
|
if (props.selectionColId && cell.column.id === props.selectionColId) {
|
|
@@ -546,15 +537,15 @@ const Table = ({ rowHeight = 75, ...props }) => {
|
|
|
546
537
|
width: cell.column.getSize(),
|
|
547
538
|
minWidth: cell.column.columnDef.minSize,
|
|
548
539
|
maxWidth: cell.column.columnDef.maxSize,
|
|
549
|
-
textAlign:
|
|
550
|
-
flexGrow:
|
|
540
|
+
textAlign: cell.column.columnDef.meta?.alignment || "left",
|
|
541
|
+
flexGrow: cell.column.columnDef.meta?.shouldGrow ? 1 : 0,
|
|
551
542
|
}, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
|
|
552
543
|
}) }, row.id));
|
|
553
544
|
}
|
|
554
545
|
}) })) : (jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
|
|
555
546
|
count: props.getRowModel().rows.length,
|
|
556
|
-
total:
|
|
557
|
-
}) }),
|
|
547
|
+
total: props.pagination?.pageInfo?.count || 0,
|
|
548
|
+
}) }), props.pagination?.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
|
|
558
549
|
};
|
|
559
550
|
const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
|
|
560
551
|
variants: {
|
|
@@ -584,9 +575,8 @@ const useColumnHelper = () => {
|
|
|
584
575
|
* @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
|
|
585
576
|
*/
|
|
586
577
|
const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
|
|
587
|
-
var _a, _b, _c, _d;
|
|
588
578
|
const updatedInitialColumnVisibility = useMemo(() => {
|
|
589
|
-
const initialStateColumnVisibility = initialState
|
|
579
|
+
const initialStateColumnVisibility = initialState?.columnVisibility;
|
|
590
580
|
const resultFromInitialState = initialStateColumnVisibility
|
|
591
581
|
? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
|
|
592
582
|
Object.fromEntries(columns
|
|
@@ -599,26 +589,25 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
599
589
|
.filter(nonNullable))
|
|
600
590
|
: {};
|
|
601
591
|
columns.forEach(column => {
|
|
602
|
-
var _a;
|
|
603
592
|
if (column.id && !resultFromInitialState[column.id]) {
|
|
604
|
-
resultFromInitialState[column.id] =
|
|
593
|
+
resultFromInitialState[column.id] = column.meta?.hiddenByDefault === true ? false : true;
|
|
605
594
|
}
|
|
606
595
|
});
|
|
607
596
|
return resultFromInitialState;
|
|
608
|
-
}, [columns, initialState
|
|
597
|
+
}, [columns, initialState?.columnVisibility]);
|
|
609
598
|
const updatedInitialColumnOrder = useMemo(() => {
|
|
610
|
-
const resultFromInitialState =
|
|
599
|
+
const resultFromInitialState = initialState?.columnOrder || [];
|
|
611
600
|
columns.forEach(column => {
|
|
612
601
|
if (column.id && !resultFromInitialState.includes(column.id)) {
|
|
613
602
|
resultFromInitialState.push(column.id);
|
|
614
603
|
}
|
|
615
604
|
});
|
|
616
605
|
return resultFromInitialState;
|
|
617
|
-
}, [columns, initialState
|
|
618
|
-
const [columnVisibility, setColumnVisibility] = useState(
|
|
619
|
-
const [columnOrder, setColumnOrder] = useState(
|
|
620
|
-
const [sorting, setSorting] = useState(
|
|
621
|
-
const [columnSizing, setColumnSizing] = useState(
|
|
606
|
+
}, [columns, initialState?.columnOrder]);
|
|
607
|
+
const [columnVisibility, setColumnVisibility] = useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
|
|
608
|
+
const [columnOrder, setColumnOrder] = useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
|
|
609
|
+
const [sorting, setSorting] = useState(reactTableProps.state?.sorting || initialState?.sorting || []);
|
|
610
|
+
const [columnSizing, setColumnSizing] = useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
|
|
622
611
|
useEffect(() => {
|
|
623
612
|
if (initialState && objectKeys(initialState).length > 0) {
|
|
624
613
|
setColumnVisibility(updatedInitialColumnVisibility);
|
|
@@ -644,24 +633,20 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
644
633
|
getCoreRowModel: getCoreRowModel(),
|
|
645
634
|
...reactTableProps,
|
|
646
635
|
onColumnVisibilityChange: value => {
|
|
647
|
-
var _a;
|
|
648
636
|
setColumnVisibility(value);
|
|
649
|
-
|
|
637
|
+
reactTableProps.onColumnVisibilityChange?.(value);
|
|
650
638
|
},
|
|
651
639
|
onColumnSizingChange: value => {
|
|
652
|
-
var _a;
|
|
653
640
|
setColumnSizing(value);
|
|
654
|
-
|
|
641
|
+
reactTableProps.onColumnSizingChange?.(value);
|
|
655
642
|
},
|
|
656
643
|
onColumnOrderChange: value => {
|
|
657
|
-
var _a;
|
|
658
644
|
setColumnOrder(value);
|
|
659
|
-
|
|
645
|
+
reactTableProps.onColumnOrderChange?.(value);
|
|
660
646
|
},
|
|
661
647
|
onSortingChange: value => {
|
|
662
|
-
var _a;
|
|
663
648
|
setSorting(value);
|
|
664
|
-
|
|
649
|
+
reactTableProps.onSortingChange?.(value);
|
|
665
650
|
},
|
|
666
651
|
columns,
|
|
667
652
|
state,
|
|
@@ -708,7 +693,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
708
693
|
const [rowSelection, setRowSelection] = useState({});
|
|
709
694
|
useEffect(() => {
|
|
710
695
|
const initialSelection = {};
|
|
711
|
-
defaultSelectedIds
|
|
696
|
+
defaultSelectedIds?.forEach(id => {
|
|
712
697
|
initialSelection[id] = true;
|
|
713
698
|
});
|
|
714
699
|
setRowSelection(() => ({ ...initialSelection }));
|
|
@@ -775,8 +760,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
775
760
|
* @returns {TanStackSortingState} The sorting state in TanStack format.
|
|
776
761
|
*/
|
|
777
762
|
const fromTUSortToTanStack = (input) => {
|
|
778
|
-
|
|
779
|
-
return [{ id: (_a = input.customFieldDefinitionId) !== null && _a !== void 0 ? _a : input.sortBy, desc: input.order === SortOrder.Desc }];
|
|
763
|
+
return [{ id: input.customFieldDefinitionId ?? input.sortBy, desc: input.order === SortOrder.Desc }];
|
|
780
764
|
};
|
|
781
765
|
/**
|
|
782
766
|
* Convert a sorting state from the TanStack format to the TUSort format.
|
|
@@ -785,10 +769,9 @@ const fromTUSortToTanStack = (input) => {
|
|
|
785
769
|
* @returns {SortingState} The sorting state in TUSort format.
|
|
786
770
|
*/
|
|
787
771
|
const fromTanStackToTUSort = (input) => {
|
|
788
|
-
var _a, _b;
|
|
789
772
|
return {
|
|
790
|
-
...validateStringAsAssetSortByProperty(
|
|
791
|
-
order:
|
|
773
|
+
...validateStringAsAssetSortByProperty(input[0]?.id),
|
|
774
|
+
order: input[0]?.desc ? SortOrder.Desc : SortOrder.Asc,
|
|
792
775
|
};
|
|
793
776
|
};
|
|
794
777
|
|