@bsol-oss/react-datatable5 1.0.9 → 1.0.10
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 +12 -5
- package/dist/index.js +50 -30
- package/dist/index.mjs +50 -30
- package/dist/types/components/DataTable.d.ts +6 -3
- package/dist/types/components/ResetSelectionButton.d.ts +1 -0
- package/dist/types/components/SelectAllRowsToggle.d.ts +1 -0
- package/dist/types/components/TableSelector.d.ts +1 -0
- package/dist/types/components/TextCell.d.ts +6 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
5
5
|
import * as _tanstack_table_core from '@tanstack/table-core';
|
|
6
6
|
|
|
7
7
|
interface DataTableProps<T> {
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
url: string;
|
|
10
|
-
columns:
|
|
10
|
+
columns: ColumnDef<T, unknown>[];
|
|
11
|
+
enableRowSelection?: boolean;
|
|
12
|
+
enableMultiRowSelection?: boolean;
|
|
13
|
+
enableSubRowSelection?: boolean;
|
|
11
14
|
}
|
|
12
15
|
interface Result<T> {
|
|
13
16
|
results: T[];
|
|
@@ -17,7 +20,7 @@ interface DataResponse<T> extends Result<T> {
|
|
|
17
20
|
count: number;
|
|
18
21
|
filterCount: number;
|
|
19
22
|
}
|
|
20
|
-
declare const DataTable: <TData>({ columns, url, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare const DataTable: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
21
24
|
|
|
22
25
|
declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
|
|
23
26
|
|
|
@@ -81,6 +84,10 @@ interface PaginationProps {
|
|
|
81
84
|
}
|
|
82
85
|
declare const TablePagination: ({}: PaginationProps) => react_jsx_runtime.JSX.Element;
|
|
83
86
|
|
|
84
|
-
|
|
87
|
+
interface TextCellProps {
|
|
88
|
+
label?: string;
|
|
89
|
+
children: string | number | JSX.Element | JSX.Element[];
|
|
90
|
+
}
|
|
91
|
+
declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
85
92
|
|
|
86
|
-
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, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
|
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 };
|
package/dist/index.js
CHANGED
|
@@ -44,13 +44,14 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
|
|
|
44
44
|
return { data, loading, hasError, refreshData };
|
|
45
45
|
};
|
|
46
46
|
|
|
47
|
-
const DataTable = ({ columns, url, children, }) => {
|
|
47
|
+
const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
|
|
48
48
|
const [sorting, setSorting] = react.useState([]);
|
|
49
49
|
const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
|
|
50
50
|
const [pagination, setPagination] = react.useState({
|
|
51
51
|
pageIndex: 0, //initial page index
|
|
52
52
|
pageSize: 10, //default page size
|
|
53
53
|
});
|
|
54
|
+
const [rowSelection, setRowSelection] = react.useState({});
|
|
54
55
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
55
56
|
url: url,
|
|
56
57
|
defaultData: {
|
|
@@ -78,23 +79,27 @@ const DataTable = ({ columns, url, children, }) => {
|
|
|
78
79
|
data: data.results,
|
|
79
80
|
columns: columns,
|
|
80
81
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
81
|
-
// getPaginationRowModel: getPaginationRowModel(),
|
|
82
82
|
manualPagination: true,
|
|
83
83
|
manualSorting: true,
|
|
84
84
|
onPaginationChange: setPagination,
|
|
85
85
|
onSortingChange: setSorting,
|
|
86
86
|
onColumnFiltersChange: setColumnFilters,
|
|
87
87
|
columnResizeMode: "onChange",
|
|
88
|
+
onRowSelectionChange: setRowSelection,
|
|
88
89
|
state: {
|
|
89
90
|
pagination,
|
|
90
91
|
sorting,
|
|
91
92
|
columnFilters,
|
|
93
|
+
rowSelection,
|
|
92
94
|
},
|
|
93
95
|
defaultColumn: {
|
|
94
96
|
size: 10, //starting column size
|
|
95
97
|
minSize: 10, //enforced during column resizing
|
|
96
98
|
maxSize: 10000, //enforced during column resizing
|
|
97
99
|
},
|
|
100
|
+
enableRowSelection: enableRowSelection,
|
|
101
|
+
enableMultiRowSelection: enableMultiRowSelection,
|
|
102
|
+
enableSubRowSelection: enableSubRowSelection,
|
|
98
103
|
});
|
|
99
104
|
react.useEffect(() => {
|
|
100
105
|
refreshData();
|
|
@@ -178,7 +183,14 @@ const Table = ({ children }) => {
|
|
|
178
183
|
|
|
179
184
|
const TableBody = () => {
|
|
180
185
|
const { table: table$1 } = react.useContext(TableContext);
|
|
181
|
-
|
|
186
|
+
console.log(table$1.getSelectedRowModel().rows, "jfaisodij");
|
|
187
|
+
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
|
|
188
|
+
console.log(row.getIsSelected(), row, "lghrpl");
|
|
189
|
+
return (jsxRuntime.jsxs(table.Tr, { children: [jsxRuntime.jsx(table.Td, { padding: "0.5rem", children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
190
|
+
disabled: !row.getCanSelect(),
|
|
191
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
192
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.Td, { padding: "0.5rem", width: `${cell.column.getSize()}px`, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()));
|
|
193
|
+
}) }));
|
|
182
194
|
};
|
|
183
195
|
|
|
184
196
|
const TableCardContainer = ({ children, ...props }) => {
|
|
@@ -188,9 +200,12 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
188
200
|
const TableCards = () => {
|
|
189
201
|
const { table } = react.useContext(TableContext);
|
|
190
202
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
191
|
-
return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.
|
|
192
|
-
|
|
193
|
-
|
|
203
|
+
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
|
+
disabled: !row.getCanSelect(),
|
|
205
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
206
|
+
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
207
|
+
return (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: `${cell.column.id}: ` }), jsxRuntime.jsx(react$1.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })] }));
|
|
208
|
+
})] }) }, crypto.randomUUID()));
|
|
194
209
|
}) }));
|
|
195
210
|
};
|
|
196
211
|
|
|
@@ -203,29 +218,31 @@ const TableFooter = () => {
|
|
|
203
218
|
|
|
204
219
|
const TableHeader = ({ canResize }) => {
|
|
205
220
|
const { table } = useDataTable();
|
|
206
|
-
return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
221
|
+
return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { style: { columnSpan: "all" }, children: [jsxRuntime.jsx(react$1.Th, { padding: "0.5rem", children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
222
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
223
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
224
|
+
const resizeProps = {
|
|
225
|
+
onClick: () => header.column.resetSize(),
|
|
226
|
+
onMouseDown: header.getResizeHandler(),
|
|
227
|
+
onTouchStart: header.getResizeHandler(),
|
|
228
|
+
cursor: "col-resize",
|
|
229
|
+
};
|
|
230
|
+
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
|
|
231
|
+
? null
|
|
232
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react$1.Button, { onClick: (e) => {
|
|
233
|
+
header.column.toggleSorting();
|
|
234
|
+
}, children: [header.column.getNextSortingOrder() === false && (
|
|
235
|
+
// <Text>To No sort</Text>
|
|
236
|
+
jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
|
|
237
|
+
// <Text>To asc</Text>
|
|
238
|
+
jsxRuntime.jsx(icons.UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
|
|
239
|
+
// <Text>To desc</Text>
|
|
240
|
+
jsxRuntime.jsx(icons.ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.Button, { onClick: (e) => {
|
|
241
|
+
header.column.clearSorting();
|
|
242
|
+
}, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: header.column.getIsResizing()
|
|
243
|
+
? "0.25rem solid black"
|
|
244
|
+
: "0.25rem solid grey", height: "5rem", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
|
|
245
|
+
})] }, crypto.randomUUID()))) }));
|
|
229
246
|
};
|
|
230
247
|
|
|
231
248
|
const TablePagination = ({}) => {
|
|
@@ -234,7 +251,10 @@ const TablePagination = ({}) => {
|
|
|
234
251
|
};
|
|
235
252
|
|
|
236
253
|
const TextCell = ({ label, children }) => {
|
|
237
|
-
|
|
254
|
+
if (label) {
|
|
255
|
+
return (jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
|
|
256
|
+
}
|
|
257
|
+
return (jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
238
258
|
};
|
|
239
259
|
|
|
240
260
|
exports.DataTable = DataTable;
|
package/dist/index.mjs
CHANGED
|
@@ -42,13 +42,14 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
|
|
|
42
42
|
return { data, loading, hasError, refreshData };
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
const DataTable = ({ columns, url, children, }) => {
|
|
45
|
+
const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
|
|
46
46
|
const [sorting, setSorting] = useState([]);
|
|
47
47
|
const [columnFilters, setColumnFilters] = useState([]); // can set initial column filter state here
|
|
48
48
|
const [pagination, setPagination] = useState({
|
|
49
49
|
pageIndex: 0, //initial page index
|
|
50
50
|
pageSize: 10, //default page size
|
|
51
51
|
});
|
|
52
|
+
const [rowSelection, setRowSelection] = useState({});
|
|
52
53
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
53
54
|
url: url,
|
|
54
55
|
defaultData: {
|
|
@@ -76,23 +77,27 @@ const DataTable = ({ columns, url, children, }) => {
|
|
|
76
77
|
data: data.results,
|
|
77
78
|
columns: columns,
|
|
78
79
|
getCoreRowModel: getCoreRowModel(),
|
|
79
|
-
// getPaginationRowModel: getPaginationRowModel(),
|
|
80
80
|
manualPagination: true,
|
|
81
81
|
manualSorting: true,
|
|
82
82
|
onPaginationChange: setPagination,
|
|
83
83
|
onSortingChange: setSorting,
|
|
84
84
|
onColumnFiltersChange: setColumnFilters,
|
|
85
85
|
columnResizeMode: "onChange",
|
|
86
|
+
onRowSelectionChange: setRowSelection,
|
|
86
87
|
state: {
|
|
87
88
|
pagination,
|
|
88
89
|
sorting,
|
|
89
90
|
columnFilters,
|
|
91
|
+
rowSelection,
|
|
90
92
|
},
|
|
91
93
|
defaultColumn: {
|
|
92
94
|
size: 10, //starting column size
|
|
93
95
|
minSize: 10, //enforced during column resizing
|
|
94
96
|
maxSize: 10000, //enforced during column resizing
|
|
95
97
|
},
|
|
98
|
+
enableRowSelection: enableRowSelection,
|
|
99
|
+
enableMultiRowSelection: enableMultiRowSelection,
|
|
100
|
+
enableSubRowSelection: enableSubRowSelection,
|
|
96
101
|
});
|
|
97
102
|
useEffect(() => {
|
|
98
103
|
refreshData();
|
|
@@ -176,7 +181,14 @@ const Table = ({ children }) => {
|
|
|
176
181
|
|
|
177
182
|
const TableBody = () => {
|
|
178
183
|
const { table } = useContext(TableContext);
|
|
179
|
-
|
|
184
|
+
console.log(table.getSelectedRowModel().rows, "jfaisodij");
|
|
185
|
+
return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
|
|
186
|
+
console.log(row.getIsSelected(), row, "lghrpl");
|
|
187
|
+
return (jsxs(Tr, { children: [jsx(Td, { padding: "0.5rem", children: jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
188
|
+
disabled: !row.getCanSelect(),
|
|
189
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
190
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => (jsx(Td, { padding: "0.5rem", width: `${cell.column.getSize()}px`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()));
|
|
191
|
+
}) }));
|
|
180
192
|
};
|
|
181
193
|
|
|
182
194
|
const TableCardContainer = ({ children, ...props }) => {
|
|
@@ -186,9 +198,12 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
186
198
|
const TableCards = () => {
|
|
187
199
|
const { table } = useContext(TableContext);
|
|
188
200
|
return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
189
|
-
return (jsx(Card, { children:
|
|
190
|
-
|
|
191
|
-
|
|
201
|
+
return (jsx(Card, { children: jsxs(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
202
|
+
disabled: !row.getCanSelect(),
|
|
203
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
204
|
+
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
205
|
+
return (jsxs(Box, { children: [jsx(Text, { children: `${cell.column.id}: ` }), jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }));
|
|
206
|
+
})] }) }, crypto.randomUUID()));
|
|
192
207
|
}) }));
|
|
193
208
|
};
|
|
194
209
|
|
|
@@ -201,29 +216,31 @@ const TableFooter = () => {
|
|
|
201
216
|
|
|
202
217
|
const TableHeader = ({ canResize }) => {
|
|
203
218
|
const { table } = useDataTable();
|
|
204
|
-
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
219
|
+
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { style: { columnSpan: "all" }, children: [jsx(Th, { padding: "0.5rem", children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
220
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
|
221
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
222
|
+
const resizeProps = {
|
|
223
|
+
onClick: () => header.column.resetSize(),
|
|
224
|
+
onMouseDown: header.getResizeHandler(),
|
|
225
|
+
onTouchStart: header.getResizeHandler(),
|
|
226
|
+
cursor: "col-resize",
|
|
227
|
+
};
|
|
228
|
+
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
|
|
229
|
+
? null
|
|
230
|
+
: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (jsxs(Fragment, { children: [jsxs(Button, { onClick: (e) => {
|
|
231
|
+
header.column.toggleSorting();
|
|
232
|
+
}, children: [header.column.getNextSortingOrder() === false && (
|
|
233
|
+
// <Text>To No sort</Text>
|
|
234
|
+
jsx(ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
|
|
235
|
+
// <Text>To asc</Text>
|
|
236
|
+
jsx(UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
|
|
237
|
+
// <Text>To desc</Text>
|
|
238
|
+
jsx(ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsx(Button, { onClick: (e) => {
|
|
239
|
+
header.column.clearSorting();
|
|
240
|
+
}, children: jsx(CloseIcon, {}) }))] })), header.column.getIsFiltered() && jsx(MdFilterListAlt, {}), canResize && (jsx(Box, { borderRight: header.column.getIsResizing()
|
|
241
|
+
? "0.25rem solid black"
|
|
242
|
+
: "0.25rem solid grey", height: "5rem", width: "5px", userSelect: "none", style: { touchAction: "none" }, ...resizeProps }))] }) }, crypto.randomUUID()));
|
|
243
|
+
})] }, crypto.randomUUID()))) }));
|
|
227
244
|
};
|
|
228
245
|
|
|
229
246
|
const TablePagination = ({}) => {
|
|
@@ -232,7 +249,10 @@ const TablePagination = ({}) => {
|
|
|
232
249
|
};
|
|
233
250
|
|
|
234
251
|
const TextCell = ({ label, children }) => {
|
|
235
|
-
|
|
252
|
+
if (label) {
|
|
253
|
+
return (jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
|
|
254
|
+
}
|
|
255
|
+
return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
236
256
|
};
|
|
237
257
|
|
|
238
258
|
export { DataTable, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { ColumnDef } from "@tanstack/react-table";
|
|
3
3
|
export interface DataTableProps<T> {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
url: string;
|
|
6
|
-
columns:
|
|
6
|
+
columns: ColumnDef<T, unknown>[];
|
|
7
|
+
enableRowSelection?: boolean;
|
|
8
|
+
enableMultiRowSelection?: boolean;
|
|
9
|
+
enableSubRowSelection?: boolean;
|
|
7
10
|
}
|
|
8
11
|
export interface Result<T> {
|
|
9
12
|
results: T[];
|
|
@@ -13,4 +16,4 @@ export interface DataResponse<T> extends Result<T> {
|
|
|
13
16
|
count: number;
|
|
14
17
|
filterCount: number;
|
|
15
18
|
}
|
|
16
|
-
export declare const DataTable: <TData>({ columns, url, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const DataTable: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ResetSortingButton: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SelectAllRowsToggle: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TableSelector: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface TextCellProps {
|
|
3
|
+
label?: string;
|
|
4
|
+
children: string | number | JSX.Element | JSX.Element[];
|
|
5
|
+
}
|
|
6
|
+
export declare const TextCell: ({ label, children }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|