@trackunit/react-table 0.0.198 → 0.0.201
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 +32 -9
- package/index.esm.js +32 -9
- package/package.json +1 -1
- package/src/types.d.ts +2 -1
- package/src/useRelayPagination.d.ts +5 -4
package/index.cjs.js
CHANGED
|
@@ -350,13 +350,14 @@ const Table = (_a) => {
|
|
|
350
350
|
width: "100%",
|
|
351
351
|
position: "relative",
|
|
352
352
|
}, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
353
|
-
var _a, _b, _c, _d;
|
|
353
|
+
var _a, _b, _c, _d, _e;
|
|
354
354
|
return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { style: {
|
|
355
355
|
width: header.getSize(),
|
|
356
356
|
minWidth: header.column.columnDef.minSize,
|
|
357
357
|
maxWidth: header.column.columnDef.maxSize,
|
|
358
|
-
|
|
359
|
-
|
|
358
|
+
textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
|
|
359
|
+
}, className: "relative", children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
|
|
360
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
360
361
|
}) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", children: getVirtualItems().map((virtualRow, index) => {
|
|
361
362
|
const row = props.getRowModel().rows[virtualRow.index];
|
|
362
363
|
if (!row) {
|
|
@@ -374,11 +375,13 @@ const Table = (_a) => {
|
|
|
374
375
|
row.toggleSelected();
|
|
375
376
|
}
|
|
376
377
|
}, className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
|
|
378
|
+
var _a;
|
|
377
379
|
return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
|
|
378
380
|
style: {
|
|
379
381
|
width: cell.column.getSize(),
|
|
380
382
|
minWidth: cell.column.columnDef.minSize,
|
|
381
383
|
maxWidth: cell.column.columnDef.maxSize,
|
|
384
|
+
textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
|
|
382
385
|
}, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
383
386
|
}) }, row.id));
|
|
384
387
|
}
|
|
@@ -610,12 +613,16 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
610
613
|
}
|
|
611
614
|
}, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
|
|
612
615
|
const reset = React.useCallback(() => {
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
616
|
+
setVariables({
|
|
617
|
+
last: undefined,
|
|
618
|
+
before: undefined,
|
|
619
|
+
after: undefined,
|
|
620
|
+
first: props.pageSize,
|
|
621
|
+
});
|
|
622
|
+
if (props.onReset) {
|
|
623
|
+
props.onReset();
|
|
617
624
|
}
|
|
618
|
-
}, [
|
|
625
|
+
}, [props.onReset, props.pageSize]);
|
|
619
626
|
const pagination = React.useMemo(() => {
|
|
620
627
|
return {
|
|
621
628
|
variables,
|
|
@@ -680,7 +687,23 @@ const useTable = (_a) => {
|
|
|
680
687
|
columnOrder,
|
|
681
688
|
columnSizing }, reactTableProps.state);
|
|
682
689
|
}, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
|
|
683
|
-
const table = reactTable.useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange",
|
|
690
|
+
const table = reactTable.useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", getSortedRowModel: reactTable.getSortedRowModel(), getCoreRowModel: reactTable.getCoreRowModel() }, reactTableProps), { onColumnVisibilityChange: value => {
|
|
691
|
+
var _a;
|
|
692
|
+
setColumnVisibility(value);
|
|
693
|
+
(_a = reactTableProps.onColumnVisibilityChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
694
|
+
}, onColumnSizingChange: value => {
|
|
695
|
+
var _a;
|
|
696
|
+
setColumnSizing(value);
|
|
697
|
+
(_a = reactTableProps.onColumnSizingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
698
|
+
}, onColumnOrderChange: value => {
|
|
699
|
+
var _a;
|
|
700
|
+
setColumnOrder(value);
|
|
701
|
+
(_a = reactTableProps.onColumnOrderChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
702
|
+
}, onSortingChange: value => {
|
|
703
|
+
var _a;
|
|
704
|
+
setSorting(value);
|
|
705
|
+
(_a = reactTableProps.onSortingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
706
|
+
}, columns,
|
|
684
707
|
state }));
|
|
685
708
|
React.useEffect(() => {
|
|
686
709
|
if (onTableStateChange) {
|
package/index.esm.js
CHANGED
|
@@ -325,13 +325,14 @@ const Table = (_a) => {
|
|
|
325
325
|
width: "100%",
|
|
326
326
|
position: "relative",
|
|
327
327
|
}, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
328
|
-
var _a, _b, _c, _d;
|
|
328
|
+
var _a, _b, _c, _d, _e;
|
|
329
329
|
return (jsxs(Th, { style: {
|
|
330
330
|
width: header.getSize(),
|
|
331
331
|
minWidth: header.column.columnDef.minSize,
|
|
332
332
|
maxWidth: header.column.columnDef.maxSize,
|
|
333
|
-
|
|
334
|
-
|
|
333
|
+
textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
|
|
334
|
+
}, className: "relative", children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
|
|
335
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
335
336
|
}) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", children: getVirtualItems().map((virtualRow, index) => {
|
|
336
337
|
const row = props.getRowModel().rows[virtualRow.index];
|
|
337
338
|
if (!row) {
|
|
@@ -349,11 +350,13 @@ const Table = (_a) => {
|
|
|
349
350
|
row.toggleSelected();
|
|
350
351
|
}
|
|
351
352
|
}, className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
|
|
353
|
+
var _a;
|
|
352
354
|
return (jsx(Td, { key: cell.id,
|
|
353
355
|
style: {
|
|
354
356
|
width: cell.column.getSize(),
|
|
355
357
|
minWidth: cell.column.columnDef.minSize,
|
|
356
358
|
maxWidth: cell.column.columnDef.maxSize,
|
|
359
|
+
textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left"
|
|
357
360
|
}, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
358
361
|
}) }, row.id));
|
|
359
362
|
}
|
|
@@ -585,12 +588,16 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
585
588
|
}
|
|
586
589
|
}, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
|
|
587
590
|
const reset = useCallback(() => {
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
591
|
+
setVariables({
|
|
592
|
+
last: undefined,
|
|
593
|
+
before: undefined,
|
|
594
|
+
after: undefined,
|
|
595
|
+
first: props.pageSize,
|
|
596
|
+
});
|
|
597
|
+
if (props.onReset) {
|
|
598
|
+
props.onReset();
|
|
592
599
|
}
|
|
593
|
-
}, [
|
|
600
|
+
}, [props.onReset, props.pageSize]);
|
|
594
601
|
const pagination = useMemo(() => {
|
|
595
602
|
return {
|
|
596
603
|
variables,
|
|
@@ -655,7 +662,23 @@ const useTable = (_a) => {
|
|
|
655
662
|
columnOrder,
|
|
656
663
|
columnSizing }, reactTableProps.state);
|
|
657
664
|
}, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
|
|
658
|
-
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange",
|
|
665
|
+
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), { onColumnVisibilityChange: value => {
|
|
666
|
+
var _a;
|
|
667
|
+
setColumnVisibility(value);
|
|
668
|
+
(_a = reactTableProps.onColumnVisibilityChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
669
|
+
}, onColumnSizingChange: value => {
|
|
670
|
+
var _a;
|
|
671
|
+
setColumnSizing(value);
|
|
672
|
+
(_a = reactTableProps.onColumnSizingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
673
|
+
}, onColumnOrderChange: value => {
|
|
674
|
+
var _a;
|
|
675
|
+
setColumnOrder(value);
|
|
676
|
+
(_a = reactTableProps.onColumnOrderChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
677
|
+
}, onSortingChange: value => {
|
|
678
|
+
var _a;
|
|
679
|
+
setSorting(value);
|
|
680
|
+
(_a = reactTableProps.onSortingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
|
|
681
|
+
}, columns,
|
|
659
682
|
state }));
|
|
660
683
|
useEffect(() => {
|
|
661
684
|
if (onTableStateChange) {
|
package/package.json
CHANGED
package/src/types.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { RowData } from "@tanstack/react-table";
|
|
2
2
|
export { createColumnHelper, type ColumnDef, type VisibilityState } from "@tanstack/react-table";
|
|
3
|
-
declare module "@tanstack/table
|
|
3
|
+
declare module "@tanstack/react-table" {
|
|
4
4
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
5
5
|
alignment?: Alignment;
|
|
6
6
|
required?: boolean;
|
|
7
7
|
subHeader?: string;
|
|
8
8
|
hiddenByDefault?: boolean;
|
|
9
|
+
isCustomField?: boolean;
|
|
9
10
|
}
|
|
10
11
|
}
|
|
11
12
|
export interface RelayPageInfo {
|
|
@@ -2,12 +2,13 @@ import { Dispatch, SetStateAction } from "react";
|
|
|
2
2
|
import { RelayPageInfo, RelayPagination } from "./types";
|
|
3
3
|
export interface RelayPaginationProps {
|
|
4
4
|
pageSize?: number;
|
|
5
|
+
onReset?: () => void;
|
|
5
6
|
}
|
|
6
7
|
export interface RelayPaginationQueryVariables {
|
|
7
|
-
first?: number;
|
|
8
|
-
last?: number;
|
|
9
|
-
before?: string;
|
|
10
|
-
after?: string;
|
|
8
|
+
first?: number | null;
|
|
9
|
+
last?: number | null;
|
|
10
|
+
before?: string | null;
|
|
11
|
+
after?: string | null;
|
|
11
12
|
}
|
|
12
13
|
export interface RelayTableSupport extends RelayPagination {
|
|
13
14
|
isLoading: boolean;
|