@bsol-oss/react-datatable5 1.0.12 → 1.0.14
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.d.ts +4 -2
- package/dist/index.js +58 -18
- package/dist/index.mjs +58 -18
- package/dist/types/components/EditOrderButton.d.ts +1 -0
- package/dist/types/components/TableCards.d.ts +3 -1
- package/dist/types/components/TableOrderer.d.ts +1 -0
- package/dist/types/stories/DataTable.stories.d.ts +1 -0
- package/dist/types/stories/TablePinningShowcase.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -49,7 +49,9 @@ interface TableCardContainerProps {
|
|
|
49
49
|
}
|
|
50
50
|
declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
interface TableCardsProps {
|
|
53
|
+
}
|
|
54
|
+
declare const TableCards: ({}: TableCardsProps) => react_jsx_runtime.JSX.Element;
|
|
53
55
|
|
|
54
56
|
declare const TableFilter: () => react_jsx_runtime.JSX.Element;
|
|
55
57
|
|
|
@@ -90,4 +92,4 @@ interface TextCellProps {
|
|
|
90
92
|
}
|
|
91
93
|
declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
92
94
|
|
|
93
|
-
export { type DataResponse, DataTable, type DataTableProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
|
95
|
+
export { type DataResponse, DataTable, type DataTableProps, 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 };
|
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,25 +92,32 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
91
92
|
sorting,
|
|
92
93
|
columnFilters,
|
|
93
94
|
rowSelection,
|
|
95
|
+
columnOrder,
|
|
94
96
|
},
|
|
95
97
|
defaultColumn: {
|
|
96
|
-
size:
|
|
98
|
+
size: 100, //starting column size
|
|
97
99
|
minSize: 10, //enforced during column resizing
|
|
98
100
|
maxSize: 10000, //enforced during column resizing
|
|
99
101
|
},
|
|
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], }) => {
|
|
@@ -178,18 +186,26 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
178
186
|
|
|
179
187
|
const Table = ({ children }) => {
|
|
180
188
|
const { table } = useDataTable();
|
|
181
|
-
return (jsxRuntime.jsx(react$1.Container, { maxW: "100%",
|
|
189
|
+
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 }) }));
|
|
182
190
|
};
|
|
183
191
|
|
|
184
192
|
const TableBody = () => {
|
|
185
193
|
const { table: table$1 } = react.useContext(TableContext);
|
|
186
|
-
console.log(table$1.getSelectedRowModel().rows, "jfaisodij");
|
|
187
194
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
|
|
188
|
-
|
|
189
|
-
|
|
195
|
+
return (jsxRuntime.jsxs(table.Tr, { display: "flex", children: [jsxRuntime.jsx(table.Td
|
|
196
|
+
// styling resize and pinning start
|
|
197
|
+
, {
|
|
198
|
+
// styling resize and pinning start
|
|
199
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
190
200
|
disabled: !row.getCanSelect(),
|
|
191
201
|
// indeterminate: row.getIsSomeSelected(),
|
|
192
|
-
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) =>
|
|
202
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
203
|
+
return (jsxRuntime.jsx(table.Td, { padding: "0rem",
|
|
204
|
+
// styling resize and pinning start
|
|
205
|
+
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
206
|
+
? `${cell.column.getStart("left") + 32}px`
|
|
207
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" : "whitealpha.900", position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : -1, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
208
|
+
})] }, crypto.randomUUID()));
|
|
193
209
|
}) }));
|
|
194
210
|
};
|
|
195
211
|
|
|
@@ -197,28 +213,44 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
197
213
|
return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
198
214
|
};
|
|
199
215
|
|
|
200
|
-
const TableCards = () => {
|
|
216
|
+
const TableCards = ({}) => {
|
|
201
217
|
const { table } = react.useContext(TableContext);
|
|
202
218
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
203
219
|
return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.jsxs(react$1.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
204
220
|
disabled: !row.getCanSelect(),
|
|
205
221
|
// indeterminate: row.getIsSomeSelected(),
|
|
206
222
|
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
207
|
-
return (jsxRuntime.
|
|
223
|
+
return (jsxRuntime.jsx(react$1.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
|
|
208
224
|
})] }) }, crypto.randomUUID()));
|
|
209
225
|
}) }));
|
|
210
226
|
};
|
|
211
227
|
|
|
212
228
|
const TableFooter = () => {
|
|
213
229
|
const table = useDataTable().table;
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
230
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
231
|
+
return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
232
|
+
// styling resize and pinning start
|
|
233
|
+
, {
|
|
234
|
+
// styling resize and pinning start
|
|
235
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
236
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
237
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
238
|
+
// styling resize and pinning start
|
|
239
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
240
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
241
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : 0, children: header.isPlaceholder
|
|
242
|
+
? null
|
|
243
|
+
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
217
244
|
};
|
|
218
245
|
|
|
219
246
|
const TableHeader = ({ canResize }) => {
|
|
220
247
|
const { table } = useDataTable();
|
|
221
|
-
|
|
248
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
249
|
+
return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
250
|
+
// styling resize and pinning start
|
|
251
|
+
, {
|
|
252
|
+
// styling resize and pinning start
|
|
253
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
222
254
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
223
255
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
224
256
|
const resizeProps = {
|
|
@@ -227,9 +259,17 @@ const TableHeader = ({ canResize }) => {
|
|
|
227
259
|
onTouchStart: header.getResizeHandler(),
|
|
228
260
|
cursor: "col-resize",
|
|
229
261
|
};
|
|
230
|
-
return (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
262
|
+
return (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
263
|
+
// styling resize and pinning start
|
|
264
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
265
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
266
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : 0, children: jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", overflow: "scroll", children: [jsxRuntime.jsx(react$1.Box, { children: header.isPlaceholder
|
|
231
267
|
? null
|
|
232
|
-
: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }),
|
|
268
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
269
|
+
header.column.pin("left");
|
|
270
|
+
}, children: "<=" }), jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
271
|
+
header.column.pin(false);
|
|
272
|
+
}, children: "X" }), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react$1.Button, { onClick: (e) => {
|
|
233
273
|
header.column.toggleSorting();
|
|
234
274
|
}, children: [header.column.getNextSortingOrder() === false && (
|
|
235
275
|
// <Text>To No sort</Text>
|
|
@@ -241,7 +281,7 @@ const TableHeader = ({ canResize }) => {
|
|
|
241
281
|
header.column.clearSorting();
|
|
242
282
|
}, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: header.column.getIsResizing()
|
|
243
283
|
? "0.25rem solid black"
|
|
244
|
-
: "0.25rem solid grey", height: "
|
|
284
|
+
: "0.25rem solid grey", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
|
|
245
285
|
})] }, crypto.randomUUID()))) }));
|
|
246
286
|
};
|
|
247
287
|
|
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,25 +90,32 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
89
90
|
sorting,
|
|
90
91
|
columnFilters,
|
|
91
92
|
rowSelection,
|
|
93
|
+
columnOrder,
|
|
92
94
|
},
|
|
93
95
|
defaultColumn: {
|
|
94
|
-
size:
|
|
96
|
+
size: 100, //starting column size
|
|
95
97
|
minSize: 10, //enforced during column resizing
|
|
96
98
|
maxSize: 10000, //enforced during column resizing
|
|
97
99
|
},
|
|
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], }) => {
|
|
@@ -176,18 +184,26 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
176
184
|
|
|
177
185
|
const Table = ({ children }) => {
|
|
178
186
|
const { table } = useDataTable();
|
|
179
|
-
return (jsx(Container, { maxW: "100%",
|
|
187
|
+
return (jsx(Container, { padding: '0rem', maxW: "100%", overflowX: "scroll", children: jsx(Table$1, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
|
|
180
188
|
};
|
|
181
189
|
|
|
182
190
|
const TableBody = () => {
|
|
183
191
|
const { table } = useContext(TableContext);
|
|
184
|
-
console.log(table.getSelectedRowModel().rows, "jfaisodij");
|
|
185
192
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
|
|
186
|
-
|
|
187
|
-
|
|
193
|
+
return (jsxs(Tr, { display: "flex", children: [jsx(Td
|
|
194
|
+
// styling resize and pinning start
|
|
195
|
+
, {
|
|
196
|
+
// styling resize and pinning start
|
|
197
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
188
198
|
disabled: !row.getCanSelect(),
|
|
189
199
|
// indeterminate: row.getIsSomeSelected(),
|
|
190
|
-
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) =>
|
|
200
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
201
|
+
return (jsx(Td, { padding: "0rem",
|
|
202
|
+
// styling resize and pinning start
|
|
203
|
+
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
204
|
+
? `${cell.column.getStart("left") + 32}px`
|
|
205
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" : "whitealpha.900", position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : -1, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
206
|
+
})] }, crypto.randomUUID()));
|
|
191
207
|
}) }));
|
|
192
208
|
};
|
|
193
209
|
|
|
@@ -195,28 +211,44 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
195
211
|
return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
196
212
|
};
|
|
197
213
|
|
|
198
|
-
const TableCards = () => {
|
|
214
|
+
const TableCards = ({}) => {
|
|
199
215
|
const { table } = useContext(TableContext);
|
|
200
216
|
return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
201
217
|
return (jsx(Card, { children: jsxs(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
202
218
|
disabled: !row.getCanSelect(),
|
|
203
219
|
// indeterminate: row.getIsSomeSelected(),
|
|
204
220
|
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
205
|
-
return (
|
|
221
|
+
return (jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
|
|
206
222
|
})] }) }, crypto.randomUUID()));
|
|
207
223
|
}) }));
|
|
208
224
|
};
|
|
209
225
|
|
|
210
226
|
const TableFooter = () => {
|
|
211
227
|
const table = useDataTable().table;
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
228
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
229
|
+
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
230
|
+
// styling resize and pinning start
|
|
231
|
+
, {
|
|
232
|
+
// styling resize and pinning start
|
|
233
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
234
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
235
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
236
|
+
// styling resize and pinning start
|
|
237
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
238
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
239
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : 0, children: header.isPlaceholder
|
|
240
|
+
? null
|
|
241
|
+
: flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
215
242
|
};
|
|
216
243
|
|
|
217
244
|
const TableHeader = ({ canResize }) => {
|
|
218
245
|
const { table } = useDataTable();
|
|
219
|
-
|
|
246
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
247
|
+
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
248
|
+
// styling resize and pinning start
|
|
249
|
+
, {
|
|
250
|
+
// styling resize and pinning start
|
|
251
|
+
padding: "0.5rem", left: `0px`, backgroundColor: "gray.50", position: "sticky", zIndex: 1, children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
220
252
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
221
253
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
222
254
|
const resizeProps = {
|
|
@@ -225,9 +257,17 @@ const TableHeader = ({ canResize }) => {
|
|
|
225
257
|
onTouchStart: header.getResizeHandler(),
|
|
226
258
|
cursor: "col-resize",
|
|
227
259
|
};
|
|
228
|
-
return (jsx(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
260
|
+
return (jsx(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
261
|
+
// styling resize and pinning start
|
|
262
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
263
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
264
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : 0, children: jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", overflow: "scroll", children: [jsx(Box, { children: header.isPlaceholder
|
|
229
265
|
? null
|
|
230
|
-
: flexRender(header.column.columnDef.header, header.getContext()) }),
|
|
266
|
+
: flexRender(header.column.columnDef.header, header.getContext()) }), jsx(Button, { onClick: () => {
|
|
267
|
+
header.column.pin("left");
|
|
268
|
+
}, children: "<=" }), jsx(Button, { onClick: () => {
|
|
269
|
+
header.column.pin(false);
|
|
270
|
+
}, children: "X" }), header.column.getCanSort() && (jsxs(Fragment, { children: [jsxs(Button, { onClick: (e) => {
|
|
231
271
|
header.column.toggleSorting();
|
|
232
272
|
}, children: [header.column.getNextSortingOrder() === false && (
|
|
233
273
|
// <Text>To No sort</Text>
|
|
@@ -239,7 +279,7 @@ const TableHeader = ({ canResize }) => {
|
|
|
239
279
|
header.column.clearSorting();
|
|
240
280
|
}, children: jsx(CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsx(MdFilterListAlt, {}), canResize && (jsx(Box, { borderRight: header.column.getIsResizing()
|
|
241
281
|
? "0.25rem solid black"
|
|
242
|
-
: "0.25rem solid grey", height: "
|
|
282
|
+
: "0.25rem solid grey", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
|
|
243
283
|
})] }, crypto.randomUUID()))) }));
|
|
244
284
|
};
|
|
245
285
|
|
|
@@ -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;
|
|
@@ -8,6 +8,7 @@ declare const meta: {
|
|
|
8
8
|
export default meta;
|
|
9
9
|
type Story = StoryObj<typeof meta>;
|
|
10
10
|
export declare const TableView: Story;
|
|
11
|
+
export declare const TablePinningView: Story;
|
|
11
12
|
export declare const CardView: {
|
|
12
13
|
render: () => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
};
|