@tint-ui/data-table 0.3.8 → 0.3.10

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.
Files changed (4) hide show
  1. package/cjs/use-data-table.js +31 -13
  2. package/package.json +1 -1
  3. package/types.d.ts +5 -2
  4. package/use-data-table.js +30 -11
package/cjs/use-data-table.js CHANGED
@@ -200,7 +200,7 @@ const useDataTable = function (props) {
200
200
  onRowClick,
201
201
  toolbar: toolbarProp,
202
202
  navbar: navbarProp,
203
- options
203
+ options = null
204
204
  } = props;
205
205
  const {
206
206
  name,
@@ -218,6 +218,8 @@ const useDataTable = function (props) {
218
218
  const manual = refDataFn.current != null;
219
219
  const hash = createHash(name, keyName, manual, tableCells);
220
220
  const refHash = React.useRef(hash);
221
+ const refOptions = React.useRef(options);
222
+ refOptions.current = options;
221
223
  const [data, setData] = React.useState(() => initialDataState(props.data, props.initialData));
222
224
  const toolbar = (0, _utils.getToolbarConfig)(toolbarProp);
223
225
  const navbar = (0, _utils.getNavbarConfig)(navbarProp, props.limit || defaultPageSize);
@@ -424,6 +426,10 @@ const useDataTable = function (props) {
424
426
  });
425
427
  },
426
428
  onGlobalFilterChange(value) {
429
+ const cb = refOptions.current?.onGlobalFilterChange;
430
+ if (cb) {
431
+ cb(value);
432
+ }
427
433
  setState(prev => {
428
434
  if (prev.loading) {
429
435
  return prev;
@@ -450,6 +456,10 @@ const useDataTable = function (props) {
450
456
  });
451
457
  },
452
458
  onColumnFiltersChange(value) {
459
+ const cb = refOptions.current?.onColumnFiltersChange;
460
+ if (cb) {
461
+ cb(value);
462
+ }
453
463
  setState(prev => {
454
464
  if (prev.loading) {
455
465
  return prev;
@@ -479,6 +489,10 @@ const useDataTable = function (props) {
479
489
  });
480
490
  },
481
491
  onSortingChange(value) {
492
+ const cb = refOptions.current?.onSortingChange;
493
+ if (cb) {
494
+ cb(value);
495
+ }
482
496
  setState(prev => {
483
497
  if (prev.loading) {
484
498
  return prev;
@@ -507,6 +521,10 @@ const useDataTable = function (props) {
507
521
  });
508
522
  },
509
523
  onPaginationChange(value) {
524
+ const cb = refOptions.current?.onPaginationChange;
525
+ if (cb) {
526
+ cb(value);
527
+ }
510
528
  setState(prev => {
511
529
  if (prev.loading) {
512
530
  return prev;
@@ -706,17 +724,8 @@ const useDataTable = function (props) {
706
724
  const {
707
725
  pagination
708
726
  } = state;
709
- const tableCtx = (0, _reactTable.useReactTable)(Object.assign({
710
- data,
711
- columns,
727
+ const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, options, {
712
728
  pageCount: manual ? state.pageCount : undefined,
713
- state: {
714
- columnVisibility,
715
- sorting: state.sorting,
716
- globalFilter: state.globalFilter,
717
- columnFilters: state.columnFilters,
718
- pagination
719
- },
720
729
  getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
721
730
  getPaginationRowModel: (0, _reactTable.getPaginationRowModel)(),
722
731
  getFilteredRowModel: (0, _reactTable.getFilteredRowModel)(),
@@ -729,8 +738,17 @@ const useDataTable = function (props) {
729
738
  onPaginationChange,
730
739
  manualFiltering: manual,
731
740
  manualSorting: manual,
732
- manualPagination: manual
733
- }, options));
741
+ manualPagination: manual,
742
+ state: Object.assign({}, options?.state || null, {
743
+ columnVisibility,
744
+ sorting: state.sorting,
745
+ globalFilter: state.globalFilter,
746
+ columnFilters: state.columnFilters,
747
+ pagination
748
+ }),
749
+ data,
750
+ columns
751
+ }));
734
752
 
735
753
  // lexicon page config
736
754
  const limit = pagination.pageSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tint-ui/data-table",
3
- "version": "0.3.8",
3
+ "version": "0.3.10",
4
4
  "author": "phragon@websoftlab.com",
5
5
  "license": "MIT",
6
6
  "dependencies": {
package/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { Table, TableOptions } from "@tanstack/react-table";
2
+ import type { Table, TableOptions, TableState } from "@tanstack/react-table";
3
3
  import type { InputSelectOption } from "@tint-ui/tools";
4
4
  import type { TriggerProp } from "@tint-ui/trigger";
5
5
  interface FilterRangeType {
@@ -32,6 +32,9 @@ export type SelectedOption<TData> = OptionTrigger<TData> & {
32
32
  };
33
33
  export type DataTableToolbarSize = "sm" | "md" | "lg";
34
34
  export type DataTableNavbarSize = "sm" | "md" | "lg";
35
+ export interface DataTableOptions<TData> extends Partial<Omit<TableOptions<TData>, "pageCount" | "getCoreRowModel" | "getPaginationRowModel" | "getFilteredRowModel" | "getSortedRowModel" | "globalFilterFn" | "manualFiltering" | "manualSorting" | "manualPagination" | "data" | "columns" | "state">> {
36
+ state?: Partial<Omit<TableState, "columnVisibility" | "sorting" | "globalFilter" | "columnFilters" | "pagination">>;
37
+ }
35
38
  export interface DataTableCoreProps<TData> extends FilterType<TData> {
36
39
  table: DataTableType<TData>;
37
40
  data: TData[] | DataTableCallbackType<TData>;
@@ -47,7 +50,7 @@ export interface DataTableCoreProps<TData> extends FilterType<TData> {
47
50
  navbar?: Partial<Omit<NavbarConfig, "onPageSizeChange">> | null;
48
51
  compact?: boolean;
49
52
  cacheable?: boolean;
50
- options?: TableOptions<TData>;
53
+ options?: DataTableOptions<TData>;
51
54
  }
52
55
  export type StringOrFn = string | (() => string);
53
56
  export interface DataTableLexicon {
package/use-data-table.js CHANGED
@@ -190,7 +190,7 @@ const useDataTable = function (props) {
190
190
  onRowClick,
191
191
  toolbar: toolbarProp,
192
192
  navbar: navbarProp,
193
- options
193
+ options = null
194
194
  } = props;
195
195
  const {
196
196
  name,
@@ -208,6 +208,8 @@ const useDataTable = function (props) {
208
208
  const manual = refDataFn.current != null;
209
209
  const hash = createHash(name, keyName, manual, tableCells);
210
210
  const refHash = React.useRef(hash);
211
+ const refOptions = React.useRef(options);
212
+ refOptions.current = options;
211
213
  const [data, setData] = React.useState(() => initialDataState(props.data, props.initialData));
212
214
  const toolbar = getToolbarConfig(toolbarProp);
213
215
  const navbar = getNavbarConfig(navbarProp, props.limit || defaultPageSize);
@@ -418,6 +420,10 @@ const useDataTable = function (props) {
418
420
  });
419
421
  },
420
422
  onGlobalFilterChange(value) {
423
+ const cb = refOptions.current?.onGlobalFilterChange;
424
+ if (cb) {
425
+ cb(value);
426
+ }
421
427
  setState(prev => {
422
428
  if (prev.loading) {
423
429
  return prev;
@@ -445,6 +451,10 @@ const useDataTable = function (props) {
445
451
  });
446
452
  },
447
453
  onColumnFiltersChange(value) {
454
+ const cb = refOptions.current?.onColumnFiltersChange;
455
+ if (cb) {
456
+ cb(value);
457
+ }
448
458
  setState(prev => {
449
459
  if (prev.loading) {
450
460
  return prev;
@@ -475,6 +485,10 @@ const useDataTable = function (props) {
475
485
  });
476
486
  },
477
487
  onSortingChange(value) {
488
+ const cb = refOptions.current?.onSortingChange;
489
+ if (cb) {
490
+ cb(value);
491
+ }
478
492
  setState(prev => {
479
493
  if (prev.loading) {
480
494
  return prev;
@@ -504,6 +518,10 @@ const useDataTable = function (props) {
504
518
  });
505
519
  },
506
520
  onPaginationChange(value) {
521
+ const cb = refOptions.current?.onPaginationChange;
522
+ if (cb) {
523
+ cb(value);
524
+ }
507
525
  setState(prev => {
508
526
  if (prev.loading) {
509
527
  return prev;
@@ -705,16 +723,8 @@ const useDataTable = function (props) {
705
723
  pagination
706
724
  } = state;
707
725
  const tableCtx = useReactTable({
708
- data,
709
- columns,
726
+ ...options,
710
727
  pageCount: manual ? state.pageCount : undefined,
711
- state: {
712
- columnVisibility,
713
- sorting: state.sorting,
714
- globalFilter: state.globalFilter,
715
- columnFilters: state.columnFilters,
716
- pagination
717
- },
718
728
  getCoreRowModel: getCoreRowModel(),
719
729
  getPaginationRowModel: getPaginationRowModel(),
720
730
  getFilteredRowModel: getFilteredRowModel(),
@@ -728,7 +738,16 @@ const useDataTable = function (props) {
728
738
  manualFiltering: manual,
729
739
  manualSorting: manual,
730
740
  manualPagination: manual,
731
- ...options
741
+ state: {
742
+ ...(options?.state || null),
743
+ columnVisibility,
744
+ sorting: state.sorting,
745
+ globalFilter: state.globalFilter,
746
+ columnFilters: state.columnFilters,
747
+ pagination
748
+ },
749
+ data,
750
+ columns
732
751
  });
733
752
 
734
753
  // lexicon page config