@bsol-oss/react-datatable5 1.0.12 → 1.0.13
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.
package/dist/index.js
CHANGED
|
@@ -52,6 +52,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
52
52
|
pageSize: 10, //default page size
|
|
53
53
|
});
|
|
54
54
|
const [rowSelection, setRowSelection] = react.useState({});
|
|
55
|
+
const [columnOrder, setColumnOrder] = react.useState([]);
|
|
55
56
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
56
57
|
url: url,
|
|
57
58
|
defaultData: {
|
|
@@ -91,6 +92,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
91
92
|
sorting,
|
|
92
93
|
columnFilters,
|
|
93
94
|
rowSelection,
|
|
95
|
+
columnOrder,
|
|
94
96
|
},
|
|
95
97
|
defaultColumn: {
|
|
96
98
|
size: 10, //starting column size
|
|
@@ -100,16 +102,22 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
100
102
|
enableRowSelection: enableRowSelection,
|
|
101
103
|
enableMultiRowSelection: enableMultiRowSelection,
|
|
102
104
|
enableSubRowSelection: enableSubRowSelection,
|
|
105
|
+
onColumnOrderChange: (state) => {
|
|
106
|
+
setColumnOrder(state);
|
|
107
|
+
},
|
|
103
108
|
});
|
|
104
109
|
react.useEffect(() => {
|
|
105
110
|
refreshData();
|
|
106
111
|
}, [pagination, sorting, columnFilters]);
|
|
112
|
+
react.useEffect(() => {
|
|
113
|
+
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
114
|
+
}, []);
|
|
107
115
|
return (jsxRuntime.jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
|
|
108
116
|
};
|
|
109
117
|
|
|
110
118
|
const EditViewButton = () => {
|
|
111
119
|
const { table } = react.useContext(TableContext);
|
|
112
|
-
return (jsxRuntime.jsxs(react$1.Popover, { placement: "
|
|
120
|
+
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) => {
|
|
113
121
|
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()));
|
|
114
122
|
}) }) })] })] }));
|
|
115
123
|
};
|
|
@@ -138,7 +146,7 @@ const TableFilter = () => {
|
|
|
138
146
|
};
|
|
139
147
|
|
|
140
148
|
const EditFilterButton = () => {
|
|
141
|
-
return (jsxRuntime.jsxs(react$1.Popover, { placement: "
|
|
149
|
+
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, {})] }) })] })] }));
|
|
142
150
|
};
|
|
143
151
|
|
|
144
152
|
const ResetSortingButton = () => {
|
|
@@ -166,7 +174,7 @@ const TableSorter = () => {
|
|
|
166
174
|
};
|
|
167
175
|
|
|
168
176
|
const EditSortingButton = () => {
|
|
169
|
-
return (jsxRuntime.jsxs(react$1.Popover, { placement: "
|
|
177
|
+
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, {})] }) })] })] }));
|
|
170
178
|
};
|
|
171
179
|
|
|
172
180
|
const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
@@ -211,9 +219,11 @@ const TableCards = () => {
|
|
|
211
219
|
|
|
212
220
|
const TableFooter = () => {
|
|
213
221
|
const table = useDataTable().table;
|
|
214
|
-
return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.
|
|
215
|
-
|
|
216
|
-
|
|
222
|
+
return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { children: [jsxRuntime.jsx(react$1.Th, { padding: "0.5rem", children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
223
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
224
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { colSpan: header.colSpan, children: header.isPlaceholder
|
|
225
|
+
? null
|
|
226
|
+
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
217
227
|
};
|
|
218
228
|
|
|
219
229
|
const TableHeader = ({ canResize }) => {
|
package/dist/index.mjs
CHANGED
|
@@ -50,6 +50,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
50
50
|
pageSize: 10, //default page size
|
|
51
51
|
});
|
|
52
52
|
const [rowSelection, setRowSelection] = useState({});
|
|
53
|
+
const [columnOrder, setColumnOrder] = useState([]);
|
|
53
54
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
54
55
|
url: url,
|
|
55
56
|
defaultData: {
|
|
@@ -89,6 +90,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
89
90
|
sorting,
|
|
90
91
|
columnFilters,
|
|
91
92
|
rowSelection,
|
|
93
|
+
columnOrder,
|
|
92
94
|
},
|
|
93
95
|
defaultColumn: {
|
|
94
96
|
size: 10, //starting column size
|
|
@@ -98,16 +100,22 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
98
100
|
enableRowSelection: enableRowSelection,
|
|
99
101
|
enableMultiRowSelection: enableMultiRowSelection,
|
|
100
102
|
enableSubRowSelection: enableSubRowSelection,
|
|
103
|
+
onColumnOrderChange: (state) => {
|
|
104
|
+
setColumnOrder(state);
|
|
105
|
+
},
|
|
101
106
|
});
|
|
102
107
|
useEffect(() => {
|
|
103
108
|
refreshData();
|
|
104
109
|
}, [pagination, sorting, columnFilters]);
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
112
|
+
}, []);
|
|
105
113
|
return (jsx(TableContext.Provider, { value: { table: { ...table }, refreshData: refreshData }, children: children }));
|
|
106
114
|
};
|
|
107
115
|
|
|
108
116
|
const EditViewButton = () => {
|
|
109
117
|
const { table } = useContext(TableContext);
|
|
110
|
-
return (jsxs(Popover, { placement: "
|
|
118
|
+
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) => {
|
|
111
119
|
return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
|
|
112
120
|
}) }) })] })] }));
|
|
113
121
|
};
|
|
@@ -136,7 +144,7 @@ const TableFilter = () => {
|
|
|
136
144
|
};
|
|
137
145
|
|
|
138
146
|
const EditFilterButton = () => {
|
|
139
|
-
return (jsxs(Popover, { placement: "
|
|
147
|
+
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, {})] }) })] })] }));
|
|
140
148
|
};
|
|
141
149
|
|
|
142
150
|
const ResetSortingButton = () => {
|
|
@@ -164,7 +172,7 @@ const TableSorter = () => {
|
|
|
164
172
|
};
|
|
165
173
|
|
|
166
174
|
const EditSortingButton = () => {
|
|
167
|
-
return (jsxs(Popover, { placement: "
|
|
175
|
+
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, {})] }) })] })] }));
|
|
168
176
|
};
|
|
169
177
|
|
|
170
178
|
const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
@@ -209,9 +217,11 @@ const TableCards = () => {
|
|
|
209
217
|
|
|
210
218
|
const TableFooter = () => {
|
|
211
219
|
const table = useDataTable().table;
|
|
212
|
-
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (
|
|
213
|
-
|
|
214
|
-
|
|
220
|
+
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { children: [jsx(Th, { padding: "0.5rem", children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
221
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
222
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { colSpan: header.colSpan, children: header.isPlaceholder
|
|
223
|
+
? null
|
|
224
|
+
: flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
215
225
|
};
|
|
216
226
|
|
|
217
227
|
const TableHeader = ({ canResize }) => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const EditOrderButton: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TableOrderer: () => import("react/jsx-runtime").JSX.Element;
|