@tint-ui/data-table 0.3.8 → 0.3.9

package/cjs/use-data-table.js

@@ -200,7 +200,7 @@ const useDataTable = function (props) {
     onRowClick,
     toolbar: toolbarProp,
     navbar: navbarProp,
-    options
+    options = null
   } = props;
   const {
     name,
@@ -706,17 +706,8 @@ const useDataTable = function (props) {
   const {
     pagination
   } = state;
-  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({
-    data,
-    columns,
+  const tableCtx = (0, _reactTable.useReactTable)(Object.assign({}, options, {
     pageCount: manual ? state.pageCount : undefined,
-    state: {
-      columnVisibility,
-      sorting: state.sorting,
-      globalFilter: state.globalFilter,
-      columnFilters: state.columnFilters,
-      pagination
-    },
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)(),
     getFilteredRowModel: (0, _reactTable.getFilteredRowModel)(),
@@ -729,8 +720,17 @@ const useDataTable = function (props) {
     onPaginationChange,
     manualFiltering: manual,
     manualSorting: manual,
-    manualPagination: manual
-  }, options));
+    manualPagination: manual,
+    state: Object.assign({}, options?.state || null, {
+      columnVisibility,
+      sorting: state.sorting,
+      globalFilter: state.globalFilter,
+      columnFilters: state.columnFilters,
+      pagination
+    }),
+    data,
+    columns
+  }));
 
   // lexicon page config
   const limit = pagination.pageSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tint-ui/data-table",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "author": "phragon@websoftlab.com",
   "license": "MIT",
   "dependencies": {

package/types.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Table, TableOptions } from "@tanstack/react-table";
+import type { Table, TableOptions, TableState } from "@tanstack/react-table";
 import type { InputSelectOption } from "@tint-ui/tools";
 import type { TriggerProp } from "@tint-ui/trigger";
 interface FilterRangeType {
@@ -32,6 +32,9 @@ export type SelectedOption<TData> = OptionTrigger<TData> & {
 };
 export type DataTableToolbarSize = "sm" | "md" | "lg";
 export type DataTableNavbarSize = "sm" | "md" | "lg";
+export interface DataTableOptions<TData> extends Partial<Omit<TableOptions<TData>, "pageCount" | "getCoreRowModel" | "getPaginationRowModel" | "getFilteredRowModel" | "getSortedRowModel" | "globalFilterFn" | "onColumnFiltersChange" | "onGlobalFilterChange" | "onColumnVisibilityChange" | "onSortingChange" | "onPaginationChange" | "manualFiltering" | "manualSorting" | "manualPagination" | "data" | "columns" | "state">> {
+    state?: Partial<Omit<TableState, "columnVisibility" | "sorting" | "globalFilter" | "columnFilters" | "pagination">>;
+}
 export interface DataTableCoreProps<TData> extends FilterType<TData> {
     table: DataTableType<TData>;
     data: TData[] | DataTableCallbackType<TData>;
@@ -47,7 +50,7 @@ export interface DataTableCoreProps<TData> extends FilterType<TData> {
     navbar?: Partial<Omit<NavbarConfig, "onPageSizeChange">> | null;
     compact?: boolean;
     cacheable?: boolean;
-    options?: TableOptions<TData>;
+    options?: DataTableOptions<TData>;
 }
 export type StringOrFn = string | (() => string);
 export interface DataTableLexicon {

package/use-data-table.js

@@ -190,7 +190,7 @@ const useDataTable = function (props) {
     onRowClick,
     toolbar: toolbarProp,
     navbar: navbarProp,
-    options
+    options = null
   } = props;
   const {
     name,
@@ -705,16 +705,8 @@ const useDataTable = function (props) {
     pagination
   } = state;
   const tableCtx = useReactTable({
-    data,
-    columns,
+    ...options,
     pageCount: manual ? state.pageCount : undefined,
-    state: {
-      columnVisibility,
-      sorting: state.sorting,
-      globalFilter: state.globalFilter,
-      columnFilters: state.columnFilters,
-      pagination
-    },
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -728,7 +720,16 @@ const useDataTable = function (props) {
     manualFiltering: manual,
     manualSorting: manual,
     manualPagination: manual,
-    ...options
+    state: {
+      ...(options?.state || null),
+      columnVisibility,
+      sorting: state.sorting,
+      globalFilter: state.globalFilter,
+      columnFilters: state.columnFilters,
+      pagination
+    },
+    data,
+    columns
   });
 
   // lexicon page config