@trackunit/react-table 0.0.518 → 0.0.522
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 +10 -15
- package/index.esm.js +11 -16
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -424,7 +424,8 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
424
424
|
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) => {
|
|
425
425
|
var _a, _b, _c, _d, _e, _f;
|
|
426
426
|
const { columnDef } = column;
|
|
427
|
-
if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) &&
|
|
427
|
+
if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) &&
|
|
428
|
+
(!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
|
|
428
429
|
return null;
|
|
429
430
|
}
|
|
430
431
|
return (jsxRuntime.jsx(ColumnFilterItem, { disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), id: column.id, index: index, moveColumn: moveColumn, name: (_f = (_d = (_c = columnDef.meta) === null || _c === void 0 ? void 0 : _c.columnFilterLabel) !== null && _d !== void 0 ? _d : (_e = columnDef.header) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
@@ -566,7 +567,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
566
567
|
}
|
|
567
568
|
return null;
|
|
568
569
|
})
|
|
569
|
-
.filter(sharedUtils.
|
|
570
|
+
.filter(sharedUtils.nonNullable))
|
|
570
571
|
: {};
|
|
571
572
|
columns.forEach(column => {
|
|
572
573
|
var _a;
|
|
@@ -591,19 +592,12 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
591
592
|
const [columnSizing, setColumnSizing] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
592
593
|
React.useEffect(() => {
|
|
593
594
|
if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
|
|
594
|
-
setColumnVisibility(initialState.columnVisibility ||
|
|
595
|
-
setColumnOrder(initialState.columnOrder ||
|
|
595
|
+
setColumnVisibility(initialState.columnVisibility || {});
|
|
596
|
+
setColumnOrder(initialState.columnOrder || []);
|
|
596
597
|
setSorting(initialState.sorting || []);
|
|
597
598
|
setColumnSizing(initialState.columnSizing || {});
|
|
598
599
|
}
|
|
599
|
-
}, [
|
|
600
|
-
updatedInitialColumnVisibility,
|
|
601
|
-
initialState,
|
|
602
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
603
|
-
updatedInitialColumnOrder,
|
|
604
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
605
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
606
|
-
]);
|
|
600
|
+
}, [initialState, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility, initialState === null || initialState === void 0 ? void 0 : initialState.sorting, initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing]);
|
|
607
601
|
const state = React.useMemo(() => {
|
|
608
602
|
return {
|
|
609
603
|
sorting,
|
|
@@ -709,17 +703,18 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
709
703
|
header: ({ table }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "p-1",
|
|
710
704
|
checked: table.getIsAllRowsSelected(),
|
|
711
705
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
712
|
-
onChange: table.getToggleAllRowsSelectedHandler()
|
|
706
|
+
onChange: table.getToggleAllRowsSelectedHandler(),
|
|
707
|
+
disabled: !data.length })),
|
|
713
708
|
id: "selection",
|
|
714
709
|
enableSorting: false,
|
|
715
710
|
enableResizing: false,
|
|
716
|
-
size:
|
|
711
|
+
size: 60,
|
|
717
712
|
meta: {
|
|
718
713
|
required: true,
|
|
719
714
|
alignment: "left",
|
|
720
715
|
columnFilterLabel: t("table.selection.label"),
|
|
721
716
|
},
|
|
722
|
-
}), [columnHelper, t]);
|
|
717
|
+
}), [columnHelper, data.length, t]);
|
|
723
718
|
const selectionTableState = React.useMemo(() => ({
|
|
724
719
|
rowSelection,
|
|
725
720
|
}), [rowSelection]);
|
package/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { MenuItem, Icon, Spinner, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, cvaInteractableItem, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
|
|
4
|
-
import { objectValues,
|
|
4
|
+
import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { useMemo, Children, cloneElement, useRef, useEffect, useState, useCallback } from 'react';
|
|
7
7
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
@@ -405,7 +405,8 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
|
|
|
405
405
|
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) => {
|
|
406
406
|
var _a, _b, _c, _d, _e, _f;
|
|
407
407
|
const { columnDef } = column;
|
|
408
|
-
if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) &&
|
|
408
|
+
if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) &&
|
|
409
|
+
(!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
|
|
409
410
|
return null;
|
|
410
411
|
}
|
|
411
412
|
return (jsx(ColumnFilterItem, { disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), id: column.id, index: index, moveColumn: moveColumn, name: (_f = (_d = (_c = columnDef.meta) === null || _c === void 0 ? void 0 : _c.columnFilterLabel) !== null && _d !== void 0 ? _d : (_e = columnDef.header) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
@@ -547,7 +548,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
547
548
|
}
|
|
548
549
|
return null;
|
|
549
550
|
})
|
|
550
|
-
.filter(
|
|
551
|
+
.filter(nonNullable))
|
|
551
552
|
: {};
|
|
552
553
|
columns.forEach(column => {
|
|
553
554
|
var _a;
|
|
@@ -572,19 +573,12 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
|
|
|
572
573
|
const [columnSizing, setColumnSizing] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
573
574
|
useEffect(() => {
|
|
574
575
|
if (initialState && objectKeys(initialState).length > 0) {
|
|
575
|
-
setColumnVisibility(initialState.columnVisibility ||
|
|
576
|
-
setColumnOrder(initialState.columnOrder ||
|
|
576
|
+
setColumnVisibility(initialState.columnVisibility || {});
|
|
577
|
+
setColumnOrder(initialState.columnOrder || []);
|
|
577
578
|
setSorting(initialState.sorting || []);
|
|
578
579
|
setColumnSizing(initialState.columnSizing || {});
|
|
579
580
|
}
|
|
580
|
-
}, [
|
|
581
|
-
updatedInitialColumnVisibility,
|
|
582
|
-
initialState,
|
|
583
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
584
|
-
updatedInitialColumnOrder,
|
|
585
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
586
|
-
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
587
|
-
]);
|
|
581
|
+
}, [initialState, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility, initialState === null || initialState === void 0 ? void 0 : initialState.sorting, initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing]);
|
|
588
582
|
const state = useMemo(() => {
|
|
589
583
|
return {
|
|
590
584
|
sorting,
|
|
@@ -690,17 +684,18 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
|
|
|
690
684
|
header: ({ table }) => (jsx(Checkbox, { className: "p-1",
|
|
691
685
|
checked: table.getIsAllRowsSelected(),
|
|
692
686
|
indeterminate: table.getIsSomeRowsSelected(),
|
|
693
|
-
onChange: table.getToggleAllRowsSelectedHandler()
|
|
687
|
+
onChange: table.getToggleAllRowsSelectedHandler(),
|
|
688
|
+
disabled: !data.length })),
|
|
694
689
|
id: "selection",
|
|
695
690
|
enableSorting: false,
|
|
696
691
|
enableResizing: false,
|
|
697
|
-
size:
|
|
692
|
+
size: 60,
|
|
698
693
|
meta: {
|
|
699
694
|
required: true,
|
|
700
695
|
alignment: "left",
|
|
701
696
|
columnFilterLabel: t("table.selection.label"),
|
|
702
697
|
},
|
|
703
|
-
}), [columnHelper, t]);
|
|
698
|
+
}), [columnHelper, data.length, t]);
|
|
704
699
|
const selectionTableState = useMemo(() => ({
|
|
705
700
|
rowSelection,
|
|
706
701
|
}), [rowSelection]);
|