@bsol-oss/react-datatable5 1.0.23 → 1.0.25

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 (9) hide show
  1. package/dist/index.d.ts +21 -3
  2. package/dist/index.js +65 -12
  3. package/dist/index.mjs +66 -14
  4. package/dist/types/components/DataTable.d.ts +10 -1
  5. package/dist/types/components/DataTableServer.d.ts +6 -1
  6. package/dist/types/components/TableViewer.d.ts +1 -0
  7. package/dist/types/components/TextCell.d.ts +3 -1
  8. package/dist/types/index.d.ts +1 -0
  9. package/package.json +2 -1
package/dist/index.d.ts CHANGED
@@ -1,9 +1,18 @@
1
1
  /// <reference types="react" />
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { ColumnDef } from '@tanstack/react-table';
3
+ import { FilterFn, ColumnDef, RowData } from '@tanstack/react-table';
4
+ import { RankingInfo } from '@tanstack/match-sorter-utils';
4
5
  import { ReactNode } from 'react';
5
6
  import * as _tanstack_table_core from '@tanstack/table-core';
6
7
 
8
+ declare module '@tanstack/react-table' {
9
+ interface FilterFns {
10
+ fuzzy: FilterFn<unknown>;
11
+ }
12
+ interface FilterMeta {
13
+ itemRank: RankingInfo;
14
+ }
15
+ }
7
16
  interface DataTableProps<T> {
8
17
  children: JSX.Element | JSX.Element[];
9
18
  data: T[];
@@ -30,6 +39,11 @@ interface DataResponse<T> extends Result<T> {
30
39
  count: number;
31
40
  filterCount: number;
32
41
  }
42
+ declare module "@tanstack/react-table" {
43
+ interface ColumnMeta<TData extends RowData, TValue> {
44
+ displayName: string;
45
+ }
46
+ }
33
47
  declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
34
48
 
35
49
  declare const EditFilterButton: () => react_jsx_runtime.JSX.Element;
@@ -88,11 +102,15 @@ declare const TableSelector: () => react_jsx_runtime.JSX.Element;
88
102
 
89
103
  declare const TableSorter: () => react_jsx_runtime.JSX.Element;
90
104
 
105
+ declare const TableViewer: () => react_jsx_runtime.JSX.Element;
106
+
91
107
  interface TextCellProps {
92
108
  label?: string;
109
+ noOfLines?: number[];
110
+ padding?: string;
93
111
  children: string | number | JSX.Element | JSX.Element[];
94
112
  }
95
- declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
113
+ declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
96
114
 
97
115
  interface useDataFromUrlReturn<T> {
98
116
  data: T;
@@ -114,4 +132,4 @@ declare const useDataTable: () => {
114
132
  setGlobalFilter: (filter: string) => void;
115
133
  };
116
134
 
117
- export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
135
+ export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var reactTable = require('@tanstack/react-table');
5
5
  var react = require('react');
6
+ var matchSorterUtils = require('@tanstack/match-sorter-utils');
6
7
  var axios = require('axios');
7
8
  var react$1 = require('@chakra-ui/react');
8
9
  var md = require('react-icons/md');
@@ -17,8 +18,20 @@ const TableContext = react.createContext({
17
18
  setGlobalFilter: () => { },
18
19
  });
19
20
 
21
+ // Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
22
+ const fuzzyFilter = (row, columnId, value, addMeta) => {
23
+ // Rank the item
24
+ const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), value);
25
+ // Store the itemRank info
26
+ addMeta({
27
+ itemRank,
28
+ });
29
+ // Return if the item should be filtered in/out
30
+ return itemRank.passed;
31
+ };
20
32
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
21
33
  const [columnOrder, setColumnOrder] = react.useState([]);
34
+ const [globalFilter, setGlobalFilter] = react.useState('');
22
35
  const table = reactTable.useReactTable({
23
36
  data: data,
24
37
  columns: columns,
@@ -33,6 +46,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
33
46
  },
34
47
  state: {
35
48
  columnOrder,
49
+ globalFilter,
36
50
  },
37
51
  onColumnOrderChange: (state) => {
38
52
  setColumnOrder(state);
@@ -41,6 +55,11 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
41
55
  enableMultiRowSelection: enableMultiRowSelection,
42
56
  enableSubRowSelection: enableSubRowSelection,
43
57
  columnResizeMode: "onChange",
58
+ filterFns: {
59
+ fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
60
+ },
61
+ onGlobalFilterChange: setGlobalFilter,
62
+ globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
44
63
  });
45
64
  react.useEffect(() => {
46
65
  setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -50,6 +69,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
50
69
  refreshData: () => {
51
70
  throw new Error("not implemented");
52
71
  },
72
+ globalFilter: globalFilter,
73
+ setGlobalFilter: setGlobalFilter,
53
74
  }, children: children }));
54
75
  };
55
76
 
@@ -150,6 +171,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
150
171
  setGlobalFilter(state);
151
172
  },
152
173
  rowCount: data.filterCount,
174
+ // for tanstack-table ts bug start
175
+ filterFns: {
176
+ fuzzy: () => {
177
+ return false;
178
+ },
179
+ },
180
+ // for tanstack-table ts bug end
153
181
  });
154
182
  react.useEffect(() => {
155
183
  refreshData();
@@ -180,7 +208,10 @@ const useDataTable = () => {
180
208
  const TableFilter = () => {
181
209
  const { table } = useDataTable();
182
210
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getLeafHeaders().map((header) => {
183
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: header.column.id }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
211
+ const displayName = header.column.columnDef.meta === undefined
212
+ ? header.column.id
213
+ : header.column.columnDef.meta.displayName;
214
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
184
215
  ? String(header.column.getFilterValue())
185
216
  : "", onChange: (e) => {
186
217
  header.column.setFilterValue(e.target.value);
@@ -214,17 +245,27 @@ const ColumnOrderChanger = ({ columns }) => {
214
245
  }
215
246
  setOriginalOrder(columns);
216
247
  }, [columns]);
217
- return (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: [jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((column, index) => (jsxRuntime.jsxs(react$1.Flex, { gap: "0.25rem", alignItems: "center", justifyContent: "center", children: [jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
248
+ return (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: [jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
218
249
  const prevIndex = index - 1;
219
250
  if (prevIndex >= 0) {
220
251
  handleChangeOrder(index, prevIndex);
221
252
  }
222
- }, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), column, jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
253
+ }, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), table
254
+ .getAllFlatColumns()
255
+ .filter((column) => {
256
+ return column.id === columnId;
257
+ })
258
+ .map((column) => {
259
+ const displayName = column.columnDef.meta === undefined
260
+ ? column.id
261
+ : column.columnDef.meta.displayName;
262
+ return jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayName });
263
+ }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
223
264
  const nextIndex = index + 1;
224
265
  if (nextIndex < order.length) {
225
266
  handleChangeOrder(index, nextIndex);
226
267
  }
227
- }, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, column))) }), jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Button, { onClick: () => {
268
+ }, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react$1.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Button, { onClick: () => {
228
269
  table.setColumnOrder(order);
229
270
  }, children: "Apply" }), jsxRuntime.jsx(react$1.Button, { onClick: () => {
230
271
  table.setColumnOrder(originalOrder);
@@ -249,7 +290,10 @@ const ResetSortingButton = () => {
249
290
  const TableSorter = () => {
250
291
  const { table } = useDataTable();
251
292
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
252
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react$1.Text, { children: header.column.id }), jsxRuntime.jsxs(react$1.Button, { variant: "ghost", onClick: (e) => {
293
+ const displayName = header.column.columnDef.meta === undefined
294
+ ? header.column.id
295
+ : header.column.columnDef.meta.displayName;
296
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsxs(react$1.Button, { variant: "ghost", onClick: (e) => {
253
297
  header.column.toggleSorting();
254
298
  }, children: [header.column.getIsSorted() === false && (
255
299
  // <Text>To No sort</Text>
@@ -267,11 +311,19 @@ const EditSortingButton = () => {
267
311
  return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.Tooltip, { label: "Filter", children: jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "filter", variant: "ghost", icon: jsxRuntime.jsx(md.MdOutlineSort, {}) }) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) })] })] }));
268
312
  };
269
313
 
314
+ const TableViewer = () => {
315
+ const { table } = useDataTable();
316
+ return (jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
317
+ console.log(column.columnDef.meta, "gokspo");
318
+ const displayName = column.columnDef.meta === undefined
319
+ ? column.id
320
+ : column.columnDef.meta.displayName;
321
+ return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
322
+ }) }));
323
+ };
324
+
270
325
  const EditViewButton = () => {
271
- const { table } = react.useContext(TableContext);
272
- return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", variant: "ghost", icon: jsxRuntime.jsx(io.IoMdEye, {}) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
273
- return (jsxRuntime.jsx(react$1.FormControl, { width: "auto", children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
274
- }) }) })] })] }));
326
+ return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", variant: "ghost", icon: jsxRuntime.jsx(io.IoMdEye, {}) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsx(TableViewer, {}) })] })] }));
275
327
  };
276
328
 
277
329
  const GlobalFilter = () => {
@@ -451,11 +503,11 @@ const TableSelector = () => {
451
503
  }, "aria-label": "reset selection" }))] }));
452
504
  };
453
505
 
454
- const TextCell = ({ label, children }) => {
506
+ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
455
507
  if (label) {
456
- return (jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
508
+ return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
457
509
  }
458
- return (jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
510
+ return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }));
459
511
  };
460
512
 
461
513
  exports.DataTable = DataTable;
@@ -480,6 +532,7 @@ exports.TableOrderer = TableOrderer;
480
532
  exports.TablePagination = TablePagination;
481
533
  exports.TableSelector = TableSelector;
482
534
  exports.TableSorter = TableSorter;
535
+ exports.TableViewer = TableViewer;
483
536
  exports.TextCell = TextCell;
484
537
  exports.useDataFromUrl = useDataFromUrl;
485
538
  exports.useDataTable = useDataTable;
package/dist/index.mjs CHANGED
@@ -1,8 +1,9 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
3
3
  import { createContext, useState, useEffect, useContext } from 'react';
4
+ import { rankItem } from '@tanstack/match-sorter-utils';
4
5
  import axios from 'axios';
5
- import { Button, Box, Text, Input, Popover, Tooltip, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Menu, MenuButton, MenuList, MenuItem, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
6
+ import { Button, Box, Text, Input, Popover, Tooltip, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, Switch, Menu, MenuButton, MenuList, MenuItem, Container, Table as Table$1, Checkbox, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
6
7
  import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
7
8
  import { UpDownIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
8
9
  import { IoMdEye, IoMdClose, IoMdCheckbox } from 'react-icons/io';
@@ -15,8 +16,20 @@ const TableContext = createContext({
15
16
  setGlobalFilter: () => { },
16
17
  });
17
18
 
19
+ // Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
20
+ const fuzzyFilter = (row, columnId, value, addMeta) => {
21
+ // Rank the item
22
+ const itemRank = rankItem(row.getValue(columnId), value);
23
+ // Store the itemRank info
24
+ addMeta({
25
+ itemRank,
26
+ });
27
+ // Return if the item should be filtered in/out
28
+ return itemRank.passed;
29
+ };
18
30
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
19
31
  const [columnOrder, setColumnOrder] = useState([]);
32
+ const [globalFilter, setGlobalFilter] = useState('');
20
33
  const table = useReactTable({
21
34
  data: data,
22
35
  columns: columns,
@@ -31,6 +44,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
31
44
  },
32
45
  state: {
33
46
  columnOrder,
47
+ globalFilter,
34
48
  },
35
49
  onColumnOrderChange: (state) => {
36
50
  setColumnOrder(state);
@@ -39,6 +53,11 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
39
53
  enableMultiRowSelection: enableMultiRowSelection,
40
54
  enableSubRowSelection: enableSubRowSelection,
41
55
  columnResizeMode: "onChange",
56
+ filterFns: {
57
+ fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
58
+ },
59
+ onGlobalFilterChange: setGlobalFilter,
60
+ globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
42
61
  });
43
62
  useEffect(() => {
44
63
  setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -48,6 +67,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
48
67
  refreshData: () => {
49
68
  throw new Error("not implemented");
50
69
  },
70
+ globalFilter: globalFilter,
71
+ setGlobalFilter: setGlobalFilter,
51
72
  }, children: children }));
52
73
  };
53
74
 
@@ -148,6 +169,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
148
169
  setGlobalFilter(state);
149
170
  },
150
171
  rowCount: data.filterCount,
172
+ // for tanstack-table ts bug start
173
+ filterFns: {
174
+ fuzzy: () => {
175
+ return false;
176
+ },
177
+ },
178
+ // for tanstack-table ts bug end
151
179
  });
152
180
  useEffect(() => {
153
181
  refreshData();
@@ -178,7 +206,10 @@ const useDataTable = () => {
178
206
  const TableFilter = () => {
179
207
  const { table } = useDataTable();
180
208
  return (jsx(Fragment, { children: table.getLeafHeaders().map((header) => {
181
- return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: header.column.id }), jsx(Input, { value: header.column.getFilterValue()
209
+ const displayName = header.column.columnDef.meta === undefined
210
+ ? header.column.id
211
+ : header.column.columnDef.meta.displayName;
212
+ return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: displayName }), jsx(Input, { value: header.column.getFilterValue()
182
213
  ? String(header.column.getFilterValue())
183
214
  : "", onChange: (e) => {
184
215
  header.column.setFilterValue(e.target.value);
@@ -212,17 +243,27 @@ const ColumnOrderChanger = ({ columns }) => {
212
243
  }
213
244
  setOriginalOrder(columns);
214
245
  }, [columns]);
215
- return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((column, index) => (jsxs(Flex, { gap: "0.25rem", alignItems: "center", justifyContent: "center", children: [jsx(IconButton, { onClick: () => {
246
+ return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsx(IconButton, { onClick: () => {
216
247
  const prevIndex = index - 1;
217
248
  if (prevIndex >= 0) {
218
249
  handleChangeOrder(index, prevIndex);
219
250
  }
220
- }, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), column, jsx(IconButton, { onClick: () => {
251
+ }, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), table
252
+ .getAllFlatColumns()
253
+ .filter((column) => {
254
+ return column.id === columnId;
255
+ })
256
+ .map((column) => {
257
+ const displayName = column.columnDef.meta === undefined
258
+ ? column.id
259
+ : column.columnDef.meta.displayName;
260
+ return jsx(Fragment, { children: displayName });
261
+ }), jsx(IconButton, { onClick: () => {
221
262
  const nextIndex = index + 1;
222
263
  if (nextIndex < order.length) {
223
264
  handleChangeOrder(index, nextIndex);
224
265
  }
225
- }, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, column))) }), jsxs(Box, { children: [jsx(Button, { onClick: () => {
266
+ }, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, columnId))) }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Button, { onClick: () => {
226
267
  table.setColumnOrder(order);
227
268
  }, children: "Apply" }), jsx(Button, { onClick: () => {
228
269
  table.setColumnOrder(originalOrder);
@@ -247,7 +288,10 @@ const ResetSortingButton = () => {
247
288
  const TableSorter = () => {
248
289
  const { table } = useDataTable();
249
290
  return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Fragment, { children: headerGroup.headers.map((header) => {
250
- return (jsx(Fragment, { children: header.column.getCanSort() && (jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsx(Text, { children: header.column.id }), jsxs(Button, { variant: "ghost", onClick: (e) => {
291
+ const displayName = header.column.columnDef.meta === undefined
292
+ ? header.column.id
293
+ : header.column.columnDef.meta.displayName;
294
+ return (jsx(Fragment, { children: header.column.getCanSort() && (jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsx(Text, { children: displayName }), jsxs(Button, { variant: "ghost", onClick: (e) => {
251
295
  header.column.toggleSorting();
252
296
  }, children: [header.column.getIsSorted() === false && (
253
297
  // <Text>To No sort</Text>
@@ -265,11 +309,19 @@ const EditSortingButton = () => {
265
309
  return (jsxs(Popover, { placement: "auto", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", variant: "ghost", icon: jsx(MdOutlineSort, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) })] })] }));
266
310
  };
267
311
 
312
+ const TableViewer = () => {
313
+ const { table } = useDataTable();
314
+ return (jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
315
+ console.log(column.columnDef.meta, "gokspo");
316
+ const displayName = column.columnDef.meta === undefined
317
+ ? column.id
318
+ : column.columnDef.meta.displayName;
319
+ return (jsxs(Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
320
+ }) }));
321
+ };
322
+
268
323
  const EditViewButton = () => {
269
- const { table } = useContext(TableContext);
270
- return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", variant: "ghost", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
271
- return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
272
- }) }) })] })] }));
324
+ return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", variant: "ghost", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(TableViewer, {}) })] })] }));
273
325
  };
274
326
 
275
327
  const GlobalFilter = () => {
@@ -449,11 +501,11 @@ const TableSelector = () => {
449
501
  }, "aria-label": "reset selection" }))] }));
450
502
  };
451
503
 
452
- const TextCell = ({ label, children }) => {
504
+ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
453
505
  if (label) {
454
- return (jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
506
+ return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
455
507
  }
456
- return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
508
+ return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }));
457
509
  };
458
510
 
459
- export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TextCell, useDataFromUrl, useDataTable };
511
+ export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };
package/dist/types/components/DataTable.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { ColumnDef } from "@tanstack/react-table";
2
+ import { ColumnDef, FilterFn } from "@tanstack/react-table";
3
+ import { RankingInfo } from '@tanstack/match-sorter-utils';
4
+ declare module '@tanstack/react-table' {
5
+ interface FilterFns {
6
+ fuzzy: FilterFn<unknown>;
7
+ }
8
+ interface FilterMeta {
9
+ itemRank: RankingInfo;
10
+ }
11
+ }
3
12
  export interface DataTableProps<T> {
4
13
  children: JSX.Element | JSX.Element[];
5
14
  data: T[];
package/dist/types/components/DataTableServer.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { ColumnDef } from "@tanstack/react-table";
2
+ import { ColumnDef, RowData } from "@tanstack/react-table";
3
3
  export interface DataTableServerProps<T> {
4
4
  children: JSX.Element | JSX.Element[];
5
5
  url: string;
@@ -16,4 +16,9 @@ export interface DataResponse<T> extends Result<T> {
16
16
  count: number;
17
17
  filterCount: number;
18
18
  }
19
+ declare module "@tanstack/react-table" {
20
+ interface ColumnMeta<TData extends RowData, TValue> {
21
+ displayName: string;
22
+ }
23
+ }
19
24
  export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/TableViewer.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const TableViewer: () => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/TextCell.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  export interface TextCellProps {
3
3
  label?: string;
4
+ noOfLines?: number[];
5
+ padding?: string;
4
6
  children: string | number | JSX.Element | JSX.Element[];
5
7
  }
6
- export declare const TextCell: ({ label, children }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
package/dist/types/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export * from "./components/TableOrderer";
20
20
  export * from "./components/TablePagination";
21
21
  export * from "./components/TableSelector";
22
22
  export * from "./components/TableSorter";
23
+ export * from "./components/TableViewer";
23
24
  export * from "./components/TextCell";
24
25
  export * from "./components/useDataFromUrl";
25
26
  export * from "./components/useDataTable";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.23",
3
+ "version": "1.0.25",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -39,6 +39,7 @@
39
39
  "@chakra-ui/react": "^2.8.2",
40
40
  "@emotion/react": "^11.11.4",
41
41
  "@emotion/styled": "^11.11.0",
42
+ "@tanstack/match-sorter-utils": "^8.15.1",
42
43
  "@tanstack/react-table": "^8.16.0",
43
44
  "axios": "^1.6.8",
44
45
  "framer-motion": "^11.0.22",