@bsol-oss/react-datatable5 1.0.6 → 1.0.7

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 (3) hide show
  1. package/package.json +3 -3
  2. package/dist/index.mts +0 -113
  3. package/dist/index.ts +0 -125
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -21,8 +21,8 @@
21
21
  "exports": {
22
22
  ".": {
23
23
  "types": "./dist/index.d.ts",
24
- "import": "./dist/index.mts",
25
- "default": "./dist/index.ts"
24
+ "import": "./dist/index.mjs",
25
+ "default": "./dist/index.js"
26
26
  },
27
27
  "./package.json": "./package.json"
28
28
  },
package/dist/index.mts DELETED
@@ -1,113 +0,0 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { createContext, useContext } from 'react';
3
- import { flexRender } from '@tanstack/react-table';
4
- import 'axios';
5
- import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Container, Table as Table$1, Box, Text, Input, Tfoot, Tr as Tr$1, Th, Thead, ButtonGroup, Tooltip } from '@chakra-ui/react';
6
- import { IoMdEye } from 'react-icons/io';
7
- import { Tbody, Tr, Td } from '@chakra-ui/table';
8
- import { MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
9
- import { ChevronUpIcon, UpDownIcon, ChevronDownIcon, CloseIcon } from '@chakra-ui/icons';
10
-
11
- const TableContext = createContext({
12
- table: {},
13
- refreshData: () => { },
14
- });
15
-
16
- const EditViewButton = () => {
17
- const { table } = useContext(TableContext);
18
- return (jsxs(Popover, { placement: "bottom-end", 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) => {
19
- return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
20
- }) }) })] })] }));
21
- };
22
-
23
- const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
24
- const { table } = useContext(TableContext);
25
- return (jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
26
- table.setPageSize(Number(e.target.value));
27
- }, children: pageSizes.map((pageSize) => (jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
28
- };
29
-
30
- const ResetFilteringButton = () => {
31
- const { table } = useContext(TableContext);
32
- return (jsx(Button, { onClick: () => {
33
- table.resetColumnFilters();
34
- }, children: "Reset Filtering" }));
35
- };
36
-
37
- const ResetSortingButton = () => {
38
- const { table } = useContext(TableContext);
39
- return (jsx(Button, { onClick: () => {
40
- table.resetSorting();
41
- }, children: "Reset Sorting" }));
42
- };
43
-
44
- const useDataTable = () => {
45
- const { table, refreshData } = useContext(TableContext);
46
- return { table, refreshData };
47
- };
48
-
49
- const Table = ({ children }) => {
50
- const { table } = useDataTable();
51
- return (jsx(Container, { maxW: "100%", overflowY: "scroll", children: jsx(Table$1, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
52
- };
53
-
54
- const TableBody = () => {
55
- const { table } = useContext(TableContext);
56
- return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => (jsx(Tr, { children: row.getVisibleCells().map((cell) => (jsx(Td, { width: `${cell.column.getSize()}px`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
57
- };
58
-
59
- const TableFilter = () => {
60
- const { table } = useDataTable();
61
- return (jsx(Fragment, { children: table.getLeafHeaders().map((header) => {
62
- return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: header.column.id }), jsx(Input, { value: header.column.getFilterValue()
63
- ? String(header.column.getFilterValue())
64
- : "", onChange: (e) => {
65
- header.column.setFilterValue(e.target.value);
66
- } })] })) }));
67
- }) }));
68
- };
69
-
70
- const TableFooter = () => {
71
- const table = useDataTable().table;
72
- return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsx(Tr$1, { children: footerGroup.headers.map((header) => (jsx(Th, { colSpan: header.colSpan, children: header.isPlaceholder
73
- ? null
74
- : flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
75
- };
76
-
77
- const TableHeader = ({ canResize }) => {
78
- const { table } = useDataTable();
79
- return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Tr$1, { style: { columnSpan: "all" }, children: headerGroup.headers.map((header) => {
80
- const resizeProps = {
81
- onClick: () => header.column.resetSize(),
82
- onMouseDown: header.getResizeHandler(),
83
- onTouchStart: header.getResizeHandler(),
84
- cursor: "col-resize",
85
- };
86
- return (jsx(Th, { padding: "0rem", colSpan: header.colSpan, width: `${header.getSize()}px`, children: jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsx(Box, { children: header.isPlaceholder
87
- ? null
88
- : flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (jsxs(Fragment, { children: [jsxs(Button, { onClick: (e) => {
89
- header.column.toggleSorting();
90
- }, children: [header.column.getNextSortingOrder() === false && (
91
- // <Text>To No sort</Text>
92
- jsx(ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
93
- // <Text>To asc</Text>
94
- jsx(UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
95
- // <Text>To desc</Text>
96
- jsx(ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsx(Button, { onClick: (e) => {
97
- header.column.clearSorting();
98
- }, children: jsx(CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsx(MdFilterListAlt, {}), canResize && (jsx(Box, { borderRight: header.column.getIsResizing()
99
- ? "0.25rem solid black"
100
- : "0.25rem solid grey", height: "5rem", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
101
- }) }, crypto.randomUUID()))) }));
102
- };
103
-
104
- const TablePagination = ({}) => {
105
- const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
106
- return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsx(Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", children: jsx(MdLastPage, {}) })] }));
107
- };
108
-
109
- const TextCell = ({ label, children }) => {
110
- return (jsx(Tooltip, { label: label, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
111
- };
112
-
113
- export { EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableFilter, TableFooter, TableHeader, TablePagination, TextCell };
package/dist/index.ts DELETED
@@ -1,125 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var reactTable = require('@tanstack/react-table');
6
- require('axios');
7
- var react$1 = require('@chakra-ui/react');
8
- var io = require('react-icons/io');
9
- var table = require('@chakra-ui/table');
10
- var md = require('react-icons/md');
11
- var icons = require('@chakra-ui/icons');
12
-
13
- const TableContext = react.createContext({
14
- table: {},
15
- refreshData: () => { },
16
- });
17
-
18
- const EditViewButton = () => {
19
- const { table } = react.useContext(TableContext);
20
- return (jsxRuntime.jsxs(react$1.Popover, { placement: "bottom-end", 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) => {
21
- 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()));
22
- }) }) })] })] }));
23
- };
24
-
25
- const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
26
- const { table } = react.useContext(TableContext);
27
- return (jsxRuntime.jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
28
- table.setPageSize(Number(e.target.value));
29
- }, children: pageSizes.map((pageSize) => (jsxRuntime.jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
30
- };
31
-
32
- const ResetFilteringButton = () => {
33
- const { table } = react.useContext(TableContext);
34
- return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
35
- table.resetColumnFilters();
36
- }, children: "Reset Filtering" }));
37
- };
38
-
39
- const ResetSortingButton = () => {
40
- const { table } = react.useContext(TableContext);
41
- return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
42
- table.resetSorting();
43
- }, children: "Reset Sorting" }));
44
- };
45
-
46
- const useDataTable = () => {
47
- const { table, refreshData } = react.useContext(TableContext);
48
- return { table, refreshData };
49
- };
50
-
51
- const Table = ({ children }) => {
52
- const { table } = useDataTable();
53
- return (jsxRuntime.jsx(react$1.Container, { maxW: "100%", overflowY: "scroll", children: jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
54
- };
55
-
56
- const TableBody = () => {
57
- const { table: table$1 } = react.useContext(TableContext);
58
- return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => (jsxRuntime.jsx(table.Tr, { children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.Td, { width: `${cell.column.getSize()}px`, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
59
- };
60
-
61
- const TableFilter = () => {
62
- const { table } = useDataTable();
63
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getLeafHeaders().map((header) => {
64
- 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()
65
- ? String(header.column.getFilterValue())
66
- : "", onChange: (e) => {
67
- header.column.setFilterValue(e.target.value);
68
- } })] })) }));
69
- }) }));
70
- };
71
-
72
- const TableFooter = () => {
73
- const table = useDataTable().table;
74
- return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(react$1.Tr, { children: footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { colSpan: header.colSpan, children: header.isPlaceholder
75
- ? null
76
- : reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
77
- };
78
-
79
- const TableHeader = ({ canResize }) => {
80
- const { table } = useDataTable();
81
- return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(react$1.Tr, { style: { columnSpan: "all" }, children: headerGroup.headers.map((header) => {
82
- const resizeProps = {
83
- onClick: () => header.column.resetSize(),
84
- onMouseDown: header.getResizeHandler(),
85
- onTouchStart: header.getResizeHandler(),
86
- cursor: "col-resize",
87
- };
88
- return (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan, width: `${header.getSize()}px`, children: jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react$1.Box, { children: header.isPlaceholder
89
- ? null
90
- : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react$1.Button, { onClick: (e) => {
91
- header.column.toggleSorting();
92
- }, children: [header.column.getNextSortingOrder() === false && (
93
- // <Text>To No sort</Text>
94
- jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
95
- // <Text>To asc</Text>
96
- jsxRuntime.jsx(icons.UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
97
- // <Text>To desc</Text>
98
- jsxRuntime.jsx(icons.ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.Button, { onClick: (e) => {
99
- header.column.clearSorting();
100
- }, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: header.column.getIsResizing()
101
- ? "0.25rem solid black"
102
- : "0.25rem solid grey", height: "5rem", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
103
- }) }, crypto.randomUUID()))) }));
104
- };
105
-
106
- const TablePagination = ({}) => {
107
- const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
108
- return (jsxRuntime.jsxs(react$1.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsxRuntime.jsx(react$1.Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
109
- };
110
-
111
- const TextCell = ({ label, children }) => {
112
- return (jsxRuntime.jsx(react$1.Tooltip, { label: label, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
113
- };
114
-
115
- exports.EditViewButton = EditViewButton;
116
- exports.PageSizeControl = PageSizeControl;
117
- exports.ResetFilteringButton = ResetFilteringButton;
118
- exports.ResetSortingButton = ResetSortingButton;
119
- exports.Table = Table;
120
- exports.TableBody = TableBody;
121
- exports.TableFilter = TableFilter;
122
- exports.TableFooter = TableFooter;
123
- exports.TableHeader = TableHeader;
124
- exports.TablePagination = TablePagination;
125
- exports.TextCell = TextCell;