@bsol-oss/react-datatable5 1.0.53 → 1.0.54

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 (6) hide show
  1. package/dist/index.d.ts +5 -3
  2. package/dist/index.js +8 -2
  3. package/dist/index.mjs +8 -2
  4. package/dist/types/components/DataTable.d.ts +3 -2
  5. package/dist/types/components/DataTableServer.d.ts +3 -2
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnFiltersState, SortingState, Row, Table as Table$1 } from '@tanstack/react-table';
3
+ import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnFiltersState, SortingState, VisibilityState, Row, Table as Table$1 } from '@tanstack/react-table';
4
4
  import { RankingInfo } from '@tanstack/match-sorter-utils';
5
5
  import React$1, { ReactNode } from 'react';
6
6
  import * as react_icons_lib from 'react-icons/lib';
@@ -55,8 +55,9 @@ interface DataTableProps<TData> {
55
55
  };
56
56
  sorting?: SortingState;
57
57
  rowSelection?: RowSelectionState;
58
+ columnVisibility?: VisibilityState;
58
59
  }
59
- declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
60
+ declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
60
61
 
61
62
  interface DataTableServerProps<TData> {
62
63
  children: JSX.Element | JSX.Element[];
@@ -77,6 +78,7 @@ interface DataTableServerProps<TData> {
77
78
  sorting?: SortingState;
78
79
  rowSelection?: RowSelectionState;
79
80
  loadingComponent?: JSX.Element;
81
+ columnVisibility?: VisibilityState;
80
82
  }
81
83
  interface Result<T> {
82
84
  results: T[];
@@ -91,7 +93,7 @@ declare module "@tanstack/react-table" {
91
93
  displayName?: string;
92
94
  }
93
95
  }
94
- declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
96
+ declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
95
97
 
96
98
  interface DefaultTableProps {
97
99
  totalText?: string;
package/dist/index.js CHANGED
@@ -109,11 +109,12 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
109
109
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
110
110
  pageIndex: 0, //initial page index
111
111
  pageSize: 10, //default page size
112
- }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
112
+ }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
113
113
  const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
114
114
  const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
115
115
  const [densityState, setDensity] = react.useState(density);
116
116
  const [rowSelection, setRowSelection] = react.useState(defaultRowSelection);
117
+ const [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
117
118
  const table = reactTable.useReactTable({
118
119
  _features: [DensityFeature],
119
120
  data: data,
@@ -132,6 +133,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
132
133
  globalFilter,
133
134
  density: densityState,
134
135
  rowSelection,
136
+ columnVisibility,
135
137
  },
136
138
  onColumnOrderChange: (state) => {
137
139
  setColumnOrder(state);
@@ -149,6 +151,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
149
151
  // global filter end
150
152
  onDensityChange: setDensity,
151
153
  onRowSelectionChange: setRowSelection,
154
+ onColumnVisibilityChange: setColumnVisibility,
152
155
  initialState: {
153
156
  columnFilters: defaultColumnFilter,
154
157
  sorting: defaultSorting,
@@ -204,7 +207,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
204
207
  const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
205
208
  pageIndex: 0, //initial page index
206
209
  pageSize: 10, //default page size
207
- }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
210
+ }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
208
211
  const [sorting, setSorting] = react.useState(defaultSorting);
209
212
  const [columnFilters, setColumnFilters] = react.useState(defaultColumnFilter); // can set initial column filter state here
210
213
  const [pagination, setPagination] = react.useState(defaultPagination);
@@ -212,6 +215,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
212
215
  const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
213
216
  const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
214
217
  const [densityState, setDensity] = react.useState(density);
218
+ const [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
215
219
  const { data, loading, hasError, refreshData } = useDataFromUrl({
216
220
  url: url,
217
221
  defaultData: {
@@ -256,6 +260,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
256
260
  columnOrder,
257
261
  globalFilter,
258
262
  density: densityState,
263
+ columnVisibility,
259
264
  },
260
265
  defaultColumn: {
261
266
  size: 150, //starting column size
@@ -280,6 +285,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
280
285
  },
281
286
  // for tanstack-table ts bug end
282
287
  onDensityChange: setDensity,
288
+ onColumnVisibilityChange: setColumnVisibility,
283
289
  });
284
290
  react.useEffect(() => {
285
291
  refreshData();
package/dist/index.mjs CHANGED
@@ -107,11 +107,12 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
107
107
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
108
108
  pageIndex: 0, //initial page index
109
109
  pageSize: 10, //default page size
110
- }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
110
+ }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
111
111
  const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
112
112
  const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
113
113
  const [densityState, setDensity] = useState(density);
114
114
  const [rowSelection, setRowSelection] = useState(defaultRowSelection);
115
+ const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
115
116
  const table = useReactTable({
116
117
  _features: [DensityFeature],
117
118
  data: data,
@@ -130,6 +131,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
130
131
  globalFilter,
131
132
  density: densityState,
132
133
  rowSelection,
134
+ columnVisibility,
133
135
  },
134
136
  onColumnOrderChange: (state) => {
135
137
  setColumnOrder(state);
@@ -147,6 +149,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
147
149
  // global filter end
148
150
  onDensityChange: setDensity,
149
151
  onRowSelectionChange: setRowSelection,
152
+ onColumnVisibilityChange: setColumnVisibility,
150
153
  initialState: {
151
154
  columnFilters: defaultColumnFilter,
152
155
  sorting: defaultSorting,
@@ -202,7 +205,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
202
205
  const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
203
206
  pageIndex: 0, //initial page index
204
207
  pageSize: 10, //default page size
205
- }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
208
+ }, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
206
209
  const [sorting, setSorting] = useState(defaultSorting);
207
210
  const [columnFilters, setColumnFilters] = useState(defaultColumnFilter); // can set initial column filter state here
208
211
  const [pagination, setPagination] = useState(defaultPagination);
@@ -210,6 +213,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
210
213
  const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
211
214
  const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
212
215
  const [densityState, setDensity] = useState(density);
216
+ const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
213
217
  const { data, loading, hasError, refreshData } = useDataFromUrl({
214
218
  url: url,
215
219
  defaultData: {
@@ -254,6 +258,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
254
258
  columnOrder,
255
259
  globalFilter,
256
260
  density: densityState,
261
+ columnVisibility,
257
262
  },
258
263
  defaultColumn: {
259
264
  size: 150, //starting column size
@@ -278,6 +283,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
278
283
  },
279
284
  // for tanstack-table ts bug end
280
285
  onDensityChange: setDensity,
286
+ onColumnVisibilityChange: setColumnVisibility,
281
287
  });
282
288
  useEffect(() => {
283
289
  refreshData();
package/dist/types/components/DataTable.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { ColumnDef, ColumnFiltersState, FilterFn, RowSelectionState, SortingState } from "@tanstack/react-table";
2
+ import { ColumnDef, ColumnFiltersState, FilterFn, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
3
3
  import { RankingInfo } from "@tanstack/match-sorter-utils";
4
4
  import { DensityState } from "./DensityFeature";
5
5
  declare module "@tanstack/react-table" {
@@ -28,5 +28,6 @@ export interface DataTableProps<TData> {
28
28
  };
29
29
  sorting?: SortingState;
30
30
  rowSelection?: RowSelectionState;
31
+ columnVisibility?: VisibilityState;
31
32
  }
32
- export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
33
+ export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DataTableServer.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { ColumnDef, ColumnFiltersState, RowData, RowSelectionState, SortingState } from "@tanstack/react-table";
2
+ import { ColumnDef, ColumnFiltersState, RowData, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
3
3
  import { DensityState } from "./DensityFeature";
4
4
  export interface DataTableServerProps<TData> {
5
5
  children: JSX.Element | JSX.Element[];
@@ -20,6 +20,7 @@ export interface DataTableServerProps<TData> {
20
20
  sorting?: SortingState;
21
21
  rowSelection?: RowSelectionState;
22
22
  loadingComponent?: JSX.Element;
23
+ columnVisibility?: VisibilityState;
23
24
  }
24
25
  export interface Result<T> {
25
26
  results: T[];
@@ -34,4 +35,4 @@ declare module "@tanstack/react-table" {
34
35
  displayName?: string;
35
36
  }
36
37
  }
37
- export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
38
+ export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.53",
3
+ "version": "1.0.54",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",