@akshar-technosoft/ui 1.3.1 → 1.3.3
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/README.md +0 -0
- package/dist/components/core/error.cjs +3 -0
- package/dist/components/core/error.cjs.map +1 -0
- package/dist/components/core/error.d.cts +5 -0
- package/dist/components/core/error.d.ts +5 -0
- package/dist/components/core/error.js +3 -0
- package/dist/components/core/error.js.map +1 -0
- package/dist/components/core/event-success.cjs +3 -0
- package/dist/components/core/event-success.cjs.map +1 -0
- package/dist/components/core/event-success.d.cts +5 -0
- package/dist/components/core/event-success.d.ts +5 -0
- package/dist/components/core/event-success.js +3 -0
- package/dist/components/core/event-success.js.map +1 -0
- package/dist/components/core/index.cjs +3 -0
- package/dist/components/core/index.cjs.map +1 -0
- package/dist/components/core/index.d.cts +7 -0
- package/dist/components/core/index.d.ts +7 -0
- package/dist/components/core/index.js +3 -0
- package/dist/components/core/index.js.map +1 -0
- package/dist/components/core/loader.cjs +3 -0
- package/dist/components/core/loader.cjs.map +1 -0
- package/dist/components/core/loader.d.cts +5 -0
- package/dist/components/core/loader.d.ts +5 -0
- package/dist/components/core/loader.js +3 -0
- package/dist/components/core/loader.js.map +1 -0
- package/dist/components/core/notfound.cjs +3 -0
- package/dist/components/core/notfound.cjs.map +1 -0
- package/dist/components/core/notfound.d.cts +5 -0
- package/dist/components/core/notfound.d.ts +5 -0
- package/dist/components/core/notfound.js +3 -0
- package/dist/components/core/notfound.js.map +1 -0
- package/dist/components/core/offline-content.cjs +3 -0
- package/dist/components/core/offline-content.cjs.map +1 -0
- package/dist/components/core/offline-content.d.cts +5 -0
- package/dist/components/core/offline-content.d.ts +5 -0
- package/dist/components/core/offline-content.js +3 -0
- package/dist/components/core/offline-content.js.map +1 -0
- package/dist/components/core/unauthorized.cjs +3 -0
- package/dist/components/core/unauthorized.cjs.map +1 -0
- package/dist/components/core/unauthorized.d.cts +5 -0
- package/dist/components/core/unauthorized.d.ts +5 -0
- package/dist/components/core/unauthorized.js +3 -0
- package/dist/components/core/unauthorized.js.map +1 -0
- package/dist/components/data/data-table/data-table-action-bar.cjs +3 -0
- package/dist/components/data/data-table/data-table-action-bar.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-action-bar.d.cts +26 -0
- package/dist/components/data/data-table/data-table-action-bar.d.ts +26 -0
- package/dist/components/data/data-table/data-table-action-bar.js +3 -0
- package/dist/components/data/data-table/data-table-action-bar.js.map +1 -0
- package/dist/components/data/data-table/data-table-aggregation.cjs +3 -0
- package/dist/components/data/data-table/data-table-aggregation.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-aggregation.d.cts +25 -0
- package/dist/components/data/data-table/data-table-aggregation.d.ts +25 -0
- package/dist/components/data/data-table/data-table-aggregation.js +3 -0
- package/dist/components/data/data-table/data-table-aggregation.js.map +1 -0
- package/dist/components/data/data-table/data-table-columns.cjs +3 -0
- package/dist/components/data/data-table/data-table-columns.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-columns.d.cts +20 -0
- package/dist/components/data/data-table/data-table-columns.d.ts +20 -0
- package/dist/components/data/data-table/data-table-columns.js +3 -0
- package/dist/components/data/data-table/data-table-columns.js.map +1 -0
- package/dist/components/data/data-table/data-table-export.cjs +3 -0
- package/dist/components/data/data-table/data-table-export.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-export.d.cts +38 -0
- package/dist/components/data/data-table/data-table-export.d.ts +38 -0
- package/dist/components/data/data-table/data-table-export.js +3 -0
- package/dist/components/data/data-table/data-table-export.js.map +1 -0
- package/dist/components/data/data-table/data-table-filtering.cjs +3 -0
- package/dist/components/data/data-table/data-table-filtering.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-filtering.d.cts +17 -0
- package/dist/components/data/data-table/data-table-filtering.d.ts +17 -0
- package/dist/components/data/data-table/data-table-filtering.js +3 -0
- package/dist/components/data/data-table/data-table-filtering.js.map +1 -0
- package/dist/components/data/data-table/data-table-footer.cjs +3 -0
- package/dist/components/data/data-table/data-table-footer.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-footer.d.cts +21 -0
- package/dist/components/data/data-table/data-table-footer.d.ts +21 -0
- package/dist/components/data/data-table/data-table-footer.js +3 -0
- package/dist/components/data/data-table/data-table-footer.js.map +1 -0
- package/dist/components/data/data-table/data-table-header.cjs +3 -0
- package/dist/components/data/data-table/data-table-header.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-header.d.cts +23 -0
- package/dist/components/data/data-table/data-table-header.d.ts +23 -0
- package/dist/components/data/data-table/data-table-header.js +3 -0
- package/dist/components/data/data-table/data-table-header.js.map +1 -0
- package/dist/components/data/data-table/data-table-pagination.cjs +3 -0
- package/dist/components/data/data-table/data-table-pagination.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-pagination.d.cts +14 -0
- package/dist/components/data/data-table/data-table-pagination.d.ts +14 -0
- package/dist/components/data/data-table/data-table-pagination.js +3 -0
- package/dist/components/data/data-table/data-table-pagination.js.map +1 -0
- package/dist/components/data/data-table/data-table-persist.cjs +3 -0
- package/dist/components/data/data-table/data-table-persist.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-persist.d.cts +103 -0
- package/dist/components/data/data-table/data-table-persist.d.ts +103 -0
- package/dist/components/data/data-table/data-table-persist.js +3 -0
- package/dist/components/data/data-table/data-table-persist.js.map +1 -0
- package/dist/components/data/data-table/data-table-pinning.cjs +3 -0
- package/dist/components/data/data-table/data-table-pinning.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-pinning.d.cts +39 -0
- package/dist/components/data/data-table/data-table-pinning.d.ts +39 -0
- package/dist/components/data/data-table/data-table-pinning.js +3 -0
- package/dist/components/data/data-table/data-table-pinning.js.map +1 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.cjs +3 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.d.cts +21 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.d.ts +21 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.js +3 -0
- package/dist/components/data/data-table/data-table-toolbar-menus.js.map +1 -0
- package/dist/components/data/data-table/data-table-toolbar.cjs +3 -0
- package/dist/components/data/data-table/data-table-toolbar.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-toolbar.d.cts +36 -0
- package/dist/components/data/data-table/data-table-toolbar.d.ts +36 -0
- package/dist/components/data/data-table/data-table-toolbar.js +3 -0
- package/dist/components/data/data-table/data-table-toolbar.js.map +1 -0
- package/dist/components/data/data-table/data-table-types.cjs +3 -0
- package/dist/components/data/data-table/data-table-types.cjs.map +1 -0
- package/dist/components/data/data-table/data-table-types.d.cts +536 -0
- package/dist/components/data/data-table/data-table-types.d.ts +536 -0
- package/dist/components/data/data-table/data-table-types.js +2 -0
- package/dist/components/data/data-table/data-table-types.js.map +1 -0
- package/dist/components/data/data-table/data-table.cjs +3 -0
- package/dist/components/data/data-table/data-table.cjs.map +1 -0
- package/dist/components/data/data-table/data-table.d.cts +10 -0
- package/dist/components/data/data-table/data-table.d.ts +10 -0
- package/dist/components/data/data-table/data-table.js +3 -0
- package/dist/components/data/data-table/data-table.js.map +1 -0
- package/dist/components/data/data-table/index.cjs +3 -0
- package/dist/components/data/data-table/index.cjs.map +1 -0
- package/dist/components/data/data-table/index.d.cts +16 -0
- package/dist/components/data/data-table/index.d.ts +16 -0
- package/dist/components/data/data-table/index.js +3 -0
- package/dist/components/data/data-table/index.js.map +1 -0
- package/dist/components/data/data-table/use-table-filter-param.cjs +3 -0
- package/dist/components/data/data-table/use-table-filter-param.cjs.map +1 -0
- package/dist/components/data/data-table/use-table-filter-param.d.cts +37 -0
- package/dist/components/data/data-table/use-table-filter-param.d.ts +37 -0
- package/dist/components/data/data-table/use-table-filter-param.js +3 -0
- package/dist/components/data/data-table/use-table-filter-param.js.map +1 -0
- package/dist/components/data/data-table/use-table-persist.cjs +3 -0
- package/dist/components/data/data-table/use-table-persist.cjs.map +1 -0
- package/dist/components/data/data-table/use-table-persist.d.cts +36 -0
- package/dist/components/data/data-table/use-table-persist.d.ts +36 -0
- package/dist/components/data/data-table/use-table-persist.js +3 -0
- package/dist/components/data/data-table/use-table-persist.js.map +1 -0
- package/dist/components/data/data-template/data-template-action-bar.cjs +3 -0
- package/dist/components/data/data-template/data-template-action-bar.cjs.map +1 -0
- package/dist/components/data/data-template/data-template-action-bar.d.cts +14 -0
- package/dist/components/data/data-template/data-template-action-bar.d.ts +14 -0
- package/dist/components/data/data-template/data-template-action-bar.js +3 -0
- package/dist/components/data/data-template/data-template-action-bar.js.map +1 -0
- package/dist/components/data/data-template/data-template-pagination.cjs +3 -0
- package/dist/components/data/data-template/data-template-pagination.cjs.map +1 -0
- package/dist/components/data/data-template/data-template-pagination.d.cts +17 -0
- package/dist/components/data/data-template/data-template-pagination.d.ts +17 -0
- package/dist/components/data/data-template/data-template-pagination.js +3 -0
- package/dist/components/data/data-template/data-template-pagination.js.map +1 -0
- package/dist/components/data/data-template/data-template-toolbar.cjs +3 -0
- package/dist/components/data/data-template/data-template-toolbar.cjs.map +1 -0
- package/dist/components/data/data-template/data-template-toolbar.d.cts +27 -0
- package/dist/components/data/data-template/data-template-toolbar.d.ts +27 -0
- package/dist/components/data/data-template/data-template-toolbar.js +3 -0
- package/dist/components/data/data-template/data-template-toolbar.js.map +1 -0
- package/dist/components/data/data-template/data-template-types.cjs +3 -0
- package/dist/components/data/data-template/data-template-types.cjs.map +1 -0
- package/dist/components/data/data-template/data-template-types.d.cts +105 -0
- package/dist/components/data/data-template/data-template-types.d.ts +105 -0
- package/dist/components/data/data-template/data-template-types.js +2 -0
- package/dist/components/data/data-template/data-template-types.js.map +1 -0
- package/dist/components/data/data-template/data-template.cjs +3 -0
- package/dist/components/data/data-template/data-template.cjs.map +1 -0
- package/dist/components/data/data-template/data-template.d.cts +8 -0
- package/dist/components/data/data-template/data-template.d.ts +8 -0
- package/dist/components/data/data-template/data-template.js +3 -0
- package/dist/components/data/data-template/data-template.js.map +1 -0
- package/dist/components/data/data-template/index.cjs +3 -0
- package/dist/components/data/data-template/index.cjs.map +1 -0
- package/dist/components/data/data-template/index.d.cts +8 -0
- package/dist/components/data/data-template/index.d.ts +8 -0
- package/dist/components/data/data-template/index.js +3 -0
- package/dist/components/data/data-template/index.js.map +1 -0
- package/dist/components/date-helper.cjs +0 -0
- package/dist/components/date-helper.cjs.map +0 -0
- package/dist/components/date-helper.d.cts +0 -0
- package/dist/components/date-helper.d.ts +0 -0
- package/dist/components/date-helper.js +0 -0
- package/dist/components/date-helper.js.map +0 -0
- package/dist/components/general.cjs +0 -0
- package/dist/components/general.cjs.map +0 -0
- package/dist/components/general.d.cts +0 -0
- package/dist/components/general.d.ts +0 -0
- package/dist/components/general.js +0 -0
- package/dist/components/general.js.map +0 -0
- package/dist/components/helper/date-filter.cjs +3 -0
- package/dist/components/helper/date-filter.cjs.map +1 -0
- package/dist/components/helper/date-filter.d.cts +19 -0
- package/dist/components/helper/date-filter.d.ts +19 -0
- package/dist/components/helper/date-filter.js +3 -0
- package/dist/components/helper/date-filter.js.map +1 -0
- package/dist/components/layouts/app-container.cjs +3 -0
- package/dist/components/layouts/app-container.cjs.map +1 -0
- package/dist/components/layouts/app-container.d.cts +11 -0
- package/dist/components/layouts/app-container.d.ts +11 -0
- package/dist/components/layouts/app-container.js +3 -0
- package/dist/components/layouts/app-container.js.map +1 -0
- package/dist/components/layouts/app-content.cjs +3 -0
- package/dist/components/layouts/app-content.cjs.map +1 -0
- package/dist/components/layouts/app-content.d.cts +53 -0
- package/dist/components/layouts/app-content.d.ts +53 -0
- package/dist/components/layouts/app-content.js +3 -0
- package/dist/components/layouts/app-content.js.map +1 -0
- package/dist/components/layouts/app-footer.cjs +3 -0
- package/dist/components/layouts/app-footer.cjs.map +1 -0
- package/dist/components/layouts/app-footer.d.cts +17 -0
- package/dist/components/layouts/app-footer.d.ts +17 -0
- package/dist/components/layouts/app-footer.js +3 -0
- package/dist/components/layouts/app-footer.js.map +1 -0
- package/dist/components/layouts/app-header.cjs +3 -0
- package/dist/components/layouts/app-header.cjs.map +1 -0
- package/dist/components/layouts/app-header.d.cts +32 -0
- package/dist/components/layouts/app-header.d.ts +32 -0
- package/dist/components/layouts/app-header.js +3 -0
- package/dist/components/layouts/app-header.js.map +1 -0
- package/dist/components/layouts/index.cjs +3 -0
- package/dist/components/layouts/index.cjs.map +1 -0
- package/dist/components/layouts/index.d.cts +7 -0
- package/dist/components/layouts/index.d.ts +7 -0
- package/dist/components/layouts/index.js +3 -0
- package/dist/components/layouts/index.js.map +1 -0
- package/dist/components/ui/badge.cjs +3 -0
- package/dist/components/ui/badge.cjs.map +1 -0
- package/dist/components/ui/badge.d.cts +13 -0
- package/dist/components/ui/badge.d.ts +13 -0
- package/dist/components/ui/badge.js +3 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/button.cjs +3 -0
- package/dist/components/ui/button.cjs.map +1 -0
- package/dist/components/ui/button.d.cts +14 -0
- package/dist/components/ui/button.d.ts +14 -0
- package/dist/components/ui/button.js +3 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/calendar.cjs +3 -0
- package/dist/components/ui/calendar.cjs.map +1 -0
- package/dist/components/ui/calendar.d.cts +13 -0
- package/dist/components/ui/calendar.d.ts +13 -0
- package/dist/components/ui/calendar.js +3 -0
- package/dist/components/ui/calendar.js.map +1 -0
- package/dist/components/ui/card.cjs +3 -0
- package/dist/components/ui/card.cjs.map +1 -0
- package/dist/components/ui/card.d.cts +12 -0
- package/dist/components/ui/card.d.ts +12 -0
- package/dist/components/ui/card.js +3 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/checkbox.cjs +3 -0
- package/dist/components/ui/checkbox.cjs.map +1 -0
- package/dist/components/ui/checkbox.d.cts +7 -0
- package/dist/components/ui/checkbox.d.ts +7 -0
- package/dist/components/ui/checkbox.js +3 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/command.cjs +3 -0
- package/dist/components/ui/command.cjs.map +1 -0
- package/dist/components/ui/command.d.cts +20 -0
- package/dist/components/ui/command.d.ts +20 -0
- package/dist/components/ui/command.js +3 -0
- package/dist/components/ui/command.js.map +1 -0
- package/dist/components/ui/dialog.cjs +3 -0
- package/dist/components/ui/dialog.cjs.map +1 -0
- package/dist/components/ui/dialog.d.cts +16 -0
- package/dist/components/ui/dialog.d.ts +16 -0
- package/dist/components/ui/dialog.js +3 -0
- package/dist/components/ui/dialog.js.map +1 -0
- package/dist/components/ui/dropdown-menu.cjs +3 -0
- package/dist/components/ui/dropdown-menu.cjs.map +1 -0
- package/dist/components/ui/dropdown-menu.d.cts +28 -0
- package/dist/components/ui/dropdown-menu.d.ts +28 -0
- package/dist/components/ui/dropdown-menu.js +3 -0
- package/dist/components/ui/dropdown-menu.js.map +1 -0
- package/dist/components/ui/input.cjs +3 -0
- package/dist/components/ui/input.cjs.map +1 -0
- package/dist/components/ui/input.d.cts +6 -0
- package/dist/components/ui/input.d.ts +6 -0
- package/dist/components/ui/input.js +3 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/popover.cjs +3 -0
- package/dist/components/ui/popover.cjs.map +1 -0
- package/dist/components/ui/popover.d.cts +10 -0
- package/dist/components/ui/popover.d.ts +10 -0
- package/dist/components/ui/popover.js +3 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/select.cjs +3 -0
- package/dist/components/ui/select.cjs.map +1 -0
- package/dist/components/ui/select.d.cts +18 -0
- package/dist/components/ui/select.d.ts +18 -0
- package/dist/components/ui/select.js +3 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/separator.cjs +3 -0
- package/dist/components/ui/separator.cjs.map +1 -0
- package/dist/components/ui/separator.d.cts +7 -0
- package/dist/components/ui/separator.d.ts +7 -0
- package/dist/components/ui/separator.js +3 -0
- package/dist/components/ui/separator.js.map +1 -0
- package/dist/components/ui/sheet.cjs +3 -0
- package/dist/components/ui/sheet.cjs.map +1 -0
- package/dist/components/ui/sheet.d.cts +18 -0
- package/dist/components/ui/sheet.d.ts +18 -0
- package/dist/components/ui/sheet.js +3 -0
- package/dist/components/ui/sheet.js.map +1 -0
- package/dist/components/ui/table.cjs +3 -0
- package/dist/components/ui/table.cjs.map +1 -0
- package/dist/components/ui/table.d.cts +13 -0
- package/dist/components/ui/table.d.ts +13 -0
- package/dist/components/ui/table.js +3 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/toggle.cjs +3 -0
- package/dist/components/ui/toggle.cjs.map +1 -0
- package/dist/components/ui/toggle.d.cts +16 -0
- package/dist/components/ui/toggle.d.ts +16 -0
- package/dist/components/ui/toggle.js +3 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/tooltip.cjs +3 -0
- package/dist/components/ui/tooltip.cjs.map +1 -0
- package/dist/components/ui/tooltip.d.cts +10 -0
- package/dist/components/ui/tooltip.d.ts +10 -0
- package/dist/components/ui/tooltip.js +3 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -920
- package/dist/index.d.ts +28 -920
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/utils.cjs +0 -0
- package/dist/lib/utils.cjs.map +0 -0
- package/dist/lib/utils.d.cts +0 -0
- package/dist/lib/utils.d.ts +0 -0
- package/dist/lib/utils.js +0 -0
- package/dist/lib/utils.js.map +0 -0
- package/package.json +92 -92
|
@@ -0,0 +1,536 @@
|
|
|
1
|
+
import { ColumnDef, Table, Row } from '@tanstack/react-table';
|
|
2
|
+
import { LucideIcon } from 'lucide-react';
|
|
3
|
+
import { PersistGroupId, PersistSlotFor, PersistConfig } from './data-table-persist.js';
|
|
4
|
+
import { TableExportView } from './data-table-export.js';
|
|
5
|
+
|
|
6
|
+
type Paths<T, Prefix extends string = ''> = T extends object ? {
|
|
7
|
+
[K in keyof T]: K extends string ? T[K] extends object ? Paths<T[K], `${Prefix}${K}.`> | `${Prefix}${K}` : `${Prefix}${K}` : never;
|
|
8
|
+
}[keyof T] : never;
|
|
9
|
+
type NumericKeys<T> = {
|
|
10
|
+
[K in keyof T]: T[K] extends number ? K : never;
|
|
11
|
+
}[keyof T];
|
|
12
|
+
type AggregationConfigMap<TData> = {
|
|
13
|
+
[K in NumericKeys<TData>]?: AggregationConfig<TData>;
|
|
14
|
+
} & {
|
|
15
|
+
[key: string]: AggregationConfig<TData> | undefined;
|
|
16
|
+
};
|
|
17
|
+
type AggregationFunction = 'sum' | 'average' | 'min' | 'max' | 'count' | 'unique' | 'median';
|
|
18
|
+
type AggregationConfig<TData> = {
|
|
19
|
+
enabled: boolean;
|
|
20
|
+
functions?: AggregationFunction[];
|
|
21
|
+
format?: (value: any, func: AggregationFunction) => string;
|
|
22
|
+
accessor?: (row: TData) => number | null;
|
|
23
|
+
};
|
|
24
|
+
/** Fields shared by every filter control, independent of how it locates its value. `G` narrows
|
|
25
|
+
* `shared` to one persist group's own slots — see `DataTableProps`'s `G` type param for how a
|
|
26
|
+
* real value gets pinned instead of the default (every group's slots, undiscriminated). */
|
|
27
|
+
type FilterControlConfig<G extends PersistGroupId | undefined = undefined> = {
|
|
28
|
+
/** Input placeholder and the filter's display label (also used on chips and the grouped picker). */
|
|
29
|
+
placeholder: string;
|
|
30
|
+
/**
|
|
31
|
+
* Which control to render and how the value is entered. Set it to match the field's shape so the
|
|
32
|
+
* user gets the right input:
|
|
33
|
+
* `'text'` (the default) is a free text box, matched as a case insensitive contains.
|
|
34
|
+
* `'select'` is a dropdown of fixed choices; it requires `options`, and the picked value is
|
|
35
|
+
* matched as given (use it for status, yes/no, category style fields).
|
|
36
|
+
* `'date'` is a single date picker; `'daterange'` is a from/to range picker. Both accept `dateFormat`.
|
|
37
|
+
* `'number'` is a numeric input.
|
|
38
|
+
* @default "text"
|
|
39
|
+
*/
|
|
40
|
+
type?: "text" | "select" | "date" | "daterange" | "number";
|
|
41
|
+
/** Choices for `type: "select"`. Each `value` is what the filter matches; `label` is what the
|
|
42
|
+
* user sees. Required when `type` is `"select"`; ignored otherwise. */
|
|
43
|
+
options?: {
|
|
44
|
+
label: string;
|
|
45
|
+
value: string;
|
|
46
|
+
}[];
|
|
47
|
+
/** Tailwind width class for the control wrapper (e.g. `"max-w-[150px]"`). */
|
|
48
|
+
width?: string;
|
|
49
|
+
/** Leading icon inside the control. */
|
|
50
|
+
icon?: LucideIcon;
|
|
51
|
+
/**
|
|
52
|
+
* Run this filter on the server instead of the local data. When set, the filter's value is NOT
|
|
53
|
+
* applied to the in-memory rows; instead it is collected and handed to `onExternalSearch(values)`
|
|
54
|
+
* so the parent can re-query the API. The call fires automatically at the control's natural commit
|
|
55
|
+
* point: a `select` on pick, a `date`/`daterange` on Apply, and a `text` box after a short debounce.
|
|
56
|
+
*/
|
|
57
|
+
externalSearch?: boolean;
|
|
58
|
+
/** date-fns format string for displaying the selected date(s), e.g. "dd MMM yyyy". */
|
|
59
|
+
dateFormat?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Where this filter's control is placed inside the toolbar. Both variants require
|
|
62
|
+
* `settings.showToolbar: true`, because every filter lives in the toolbar; with the toolbar off no
|
|
63
|
+
* filter renders at all, whatever its placement.
|
|
64
|
+
*
|
|
65
|
+
* `'bar'` (the default) sits inline on the toolbar's left row and is always visible. Use it for the
|
|
66
|
+
* few primary filters you combine constantly (for example product and category), so they stay side
|
|
67
|
+
* by side.
|
|
68
|
+
*
|
|
69
|
+
* `'menu'` keeps the control off the bar: it becomes an option in the global search's field
|
|
70
|
+
* picker (which appears automatically when `enableGlobalFilter` is on and any `'menu'` filter
|
|
71
|
+
* exists), and while it holds a value it shows as a removable chip on the bar. Use it so many
|
|
72
|
+
* filters don't fill the toolbar with boxes.
|
|
73
|
+
*
|
|
74
|
+
* @default 'bar'
|
|
75
|
+
*/
|
|
76
|
+
placement?: "bar" | "menu";
|
|
77
|
+
/**
|
|
78
|
+
* Share this filter's VALUE across every page whose table has the same `persist.group`, under
|
|
79
|
+
* this slot name (e.g. `shared: "party"` — search a party on one page, the next page in the
|
|
80
|
+
* group opens already filtered to it). The slot stores only the value, so pages can bind it to
|
|
81
|
+
* different filter keys, or even to an `externalSearch` filter. Requires `persist.group`.
|
|
82
|
+
*/
|
|
83
|
+
shared?: PersistSlotFor<G>;
|
|
84
|
+
/**
|
|
85
|
+
* Set false to exclude this one filter from persistence (scan boxes, one-shot searches) while
|
|
86
|
+
* the rest of the table persists. Inert without the table-level `persist` prop. @default true
|
|
87
|
+
*/
|
|
88
|
+
persist?: boolean;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* A filter bound to a real data field by its path. Use this form (the common one) whenever the value
|
|
92
|
+
* you filter on is a plain field on the row, flat or nested.
|
|
93
|
+
*
|
|
94
|
+
* `key` is a dot path into the row, validated against `T`, and doubles as the filter's identity. How
|
|
95
|
+
* it filters depends on whether a column already owns that path:
|
|
96
|
+
* If a visible column has the same `accessorKey`, the filter drives that column with TanStack's
|
|
97
|
+
* built in case insensitive contains match. This is the normal, zero setup case.
|
|
98
|
+
* If no column owns the path (the field is only shown inside another cell, for example a "SKU and
|
|
99
|
+
* Category" cell that prints three fields), the table auto generates a hidden, filter only column
|
|
100
|
+
* for it so the same contains match still works. You do not touch the `columns` array.
|
|
101
|
+
*
|
|
102
|
+
* Reach for {@link CustomFilterConfig} instead only when the match is not a plain contains on one
|
|
103
|
+
* field, for example matching inside an array of objects or across several fields at once.
|
|
104
|
+
*/
|
|
105
|
+
type PathFilterConfig<T, G extends PersistGroupId | undefined = undefined> = FilterControlConfig<G> & {
|
|
106
|
+
/** Dot path into the row (validated against `T`). Serves as both the value source and the id. */
|
|
107
|
+
key: Paths<T>;
|
|
108
|
+
id?: never;
|
|
109
|
+
filterFn?: never;
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* A filter that owns its matching logic. Use this form when the value is not a plain field, for
|
|
113
|
+
* example a cell holding an array of objects, or when one control should match across several fields.
|
|
114
|
+
*
|
|
115
|
+
* You provide `filterFn(row, value)`, which receives the whole row (so it can read any field or
|
|
116
|
+
* array) and returns whether the row passes. The table wires it to an auto generated hidden, filter
|
|
117
|
+
* only column, so it runs inside TanStack's normal filtering and AND combines with every other
|
|
118
|
+
* filter; you never touch the `columns` array. `id` is any unique string that identifies this filter
|
|
119
|
+
* (it does not need to be a real field, because `filterFn` reads the row itself).
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* // Match if ANY lot in the row's array has a matching number, and (separately) if any is urgent.
|
|
123
|
+
* const filters = [
|
|
124
|
+
* { id: "lotNo", type: "text", placeholder: "Lot No",
|
|
125
|
+
* filterFn: (row, v) => row.lots.some(l => String(l.lotNo).toLowerCase().includes(String(v).toLowerCase())) },
|
|
126
|
+
* { id: "urgentOnly", type: "select", placeholder: "Urgent", options: [{ label: "Urgent", value: "1" }],
|
|
127
|
+
* filterFn: (row, v) => !v || row.lots.some(l => l.isUrgent) },
|
|
128
|
+
* ];
|
|
129
|
+
*/
|
|
130
|
+
type CustomFilterConfig<T, G extends PersistGroupId | undefined = undefined> = FilterControlConfig<G> & {
|
|
131
|
+
/** Any unique string identifying this filter. Not required to be a real field, since `filterFn`
|
|
132
|
+
* reads the row directly. */
|
|
133
|
+
id: string;
|
|
134
|
+
/** Predicate deciding whether a row passes. Receives the full row and the current filter value. */
|
|
135
|
+
filterFn: (row: T, value: any) => boolean;
|
|
136
|
+
key?: never;
|
|
137
|
+
};
|
|
138
|
+
/**
|
|
139
|
+
* One toolbar filter control. Pick the form by how the value is located:
|
|
140
|
+
* {@link PathFilterConfig} — pass `key` (a real dot path). The common case: flat or nested fields.
|
|
141
|
+
* {@link CustomFilterConfig} — pass `id` + `filterFn`. For arrays of objects or multi field matches.
|
|
142
|
+
* Either way the filtering runs through TanStack's model and AND combines; you never edit `columns`.
|
|
143
|
+
*
|
|
144
|
+
* `G` — the table's persist group, for narrowing `shared`'s autocomplete to that one group's
|
|
145
|
+
* slots. Left to its default almost everywhere; see `DataTableProps` for where it's actually set.
|
|
146
|
+
*/
|
|
147
|
+
type FilterConfig<T, G extends PersistGroupId | undefined = undefined> = PathFilterConfig<T, G> | CustomFilterConfig<T, G>;
|
|
148
|
+
type PaginationConfig = {
|
|
149
|
+
/** Rows per page initially. @default 10 */
|
|
150
|
+
pageSize?: number;
|
|
151
|
+
/** Options in the "Rows" selector. `-1` renders "All". Pass `[]` to hide the selector.
|
|
152
|
+
* @default [10, 25, 50, 100, -1] */
|
|
153
|
+
pageSizeOptions?: number[];
|
|
154
|
+
/** Show the "Showing X to Y of Z" range text. @default true */
|
|
155
|
+
showInfo?: boolean;
|
|
156
|
+
/** Show numbered page buttons (with ellipsis window); otherwise just prev/next. @default false */
|
|
157
|
+
showPageNumbers?: boolean;
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* Feature and presentation toggles for the table. Every field is optional and its default is noted.
|
|
161
|
+
* Many flags are inert unless a "master" flag is also on, and that coupling is the usual reason a
|
|
162
|
+
* setting appears to do nothing. The master relationships:
|
|
163
|
+
*
|
|
164
|
+
* `showToolbar` owns everything drawn in the toolbar row (global search, the whole `filters` UI, the
|
|
165
|
+
* Columns menu, the Aggregations menu, Export, Refresh, the bulk pin actions). The per column sort
|
|
166
|
+
* and pin menus are drawn in the header instead, so they keep working when `showToolbar` is off.
|
|
167
|
+
*
|
|
168
|
+
* `enableFiltering` owns the filter engine. `enableGlobalFilter` can still render its box but will
|
|
169
|
+
* not remove any rows while `enableFiltering` is off.
|
|
170
|
+
*
|
|
171
|
+
* `enableRowSelection` owns the select column. `selectionMode`, `showCheckbox`,
|
|
172
|
+
* `enableHeaderCheckbox` and `fixedCheckboxColumn` are all inert without it.
|
|
173
|
+
*
|
|
174
|
+
* `enableColumnPinning` owns pinning, which `fixedCheckboxColumn` depends on.
|
|
175
|
+
*
|
|
176
|
+
* The global search's field picker appears automatically when `enableGlobalFilter` is on and
|
|
177
|
+
* any filter has `placement: 'menu'` — there is no separate flag for it.
|
|
178
|
+
*/
|
|
179
|
+
type TableSettings = {
|
|
180
|
+
/**
|
|
181
|
+
* Render the column header row. Turning it off also removes sorting, the pin menu and resize
|
|
182
|
+
* handles (they live in the header) even when their flags are on. Suited to compact read-only
|
|
183
|
+
* lists.
|
|
184
|
+
* @default true
|
|
185
|
+
*/
|
|
186
|
+
showHeader?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Allow sorting. Clicking a sortable header cycles asc → desc → clear, and each header cell's "⋯"
|
|
189
|
+
* menu offers the same actions explicitly; an arrow at the header's right edge shows the active
|
|
190
|
+
* direction. Clicks on interactive elements inside custom JSX headers do not sort. The serial
|
|
191
|
+
* "No." column sorts on its display index, so sorting it is rarely meaningful.
|
|
192
|
+
* @default true
|
|
193
|
+
*/
|
|
194
|
+
enableSorting?: boolean;
|
|
195
|
+
/**
|
|
196
|
+
* Render the toolbar row above the table. This is the largest master switch: with it off you lose
|
|
197
|
+
* the global search, the entire `filters` UI (both bar filters and the "Filters" menu), the Columns
|
|
198
|
+
* menu, the Aggregations menu, Export, Refresh and the bulk pin actions, because all of them are
|
|
199
|
+
* hosted here. The header's own per column menus are unaffected. Enable it for data heavy screens; leave it off for display-only tables.
|
|
200
|
+
* @default false
|
|
201
|
+
*/
|
|
202
|
+
showToolbar?: boolean;
|
|
203
|
+
/**
|
|
204
|
+
* Placement of the toolbar relative to the card. `'default'` renders it outside and above the card.
|
|
205
|
+
* `'above-header'` and `'below-header'` render it inside the card as a sticky band that stacks with
|
|
206
|
+
* the optional `header` prop; the component measures these bands at runtime to compute the header's
|
|
207
|
+
* sticky offset. Only relevant while `toolbar` is on.
|
|
208
|
+
* @default 'default'
|
|
209
|
+
*/
|
|
210
|
+
toolbarPosition?: 'above-header' | 'below-header' | 'default';
|
|
211
|
+
/**
|
|
212
|
+
* Install the filter row model. This is the engine both column filters and the global search run
|
|
213
|
+
* on, so it is the real on and off for filtering: with it off a search box can render but no rows
|
|
214
|
+
* are removed. Aggregations compute over the filtered rows, so they see the full data set when this
|
|
215
|
+
* is off.
|
|
216
|
+
* @default true
|
|
217
|
+
*/
|
|
218
|
+
enableFiltering?: boolean;
|
|
219
|
+
/**
|
|
220
|
+
* Show the global search box. It matches a row's accessor columns only, with a case insensitive
|
|
221
|
+
* contains test, so a column rendered purely through `cell` with no `accessorKey` or `accessorFn`
|
|
222
|
+
* is invisible to it; give such a column an `accessorFn` to make it searchable. Needs `showToolbar` to
|
|
223
|
+
* appear and `enableFiltering` to actually narrow rows.
|
|
224
|
+
* @default true
|
|
225
|
+
*/
|
|
226
|
+
enableGlobalFilter?: boolean;
|
|
227
|
+
/**
|
|
228
|
+
* Show the "Columns" menu that toggles column visibility. Columns marked `enableHiding: false` (the
|
|
229
|
+
* serial and select helpers) never appear in it, and grouped columns are listed under their group
|
|
230
|
+
* heading. It is part of the toolbar, so it needs `showToolbar` to be visible.
|
|
231
|
+
* @default true
|
|
232
|
+
*/
|
|
233
|
+
enableColumnVisibility?: boolean;
|
|
234
|
+
/**
|
|
235
|
+
* Add the leading selection column and turn on row selection. Selection is enforced at the table
|
|
236
|
+
* level against `isRowSelectable`, so those rows cannot be caught even by select all, and
|
|
237
|
+
* `onRowSelectionChange` reports only genuinely selectable rows. Master for the whole
|
|
238
|
+
* selection group below.
|
|
239
|
+
* @default true
|
|
240
|
+
*/
|
|
241
|
+
enableRowSelection?: boolean;
|
|
242
|
+
/**
|
|
243
|
+
* Allow the user to drag column widths. Resizing runs live and the handles sit on the right edge of
|
|
244
|
+
* each header cell, so `showHeader: false` removes the ability to resize. A pinned column is locked
|
|
245
|
+
* to its size, so if you also pin, resize the column first and pin afterwards.
|
|
246
|
+
* @default false
|
|
247
|
+
*/
|
|
248
|
+
enableColumnResizing?: boolean;
|
|
249
|
+
/**
|
|
250
|
+
* Master switch for sticky pinned columns. The serial and select columns are always pinned left and
|
|
251
|
+
* re-pinned on every change so they cannot drift. Users pin one column from the header's "⋯" menu
|
|
252
|
+
* (works without the toolbar) or in bulk from the toolbar's settings menu. A pinned column is
|
|
253
|
+
* clamped to its rendered width so its content cannot push it wider and break the sticky offsets.
|
|
254
|
+
* @default true
|
|
255
|
+
*/
|
|
256
|
+
enableColumnPinning?: boolean;
|
|
257
|
+
/**
|
|
258
|
+
* The header's select-all checkbox. Set false to grey it out while keeping per-row checkboxes
|
|
259
|
+
* usable (select-all too costly/dangerous, manual multi-select still wanted). Only meaningful
|
|
260
|
+
* in `'multiple'` mode.
|
|
261
|
+
* @default true
|
|
262
|
+
*/
|
|
263
|
+
enableHeaderCheckbox?: boolean;
|
|
264
|
+
/**
|
|
265
|
+
* Lock the select column in place by hiding its pin menu so users cannot move or unpin it. Needs
|
|
266
|
+
* `enableRowSelection` and `enableColumnPinning`.
|
|
267
|
+
* @remarks Half wired today: `onColumnPinningChange` re-pins the select column to the left on every
|
|
268
|
+
* change regardless of this flag, so setting it `false` only exposes a pin menu whose Unpin has no
|
|
269
|
+
* effect.
|
|
270
|
+
* @default true
|
|
271
|
+
*/
|
|
272
|
+
fixedCheckboxColumn?: boolean;
|
|
273
|
+
/**
|
|
274
|
+
* Show the leading "No." column. It prints the row's position in the current view (`index + 1`), so
|
|
275
|
+
* it renumbers as you sort, filter or page and is not a stable record id. When any aggregation is
|
|
276
|
+
* enabled its footer cell shows the total row count.
|
|
277
|
+
* @default true
|
|
278
|
+
*/
|
|
279
|
+
showSerialNumbers?: boolean;
|
|
280
|
+
/**
|
|
281
|
+
* Zebra stripe alternate rows for readability. The stripe follows a row's position on the current
|
|
282
|
+
* page, so the pattern stays consistent as you page through the data.
|
|
283
|
+
* @default true
|
|
284
|
+
*/
|
|
285
|
+
striped?: boolean;
|
|
286
|
+
/**
|
|
287
|
+
* Highlight the row under the cursor. Selected rows keep a stronger background of their own, so the
|
|
288
|
+
* hover and selected states stay distinguishable.
|
|
289
|
+
* @default true
|
|
290
|
+
*/
|
|
291
|
+
hoverable?: boolean;
|
|
292
|
+
/**
|
|
293
|
+
* Compact density. Tightens the vertical padding across header, body and footer cells so more rows
|
|
294
|
+
* fit on screen. Turn it off for a roomier, more touch friendly layout.
|
|
295
|
+
* @default true
|
|
296
|
+
*/
|
|
297
|
+
compact?: boolean;
|
|
298
|
+
/**
|
|
299
|
+
* Draw cell separators. Interior columns get a right border, while the last column and the last
|
|
300
|
+
* unpinned column before a right pinned group intentionally drop theirs, so the border never doubles
|
|
301
|
+
* against a pinned column's sticky separator.
|
|
302
|
+
* @default true
|
|
303
|
+
*/
|
|
304
|
+
bordered?: boolean;
|
|
305
|
+
/**
|
|
306
|
+
* Let the table card flex to fill its parent's height, which only takes effect inside a parent that
|
|
307
|
+
* has a bounded height. Pair it with `maxHeight` so the body scrolls while the header and footer
|
|
308
|
+
* stay sticky. Use it for full page tables.
|
|
309
|
+
* @default false
|
|
310
|
+
*/
|
|
311
|
+
fullHeight?: boolean;
|
|
312
|
+
/**
|
|
313
|
+
* Selection style. `'multiple'` shows checkboxes plus a select all header checkbox. `'single'` shows
|
|
314
|
+
* a radio, makes the whole row clickable, and selecting a row clears any previous selection. Needs
|
|
315
|
+
* `enableRowSelection`.
|
|
316
|
+
* @default "multiple"
|
|
317
|
+
*/
|
|
318
|
+
selectionMode?: "single" | "multiple";
|
|
319
|
+
/**
|
|
320
|
+
* In `'single'` mode, whether to draw the radio control at all. With it `false` the radio is hidden
|
|
321
|
+
* but the row stays clickable, which suits designs that select by clicking the row itself. No effect
|
|
322
|
+
* in `'multiple'` mode.
|
|
323
|
+
* @default true
|
|
324
|
+
*/
|
|
325
|
+
showCheckbox?: boolean;
|
|
326
|
+
/**
|
|
327
|
+
* Show removable chips on the toolbar for applied `placement: 'menu'` filters, so collapsed
|
|
328
|
+
* filters stay visible while active. Turn off if the bar gets cluttered — active menu filters
|
|
329
|
+
* are then only visible through their control in the search field picker.
|
|
330
|
+
* @default true
|
|
331
|
+
*/
|
|
332
|
+
showFilterChips?: boolean;
|
|
333
|
+
/**
|
|
334
|
+
* Label on the global search's field picker while "all fields" is selected. The picker itself
|
|
335
|
+
* appears automatically when `enableGlobalFilter` is on and at least one filter has
|
|
336
|
+
* `placement: 'menu'`. @default "Global"
|
|
337
|
+
*/
|
|
338
|
+
groupedFilterLabel?: string;
|
|
339
|
+
};
|
|
340
|
+
type ColumnFooter<TData> = {
|
|
341
|
+
content?: React.ReactNode | ((table: Table<TData>) => React.ReactNode);
|
|
342
|
+
align?: 'left' | 'center' | 'right';
|
|
343
|
+
className?: string;
|
|
344
|
+
};
|
|
345
|
+
type TableHeaderProps = {
|
|
346
|
+
content: React.ReactNode;
|
|
347
|
+
align?: 'left' | 'center' | 'right';
|
|
348
|
+
className?: string;
|
|
349
|
+
showOnEmpty?: boolean;
|
|
350
|
+
};
|
|
351
|
+
type GroupColumnDef<TData> = ColumnDef<TData> & {
|
|
352
|
+
columns?: GroupColumnDef<TData>[];
|
|
353
|
+
enablePinning?: boolean;
|
|
354
|
+
/**
|
|
355
|
+
* Per-column override for `settings.enableColumnVisibility` — hide capability, not visibility
|
|
356
|
+
* state. `false` keeps this column out of the toolbar's Columns menu and the header `⋯` menu's
|
|
357
|
+
* Hide entry entirely, even while table-wide visibility toggling stays on for the rest. Same
|
|
358
|
+
* effect as TanStack's native `enableHiding`, named to match the table-level setting — set
|
|
359
|
+
* either one, not both (an explicit `enableHiding` wins if both are present).
|
|
360
|
+
*/
|
|
361
|
+
enableColumnVisibility?: boolean;
|
|
362
|
+
/**
|
|
363
|
+
* Set `false` to hide the header's "⋯" options menu on this column entirely, regardless of
|
|
364
|
+
* whether sorting/pinning/hiding would otherwise make it appear. Use this when a column
|
|
365
|
+
* shouldn't offer the menu at all (e.g. an actions column) rather than disabling sorting and
|
|
366
|
+
* pinning separately just to make the dots go away.
|
|
367
|
+
*/
|
|
368
|
+
enableHeaderMenu?: boolean;
|
|
369
|
+
/**
|
|
370
|
+
* Reserve space on the right of the header for the sort chevron / "⋯" menu instead of letting
|
|
371
|
+
* them float as a hover-only overlay. The rest of the table intentionally keeps that area as a
|
|
372
|
+
* zero-width overlay so hovering never shifts layout — opt in here only for columns with a
|
|
373
|
+
* custom interactive `header` (e.g. a button of your own) that the overlay would otherwise sit
|
|
374
|
+
* on top of.
|
|
375
|
+
*/
|
|
376
|
+
reserveMenuSpace?: boolean;
|
|
377
|
+
headerAlign?: 'left' | 'center' | 'right';
|
|
378
|
+
customFooter?: ColumnFooter<TData>;
|
|
379
|
+
/**
|
|
380
|
+
* Value this column contributes to an export (see `getTableExportView`). Without it the export
|
|
381
|
+
* uses the column's accessor value, which covers plain columns; provide it when the cell renders
|
|
382
|
+
* a JSX composite (several fields in one cell) so the export gets a flat printable value instead
|
|
383
|
+
* of losing the column, and on display-only columns (no accessor) that should still export.
|
|
384
|
+
* Return native types (number, Date…) so the writer can format cells properly.
|
|
385
|
+
* @example exportValue: (row) => `${row.RefNo} (${row.RefDate})`
|
|
386
|
+
*/
|
|
387
|
+
exportValue?: (row: TData) => unknown;
|
|
388
|
+
/**
|
|
389
|
+
* Header text used in exports when `header` is JSX and therefore unprintable. A plain string
|
|
390
|
+
* `header` is used as-is and does not need this.
|
|
391
|
+
*/
|
|
392
|
+
exportHeader?: string;
|
|
393
|
+
/**
|
|
394
|
+
* Pin this column by default, on mount. Applied once to the table's initial pinning state —
|
|
395
|
+
* a user's later manual pin/unpin (via the header "⋯" menu) is never overridden.
|
|
396
|
+
*/
|
|
397
|
+
defaultPin?: 'left' | 'right';
|
|
398
|
+
/**
|
|
399
|
+
* Order among columns that default-pin to the same side. Lower sits closer to the table's
|
|
400
|
+
* outer edge. Defaults to declaration order when omitted. Inert without `defaultPin`.
|
|
401
|
+
*/
|
|
402
|
+
pinIndex?: number;
|
|
403
|
+
};
|
|
404
|
+
/**
|
|
405
|
+
* `G` — this table's persist group, ONLY relevant for narrowing `filters[].shared`'s
|
|
406
|
+
* autocomplete/type-check to that one group's own slots (see `PersistSlotFor`). You never set it
|
|
407
|
+
* explicitly for an inline `<DataTable persist={{group:"QC"}} filters={[...]} />` call: TS infers
|
|
408
|
+
* it from `persist.group` and checks `filters` against it in the same pass, same as `TData`
|
|
409
|
+
* infers from `data`/`columns`.
|
|
410
|
+
*
|
|
411
|
+
* It DOES need spelling out when `filters` is a separately declared `const` (the common pattern —
|
|
412
|
+
* `const filters: DataTableProps<Row>["filters"] = [...]`), because that array gets its type at
|
|
413
|
+
* its own declaration, independent of a `persist` prop written later in the same file. Add the
|
|
414
|
+
* group there too: `DataTableProps<Row, "QC">["filters"]`.
|
|
415
|
+
*/
|
|
416
|
+
type DataTableProps<TData, G extends PersistGroupId | undefined = undefined> = {
|
|
417
|
+
/** Row data. Rendered client-side (filter/sort/paginate all in-memory unless server-driven). */
|
|
418
|
+
data: TData[];
|
|
419
|
+
/** Column definitions. TanStack `ColumnDef` plus a few extras; see {@link GroupColumnDef}. */
|
|
420
|
+
columns: GroupColumnDef<TData>[];
|
|
421
|
+
/** Toolbar filter controls (see {@link FilterConfig}); place each on the bar or behind the global
|
|
422
|
+
* search's field picker via `FilterConfig.placement`. Debug: filters live in the toolbar, so none
|
|
423
|
+
* render unless `settings.showToolbar: true`. */
|
|
424
|
+
filters?: FilterConfig<TData, G>[];
|
|
425
|
+
/** Pagination config — its presence enables pagination. Omit to render all rows. */
|
|
426
|
+
pagination?: PaginationConfig;
|
|
427
|
+
/** Feature and presentation toggles; see {@link TableSettings} for the full dependency map. */
|
|
428
|
+
settings?: TableSettings;
|
|
429
|
+
/** Title/header area above the table. Plain node, or {@link TableHeaderProps} for alignment control. */
|
|
430
|
+
header?: React.ReactNode | TableHeaderProps;
|
|
431
|
+
/** Sticky footer content (spans full width). */
|
|
432
|
+
footer?: React.ReactNode;
|
|
433
|
+
/** Extra class on the outer wrapper. */
|
|
434
|
+
className?: string;
|
|
435
|
+
/** Max height of the scroll container (enables sticky header/footer). @default "100%" */
|
|
436
|
+
maxHeight?: string;
|
|
437
|
+
/** Show the loading overlay. @default false */
|
|
438
|
+
loading?: boolean;
|
|
439
|
+
/** Error message. When set it replaces the table with an error card, which also offers Try Again
|
|
440
|
+
* when `onRefresh` is given. */
|
|
441
|
+
error?: string;
|
|
442
|
+
/** Text shown when there are no rows. @default "No data available" */
|
|
443
|
+
emptyMessage?: string;
|
|
444
|
+
/** Fires with the selected row originals whenever selection changes. Requires `enableRowSelection`.
|
|
445
|
+
* @remarks Unselectable rows (see `isRowSelectable`) are filtered out. */
|
|
446
|
+
onRowSelectionChange?: (selectedRows: TData[]) => void;
|
|
447
|
+
/**
|
|
448
|
+
* Called by the toolbar Export button. `data` is the filtered + sorted row originals (all pages,
|
|
449
|
+
* not just the visible one) and `view` is the ready-to-write snapshot of the visible columns and
|
|
450
|
+
* cell values (see `getTableExportView` — call it yourself via `onTableReady` for export buttons
|
|
451
|
+
* that live outside the toolbar). Feed `view` to the app's Excel/CSV writer.
|
|
452
|
+
*/
|
|
453
|
+
onExport?: (data: TData[], view: TableExportView<TData>) => void;
|
|
454
|
+
/** Called by the toolbar Refresh button (and the error card's Try Again). */
|
|
455
|
+
onRefresh?: () => void;
|
|
456
|
+
/** Escape hatch that hands you the TanStack `table` instance for imperative control. */
|
|
457
|
+
onTableReady?: (table: Table<TData>) => void;
|
|
458
|
+
/** Render-prop for an action bar etc.; receives the `table` instance. */
|
|
459
|
+
children?: (table: Table<TData>) => React.ReactNode;
|
|
460
|
+
/** Return false to make a row unselectable: its checkbox greys out, select-all skips it and
|
|
461
|
+
* `onRowSelectionChange` never reports it. The row itself stays fully visible and interactive. */
|
|
462
|
+
isRowSelectable?: (row: TData) => boolean;
|
|
463
|
+
/**
|
|
464
|
+
* Returns a **stable, unique id for a row**, derived from your own data. Forwarded straight to
|
|
465
|
+
* TanStack's `getRowId`. You are not assigning an id — you point at the field(s) that already
|
|
466
|
+
* uniquely identify the record, and TanStack calls this to read it.
|
|
467
|
+
*
|
|
468
|
+
* **Why it matters:** without it, selection (and expansion/pinning) is keyed by the row's *index in
|
|
469
|
+
* the `data` array*. That is fine as long as the array never changes, but the moment `data` is
|
|
470
|
+
* replaced or reordered — a refetch, a tab switch to a different list, an insert/delete that shifts
|
|
471
|
+
* everything after it — index `2` now points at a different record, so the wrong rows appear
|
|
472
|
+
* selected. With `getRowId`, selection is keyed by the record itself and survives all of that.
|
|
473
|
+
*
|
|
474
|
+
* (Client-side sort / filter / pagination alone do **not** need this — they don't mutate the `data`
|
|
475
|
+
* array, so index-based ids stay correct. It's specifically array replacement/reordering that breaks.)
|
|
476
|
+
*
|
|
477
|
+
* **When to pass it:** any table that has row selection *and* whose `data` can be refetched,
|
|
478
|
+
* reordered, or have rows added/removed. Also **required** for `defaultSelectedRows` to target rows
|
|
479
|
+
* reliably. Display-only or never-refetched tables can omit it.
|
|
480
|
+
*
|
|
481
|
+
* Pick field(s) guaranteed unique per row; combine with `-` when no single field is unique.
|
|
482
|
+
* @example getRowId={(row) => String(row.id)}
|
|
483
|
+
* @example getRowId={(row) => `${row.Code}-${row.Type}`} // unique only as a pair
|
|
484
|
+
*/
|
|
485
|
+
getRowId?: (row: TData, index: number) => string;
|
|
486
|
+
/**
|
|
487
|
+
* **Uncontrolled prefill.** Return `true` for rows that should start already selected. The table
|
|
488
|
+
* keeps owning selection state afterwards — this only seeds the initial value (same idea as
|
|
489
|
+
* `<input defaultChecked>`), so you do not have to manage a controlled selection yourself.
|
|
490
|
+
*
|
|
491
|
+
* **Timing:** seeded exactly once, after the first non-empty `data` load (so it works even when data
|
|
492
|
+
* arrives async). It is *not* re-run on later data changes — that would wipe the user's own
|
|
493
|
+
* selections on every refetch. To deliberately re-seed for a new dataset (e.g. switching tabs),
|
|
494
|
+
* remount the table with a React `key`.
|
|
495
|
+
*
|
|
496
|
+
* **Safety:** only rows the table considers selectable are seeded — a row failing `isRowSelectable`
|
|
497
|
+
* is skipped, so prefill can never select an unselectable row. Setting selection here
|
|
498
|
+
* flows through the normal path, so `onRowSelectionChange`, the action bar, and any
|
|
499
|
+
* "disable others once one is selected" logic react exactly as they do for a real user click.
|
|
500
|
+
*
|
|
501
|
+
* **Pair with `getRowId`** so the seeded rows are matched by record, not by array position.
|
|
502
|
+
* @example defaultSelectedRows={(row) => row.WasPreviouslyPicked}
|
|
503
|
+
*/
|
|
504
|
+
defaultSelectedRows?: (row: TData) => boolean;
|
|
505
|
+
/** Server side search callback. Receives the staged external filter values when the Search button
|
|
506
|
+
* is pressed; run your query here. */
|
|
507
|
+
onExternalSearch?: (filters: Record<string, any>) => void;
|
|
508
|
+
/** Column aggregations (footer sums / averages / counts …), parent-controlled. The footer row
|
|
509
|
+
* appears whenever any column's config is `enabled`. Debug: the toolbar's Aggregations menu (to
|
|
510
|
+
* toggle them from the UI) additionally needs `onAggregationChange` + `settings.showToolbar` + at
|
|
511
|
+
* least one numeric column. @see AggregationConfigMap */
|
|
512
|
+
aggregations?: AggregationConfigMap<TData>;
|
|
513
|
+
/** Fires when the user toggles an aggregation in the toolbar menu; persist it into your
|
|
514
|
+
* `aggregations` state (the component does not own it). Without this the toggle menu is hidden. */
|
|
515
|
+
onAggregationChange?: (columnId: string, config: AggregationConfig<TData>) => void;
|
|
516
|
+
/** Per-row className (e.g. status-based row colouring). */
|
|
517
|
+
rowClassName?: (row: Row<TData>) => string;
|
|
518
|
+
/**
|
|
519
|
+
* Persist this table's filters, global search, external filter values and pagination across
|
|
520
|
+
* unmount/back-navigation. In-memory by default (refresh = fresh); `local: true` adds
|
|
521
|
+
* localStorage. String shorthand = `{ key }`. Absent = no persistence (today's behaviour).
|
|
522
|
+
* Restore is synchronous (seeded before first render — no unfiltered flash); external filters
|
|
523
|
+
* are replayed through `onExternalSearch` on mount (see `readPersistedExternal` to seed the
|
|
524
|
+
* page's own query instead). Selection is never persisted. See {@link PersistConfig}.
|
|
525
|
+
*
|
|
526
|
+
* Setting `group` here is also what narrows every filter's `shared` (in the SAME `filters`
|
|
527
|
+
* array literal) to just this group's own slots instead of every group's — see `DataTableProps`'s
|
|
528
|
+
* `G` type param doc above for the one case (a separately-declared `filters` const) where you
|
|
529
|
+
* have to spell `G` out yourself for that to kick in.
|
|
530
|
+
* @example persist="qc-completed"
|
|
531
|
+
* @example persist={{ key: "qc-completed", group: "inhouse", local: true }}
|
|
532
|
+
*/
|
|
533
|
+
persist?: string | PersistConfig<G>;
|
|
534
|
+
};
|
|
535
|
+
|
|
536
|
+
export type { AggregationConfig, AggregationConfigMap, AggregationFunction, ColumnFooter, CustomFilterConfig, DataTableProps, FilterConfig, GroupColumnDef, PaginationConfig, PathFilterConfig, TableHeaderProps, TableSettings };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|