@undevy-org/tablewright 0.2.2 → 0.4.0
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/dist/es/hooks/table-orchestration/use-column-gaps.js +1 -5
- package/dist/es/hooks/table-orchestration/use-orchestration-actions.js +0 -2
- package/dist/es/hooks/table-orchestration-store.js +0 -7
- package/dist/es/hooks/useTableOrchestration.js +0 -4
- package/dist/es/index.js +2 -1
- package/dist/es/lib/column-gaps.js +5 -1
- package/dist/tablewright.cjs +4 -16
- package/dist/types/hooks/table-orchestration/use-column-gaps.d.ts +0 -2
- package/dist/types/hooks/table-orchestration/use-orchestration-actions.d.ts +0 -1
- package/dist/types/hooks/table-orchestration-store.d.ts +0 -4
- package/dist/types/hooks/useTableOrchestration.d.ts +0 -4
- package/dist/types/index.d.ts +1 -1
- package/dist/types/lib/column-gaps.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { computeColumnGaps } from "../../lib/column-gaps.js";
|
|
2
|
+
import { computeColumnGaps, gapColumnId } from "../../lib/column-gaps.js";
|
|
3
3
|
const GAP_WIDTH = 32;
|
|
4
|
-
function gapColumnId(afterColumnId) {
|
|
5
|
-
return `__gap_after_${afterColumnId ?? "start"}`;
|
|
6
|
-
}
|
|
7
4
|
function useColumnGaps({
|
|
8
5
|
columnGroups,
|
|
9
6
|
toggleableColumnIds,
|
|
@@ -30,6 +27,5 @@ function useColumnGaps({
|
|
|
30
27
|
return { columnGaps, extendedColumnMeta, extendedWidths };
|
|
31
28
|
}
|
|
32
29
|
export {
|
|
33
|
-
gapColumnId,
|
|
34
30
|
useColumnGaps
|
|
35
31
|
};
|
|
@@ -99,7 +99,6 @@ function useOrchestrationActions({
|
|
|
99
99
|
() => store.getState().clearAll(defaultViewKey),
|
|
100
100
|
[defaultViewKey, store]
|
|
101
101
|
);
|
|
102
|
-
const handleRefresh = useCallback(() => store.getState().startRefresh(), [store]);
|
|
103
102
|
const handleToggleRowSelection = useCallback(
|
|
104
103
|
(id) => store.getState().toggleRowSelection(id),
|
|
105
104
|
[store]
|
|
@@ -162,7 +161,6 @@ function useOrchestrationActions({
|
|
|
162
161
|
handleRemoveSort,
|
|
163
162
|
handleRemoveCustomFilter,
|
|
164
163
|
handleClearAll,
|
|
165
|
-
handleRefresh,
|
|
166
164
|
handleToggleRowSelection,
|
|
167
165
|
handleToggleHeaderCheck,
|
|
168
166
|
handleExpandRow,
|
|
@@ -31,7 +31,6 @@ function createTableOrchestrationStore({
|
|
|
31
31
|
page: 1,
|
|
32
32
|
rowsPerPage: initialRowsPerPage,
|
|
33
33
|
density: "normal",
|
|
34
|
-
isRefreshing: false,
|
|
35
34
|
selectedIds: /* @__PURE__ */ new Set(),
|
|
36
35
|
activeView: defaultViewKey,
|
|
37
36
|
columnsMenuOpen: false,
|
|
@@ -112,12 +111,6 @@ function createTableOrchestrationStore({
|
|
|
112
111
|
setPage: (p) => set({ page: p }),
|
|
113
112
|
setRowsPerPage: (n) => set({ rowsPerPage: n, page: 1 }),
|
|
114
113
|
setDensity: (v) => set({ density: v }),
|
|
115
|
-
startRefresh: (durationMs = 700) => {
|
|
116
|
-
set({ isRefreshing: true });
|
|
117
|
-
if (typeof window !== "undefined") {
|
|
118
|
-
window.setTimeout(() => set({ isRefreshing: false }), durationMs);
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
114
|
setSelectedIds: (next) => set((s) => ({
|
|
122
115
|
selectedIds: typeof next === "function" ? next(s.selectedIds) : next
|
|
123
116
|
})),
|
|
@@ -43,7 +43,6 @@ function useTableOrchestration(config) {
|
|
|
43
43
|
const storedPage = useStore(store, (s) => s.page);
|
|
44
44
|
const rowsPerPage = useStore(store, (s) => s.rowsPerPage);
|
|
45
45
|
const density = useStore(store, (s) => s.density);
|
|
46
|
-
const isRefreshing = useStore(store, (s) => s.isRefreshing);
|
|
47
46
|
const storedSelectedIds = useStore(store, (s) => s.selectedIds);
|
|
48
47
|
const activeView = useStore(store, (s) => s.activeView);
|
|
49
48
|
const columnsMenuOpen = useStore(store, (s) => s.columnsMenuOpen);
|
|
@@ -150,7 +149,6 @@ function useTableOrchestration(config) {
|
|
|
150
149
|
handleRemoveSort,
|
|
151
150
|
handleRemoveCustomFilter,
|
|
152
151
|
handleClearAll,
|
|
153
|
-
handleRefresh,
|
|
154
152
|
handleToggleRowSelection,
|
|
155
153
|
handleToggleHeaderCheck,
|
|
156
154
|
handleExpandRow,
|
|
@@ -191,7 +189,6 @@ function useTableOrchestration(config) {
|
|
|
191
189
|
rowsPerPage,
|
|
192
190
|
density,
|
|
193
191
|
setDensity,
|
|
194
|
-
isRefreshing,
|
|
195
192
|
selectedIds,
|
|
196
193
|
setSelectedIds,
|
|
197
194
|
activeView,
|
|
@@ -238,7 +235,6 @@ function useTableOrchestration(config) {
|
|
|
238
235
|
handleRemoveSort,
|
|
239
236
|
handleRemoveCustomFilter,
|
|
240
237
|
handleClearAll,
|
|
241
|
-
handleRefresh,
|
|
242
238
|
handleToggleRowSelection,
|
|
243
239
|
handleToggleHeaderCheck,
|
|
244
240
|
handleExpandRow,
|
package/dist/es/index.js
CHANGED
|
@@ -65,7 +65,7 @@ import { getCompoundValue, getDateRange, getNumberRange, getStringArray, isFilte
|
|
|
65
65
|
import { useTableOrchestration } from "./hooks/useTableOrchestration.js";
|
|
66
66
|
import { createTableOrchestrationStore, defaultValueForFilter } from "./hooks/table-orchestration-store.js";
|
|
67
67
|
import { useRowDragOverride } from "./hooks/useRowDragOverride.js";
|
|
68
|
-
import { computeColumnGaps } from "./lib/column-gaps.js";
|
|
68
|
+
import { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
|
|
69
69
|
import { computeColumnStats } from "./lib/filter-stats.js";
|
|
70
70
|
import { formatEnumLabel } from "./lib/format-enum.js";
|
|
71
71
|
import { displayTimeZone, formatDateParts, formatLiveTimestamp, parsePossibleTimestamp } from "./lib/format-timestamp.js";
|
|
@@ -184,6 +184,7 @@ export {
|
|
|
184
184
|
formatDateParts,
|
|
185
185
|
formatEnumLabel,
|
|
186
186
|
formatLiveTimestamp,
|
|
187
|
+
gapColumnId,
|
|
187
188
|
getCompoundValue,
|
|
188
189
|
getDateRange,
|
|
189
190
|
getNumberRange,
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
function gapColumnId(afterColumnId) {
|
|
2
|
+
return `__gap_after_${afterColumnId ?? "start"}`;
|
|
3
|
+
}
|
|
1
4
|
function computeColumnGaps(orderedColumnIds, columnVisibility) {
|
|
2
5
|
const gaps = [];
|
|
3
6
|
let lastVisibleId = null;
|
|
@@ -19,5 +22,6 @@ function computeColumnGaps(orderedColumnIds, columnVisibility) {
|
|
|
19
22
|
return gaps;
|
|
20
23
|
}
|
|
21
24
|
export {
|
|
22
|
-
computeColumnGaps
|
|
25
|
+
computeColumnGaps,
|
|
26
|
+
gapColumnId
|
|
23
27
|
};
|
package/dist/tablewright.cjs
CHANGED
|
@@ -4303,7 +4303,6 @@ function createTableOrchestrationStore({
|
|
|
4303
4303
|
page: 1,
|
|
4304
4304
|
rowsPerPage: initialRowsPerPage,
|
|
4305
4305
|
density: "normal",
|
|
4306
|
-
isRefreshing: false,
|
|
4307
4306
|
selectedIds: /* @__PURE__ */ new Set(),
|
|
4308
4307
|
activeView: defaultViewKey,
|
|
4309
4308
|
columnsMenuOpen: false,
|
|
@@ -4384,12 +4383,6 @@ function createTableOrchestrationStore({
|
|
|
4384
4383
|
setPage: (p) => set({ page: p }),
|
|
4385
4384
|
setRowsPerPage: (n) => set({ rowsPerPage: n, page: 1 }),
|
|
4386
4385
|
setDensity: (v) => set({ density: v }),
|
|
4387
|
-
startRefresh: (durationMs = 700) => {
|
|
4388
|
-
set({ isRefreshing: true });
|
|
4389
|
-
if (typeof window !== "undefined") {
|
|
4390
|
-
window.setTimeout(() => set({ isRefreshing: false }), durationMs);
|
|
4391
|
-
}
|
|
4392
|
-
},
|
|
4393
4386
|
setSelectedIds: (next) => set((s) => ({
|
|
4394
4387
|
selectedIds: typeof next === "function" ? next(s.selectedIds) : next
|
|
4395
4388
|
})),
|
|
@@ -4528,6 +4521,9 @@ function useColumnFilterStats(rows, filteredRows, filterConfigs, isFiltered) {
|
|
|
4528
4521
|
return result;
|
|
4529
4522
|
}, [allStats, filteredStats]);
|
|
4530
4523
|
}
|
|
4524
|
+
function gapColumnId(afterColumnId) {
|
|
4525
|
+
return `__gap_after_${afterColumnId ?? "start"}`;
|
|
4526
|
+
}
|
|
4531
4527
|
function computeColumnGaps(orderedColumnIds, columnVisibility) {
|
|
4532
4528
|
const gaps = [];
|
|
4533
4529
|
let lastVisibleId = null;
|
|
@@ -4549,9 +4545,6 @@ function computeColumnGaps(orderedColumnIds, columnVisibility) {
|
|
|
4549
4545
|
return gaps;
|
|
4550
4546
|
}
|
|
4551
4547
|
const GAP_WIDTH = 32;
|
|
4552
|
-
function gapColumnId(afterColumnId) {
|
|
4553
|
-
return `__gap_after_${afterColumnId ?? "start"}`;
|
|
4554
|
-
}
|
|
4555
4548
|
function useColumnGaps({
|
|
4556
4549
|
columnGroups,
|
|
4557
4550
|
toggleableColumnIds,
|
|
@@ -4704,7 +4697,6 @@ function useOrchestrationActions({
|
|
|
4704
4697
|
() => store.getState().clearAll(defaultViewKey),
|
|
4705
4698
|
[defaultViewKey, store]
|
|
4706
4699
|
);
|
|
4707
|
-
const handleRefresh = React.useCallback(() => store.getState().startRefresh(), [store]);
|
|
4708
4700
|
const handleToggleRowSelection = React.useCallback(
|
|
4709
4701
|
(id) => store.getState().toggleRowSelection(id),
|
|
4710
4702
|
[store]
|
|
@@ -4767,7 +4759,6 @@ function useOrchestrationActions({
|
|
|
4767
4759
|
handleRemoveSort,
|
|
4768
4760
|
handleRemoveCustomFilter,
|
|
4769
4761
|
handleClearAll,
|
|
4770
|
-
handleRefresh,
|
|
4771
4762
|
handleToggleRowSelection,
|
|
4772
4763
|
handleToggleHeaderCheck,
|
|
4773
4764
|
handleExpandRow,
|
|
@@ -4848,7 +4839,6 @@ function useTableOrchestration(config) {
|
|
|
4848
4839
|
const storedPage = zustand.useStore(store, (s) => s.page);
|
|
4849
4840
|
const rowsPerPage = zustand.useStore(store, (s) => s.rowsPerPage);
|
|
4850
4841
|
const density = zustand.useStore(store, (s) => s.density);
|
|
4851
|
-
const isRefreshing = zustand.useStore(store, (s) => s.isRefreshing);
|
|
4852
4842
|
const storedSelectedIds = zustand.useStore(store, (s) => s.selectedIds);
|
|
4853
4843
|
const activeView = zustand.useStore(store, (s) => s.activeView);
|
|
4854
4844
|
const columnsMenuOpen = zustand.useStore(store, (s) => s.columnsMenuOpen);
|
|
@@ -4955,7 +4945,6 @@ function useTableOrchestration(config) {
|
|
|
4955
4945
|
handleRemoveSort,
|
|
4956
4946
|
handleRemoveCustomFilter,
|
|
4957
4947
|
handleClearAll,
|
|
4958
|
-
handleRefresh,
|
|
4959
4948
|
handleToggleRowSelection,
|
|
4960
4949
|
handleToggleHeaderCheck,
|
|
4961
4950
|
handleExpandRow,
|
|
@@ -4996,7 +4985,6 @@ function useTableOrchestration(config) {
|
|
|
4996
4985
|
rowsPerPage,
|
|
4997
4986
|
density,
|
|
4998
4987
|
setDensity,
|
|
4999
|
-
isRefreshing,
|
|
5000
4988
|
selectedIds,
|
|
5001
4989
|
setSelectedIds,
|
|
5002
4990
|
activeView,
|
|
@@ -5043,7 +5031,6 @@ function useTableOrchestration(config) {
|
|
|
5043
5031
|
handleRemoveSort,
|
|
5044
5032
|
handleRemoveCustomFilter,
|
|
5045
5033
|
handleClearAll,
|
|
5046
|
-
handleRefresh,
|
|
5047
5034
|
handleToggleRowSelection,
|
|
5048
5035
|
handleToggleHeaderCheck,
|
|
5049
5036
|
handleExpandRow,
|
|
@@ -5544,6 +5531,7 @@ exports.displayTimeZone = displayTimeZone;
|
|
|
5544
5531
|
exports.formatDateParts = formatDateParts;
|
|
5545
5532
|
exports.formatEnumLabel = formatEnumLabel;
|
|
5546
5533
|
exports.formatLiveTimestamp = formatLiveTimestamp;
|
|
5534
|
+
exports.gapColumnId = gapColumnId;
|
|
5547
5535
|
exports.getCompoundValue = getCompoundValue;
|
|
5548
5536
|
exports.getDateRange = getDateRange;
|
|
5549
5537
|
exports.getNumberRange = getNumberRange;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import type { VisibilityState } from "@tanstack/react-table";
|
|
2
2
|
import type { ColumnGap, ColumnGroup } from "../../components/data-table/filter-types.js";
|
|
3
3
|
import type { ColumnMetaDef } from "../../components/data-table/types.js";
|
|
4
|
-
/** Column id of the gap indicator column placed after `afterColumnId` (`null` = at the start). */
|
|
5
|
-
export declare function gapColumnId(afterColumnId: string | null): string;
|
|
6
4
|
/** Gap indicators for hidden columns, plus column meta/widths extended with the gap columns. */
|
|
7
5
|
export declare function useColumnGaps({ columnGroups, toggleableColumnIds, columnVisibility, columnMeta, widths, }: {
|
|
8
6
|
columnGroups: ColumnGroup[] | undefined;
|
|
@@ -33,7 +33,6 @@ export declare function useOrchestrationActions<TRow extends object, TViewKey ex
|
|
|
33
33
|
handleRemoveSort: () => void;
|
|
34
34
|
handleRemoveCustomFilter: () => void;
|
|
35
35
|
handleClearAll: () => void;
|
|
36
|
-
handleRefresh: () => void;
|
|
37
36
|
handleToggleRowSelection: (id: string) => void;
|
|
38
37
|
handleToggleHeaderCheck: () => void;
|
|
39
38
|
handleExpandRow: (row: TRow, e: React.MouseEvent) => void;
|
|
@@ -14,8 +14,6 @@ export interface TableOrchestrationState<TViewKey extends string = string> {
|
|
|
14
14
|
page: number;
|
|
15
15
|
rowsPerPage: number;
|
|
16
16
|
density: "normal" | "dense";
|
|
17
|
-
/** @deprecated Demo-only: it only spins for a fixed time (700 ms by default) and refetches nothing. Keep refresh state in your data layer (e.g. your query's `isFetching`). Will be removed in a future minor release. */
|
|
18
|
-
isRefreshing: boolean;
|
|
19
17
|
selectedIds: Set<string>;
|
|
20
18
|
activeView: TViewKey;
|
|
21
19
|
columnsMenuOpen: boolean;
|
|
@@ -44,8 +42,6 @@ export interface TableOrchestrationActions<TViewKey extends string = string> {
|
|
|
44
42
|
setPage: (p: number) => void;
|
|
45
43
|
setRowsPerPage: (n: number) => void;
|
|
46
44
|
setDensity: (v: "normal" | "dense") => void;
|
|
47
|
-
/** @deprecated Demo-only: it only spins for a fixed time (700 ms by default) and refetches nothing. Keep refresh state in your data layer (e.g. your query's `isFetching`). Will be removed in a future minor release. */
|
|
48
|
-
startRefresh: (durationMs?: number) => void;
|
|
49
45
|
setSelectedIds: (next: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
|
|
50
46
|
toggleRowSelection: (id: string) => void;
|
|
51
47
|
toggleHeaderCheck: (pageIds: string[], allOnPageSelected: boolean) => void;
|
|
@@ -53,8 +53,6 @@ export interface TableOrchestrationReturn<TRow extends object, TViewKey extends
|
|
|
53
53
|
rowsPerPage: number;
|
|
54
54
|
density: "normal" | "dense";
|
|
55
55
|
setDensity: (v: "normal" | "dense") => void;
|
|
56
|
-
/** @deprecated Demo-only: it only spins for a fixed time (700 ms by default) and refetches nothing. Keep refresh state in your data layer (e.g. your query's `isFetching`). Will be removed in a future minor release. */
|
|
57
|
-
isRefreshing: boolean;
|
|
58
56
|
selectedIds: Set<string>;
|
|
59
57
|
setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
|
|
60
58
|
activeView: TViewKey;
|
|
@@ -102,8 +100,6 @@ export interface TableOrchestrationReturn<TRow extends object, TViewKey extends
|
|
|
102
100
|
handleRemoveSort: () => void;
|
|
103
101
|
handleRemoveCustomFilter: () => void;
|
|
104
102
|
handleClearAll: () => void;
|
|
105
|
-
/** @deprecated Demo-only: it only spins for a fixed time (700 ms by default) and refetches nothing. Keep refresh state in your data layer (e.g. your query's `isFetching`). Will be removed in a future minor release. */
|
|
106
|
-
handleRefresh: () => void;
|
|
107
103
|
handleToggleRowSelection: (id: string) => void;
|
|
108
104
|
handleToggleHeaderCheck: () => void;
|
|
109
105
|
handleExpandRow: (row: TRow, e: React.MouseEvent) => void;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -96,7 +96,7 @@ export { createTableOrchestrationStore, defaultValueForFilter, } from "./hooks/t
|
|
|
96
96
|
export type { TableOrchestrationState, TableOrchestrationActions, TableOrchestrationStore, TableOrchestrationStoreApi, } from "./hooks/table-orchestration-store.js";
|
|
97
97
|
export { useRowDragOverride } from "./hooks/useRowDragOverride.js";
|
|
98
98
|
export type { UseRowDragOverrideResult } from "./hooks/useRowDragOverride.js";
|
|
99
|
-
export { computeColumnGaps } from "./lib/column-gaps.js";
|
|
99
|
+
export { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
|
|
100
100
|
export { computeColumnStats } from "./lib/filter-stats.js";
|
|
101
101
|
export { formatEnumLabel } from "./lib/format-enum.js";
|
|
102
102
|
export { formatDateParts, parsePossibleTimestamp, formatLiveTimestamp, displayTimeZone, } from "./lib/format-timestamp.js";
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
import type { VisibilityState } from "@tanstack/react-table";
|
|
2
2
|
import type { ColumnGap } from "../components/data-table/filter-types.js";
|
|
3
|
+
/**
|
|
4
|
+
* Column id of the gap indicator column placed after `afterColumnId` (`null` =
|
|
5
|
+
* at the start). `useTableOrchestration` keys `extendedColumnMeta` /
|
|
6
|
+
* `extendedWidths` by it, so gap columns you define must use the same id.
|
|
7
|
+
*/
|
|
8
|
+
export declare function gapColumnId(afterColumnId: string | null): string;
|
|
3
9
|
export declare function computeColumnGaps(orderedColumnIds: readonly string[], columnVisibility: VisibilityState): ColumnGap[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@undevy-org/tablewright",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|