@bsol-oss/react-datatable5 1.0.18 → 1.0.20

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 (7) hide show
  1. package/README.md +33 -14
  2. package/dist/index.d.ts +19 -13
  3. package/dist/index.js +70 -38
  4. package/dist/index.mjs +71 -42
  5. package/dist/types/components/ResetSelectionButton.d.ts +1 -1
  6. package/dist/types/index.d.ts +6 -3
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -8,17 +8,25 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
8
8
 
9
9
  ## Usage
10
10
 
11
+ ### DataTable
12
+
11
13
  ```tsx
12
- <DataTable
13
- columns={columns}
14
- url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
15
- >
16
- <EditViewButton />
17
- <ResetSortingButton />
18
- <TableFilter />
19
- <ResetFilteringButton />
14
+ <DataTable columns={columns} data={data}>
15
+ <Flex gap="0.25rem">
16
+ <TablePagination />
17
+ <ButtonGroup isAttached>
18
+ <EditViewButton />
19
+ <EditFilterButton />
20
+ <EditSortingButton />
21
+ </ButtonGroup>
22
+ <EditOrderButton />
23
+ <PageSizeControl />
24
+ <ButtonGroup isAttached>
25
+ <TableSelector />
26
+ </ButtonGroup>
27
+ </Flex>
20
28
  <Table>
21
- <TableHeader />
29
+ <TableHeader canResize />
22
30
  <TableBody />
23
31
  <TableFooter />
24
32
  </Table>
@@ -27,8 +35,10 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
27
35
  </DataTable>
28
36
  ```
29
37
 
38
+ ### DataTableServer
39
+
30
40
  ```tsx
31
- <DataTable
41
+ <DataTableServer
32
42
  columns={columns}
33
43
  url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
34
44
  >
@@ -45,9 +55,18 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
45
55
  <TableSelector />
46
56
  </ButtonGroup>
47
57
  </Flex>
48
- <TableCardContainer>
49
- <TableCards />
50
- </TableCardContainer>
58
+ <Table>
59
+ <TableHeader canResize />
60
+ <TableBody />
61
+ <TableFooter />
62
+ </Table>
63
+ <PageSizeControl />
51
64
  <TablePagination />
52
- </DataTable>
65
+ </DataTableServer>
66
+ ```
67
+
68
+ Example Url generated by the DataTableServer
69
+
53
70
  ```
71
+ GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={"field":"session_id","sort":"asc"}&where={"last_user_message":"vdsdf"}
72
+ ```
package/dist/index.d.ts CHANGED
@@ -32,12 +32,14 @@ interface DataResponse<T> extends Result<T> {
32
32
  }
33
33
  declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
34
34
 
35
- declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
36
-
37
35
  declare const EditFilterButton: () => react_jsx_runtime.JSX.Element;
38
36
 
37
+ declare const EditOrderButton: () => react_jsx_runtime.JSX.Element;
38
+
39
39
  declare const EditSortingButton: () => react_jsx_runtime.JSX.Element;
40
40
 
41
+ declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
42
+
41
43
  interface PageSizeControlProps {
42
44
  pageSizes?: number[];
43
45
  }
@@ -45,6 +47,8 @@ declare const PageSizeControl: ({ pageSizes, }: PageSizeControlProps) => react_j
45
47
 
46
48
  declare const ResetFilteringButton: () => react_jsx_runtime.JSX.Element;
47
49
 
50
+ declare const ResetSelectionButton: () => react_jsx_runtime.JSX.Element;
51
+
48
52
  declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
49
53
 
50
54
  interface TableProps {
@@ -72,8 +76,20 @@ interface TableHeaderProps {
72
76
  }
73
77
  declare const TableHeader: ({ canResize }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
74
78
 
79
+ declare const TableOrderer: () => react_jsx_runtime.JSX.Element;
80
+
81
+ interface PaginationProps {
82
+ }
83
+ declare const TablePagination: ({}: PaginationProps) => react_jsx_runtime.JSX.Element;
84
+
75
85
  declare const TableSorter: () => react_jsx_runtime.JSX.Element;
76
86
 
87
+ interface TextCellProps {
88
+ label?: string;
89
+ children: string | number | JSX.Element | JSX.Element[];
90
+ }
91
+ declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
92
+
77
93
  interface useDataFromUrlReturn<T> {
78
94
  data: T;
79
95
  loading: boolean;
@@ -92,14 +108,4 @@ declare const useDataTable: () => {
92
108
  refreshData: () => void;
93
109
  };
94
110
 
95
- interface PaginationProps {
96
- }
97
- declare const TablePagination: ({}: PaginationProps) => react_jsx_runtime.JSX.Element;
98
-
99
- interface TextCellProps {
100
- label?: string;
101
- children: string | number | JSX.Element | JSX.Element[];
102
- }
103
- declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
104
-
105
- export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
111
+ export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, 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, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
4
  var reactTable = require('@tanstack/react-table');
5
+ var react = require('react');
6
6
  var axios = require('axios');
7
7
  var react$1 = require('@chakra-ui/react');
8
- var io = require('react-icons/io');
9
8
  var md = require('react-icons/md');
10
9
  var icons = require('@chakra-ui/icons');
10
+ var io = require('react-icons/io');
11
11
  var table = require('@chakra-ui/table');
12
12
 
13
13
  const TableContext = react.createContext({
@@ -16,32 +16,13 @@ const TableContext = react.createContext({
16
16
  });
17
17
 
18
18
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
19
- const [sorting, setSorting] = react.useState([]);
20
- const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
21
- const [pagination, setPagination] = react.useState({
22
- pageIndex: 0, //initial page index
23
- pageSize: 10, //default page size
24
- });
25
- const [rowSelection, setRowSelection] = react.useState({});
26
- const [columnOrder, setColumnOrder] = react.useState([]);
27
19
  const table = reactTable.useReactTable({
28
20
  data: data,
29
21
  columns: columns,
30
22
  getCoreRowModel: reactTable.getCoreRowModel(),
31
- manualPagination: true,
32
- manualSorting: true,
33
- onPaginationChange: setPagination,
34
- onSortingChange: setSorting,
35
- onColumnFiltersChange: setColumnFilters,
36
- columnResizeMode: "onChange",
37
- onRowSelectionChange: setRowSelection,
38
- state: {
39
- pagination,
40
- sorting,
41
- columnFilters,
42
- rowSelection,
43
- columnOrder,
44
- },
23
+ getFilteredRowModel: reactTable.getFilteredRowModel(),
24
+ getSortedRowModel: reactTable.getSortedRowModel(),
25
+ getPaginationRowModel: reactTable.getPaginationRowModel(),
45
26
  defaultColumn: {
46
27
  size: 150, //starting column size
47
28
  minSize: 10, //enforced during column resizing
@@ -50,14 +31,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
50
31
  enableRowSelection: enableRowSelection,
51
32
  enableMultiRowSelection: enableMultiRowSelection,
52
33
  enableSubRowSelection: enableSubRowSelection,
53
- onColumnOrderChange: (state) => {
54
- setColumnOrder(state);
55
- },
56
- rowCount: data.filterCount,
34
+ columnResizeMode: "onChange",
57
35
  });
58
- react.useEffect(() => {
59
- setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
60
- }, []);
61
36
  return (jsxRuntime.jsx(TableContext.Provider, { value: {
62
37
  table: { ...table },
63
38
  refreshData: () => {
@@ -167,13 +142,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
167
142
  return (jsxRuntime.jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
168
143
  };
169
144
 
170
- const EditViewButton = () => {
171
- const { table } = react.useContext(TableContext);
172
- return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", 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) => {
173
- 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()));
174
- }) }) })] })] }));
175
- };
176
-
177
145
  const ResetFilteringButton = () => {
178
146
  const { table } = react.useContext(TableContext);
179
147
  return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
@@ -201,6 +169,53 @@ const EditFilterButton = () => {
201
169
  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", icon: jsxRuntime.jsx(md.MdFilterAlt, {}) }) }) }), 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: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, {})] }) })] })] }));
202
170
  };
203
171
 
172
+ const ColumnOrderChanger = ({ columns }) => {
173
+ const [order, setOrder] = react.useState([]);
174
+ const [originalOrder, setOriginalOrder] = react.useState([]);
175
+ const { table } = useDataTable();
176
+ const handleChangeOrder = (startIndex, endIndex) => {
177
+ const newOrder = Array.from(order);
178
+ const [removed] = newOrder.splice(startIndex, 1);
179
+ newOrder.splice(endIndex, 0, removed);
180
+ setOrder(newOrder);
181
+ };
182
+ react.useEffect(() => {
183
+ setOrder(columns);
184
+ }, [columns]);
185
+ react.useEffect(() => {
186
+ if (originalOrder.length > 0) {
187
+ return;
188
+ }
189
+ if (columns.length <= 0) {
190
+ return;
191
+ }
192
+ setOriginalOrder(columns);
193
+ }, [columns]);
194
+ 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: () => {
195
+ const prevIndex = index - 1;
196
+ if (prevIndex >= 0) {
197
+ handleChangeOrder(index, prevIndex);
198
+ }
199
+ }, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), column, jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
200
+ const nextIndex = index + 1;
201
+ if (nextIndex < order.length) {
202
+ handleChangeOrder(index, nextIndex);
203
+ }
204
+ }, 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: () => {
205
+ table.setColumnOrder(order);
206
+ }, children: "Apply" }), jsxRuntime.jsx(react$1.Button, { onClick: () => {
207
+ table.setColumnOrder(originalOrder);
208
+ }, children: "Reset" })] })] }));
209
+ };
210
+ const TableOrderer = () => {
211
+ const { table } = useDataTable();
212
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
213
+ };
214
+
215
+ const EditOrderButton = () => {
216
+ return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.Tooltip, { label: "Change Order", children: jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "filter", icon: jsxRuntime.jsx(md.MdOutlineMoveDown, {}) }) }) }), 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: "0.25rem", children: jsxRuntime.jsx(TableOrderer, {}) }) })] })] }));
217
+ };
218
+
204
219
  const ResetSortingButton = () => {
205
220
  const { table } = react.useContext(TableContext);
206
221
  return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
@@ -229,11 +244,25 @@ const EditSortingButton = () => {
229
244
  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", 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, {})] }) })] })] }));
230
245
  };
231
246
 
247
+ const EditViewButton = () => {
248
+ const { table } = react.useContext(TableContext);
249
+ return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", 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) => {
250
+ 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()));
251
+ }) }) })] })] }));
252
+ };
253
+
232
254
  const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
233
255
  const { table } = react.useContext(TableContext);
234
256
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Button, rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react$1.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react$1.MenuItem, { onClick: () => { table.setPageSize(Number(pageSize)); }, children: pageSize }))) })] }) }));
235
257
  };
236
258
 
259
+ const ResetSelectionButton = () => {
260
+ const { table } = react.useContext(TableContext);
261
+ return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
262
+ table.resetRowSelection();
263
+ }, children: "Reset Selection" }));
264
+ };
265
+
237
266
  const Table = ({ children }) => {
238
267
  const { table } = useDataTable();
239
268
  return (jsxRuntime.jsx(react$1.Container, { padding: '0rem', maxW: "100%", overflowX: "scroll", children: jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
@@ -386,10 +415,12 @@ const TextCell = ({ label, children }) => {
386
415
  exports.DataTable = DataTable;
387
416
  exports.DataTableServer = DataTableServer;
388
417
  exports.EditFilterButton = EditFilterButton;
418
+ exports.EditOrderButton = EditOrderButton;
389
419
  exports.EditSortingButton = EditSortingButton;
390
420
  exports.EditViewButton = EditViewButton;
391
421
  exports.PageSizeControl = PageSizeControl;
392
422
  exports.ResetFilteringButton = ResetFilteringButton;
423
+ exports.ResetSelectionButton = ResetSelectionButton;
393
424
  exports.ResetSortingButton = ResetSortingButton;
394
425
  exports.Table = Table;
395
426
  exports.TableBody = TableBody;
@@ -398,6 +429,7 @@ exports.TableCards = TableCards;
398
429
  exports.TableFilter = TableFilter;
399
430
  exports.TableFooter = TableFooter;
400
431
  exports.TableHeader = TableHeader;
432
+ exports.TableOrderer = TableOrderer;
401
433
  exports.TablePagination = TablePagination;
402
434
  exports.TableSorter = TableSorter;
403
435
  exports.TextCell = TextCell;
package/dist/index.mjs CHANGED
@@ -1,11 +1,11 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
1
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
+ import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
2
3
  import { createContext, useState, useEffect, useContext } from 'react';
3
- import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
4
4
  import axios from 'axios';
5
- import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Menu, MenuButton, MenuList, MenuItem, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup } from '@chakra-ui/react';
6
- import { IoMdEye, IoMdClose } from 'react-icons/io';
7
- import { MdFilterAlt, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
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 } from '@chakra-ui/react';
6
+ import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
8
7
  import { ChevronUpIcon, UpDownIcon, ChevronDownIcon, CloseIcon } from '@chakra-ui/icons';
8
+ import { IoMdEye, IoMdClose } from 'react-icons/io';
9
9
  import { Tbody, Tr, Td } from '@chakra-ui/table';
10
10
 
11
11
  const TableContext = createContext({
@@ -14,32 +14,13 @@ const TableContext = createContext({
14
14
  });
15
15
 
16
16
  const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
17
- const [sorting, setSorting] = useState([]);
18
- const [columnFilters, setColumnFilters] = useState([]); // can set initial column filter state here
19
- const [pagination, setPagination] = useState({
20
- pageIndex: 0, //initial page index
21
- pageSize: 10, //default page size
22
- });
23
- const [rowSelection, setRowSelection] = useState({});
24
- const [columnOrder, setColumnOrder] = useState([]);
25
17
  const table = useReactTable({
26
18
  data: data,
27
19
  columns: columns,
28
20
  getCoreRowModel: getCoreRowModel(),
29
- manualPagination: true,
30
- manualSorting: true,
31
- onPaginationChange: setPagination,
32
- onSortingChange: setSorting,
33
- onColumnFiltersChange: setColumnFilters,
34
- columnResizeMode: "onChange",
35
- onRowSelectionChange: setRowSelection,
36
- state: {
37
- pagination,
38
- sorting,
39
- columnFilters,
40
- rowSelection,
41
- columnOrder,
42
- },
21
+ getFilteredRowModel: getFilteredRowModel(),
22
+ getSortedRowModel: getSortedRowModel(),
23
+ getPaginationRowModel: getPaginationRowModel(),
43
24
  defaultColumn: {
44
25
  size: 150, //starting column size
45
26
  minSize: 10, //enforced during column resizing
@@ -48,14 +29,8 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
48
29
  enableRowSelection: enableRowSelection,
49
30
  enableMultiRowSelection: enableMultiRowSelection,
50
31
  enableSubRowSelection: enableSubRowSelection,
51
- onColumnOrderChange: (state) => {
52
- setColumnOrder(state);
53
- },
54
- rowCount: data.filterCount,
32
+ columnResizeMode: "onChange",
55
33
  });
56
- useEffect(() => {
57
- setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
58
- }, []);
59
34
  return (jsx(TableContext.Provider, { value: {
60
35
  table: { ...table },
61
36
  refreshData: () => {
@@ -165,13 +140,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
165
140
  return (jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
166
141
  };
167
142
 
168
- const EditViewButton = () => {
169
- const { table } = useContext(TableContext);
170
- return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
171
- return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
172
- }) }) })] })] }));
173
- };
174
-
175
143
  const ResetFilteringButton = () => {
176
144
  const { table } = useContext(TableContext);
177
145
  return (jsx(Button, { onClick: () => {
@@ -199,6 +167,53 @@ const EditFilterButton = () => {
199
167
  return (jsxs(Popover, { placement: "auto", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", icon: jsx(MdFilterAlt, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, {})] }) })] })] }));
200
168
  };
201
169
 
170
+ const ColumnOrderChanger = ({ columns }) => {
171
+ const [order, setOrder] = useState([]);
172
+ const [originalOrder, setOriginalOrder] = useState([]);
173
+ const { table } = useDataTable();
174
+ const handleChangeOrder = (startIndex, endIndex) => {
175
+ const newOrder = Array.from(order);
176
+ const [removed] = newOrder.splice(startIndex, 1);
177
+ newOrder.splice(endIndex, 0, removed);
178
+ setOrder(newOrder);
179
+ };
180
+ useEffect(() => {
181
+ setOrder(columns);
182
+ }, [columns]);
183
+ useEffect(() => {
184
+ if (originalOrder.length > 0) {
185
+ return;
186
+ }
187
+ if (columns.length <= 0) {
188
+ return;
189
+ }
190
+ setOriginalOrder(columns);
191
+ }, [columns]);
192
+ 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: () => {
193
+ const prevIndex = index - 1;
194
+ if (prevIndex >= 0) {
195
+ handleChangeOrder(index, prevIndex);
196
+ }
197
+ }, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), column, jsx(IconButton, { onClick: () => {
198
+ const nextIndex = index + 1;
199
+ if (nextIndex < order.length) {
200
+ handleChangeOrder(index, nextIndex);
201
+ }
202
+ }, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, column))) }), jsxs(Box, { children: [jsx(Button, { onClick: () => {
203
+ table.setColumnOrder(order);
204
+ }, children: "Apply" }), jsx(Button, { onClick: () => {
205
+ table.setColumnOrder(originalOrder);
206
+ }, children: "Reset" })] })] }));
207
+ };
208
+ const TableOrderer = () => {
209
+ const { table } = useDataTable();
210
+ return (jsx(Fragment, { children: jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
211
+ };
212
+
213
+ const EditOrderButton = () => {
214
+ return (jsxs(Popover, { placement: "auto", children: [jsx(Tooltip, { label: "Change Order", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", icon: jsx(MdOutlineMoveDown, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: jsx(TableOrderer, {}) }) })] })] }));
215
+ };
216
+
202
217
  const ResetSortingButton = () => {
203
218
  const { table } = useContext(TableContext);
204
219
  return (jsx(Button, { onClick: () => {
@@ -227,11 +242,25 @@ const EditSortingButton = () => {
227
242
  return (jsxs(Popover, { placement: "auto", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", 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, {})] }) })] })] }));
228
243
  };
229
244
 
245
+ const EditViewButton = () => {
246
+ const { table } = useContext(TableContext);
247
+ return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
248
+ return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
249
+ }) }) })] })] }));
250
+ };
251
+
230
252
  const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
231
253
  const { table } = useContext(TableContext);
232
254
  return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, rightIcon: jsx(ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => { table.setPageSize(Number(pageSize)); }, children: pageSize }))) })] }) }));
233
255
  };
234
256
 
257
+ const ResetSelectionButton = () => {
258
+ const { table } = useContext(TableContext);
259
+ return (jsx(Button, { onClick: () => {
260
+ table.resetRowSelection();
261
+ }, children: "Reset Selection" }));
262
+ };
263
+
235
264
  const Table = ({ children }) => {
236
265
  const { table } = useDataTable();
237
266
  return (jsx(Container, { padding: '0rem', maxW: "100%", overflowX: "scroll", children: jsx(Table$1, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
@@ -381,4 +410,4 @@ const TextCell = ({ label, children }) => {
381
410
  return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
382
411
  };
383
412
 
384
- export { DataTable, DataTableServer, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };
413
+ export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };
package/dist/types/components/ResetSelectionButton.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const ResetSortingButton: () => import("react/jsx-runtime").JSX.Element;
1
+ export declare const ResetSelectionButton: () => import("react/jsx-runtime").JSX.Element;
package/dist/types/index.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  export * from "./components/DataTable";
2
2
  export * from "./components/DataTableServer";
3
- export * from "./components/EditViewButton";
4
3
  export * from "./components/EditFilterButton";
4
+ export * from "./components/EditOrderButton";
5
5
  export * from "./components/EditSortingButton";
6
+ export * from "./components/EditViewButton";
6
7
  export * from "./components/PageSizeControl";
7
8
  export * from "./components/ResetFilteringButton";
9
+ export * from "./components/ResetSelectionButton";
8
10
  export * from "./components/ResetSortingButton";
9
11
  export * from "./components/Table";
10
12
  export * from "./components/TableBody";
@@ -13,8 +15,9 @@ export * from "./components/TableCards";
13
15
  export * from "./components/TableFilter";
14
16
  export * from "./components/TableFooter";
15
17
  export * from "./components/TableHeader";
18
+ export * from "./components/TableOrderer";
19
+ export * from "./components/TablePagination";
16
20
  export * from "./components/TableSorter";
21
+ export * from "./components/TextCell";
17
22
  export * from "./components/useDataFromUrl";
18
23
  export * from "./components/useDataTable";
19
- export * from "./components/TablePagination";
20
- export * from "./components/TextCell";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.18",
3
+ "version": "1.0.20",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",