@bsol-oss/react-datatable5 1.0.18 → 1.0.19

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 (4) hide show
  1. package/README.md +27 -14
  2. package/dist/index.js +5 -30
  3. package/dist/index.mjs +5 -30
  4. 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,12 @@ 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>
53
66
  ```
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
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
8
  var io = require('react-icons/io');
@@ -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: () => {
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } 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
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
6
  import { IoMdEye, IoMdClose } from 'react-icons/io';
@@ -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: () => {
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.19",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",