@tint-ui/data-table 0.3.7 → 0.3.9

package/cjs/data-table.js

@@ -13,7 +13,7 @@ var _context = require("./context");
 var _dataTableToolbar = require("./data-table-toolbar");
 var _dataTableContent = require("./data-table-content");
 var _dataTablePagination = require("./data-table-pagination");
-const _excluded = ["themePropsType", "header", "table", "data", "navbar", "initialData", "limit", "offset", "lexicon", "total", "onRowClick", "filter", "filterText", "sortBy", "sortDir", "toolbar", "cacheable"];
+const _excluded = ["themePropsType", "header", "table", "data", "navbar", "initialData", "limit", "offset", "lexicon", "total", "onRowClick", "filter", "filterText", "sortBy", "sortDir", "toolbar", "cacheable", "options"];
 const DataTable = exports.DataTable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       themePropsType = "data-table",
@@ -32,7 +32,8 @@ const DataTable = exports.DataTable = /*#__PURE__*/React.forwardRef((_ref, ref)
       sortBy,
       sortDir,
       toolbar,
-      cacheable
+      cacheable,
+      options
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const context = (0, _useDataTable.useDataTable)({
@@ -51,7 +52,8 @@ const DataTable = exports.DataTable = /*#__PURE__*/React.forwardRef((_ref, ref)
     sortDir,
     header,
     onRowClick,
-    cacheable
+    cacheable,
+    options
   });
   return /*#__PURE__*/React.createElement(_context.DataTableContext.Provider, {
     value: context

package/cjs/index.js

@@ -91,6 +91,12 @@ Object.keys(_paginationSizeOptions).forEach(function (key) {
   if (key in exports && exports[key] === _paginationSizeOptions[key]) return;
   exports[key] = _paginationSizeOptions[key];
 });
+var _useDataTable = require("./use-data-table");
+Object.keys(_useDataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDataTable[key]) return;
+  exports[key] = _useDataTable[key];
+});
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/use-data-table.js

@@ -199,7 +199,8 @@ const useDataTable = function (props) {
     cacheable = true,
     onRowClick,
     toolbar: toolbarProp,
-    navbar: navbarProp
+    navbar: navbarProp,
+    options = null
   } = props;
   const {
     name,
@@ -705,17 +706,8 @@ const useDataTable = function (props) {
   const {
     pagination
   } = state;
-  const tableCtx = (0, _reactTable.useReactTable)({
-    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)(),
@@ -728,8 +720,17 @@ const useDataTable = function (props) {
     onPaginationChange,
     manualFiltering: manual,
     manualSorting: manual,
-    manualPagination: manual
-  });
+    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/data-table.js

@@ -25,6 +25,7 @@ const DataTable = /*#__PURE__*/React.forwardRef(({
   sortDir,
   toolbar,
   cacheable,
+  options,
   ...props
 }, ref) => {
   const context = useDataTable({
@@ -43,7 +44,8 @@ const DataTable = /*#__PURE__*/React.forwardRef(({
     sortDir,
     header,
     onRowClick,
-    cacheable
+    cacheable,
+    options
   });
   return /*#__PURE__*/React.createElement(DataTableContext.Provider, {
     value: context

package/index.d.ts

@@ -13,4 +13,5 @@ export * from "./data-table";
 export * from "./pagination-arrow";
 export * from "./pagination-number";
 export * from "./pagination-size-options";
+export * from "./use-data-table";
 export * from "./types";

package/index.js

@@ -13,4 +13,5 @@ export * from "./data-table.js";
 export * from "./pagination-arrow.js";
 export * from "./pagination-number.js";
 export * from "./pagination-size-options.js";
+export * from "./use-data-table.js";
 export * from "./types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tint-ui/data-table",
-  "version": "0.3.7",
+  "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 } 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,6 +50,7 @@ export interface DataTableCoreProps<TData> extends FilterType<TData> {
     navbar?: Partial<Omit<NavbarConfig, "onPageSizeChange">> | null;
     compact?: boolean;
     cacheable?: boolean;
+    options?: DataTableOptions<TData>;
 }
 export type StringOrFn = string | (() => string);
 export interface DataTableLexicon {

package/use-data-table.js

@@ -189,7 +189,8 @@ const useDataTable = function (props) {
     cacheable = true,
     onRowClick,
     toolbar: toolbarProp,
-    navbar: navbarProp
+    navbar: navbarProp,
+    options = null
   } = props;
   const {
     name,
@@ -704,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(),
@@ -726,7 +719,17 @@ const useDataTable = function (props) {
     onPaginationChange,
     manualFiltering: manual,
     manualSorting: manual,
-    manualPagination: manual
+    manualPagination: manual,
+    state: {
+      ...(options?.state || null),
+      columnVisibility,
+      sorting: state.sorting,
+      globalFilter: state.globalFilter,
+      columnFilters: state.columnFilters,
+      pagination
+    },
+    data,
+    columns
   });
 
   // lexicon page config