@tint-ui/data-table 0.3.10 → 0.3.12
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/cjs/use-data-table.js +45 -21
- package/package.json +1 -1
- package/types.d.ts +1 -0
- package/use-data-table.d.ts +1 -1
- package/use-data-table.js +44 -20
package/cjs/use-data-table.js
CHANGED
|
@@ -20,7 +20,8 @@ var _utils = require("./utils");
|
|
|
20
20
|
const _excluded = ["globalFilter"],
|
|
21
21
|
_excluded2 = ["columnFilters"],
|
|
22
22
|
_excluded3 = ["sorting"],
|
|
23
|
-
_excluded4 = ["pagination"]
|
|
23
|
+
_excluded4 = ["pagination"],
|
|
24
|
+
_excluded5 = ["onFilterReset", "state"];
|
|
24
25
|
const createHash = function (name, keyName, manual, cells) {
|
|
25
26
|
let hash = `${name}[${keyName},${manual ? "1" : "0"}]://`;
|
|
26
27
|
for (const cell of cells) {
|
|
@@ -388,10 +389,14 @@ const useDataTable = function (props) {
|
|
|
388
389
|
if (!mount) {
|
|
389
390
|
return;
|
|
390
391
|
}
|
|
392
|
+
const cb = refOptions.current?.onFilterReset;
|
|
391
393
|
setState(prev => {
|
|
392
394
|
if (prev.loading) {
|
|
393
395
|
return prev;
|
|
394
396
|
}
|
|
397
|
+
if (cb) {
|
|
398
|
+
cb();
|
|
399
|
+
}
|
|
395
400
|
const state = Object.assign({}, prev, {
|
|
396
401
|
pagination: {
|
|
397
402
|
pageSize: prev.pagination.pageSize,
|
|
@@ -408,15 +413,20 @@ const useDataTable = function (props) {
|
|
|
408
413
|
});
|
|
409
414
|
},
|
|
410
415
|
onPageSizeChange(pageSize) {
|
|
416
|
+
const cb = refOptions.current?.onPaginationChange;
|
|
411
417
|
setState(prev => {
|
|
412
418
|
if (prev.loading || prev.pagination.pageSize === pageSize) {
|
|
413
419
|
return prev;
|
|
414
420
|
}
|
|
421
|
+
const paginationState = {
|
|
422
|
+
pageSize,
|
|
423
|
+
pageIndex: 0
|
|
424
|
+
};
|
|
425
|
+
if (cb) {
|
|
426
|
+
cb(paginationState);
|
|
427
|
+
}
|
|
415
428
|
const state = Object.assign({}, prev, {
|
|
416
|
-
pagination:
|
|
417
|
-
pageSize,
|
|
418
|
-
pageIndex: 0
|
|
419
|
-
}
|
|
429
|
+
pagination: paginationState
|
|
420
430
|
});
|
|
421
431
|
if (force(state)) {
|
|
422
432
|
state.loading = true;
|
|
@@ -427,9 +437,6 @@ const useDataTable = function (props) {
|
|
|
427
437
|
},
|
|
428
438
|
onGlobalFilterChange(value) {
|
|
429
439
|
const cb = refOptions.current?.onGlobalFilterChange;
|
|
430
|
-
if (cb) {
|
|
431
|
-
cb(value);
|
|
432
|
-
}
|
|
433
440
|
setState(prev => {
|
|
434
441
|
if (prev.loading) {
|
|
435
442
|
return prev;
|
|
@@ -441,6 +448,9 @@ const useDataTable = function (props) {
|
|
|
441
448
|
if (typeof value === "function") {
|
|
442
449
|
value = value(globalFilter);
|
|
443
450
|
}
|
|
451
|
+
if (cb) {
|
|
452
|
+
cb(value);
|
|
453
|
+
}
|
|
444
454
|
const state = Object.assign({}, rest, {
|
|
445
455
|
pagination: {
|
|
446
456
|
pageSize: prev.pagination.pageSize,
|
|
@@ -457,9 +467,6 @@ const useDataTable = function (props) {
|
|
|
457
467
|
},
|
|
458
468
|
onColumnFiltersChange(value) {
|
|
459
469
|
const cb = refOptions.current?.onColumnFiltersChange;
|
|
460
|
-
if (cb) {
|
|
461
|
-
cb(value);
|
|
462
|
-
}
|
|
463
470
|
setState(prev => {
|
|
464
471
|
if (prev.loading) {
|
|
465
472
|
return prev;
|
|
@@ -474,6 +481,9 @@ const useDataTable = function (props) {
|
|
|
474
481
|
value = value.filter(({
|
|
475
482
|
value
|
|
476
483
|
}) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
|
|
484
|
+
if (cb) {
|
|
485
|
+
cb(value);
|
|
486
|
+
}
|
|
477
487
|
const state = Object.assign({}, rest, {
|
|
478
488
|
pagination: {
|
|
479
489
|
pageSize: prev.pagination.pageSize,
|
|
@@ -490,9 +500,6 @@ const useDataTable = function (props) {
|
|
|
490
500
|
},
|
|
491
501
|
onSortingChange(value) {
|
|
492
502
|
const cb = refOptions.current?.onSortingChange;
|
|
493
|
-
if (cb) {
|
|
494
|
-
cb(value);
|
|
495
|
-
}
|
|
496
503
|
setState(prev => {
|
|
497
504
|
if (prev.loading) {
|
|
498
505
|
return prev;
|
|
@@ -501,13 +508,17 @@ const useDataTable = function (props) {
|
|
|
501
508
|
sorting
|
|
502
509
|
} = prev,
|
|
503
510
|
rest = (0, _objectWithoutPropertiesLoose2.default)(prev, _excluded3);
|
|
511
|
+
const sortingState = typeof value === "function" ? value(sorting) : value;
|
|
512
|
+
if (cb) {
|
|
513
|
+
cb(sortingState);
|
|
514
|
+
}
|
|
504
515
|
const state = Object.assign({}, rest, {
|
|
505
516
|
pagination: {
|
|
506
517
|
pageSize: prev.pagination.pageSize,
|
|
507
518
|
pageIndex: 0
|
|
508
519
|
},
|
|
509
520
|
error: null,
|
|
510
|
-
sorting:
|
|
521
|
+
sorting: sortingState,
|
|
511
522
|
loading: false
|
|
512
523
|
});
|
|
513
524
|
if (force(state)) {
|
|
@@ -522,9 +533,6 @@ const useDataTable = function (props) {
|
|
|
522
533
|
},
|
|
523
534
|
onPaginationChange(value) {
|
|
524
535
|
const cb = refOptions.current?.onPaginationChange;
|
|
525
|
-
if (cb) {
|
|
526
|
-
cb(value);
|
|
527
|
-
}
|
|
528
536
|
setState(prev => {
|
|
529
537
|
if (prev.loading) {
|
|
530
538
|
return prev;
|
|
@@ -533,8 +541,12 @@ const useDataTable = function (props) {
|
|
|
533
541
|
pagination
|
|
534
542
|
} = prev,
|
|
535
543
|
rest = (0, _objectWithoutPropertiesLoose2.default)(prev, _excluded4);
|
|
544
|
+
const paginationState = typeof value === "function" ? value(pagination) : value;
|
|
545
|
+
if (cb) {
|
|
546
|
+
cb(paginationState);
|
|
547
|
+
}
|
|
536
548
|
const state = Object.assign({}, rest, {
|
|
537
|
-
pagination:
|
|
549
|
+
pagination: paginationState,
|
|
538
550
|
error: null,
|
|
539
551
|
loading: false
|
|
540
552
|
});
|
|
@@ -721,10 +733,22 @@ const useDataTable = function (props) {
|
|
|
721
733
|
}
|
|
722
734
|
};
|
|
723
735
|
}, [onRowClick, loading]);
|
|
736
|
+
let optProp = {};
|
|
737
|
+
let optState = {};
|
|
738
|
+
if (options != null) {
|
|
739
|
+
const {
|
|
740
|
+
state
|
|
741
|
+
} = options,
|
|
742
|
+
prop = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded5);
|
|
743
|
+
optProp = prop;
|
|
744
|
+
if (state) {
|
|
745
|
+
optState = state;
|
|
746
|
+
}
|
|
747
|
+
}
|
|
724
748
|
const {
|
|
725
749
|
pagination
|
|
726
750
|
} = state;
|
|
727
|
-
const tableCtx = (0, _reactTable.useReactTable)(Object.assign({},
|
|
751
|
+
const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, optProp, {
|
|
728
752
|
pageCount: manual ? state.pageCount : undefined,
|
|
729
753
|
getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
|
|
730
754
|
getPaginationRowModel: (0, _reactTable.getPaginationRowModel)(),
|
|
@@ -739,7 +763,7 @@ const useDataTable = function (props) {
|
|
|
739
763
|
manualFiltering: manual,
|
|
740
764
|
manualSorting: manual,
|
|
741
765
|
manualPagination: manual,
|
|
742
|
-
state: Object.assign({},
|
|
766
|
+
state: Object.assign({}, optState, {
|
|
743
767
|
columnVisibility,
|
|
744
768
|
sorting: state.sorting,
|
|
745
769
|
globalFilter: state.globalFilter,
|
package/package.json
CHANGED
package/types.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export type DataTableToolbarSize = "sm" | "md" | "lg";
|
|
|
34
34
|
export type DataTableNavbarSize = "sm" | "md" | "lg";
|
|
35
35
|
export interface DataTableOptions<TData> extends Partial<Omit<TableOptions<TData>, "pageCount" | "getCoreRowModel" | "getPaginationRowModel" | "getFilteredRowModel" | "getSortedRowModel" | "globalFilterFn" | "manualFiltering" | "manualSorting" | "manualPagination" | "data" | "columns" | "state">> {
|
|
36
36
|
state?: Partial<Omit<TableState, "columnVisibility" | "sorting" | "globalFilter" | "columnFilters" | "pagination">>;
|
|
37
|
+
onFilterReset?: () => void;
|
|
37
38
|
}
|
|
38
39
|
export interface DataTableCoreProps<TData> extends FilterType<TData> {
|
|
39
40
|
table: DataTableType<TData>;
|
package/use-data-table.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { DataTableCoreProps, DataTableContextType } from "./types";
|
|
1
|
+
import type { DataTableCoreProps, DataTableContextType } from "./types";
|
|
2
2
|
declare const useDataTable: <TData extends object>(props: DataTableCoreProps<TData>) => DataTableContextType<TData>;
|
|
3
3
|
export { useDataTable };
|
package/use-data-table.js
CHANGED
|
@@ -380,10 +380,14 @@ const useDataTable = function (props) {
|
|
|
380
380
|
if (!mount) {
|
|
381
381
|
return;
|
|
382
382
|
}
|
|
383
|
+
const cb = refOptions.current?.onFilterReset;
|
|
383
384
|
setState(prev => {
|
|
384
385
|
if (prev.loading) {
|
|
385
386
|
return prev;
|
|
386
387
|
}
|
|
388
|
+
if (cb) {
|
|
389
|
+
cb();
|
|
390
|
+
}
|
|
387
391
|
const state = {
|
|
388
392
|
...prev,
|
|
389
393
|
pagination: {
|
|
@@ -401,16 +405,21 @@ const useDataTable = function (props) {
|
|
|
401
405
|
});
|
|
402
406
|
},
|
|
403
407
|
onPageSizeChange(pageSize) {
|
|
408
|
+
const cb = refOptions.current?.onPaginationChange;
|
|
404
409
|
setState(prev => {
|
|
405
410
|
if (prev.loading || prev.pagination.pageSize === pageSize) {
|
|
406
411
|
return prev;
|
|
407
412
|
}
|
|
413
|
+
const paginationState = {
|
|
414
|
+
pageSize,
|
|
415
|
+
pageIndex: 0
|
|
416
|
+
};
|
|
417
|
+
if (cb) {
|
|
418
|
+
cb(paginationState);
|
|
419
|
+
}
|
|
408
420
|
const state = {
|
|
409
421
|
...prev,
|
|
410
|
-
pagination:
|
|
411
|
-
pageSize,
|
|
412
|
-
pageIndex: 0
|
|
413
|
-
}
|
|
422
|
+
pagination: paginationState
|
|
414
423
|
};
|
|
415
424
|
if (force(state)) {
|
|
416
425
|
state.loading = true;
|
|
@@ -421,9 +430,6 @@ const useDataTable = function (props) {
|
|
|
421
430
|
},
|
|
422
431
|
onGlobalFilterChange(value) {
|
|
423
432
|
const cb = refOptions.current?.onGlobalFilterChange;
|
|
424
|
-
if (cb) {
|
|
425
|
-
cb(value);
|
|
426
|
-
}
|
|
427
433
|
setState(prev => {
|
|
428
434
|
if (prev.loading) {
|
|
429
435
|
return prev;
|
|
@@ -435,6 +441,9 @@ const useDataTable = function (props) {
|
|
|
435
441
|
if (typeof value === "function") {
|
|
436
442
|
value = value(globalFilter);
|
|
437
443
|
}
|
|
444
|
+
if (cb) {
|
|
445
|
+
cb(value);
|
|
446
|
+
}
|
|
438
447
|
const state = {
|
|
439
448
|
...rest,
|
|
440
449
|
pagination: {
|
|
@@ -452,9 +461,6 @@ const useDataTable = function (props) {
|
|
|
452
461
|
},
|
|
453
462
|
onColumnFiltersChange(value) {
|
|
454
463
|
const cb = refOptions.current?.onColumnFiltersChange;
|
|
455
|
-
if (cb) {
|
|
456
|
-
cb(value);
|
|
457
|
-
}
|
|
458
464
|
setState(prev => {
|
|
459
465
|
if (prev.loading) {
|
|
460
466
|
return prev;
|
|
@@ -469,6 +475,9 @@ const useDataTable = function (props) {
|
|
|
469
475
|
value = value.filter(({
|
|
470
476
|
value
|
|
471
477
|
}) => Array.isArray(value) ? value.length > 0 : value != null && value !== "");
|
|
478
|
+
if (cb) {
|
|
479
|
+
cb(value);
|
|
480
|
+
}
|
|
472
481
|
const state = {
|
|
473
482
|
...rest,
|
|
474
483
|
pagination: {
|
|
@@ -486,9 +495,6 @@ const useDataTable = function (props) {
|
|
|
486
495
|
},
|
|
487
496
|
onSortingChange(value) {
|
|
488
497
|
const cb = refOptions.current?.onSortingChange;
|
|
489
|
-
if (cb) {
|
|
490
|
-
cb(value);
|
|
491
|
-
}
|
|
492
498
|
setState(prev => {
|
|
493
499
|
if (prev.loading) {
|
|
494
500
|
return prev;
|
|
@@ -497,6 +503,10 @@ const useDataTable = function (props) {
|
|
|
497
503
|
sorting,
|
|
498
504
|
...rest
|
|
499
505
|
} = prev;
|
|
506
|
+
const sortingState = typeof value === "function" ? value(sorting) : value;
|
|
507
|
+
if (cb) {
|
|
508
|
+
cb(sortingState);
|
|
509
|
+
}
|
|
500
510
|
const state = {
|
|
501
511
|
...rest,
|
|
502
512
|
pagination: {
|
|
@@ -504,7 +514,7 @@ const useDataTable = function (props) {
|
|
|
504
514
|
pageIndex: 0
|
|
505
515
|
},
|
|
506
516
|
error: null,
|
|
507
|
-
sorting:
|
|
517
|
+
sorting: sortingState,
|
|
508
518
|
loading: false
|
|
509
519
|
};
|
|
510
520
|
if (force(state)) {
|
|
@@ -519,9 +529,6 @@ const useDataTable = function (props) {
|
|
|
519
529
|
},
|
|
520
530
|
onPaginationChange(value) {
|
|
521
531
|
const cb = refOptions.current?.onPaginationChange;
|
|
522
|
-
if (cb) {
|
|
523
|
-
cb(value);
|
|
524
|
-
}
|
|
525
532
|
setState(prev => {
|
|
526
533
|
if (prev.loading) {
|
|
527
534
|
return prev;
|
|
@@ -530,9 +537,13 @@ const useDataTable = function (props) {
|
|
|
530
537
|
pagination,
|
|
531
538
|
...rest
|
|
532
539
|
} = prev;
|
|
540
|
+
const paginationState = typeof value === "function" ? value(pagination) : value;
|
|
541
|
+
if (cb) {
|
|
542
|
+
cb(paginationState);
|
|
543
|
+
}
|
|
533
544
|
const state = {
|
|
534
545
|
...rest,
|
|
535
|
-
pagination:
|
|
546
|
+
pagination: paginationState,
|
|
536
547
|
error: null,
|
|
537
548
|
loading: false
|
|
538
549
|
};
|
|
@@ -719,11 +730,24 @@ const useDataTable = function (props) {
|
|
|
719
730
|
}
|
|
720
731
|
};
|
|
721
732
|
}, [onRowClick, loading]);
|
|
733
|
+
let optProp = {};
|
|
734
|
+
let optState = {};
|
|
735
|
+
if (options != null) {
|
|
736
|
+
const {
|
|
737
|
+
onFilterReset,
|
|
738
|
+
state,
|
|
739
|
+
...prop
|
|
740
|
+
} = options;
|
|
741
|
+
optProp = prop;
|
|
742
|
+
if (state) {
|
|
743
|
+
optState = state;
|
|
744
|
+
}
|
|
745
|
+
}
|
|
722
746
|
const {
|
|
723
747
|
pagination
|
|
724
748
|
} = state;
|
|
725
749
|
const tableCtx = useReactTable({
|
|
726
|
-
...
|
|
750
|
+
...optProp,
|
|
727
751
|
pageCount: manual ? state.pageCount : undefined,
|
|
728
752
|
getCoreRowModel: getCoreRowModel(),
|
|
729
753
|
getPaginationRowModel: getPaginationRowModel(),
|
|
@@ -739,7 +763,7 @@ const useDataTable = function (props) {
|
|
|
739
763
|
manualSorting: manual,
|
|
740
764
|
manualPagination: manual,
|
|
741
765
|
state: {
|
|
742
|
-
...
|
|
766
|
+
...optState,
|
|
743
767
|
columnVisibility,
|
|
744
768
|
sorting: state.sorting,
|
|
745
769
|
globalFilter: state.globalFilter,
|