@bsol-oss/react-datatable5 1.0.17 → 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 +8 -31
  3. package/dist/index.mjs +8 -31
  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: () => {
@@ -312,7 +287,9 @@ const TableFooter = () => {
312
287
  backgroundColor: header.column.getIsPinned()
313
288
  ? "gray.700"
314
289
  : undefined,
315
- }, children: header.isPlaceholder
290
+ },
291
+ // styling resize and pinning end
292
+ display: "flex", alignItems: "center", children: header.isPlaceholder
316
293
  ? null
317
294
  : reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
318
295
  };
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: () => {
@@ -310,7 +285,9 @@ const TableFooter = () => {
310
285
  backgroundColor: header.column.getIsPinned()
311
286
  ? "gray.700"
312
287
  : undefined,
313
- }, children: header.isPlaceholder
288
+ },
289
+ // styling resize and pinning end
290
+ display: "flex", alignItems: "center", children: header.isPlaceholder
314
291
  ? null
315
292
  : flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
316
293
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",