@bsol-oss/react-datatable5 1.0.51 → 1.0.53
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
CHANGED
|
@@ -88,7 +88,7 @@ interface DataResponse<T> extends Result<T> {
|
|
|
88
88
|
}
|
|
89
89
|
declare module "@tanstack/react-table" {
|
|
90
90
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
91
|
-
displayName
|
|
91
|
+
displayName?: string;
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
@@ -203,6 +203,12 @@ interface TableRendererProps<TData> {
|
|
|
203
203
|
}
|
|
204
204
|
declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
|
|
205
205
|
|
|
206
|
+
declare module "@tanstack/react-table" {
|
|
207
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
208
|
+
filterVariant?: "text" | "range" | "select";
|
|
209
|
+
filterOptions?: string[];
|
|
210
|
+
}
|
|
211
|
+
}
|
|
206
212
|
declare const TableFilter: () => react_jsx_runtime.JSX.Element;
|
|
207
213
|
|
|
208
214
|
declare const TableFilterTags: () => react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -271,7 +271,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
271
271
|
onGlobalFilterChange: (state) => {
|
|
272
272
|
setGlobalFilter(state);
|
|
273
273
|
},
|
|
274
|
-
rowCount: data.
|
|
274
|
+
rowCount: data.count,
|
|
275
275
|
// for tanstack-table ts bug start
|
|
276
276
|
filterFns: {
|
|
277
277
|
fuzzy: () => {
|
|
@@ -311,17 +311,43 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
|
311
311
|
}, children: text }));
|
|
312
312
|
};
|
|
313
313
|
|
|
314
|
+
function Filter({ column }) {
|
|
315
|
+
const { filterVariant } = column.columnDef.meta ?? {};
|
|
316
|
+
const displayName = column.columnDef.meta?.displayName ?? column.id;
|
|
317
|
+
const filterOptions = column.columnDef.meta?.filterOptions ?? [];
|
|
318
|
+
if (column.columns.length > 0) {
|
|
319
|
+
return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), column.columns.map((column) => {
|
|
320
|
+
return jsxRuntime.jsx(Filter, { column: column });
|
|
321
|
+
})] }));
|
|
322
|
+
}
|
|
323
|
+
if (filterVariant === "select") {
|
|
324
|
+
return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
|
|
325
|
+
column.setFilterValue(e.target.value);
|
|
326
|
+
}, children: filterOptions.map((option) => {
|
|
327
|
+
return jsxRuntime.jsx("option", { value: option, children: option });
|
|
328
|
+
}) })] }));
|
|
329
|
+
}
|
|
330
|
+
if (filterVariant === "range") {
|
|
331
|
+
const filterValue = column.getFilterValue() ?? [
|
|
332
|
+
undefined,
|
|
333
|
+
undefined,
|
|
334
|
+
];
|
|
335
|
+
console.log(column.getFilterValue(), "sgr");
|
|
336
|
+
const [min, max] = filterValue;
|
|
337
|
+
return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsxs(react$1.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
|
|
338
|
+
column.setFilterValue([Number(e.target.value), max]);
|
|
339
|
+
} }), jsxRuntime.jsx(react$1.Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
|
|
340
|
+
column.setFilterValue([min, Number(e.target.value)]);
|
|
341
|
+
} })] })] }));
|
|
342
|
+
}
|
|
343
|
+
return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
|
|
344
|
+
column.setFilterValue(e.target.value);
|
|
345
|
+
} })] }));
|
|
346
|
+
}
|
|
314
347
|
const TableFilter = () => {
|
|
315
348
|
const { table } = useDataTable();
|
|
316
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.
|
|
317
|
-
|
|
318
|
-
? header.column.id
|
|
319
|
-
: header.column.columnDef.meta.displayName;
|
|
320
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
|
|
321
|
-
? String(header.column.getFilterValue())
|
|
322
|
-
: "", onChange: (e) => {
|
|
323
|
-
header.column.setFilterValue(e.target.value);
|
|
324
|
-
} })] })) }));
|
|
349
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getAllColumns().map((column) => {
|
|
350
|
+
return jsxRuntime.jsx(Filter, { column: column });
|
|
325
351
|
}) }));
|
|
326
352
|
};
|
|
327
353
|
|
|
@@ -428,7 +454,7 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
428
454
|
}
|
|
429
455
|
: {}),
|
|
430
456
|
// styling resize and pinning end
|
|
431
|
-
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.
|
|
457
|
+
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: index + 1 })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
432
458
|
disabled: !row.getCanSelect(),
|
|
433
459
|
// indeterminate: row.getIsSomeSelected(),
|
|
434
460
|
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
@@ -436,12 +462,12 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
436
462
|
|
|
437
463
|
const TableFilterTags = () => {
|
|
438
464
|
const { table } = useDataTable();
|
|
439
|
-
return (jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow:
|
|
440
|
-
return (jsxRuntime.jsxs(react$1.Tag, { children: [`${id}: ${value}
|
|
465
|
+
return (jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }, index) => {
|
|
466
|
+
return (jsxRuntime.jsxs(react$1.Tag, { display: "flex", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Text, { children: `${id}: ${value}` }), jsxRuntime.jsx(react$1.IconButton, { size: "xs", variant: "ghost", icon: jsxRuntime.jsx(icons.CloseIcon, {}), onClick: () => {
|
|
441
467
|
table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
|
|
442
468
|
return curIndex != index;
|
|
443
469
|
}));
|
|
444
|
-
}, "aria-label": "" })] }));
|
|
470
|
+
}, "aria-label": "remove filter" })] }));
|
|
445
471
|
}) }));
|
|
446
472
|
};
|
|
447
473
|
|
|
@@ -477,7 +503,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
477
503
|
// styling resize and pinning end
|
|
478
504
|
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
479
505
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
480
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.
|
|
506
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
|
|
481
507
|
// styling resize and pinning start
|
|
482
508
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
483
509
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -524,7 +550,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
524
550
|
// styling resize and pinning end
|
|
525
551
|
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
526
552
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
527
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.
|
|
553
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), headerGroup.headers.map((header) => {
|
|
528
554
|
const resizeProps = {
|
|
529
555
|
onClick: () => header.column.resetSize(),
|
|
530
556
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -543,7 +569,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
543
569
|
// styling resize and pinning end
|
|
544
570
|
display: "grid", children: [jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
545
571
|
? null
|
|
546
|
-
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false &&
|
|
572
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && jsxRuntime.jsx(jsxRuntime.Fragment, {}), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) }), jsxRuntime.jsx(react$1.Box, { children: header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}) })] }) }), jsxRuntime.jsx(react$1.Portal, { children: jsxRuntime.jsxs(react$1.MenuList, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdPushPin, {}), onClick: () => {
|
|
547
573
|
header.column.pin("left");
|
|
548
574
|
}, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdCancel, {}), onClick: () => {
|
|
549
575
|
header.column.pin(false);
|
|
@@ -715,9 +741,9 @@ const TableSelector = () => {
|
|
|
715
741
|
|
|
716
742
|
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
|
|
717
743
|
if (label) {
|
|
718
|
-
return (jsxRuntime.jsx(react$1.
|
|
744
|
+
return (jsxRuntime.jsx(react$1.Flex, { alignItems: "center", height: "100%", padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
|
|
719
745
|
}
|
|
720
|
-
return (jsxRuntime.jsx(react$1.
|
|
746
|
+
return (jsxRuntime.jsx(react$1.Flex, { alignItems: "center", height: "100%", padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
|
|
721
747
|
};
|
|
722
748
|
|
|
723
749
|
exports.DataTable = DataTable;
|
package/dist/index.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, get
|
|
|
3
3
|
import { createContext, useState, useEffect, useContext } from 'react';
|
|
4
4
|
import { rankItem } from '@tanstack/match-sorter-utils';
|
|
5
5
|
import axios from 'axios';
|
|
6
|
-
import { Button,
|
|
6
|
+
import { Button, Flex, Text, Select, Input, useDisclosure, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Grid, Icon, Box, Switch, InputGroup, InputLeftElement, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, FormLabel, Checkbox, Tag, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Card, CardBody, Tooltip } from '@chakra-ui/react';
|
|
7
7
|
import { MdFilterAlt, MdSearch, MdFilterListAlt, MdPushPin, MdCancel, MdSort, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdOutlineViewColumn, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdOutlineChecklist, MdClear } from 'react-icons/md';
|
|
8
8
|
import { IoMdEye, IoMdClose, IoMdCheckbox } from 'react-icons/io';
|
|
9
9
|
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
|
@@ -269,7 +269,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
269
269
|
onGlobalFilterChange: (state) => {
|
|
270
270
|
setGlobalFilter(state);
|
|
271
271
|
},
|
|
272
|
-
rowCount: data.
|
|
272
|
+
rowCount: data.count,
|
|
273
273
|
// for tanstack-table ts bug start
|
|
274
274
|
filterFns: {
|
|
275
275
|
fuzzy: () => {
|
|
@@ -309,17 +309,43 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
|
309
309
|
}, children: text }));
|
|
310
310
|
};
|
|
311
311
|
|
|
312
|
+
function Filter({ column }) {
|
|
313
|
+
const { filterVariant } = column.columnDef.meta ?? {};
|
|
314
|
+
const displayName = column.columnDef.meta?.displayName ?? column.id;
|
|
315
|
+
const filterOptions = column.columnDef.meta?.filterOptions ?? [];
|
|
316
|
+
if (column.columns.length > 0) {
|
|
317
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), column.columns.map((column) => {
|
|
318
|
+
return jsx(Filter, { column: column });
|
|
319
|
+
})] }));
|
|
320
|
+
}
|
|
321
|
+
if (filterVariant === "select") {
|
|
322
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
|
|
323
|
+
column.setFilterValue(e.target.value);
|
|
324
|
+
}, children: filterOptions.map((option) => {
|
|
325
|
+
return jsx("option", { value: option, children: option });
|
|
326
|
+
}) })] }));
|
|
327
|
+
}
|
|
328
|
+
if (filterVariant === "range") {
|
|
329
|
+
const filterValue = column.getFilterValue() ?? [
|
|
330
|
+
undefined,
|
|
331
|
+
undefined,
|
|
332
|
+
];
|
|
333
|
+
console.log(column.getFilterValue(), "sgr");
|
|
334
|
+
const [min, max] = filterValue;
|
|
335
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
|
|
336
|
+
column.setFilterValue([Number(e.target.value), max]);
|
|
337
|
+
} }), jsx(Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
|
|
338
|
+
column.setFilterValue([min, Number(e.target.value)]);
|
|
339
|
+
} })] })] }));
|
|
340
|
+
}
|
|
341
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
|
|
342
|
+
column.setFilterValue(e.target.value);
|
|
343
|
+
} })] }));
|
|
344
|
+
}
|
|
312
345
|
const TableFilter = () => {
|
|
313
346
|
const { table } = useDataTable();
|
|
314
|
-
return (jsx(Fragment, { children: table.
|
|
315
|
-
|
|
316
|
-
? header.column.id
|
|
317
|
-
: header.column.columnDef.meta.displayName;
|
|
318
|
-
return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: displayName }), jsx(Input, { value: header.column.getFilterValue()
|
|
319
|
-
? String(header.column.getFilterValue())
|
|
320
|
-
: "", onChange: (e) => {
|
|
321
|
-
header.column.setFilterValue(e.target.value);
|
|
322
|
-
} })] })) }));
|
|
347
|
+
return (jsx(Fragment, { children: table.getAllColumns().map((column) => {
|
|
348
|
+
return jsx(Filter, { column: column });
|
|
323
349
|
}) }));
|
|
324
350
|
};
|
|
325
351
|
|
|
@@ -426,7 +452,7 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
426
452
|
}
|
|
427
453
|
: {}),
|
|
428
454
|
// styling resize and pinning end
|
|
429
|
-
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsx(
|
|
455
|
+
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: index + 1 })), isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
430
456
|
disabled: !row.getCanSelect(),
|
|
431
457
|
// indeterminate: row.getIsSomeSelected(),
|
|
432
458
|
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
@@ -434,12 +460,12 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
434
460
|
|
|
435
461
|
const TableFilterTags = () => {
|
|
436
462
|
const { table } = useDataTable();
|
|
437
|
-
return (jsx(Flex, { gap: "0.5rem", flexFlow:
|
|
438
|
-
return (jsxs(Tag, { children: [`${id}: ${value}
|
|
463
|
+
return (jsx(Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }, index) => {
|
|
464
|
+
return (jsxs(Tag, { display: "flex", gap: "0.5rem", alignItems: "center", children: [jsx(Text, { children: `${id}: ${value}` }), jsx(IconButton, { size: "xs", variant: "ghost", icon: jsx(CloseIcon, {}), onClick: () => {
|
|
439
465
|
table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
|
|
440
466
|
return curIndex != index;
|
|
441
467
|
}));
|
|
442
|
-
}, "aria-label": "" })] }));
|
|
468
|
+
}, "aria-label": "remove filter" })] }));
|
|
443
469
|
}) }));
|
|
444
470
|
};
|
|
445
471
|
|
|
@@ -475,7 +501,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
475
501
|
// styling resize and pinning end
|
|
476
502
|
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
477
503
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
478
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(
|
|
504
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
479
505
|
// styling resize and pinning start
|
|
480
506
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
481
507
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -522,7 +548,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
522
548
|
// styling resize and pinning end
|
|
523
549
|
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
524
550
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
525
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(
|
|
551
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), headerGroup.headers.map((header) => {
|
|
526
552
|
const resizeProps = {
|
|
527
553
|
onClick: () => header.column.resetSize(),
|
|
528
554
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -541,7 +567,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
541
567
|
// styling resize and pinning end
|
|
542
568
|
display: "grid", children: [jsxs(Menu, { children: [jsx(MenuButton, { as: Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
543
569
|
? null
|
|
544
|
-
: flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false &&
|
|
570
|
+
: flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) }), jsx(Box, { children: header.column.getIsFiltered() && jsx(MdFilterListAlt, {}) })] }) }), jsx(Portal, { children: jsxs(MenuList, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdPushPin, {}), onClick: () => {
|
|
545
571
|
header.column.pin("left");
|
|
546
572
|
}, children: "Pin Column" })), header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdCancel, {}), onClick: () => {
|
|
547
573
|
header.column.pin(false);
|
|
@@ -713,9 +739,9 @@ const TableSelector = () => {
|
|
|
713
739
|
|
|
714
740
|
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
|
|
715
741
|
if (label) {
|
|
716
|
-
return (jsx(
|
|
742
|
+
return (jsx(Flex, { alignItems: "center", height: "100%", padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
|
|
717
743
|
}
|
|
718
|
-
return (jsx(
|
|
744
|
+
return (jsx(Flex, { alignItems: "center", height: "100%", padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
|
|
719
745
|
};
|
|
720
746
|
|
|
721
747
|
export { DataTable, DataTableServer, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableFilter, TableFilterTags, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };
|
|
@@ -31,7 +31,7 @@ export interface DataResponse<T> extends Result<T> {
|
|
|
31
31
|
}
|
|
32
32
|
declare module "@tanstack/react-table" {
|
|
33
33
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
34
|
-
displayName
|
|
34
|
+
displayName?: string;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1,8 @@
|
|
|
1
|
+
import { RowData } from "@tanstack/react-table";
|
|
2
|
+
declare module "@tanstack/react-table" {
|
|
3
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
4
|
+
filterVariant?: "text" | "range" | "select";
|
|
5
|
+
filterOptions?: string[];
|
|
6
|
+
}
|
|
7
|
+
}
|
|
1
8
|
export declare const TableFilter: () => import("react/jsx-runtime").JSX.Element;
|