@l3mpire/ui 2.24.0 → 2.25.0
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/USAGE.md +74 -0
- package/dist/index.d.mts +64 -2
- package/dist/index.d.ts +64 -2
- package/dist/index.js +972 -688
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +973 -689
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/USAGE.md
CHANGED
|
@@ -1041,6 +1041,39 @@ import {
|
|
|
1041
1041
|
|
|
1042
1042
|
**Advanced filter shortcut:** the PropertySelector footer shows an "Advanced filter · N rule(s)" item. Clicking it closes the property selector and opens the advanced popover directly in its initial empty state — where the user picks the first property inline via a "Where | [Select property ▾]" draft row. When no advanced filters exist yet, clicking this shortcut makes the AdvancedChip appear with the popover already open; closing without adding a filter removes the chip automatically.
|
|
1043
1043
|
|
|
1044
|
+
**Two-row layout (full mode only):** when filters exist, `FilterSystem` splits into two rows so the top-right `actions` slot (Create / Import / Start tasks…) stays visible while the user edits filters.
|
|
1045
|
+
|
|
1046
|
+
- **Row 1** (always): children (SearchBar), SortButton, Filters button on the left; `actions` on the right.
|
|
1047
|
+
- **Row 2** (conditional): filter chips, `+` add, `Clear` on the left; new `filterActions` slot on the right for Save/Discard controls that only make sense while editing.
|
|
1048
|
+
- The Filters button on Row 1 **opens the PropertySelector when no filters exist** and **toggles Row 2 visibility when filters exist**. The count badge always reflects `totalCount`.
|
|
1049
|
+
- When Row 2 first appears (totalCount 0 → 1) it's expanded by default. Use `defaultFiltersRowExpanded` (uncontrolled) or `filtersRowExpanded` + `onFiltersRowExpandedChange` (controlled) to override.
|
|
1050
|
+
- Minimal / icon modes are unchanged (single row, SummaryChip).
|
|
1051
|
+
|
|
1052
|
+
```tsx
|
|
1053
|
+
<FilterSystem
|
|
1054
|
+
properties={PROPERTIES}
|
|
1055
|
+
filterState={state}
|
|
1056
|
+
onFilterStateChange={setState}
|
|
1057
|
+
sortFields={SORT_FIELDS}
|
|
1058
|
+
// Row 1 right — always visible
|
|
1059
|
+
actions={
|
|
1060
|
+
<>
|
|
1061
|
+
<Button appearance="outlined">Import</Button>
|
|
1062
|
+
<Button appearance="solid">Start tasks</Button>
|
|
1063
|
+
</>
|
|
1064
|
+
}
|
|
1065
|
+
// Row 2 right — only visible while filters row is rendered
|
|
1066
|
+
filterActions={
|
|
1067
|
+
<>
|
|
1068
|
+
<Button appearance="ghost">Discard</Button>
|
|
1069
|
+
<SaveViewButton />
|
|
1070
|
+
</>
|
|
1071
|
+
}
|
|
1072
|
+
>
|
|
1073
|
+
<SearchBar size="sm" />
|
|
1074
|
+
</FilterSystem>
|
|
1075
|
+
```
|
|
1076
|
+
|
|
1044
1077
|
**Pinned groups (hoist a group to root):** mark a property group as "primary" so its properties render flat at the top of the `PropertySelector` popover — no category click needed. Set `groupPinned: true` on any property and the entire group is hoisted; remaining groups stay nested as categories below. Search works across everything (pinned + nested). The popover has a max-height and the "Advanced filter" footer stays sticky at the bottom when the list scrolls. The same flattening is applied in `AdvancedRow`'s property-swap popover and in `InteractiveFilterChip`'s swap popover.
|
|
1045
1078
|
|
|
1046
1079
|
```tsx
|
|
@@ -1324,6 +1357,9 @@ const columns: ColumnDef<Person>[] = [
|
|
|
1324
1357
|
| `enableColumnPinning` | `false` | Pin columns left/right |
|
|
1325
1358
|
| `enableColumnResizing` | `false` | Drag to resize columns |
|
|
1326
1359
|
| `enableColumnDrag` | `false` | Drag to reorder columns |
|
|
1360
|
+
| `enableTableSettings` | `false` | Sticky-right "Manage table" button + modal (implies `enableColumnVisibility`) |
|
|
1361
|
+
| `lockedColumnIds` | inferred | Column IDs the manage-table modal hides (defaults to `enableHiding: false` columns plus `select`) |
|
|
1362
|
+
| `tableSettingsTitle` | `"Manage table"` | Override the manage-table modal title |
|
|
1327
1363
|
| `bordered` | `false` | Border-top on header (full-width layouts) |
|
|
1328
1364
|
| `emptyState` | — | `ReactNode` shown when `data` is empty |
|
|
1329
1365
|
| `sorting` | — | Controlled sorting state |
|
|
@@ -1353,6 +1389,44 @@ const columns: ColumnDef<Item>[] = [
|
|
|
1353
1389
|
];
|
|
1354
1390
|
```
|
|
1355
1391
|
|
|
1392
|
+
#### Manage Table (Column Visibility Modal)
|
|
1393
|
+
|
|
1394
|
+
Set `enableTableSettings` to render a sticky-right "Manage table" button in the header row. The button is hidden by default and reveals on header-row hover. Clicking it opens a modal with a search input and a checkbox per column. Locked columns (those with `enableHiding: false`, plus any column with id `select`) are filtered out.
|
|
1395
|
+
|
|
1396
|
+
```tsx
|
|
1397
|
+
const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>({});
|
|
1398
|
+
|
|
1399
|
+
<DataTable
|
|
1400
|
+
columns={columns}
|
|
1401
|
+
data={data}
|
|
1402
|
+
enableTableSettings
|
|
1403
|
+
columnVisibility={columnVisibility}
|
|
1404
|
+
onColumnVisibilityChange={(updater) =>
|
|
1405
|
+
setColumnVisibility(typeof updater === "function" ? updater(columnVisibility) : updater)
|
|
1406
|
+
}
|
|
1407
|
+
/>
|
|
1408
|
+
```
|
|
1409
|
+
|
|
1410
|
+
For composition (custom trigger, controlled modal state, etc.), import `DataTableSettingsModal` directly:
|
|
1411
|
+
|
|
1412
|
+
```tsx
|
|
1413
|
+
import { DataTable, DataTableSettingsModal } from "@l3mpire/ui";
|
|
1414
|
+
|
|
1415
|
+
const [open, setOpen] = useState(false);
|
|
1416
|
+
|
|
1417
|
+
<>
|
|
1418
|
+
<Button onClick={() => setOpen(true)}>Manage columns</Button>
|
|
1419
|
+
<DataTable columns={columns} data={data} columnVisibility={visibility} onColumnVisibilityChange={setVisibility} />
|
|
1420
|
+
<DataTableSettingsModal
|
|
1421
|
+
open={open}
|
|
1422
|
+
onOpenChange={setOpen}
|
|
1423
|
+
columns={columns}
|
|
1424
|
+
columnVisibility={visibility}
|
|
1425
|
+
onApply={setVisibility}
|
|
1426
|
+
/>
|
|
1427
|
+
</>
|
|
1428
|
+
```
|
|
1429
|
+
|
|
1356
1430
|
#### Cell Renderers
|
|
1357
1431
|
|
|
1358
1432
|
Pre-built cell components for common patterns:
|
package/dist/index.d.mts
CHANGED
|
@@ -588,6 +588,33 @@ interface RowActionsProps {
|
|
|
588
588
|
}
|
|
589
589
|
declare const RowActions: React.FC<RowActionsProps>;
|
|
590
590
|
|
|
591
|
+
type AnyColumnDef = ColumnDef<any, any>;
|
|
592
|
+
interface DataTableSettingsModalProps {
|
|
593
|
+
/** Controlled open state */
|
|
594
|
+
open: boolean;
|
|
595
|
+
/** Open-state change handler */
|
|
596
|
+
onOpenChange: (open: boolean) => void;
|
|
597
|
+
/** All column definitions to expose for hide/show */
|
|
598
|
+
columns: AnyColumnDef[];
|
|
599
|
+
/** Current visibility map: `{ [columnId]: boolean }` */
|
|
600
|
+
columnVisibility: Record<string, boolean>;
|
|
601
|
+
/** Called when the user presses Apply with the next visibility map */
|
|
602
|
+
onApply: (visibility: Record<string, boolean>) => void;
|
|
603
|
+
/**
|
|
604
|
+
* Column IDs the user cannot hide (filtered out of the list).
|
|
605
|
+
* Defaults to columns whose `enableHiding` is `false`, plus any column with id `select`.
|
|
606
|
+
*/
|
|
607
|
+
lockedColumnIds?: string[];
|
|
608
|
+
/** Modal title — defaults to "Manage table" */
|
|
609
|
+
title?: string;
|
|
610
|
+
/** Optional class for the modal content */
|
|
611
|
+
className?: string;
|
|
612
|
+
}
|
|
613
|
+
declare function DataTableSettingsModal({ open, onOpenChange, columns, columnVisibility, onApply, lockedColumnIds, title, className, }: DataTableSettingsModalProps): react_jsx_runtime.JSX.Element;
|
|
614
|
+
declare namespace DataTableSettingsModal {
|
|
615
|
+
var displayName: string;
|
|
616
|
+
}
|
|
617
|
+
|
|
591
618
|
interface DataTableProps<TData, TValue> {
|
|
592
619
|
/** Column definitions — see TanStack Table docs */
|
|
593
620
|
columns: ColumnDef<TData, TValue>[];
|
|
@@ -609,6 +636,21 @@ interface DataTableProps<TData, TValue> {
|
|
|
609
636
|
enableColumnResizing?: boolean;
|
|
610
637
|
/** Enable column drag reordering */
|
|
611
638
|
enableColumnDrag?: boolean;
|
|
639
|
+
/**
|
|
640
|
+
* Render a sticky-right "Manage table" button in the header row that opens
|
|
641
|
+
* a modal letting the user toggle column visibility. Reads/writes the
|
|
642
|
+
* controlled `columnVisibility` + `onColumnVisibilityChange` props.
|
|
643
|
+
*
|
|
644
|
+
* Implies `enableColumnVisibility`.
|
|
645
|
+
*/
|
|
646
|
+
enableTableSettings?: boolean;
|
|
647
|
+
/**
|
|
648
|
+
* Column IDs that cannot be hidden from the manage-table modal.
|
|
649
|
+
* Defaults to columns with `enableHiding: false`, plus any column with id `select`.
|
|
650
|
+
*/
|
|
651
|
+
lockedColumnIds?: string[];
|
|
652
|
+
/** Override the manage-table modal title. Defaults to "Manage table". */
|
|
653
|
+
tableSettingsTitle?: string;
|
|
612
654
|
/** Controlled sorting state */
|
|
613
655
|
sorting?: SortingState;
|
|
614
656
|
onSortingChange?: OnChangeFn<SortingState>;
|
|
@@ -650,7 +692,7 @@ declare module "@tanstack/react-table" {
|
|
|
650
692
|
}
|
|
651
693
|
}
|
|
652
694
|
type FilterOperator = "contains" | "does_not_contain" | "is" | "is_not" | "starts_with" | "ends_with" | "is_empty" | "is_not_empty" | "equals" | "not_equals" | "greater_than" | "less_than" | "greater_than_or_equal" | "less_than_or_equal" | "between" | "is_before" | "is_after" | "is_between" | "is_any_of" | "is_none_of";
|
|
653
|
-
declare function DataTableInner<TData, TValue>({ columns, data, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableColumnVisibility, enableColumnPinning, enableColumnResizing, enableColumnDrag, sorting: sortingProp, onSortingChange, columnFilters: columnFiltersProp, onColumnFiltersChange, pagination: paginationProp, onPaginationChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, children, className, emptyState, emptyMessage, bordered, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
695
|
+
declare function DataTableInner<TData, TValue>({ columns, data, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableColumnVisibility, enableColumnPinning, enableColumnResizing, enableColumnDrag, enableTableSettings, lockedColumnIds, tableSettingsTitle, sorting: sortingProp, onSortingChange, columnFilters: columnFiltersProp, onColumnFiltersChange, pagination: paginationProp, onPaginationChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, children, className, emptyState, emptyMessage, bordered, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
654
696
|
interface DataTablePaginationProps<TData> {
|
|
655
697
|
table: Table$1<TData>;
|
|
656
698
|
pageSizeOptions?: number[];
|
|
@@ -1006,7 +1048,27 @@ interface FilterSystemProps {
|
|
|
1006
1048
|
*/
|
|
1007
1049
|
bounded?: boolean;
|
|
1008
1050
|
children?: React.ReactNode;
|
|
1051
|
+
/**
|
|
1052
|
+
* Right-aligned slot on Row 1 — always visible, even while the user edits
|
|
1053
|
+
* filters. Use for "Create", "Import", "Start tasks" and similar page-level
|
|
1054
|
+
* actions.
|
|
1055
|
+
*/
|
|
1009
1056
|
actions?: React.ReactNode;
|
|
1057
|
+
/**
|
|
1058
|
+
* Right-aligned slot on Row 2 — only visible when the filters row is
|
|
1059
|
+
* rendered. Use for view-related actions that only make sense while editing
|
|
1060
|
+
* filters, e.g. "Discard changes" + "Save view".
|
|
1061
|
+
*/
|
|
1062
|
+
filterActions?: React.ReactNode;
|
|
1063
|
+
/**
|
|
1064
|
+
* Uncontrolled initial state of Row 2 (filter chips row). Defaults to `true`
|
|
1065
|
+
* — the row is expanded as soon as a filter exists. Toggled by clicking the
|
|
1066
|
+
* Filters button on Row 1. Ignored when `filtersRowExpanded` is provided.
|
|
1067
|
+
*/
|
|
1068
|
+
defaultFiltersRowExpanded?: boolean;
|
|
1069
|
+
/** Controlled expanded state of Row 2. */
|
|
1070
|
+
filtersRowExpanded?: boolean;
|
|
1071
|
+
onFiltersRowExpandedChange?: (expanded: boolean) => void;
|
|
1010
1072
|
className?: string;
|
|
1011
1073
|
}
|
|
1012
1074
|
declare const FilterSystem: React.FC<FilterSystemProps>;
|
|
@@ -1103,4 +1165,4 @@ declare const DatePickerTrigger: React.ForwardRefExoticComponent<PopoverPrimitiv
|
|
|
1103
1165
|
declare const DatePickerPopover: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1104
1166
|
declare function getDefaultSuggestions(referenceDate?: Date): DatePickerSuggestion[];
|
|
1105
1167
|
|
|
1106
|
-
export { AdvancedChip, type AdvancedChipProps, AdvancedPopover, type AdvancedPopoverProps, AdvancedRow, type AdvancedRowProps, Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, type BooleanOperator, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, BulkAction, type BulkActionItem, type BulkActionProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DEFAULT_OPERATOR_BY_TYPE, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, type DataType, DateCell, type DateCellProps, type DateOperator, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerFooter, type DatePickerFooterProps, type DatePickerMode, DatePickerPanel, type DatePickerPanelProps, DatePickerPopover, type DatePickerProps, DatePickerRoot, DatePickerSelects, type DatePickerSelectsProps, type DatePickerSuggestion, DatePickerSuggestions, type DatePickerSuggestionsProps, DatePickerTrigger, type DateRange, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type EnumOperator, FilterBar, FilterBarButton, type FilterBarButtonProps, FilterBarLeft, type FilterBarLeftProps, type FilterBarMode, type FilterBarProps, FilterBarRight, type FilterBarRightProps, FilterChip, type FilterChipProps, FilterChipSegment, type FilterChipSegmentProps, type FilterCondition, FilterEditor, type FilterEditorProps, type FilterOperator, type FilterState, FilterSystem, type FilterSystemProps, type FilterValue, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, InteractiveFilterChip, type InteractiveFilterChipProps, KebabMenu, type KebabMenuProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type NumberOperator, OPERATORS_BY_TYPE, OperatorList, type OperatorListProps, OperatorSelector, type OperatorSelectorProps, type OperatorType, type Product, ProductLogo, type ProductLogoProps, type PropertyDefinition, PropertySelector, type PropertySelectorProps, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RelationOperator, RowActions, type RowActionsProps, SaveViewButton, type SaveViewButtonProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SortButton, type SortButtonProps, type SortField, StatusCell, type StatusCellProps, SummaryChip, type SummaryChipProps, Switch, SwitchCard, type SwitchCardProps, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, type TagsOperator, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, type TextOperator, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, ValueInput, type ValueInputProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, createFilterWithDefaults, emptyStateVariants, filterChipSegmentVariants, getDefaultOperator, getDefaultSuggestions, getValueInputType, infoMessageVariants, isNoValueOperator, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useFilterBarMode, useSidebarContext };
|
|
1168
|
+
export { AdvancedChip, type AdvancedChipProps, AdvancedPopover, type AdvancedPopoverProps, AdvancedRow, type AdvancedRowProps, Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, type BooleanOperator, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, BulkAction, type BulkActionItem, type BulkActionProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DEFAULT_OPERATOR_BY_TYPE, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableSettingsModal, type DataTableSettingsModalProps, type DataType, DateCell, type DateCellProps, type DateOperator, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerFooter, type DatePickerFooterProps, type DatePickerMode, DatePickerPanel, type DatePickerPanelProps, DatePickerPopover, type DatePickerProps, DatePickerRoot, DatePickerSelects, type DatePickerSelectsProps, type DatePickerSuggestion, DatePickerSuggestions, type DatePickerSuggestionsProps, DatePickerTrigger, type DateRange, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type EnumOperator, FilterBar, FilterBarButton, type FilterBarButtonProps, FilterBarLeft, type FilterBarLeftProps, type FilterBarMode, type FilterBarProps, FilterBarRight, type FilterBarRightProps, FilterChip, type FilterChipProps, FilterChipSegment, type FilterChipSegmentProps, type FilterCondition, FilterEditor, type FilterEditorProps, type FilterOperator, type FilterState, FilterSystem, type FilterSystemProps, type FilterValue, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, InteractiveFilterChip, type InteractiveFilterChipProps, KebabMenu, type KebabMenuProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type NumberOperator, OPERATORS_BY_TYPE, OperatorList, type OperatorListProps, OperatorSelector, type OperatorSelectorProps, type OperatorType, type Product, ProductLogo, type ProductLogoProps, type PropertyDefinition, PropertySelector, type PropertySelectorProps, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RelationOperator, RowActions, type RowActionsProps, SaveViewButton, type SaveViewButtonProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SortButton, type SortButtonProps, type SortField, StatusCell, type StatusCellProps, SummaryChip, type SummaryChipProps, Switch, SwitchCard, type SwitchCardProps, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, type TagsOperator, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, type TextOperator, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, ValueInput, type ValueInputProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, createFilterWithDefaults, emptyStateVariants, filterChipSegmentVariants, getDefaultOperator, getDefaultSuggestions, getValueInputType, infoMessageVariants, isNoValueOperator, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useFilterBarMode, useSidebarContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -588,6 +588,33 @@ interface RowActionsProps {
|
|
|
588
588
|
}
|
|
589
589
|
declare const RowActions: React.FC<RowActionsProps>;
|
|
590
590
|
|
|
591
|
+
type AnyColumnDef = ColumnDef<any, any>;
|
|
592
|
+
interface DataTableSettingsModalProps {
|
|
593
|
+
/** Controlled open state */
|
|
594
|
+
open: boolean;
|
|
595
|
+
/** Open-state change handler */
|
|
596
|
+
onOpenChange: (open: boolean) => void;
|
|
597
|
+
/** All column definitions to expose for hide/show */
|
|
598
|
+
columns: AnyColumnDef[];
|
|
599
|
+
/** Current visibility map: `{ [columnId]: boolean }` */
|
|
600
|
+
columnVisibility: Record<string, boolean>;
|
|
601
|
+
/** Called when the user presses Apply with the next visibility map */
|
|
602
|
+
onApply: (visibility: Record<string, boolean>) => void;
|
|
603
|
+
/**
|
|
604
|
+
* Column IDs the user cannot hide (filtered out of the list).
|
|
605
|
+
* Defaults to columns whose `enableHiding` is `false`, plus any column with id `select`.
|
|
606
|
+
*/
|
|
607
|
+
lockedColumnIds?: string[];
|
|
608
|
+
/** Modal title — defaults to "Manage table" */
|
|
609
|
+
title?: string;
|
|
610
|
+
/** Optional class for the modal content */
|
|
611
|
+
className?: string;
|
|
612
|
+
}
|
|
613
|
+
declare function DataTableSettingsModal({ open, onOpenChange, columns, columnVisibility, onApply, lockedColumnIds, title, className, }: DataTableSettingsModalProps): react_jsx_runtime.JSX.Element;
|
|
614
|
+
declare namespace DataTableSettingsModal {
|
|
615
|
+
var displayName: string;
|
|
616
|
+
}
|
|
617
|
+
|
|
591
618
|
interface DataTableProps<TData, TValue> {
|
|
592
619
|
/** Column definitions — see TanStack Table docs */
|
|
593
620
|
columns: ColumnDef<TData, TValue>[];
|
|
@@ -609,6 +636,21 @@ interface DataTableProps<TData, TValue> {
|
|
|
609
636
|
enableColumnResizing?: boolean;
|
|
610
637
|
/** Enable column drag reordering */
|
|
611
638
|
enableColumnDrag?: boolean;
|
|
639
|
+
/**
|
|
640
|
+
* Render a sticky-right "Manage table" button in the header row that opens
|
|
641
|
+
* a modal letting the user toggle column visibility. Reads/writes the
|
|
642
|
+
* controlled `columnVisibility` + `onColumnVisibilityChange` props.
|
|
643
|
+
*
|
|
644
|
+
* Implies `enableColumnVisibility`.
|
|
645
|
+
*/
|
|
646
|
+
enableTableSettings?: boolean;
|
|
647
|
+
/**
|
|
648
|
+
* Column IDs that cannot be hidden from the manage-table modal.
|
|
649
|
+
* Defaults to columns with `enableHiding: false`, plus any column with id `select`.
|
|
650
|
+
*/
|
|
651
|
+
lockedColumnIds?: string[];
|
|
652
|
+
/** Override the manage-table modal title. Defaults to "Manage table". */
|
|
653
|
+
tableSettingsTitle?: string;
|
|
612
654
|
/** Controlled sorting state */
|
|
613
655
|
sorting?: SortingState;
|
|
614
656
|
onSortingChange?: OnChangeFn<SortingState>;
|
|
@@ -650,7 +692,7 @@ declare module "@tanstack/react-table" {
|
|
|
650
692
|
}
|
|
651
693
|
}
|
|
652
694
|
type FilterOperator = "contains" | "does_not_contain" | "is" | "is_not" | "starts_with" | "ends_with" | "is_empty" | "is_not_empty" | "equals" | "not_equals" | "greater_than" | "less_than" | "greater_than_or_equal" | "less_than_or_equal" | "between" | "is_before" | "is_after" | "is_between" | "is_any_of" | "is_none_of";
|
|
653
|
-
declare function DataTableInner<TData, TValue>({ columns, data, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableColumnVisibility, enableColumnPinning, enableColumnResizing, enableColumnDrag, sorting: sortingProp, onSortingChange, columnFilters: columnFiltersProp, onColumnFiltersChange, pagination: paginationProp, onPaginationChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, children, className, emptyState, emptyMessage, bordered, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
695
|
+
declare function DataTableInner<TData, TValue>({ columns, data, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableColumnVisibility, enableColumnPinning, enableColumnResizing, enableColumnDrag, enableTableSettings, lockedColumnIds, tableSettingsTitle, sorting: sortingProp, onSortingChange, columnFilters: columnFiltersProp, onColumnFiltersChange, pagination: paginationProp, onPaginationChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, children, className, emptyState, emptyMessage, bordered, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
654
696
|
interface DataTablePaginationProps<TData> {
|
|
655
697
|
table: Table$1<TData>;
|
|
656
698
|
pageSizeOptions?: number[];
|
|
@@ -1006,7 +1048,27 @@ interface FilterSystemProps {
|
|
|
1006
1048
|
*/
|
|
1007
1049
|
bounded?: boolean;
|
|
1008
1050
|
children?: React.ReactNode;
|
|
1051
|
+
/**
|
|
1052
|
+
* Right-aligned slot on Row 1 — always visible, even while the user edits
|
|
1053
|
+
* filters. Use for "Create", "Import", "Start tasks" and similar page-level
|
|
1054
|
+
* actions.
|
|
1055
|
+
*/
|
|
1009
1056
|
actions?: React.ReactNode;
|
|
1057
|
+
/**
|
|
1058
|
+
* Right-aligned slot on Row 2 — only visible when the filters row is
|
|
1059
|
+
* rendered. Use for view-related actions that only make sense while editing
|
|
1060
|
+
* filters, e.g. "Discard changes" + "Save view".
|
|
1061
|
+
*/
|
|
1062
|
+
filterActions?: React.ReactNode;
|
|
1063
|
+
/**
|
|
1064
|
+
* Uncontrolled initial state of Row 2 (filter chips row). Defaults to `true`
|
|
1065
|
+
* — the row is expanded as soon as a filter exists. Toggled by clicking the
|
|
1066
|
+
* Filters button on Row 1. Ignored when `filtersRowExpanded` is provided.
|
|
1067
|
+
*/
|
|
1068
|
+
defaultFiltersRowExpanded?: boolean;
|
|
1069
|
+
/** Controlled expanded state of Row 2. */
|
|
1070
|
+
filtersRowExpanded?: boolean;
|
|
1071
|
+
onFiltersRowExpandedChange?: (expanded: boolean) => void;
|
|
1010
1072
|
className?: string;
|
|
1011
1073
|
}
|
|
1012
1074
|
declare const FilterSystem: React.FC<FilterSystemProps>;
|
|
@@ -1103,4 +1165,4 @@ declare const DatePickerTrigger: React.ForwardRefExoticComponent<PopoverPrimitiv
|
|
|
1103
1165
|
declare const DatePickerPopover: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1104
1166
|
declare function getDefaultSuggestions(referenceDate?: Date): DatePickerSuggestion[];
|
|
1105
1167
|
|
|
1106
|
-
export { AdvancedChip, type AdvancedChipProps, AdvancedPopover, type AdvancedPopoverProps, AdvancedRow, type AdvancedRowProps, Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, type BooleanOperator, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, BulkAction, type BulkActionItem, type BulkActionProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DEFAULT_OPERATOR_BY_TYPE, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, type DataType, DateCell, type DateCellProps, type DateOperator, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerFooter, type DatePickerFooterProps, type DatePickerMode, DatePickerPanel, type DatePickerPanelProps, DatePickerPopover, type DatePickerProps, DatePickerRoot, DatePickerSelects, type DatePickerSelectsProps, type DatePickerSuggestion, DatePickerSuggestions, type DatePickerSuggestionsProps, DatePickerTrigger, type DateRange, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type EnumOperator, FilterBar, FilterBarButton, type FilterBarButtonProps, FilterBarLeft, type FilterBarLeftProps, type FilterBarMode, type FilterBarProps, FilterBarRight, type FilterBarRightProps, FilterChip, type FilterChipProps, FilterChipSegment, type FilterChipSegmentProps, type FilterCondition, FilterEditor, type FilterEditorProps, type FilterOperator, type FilterState, FilterSystem, type FilterSystemProps, type FilterValue, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, InteractiveFilterChip, type InteractiveFilterChipProps, KebabMenu, type KebabMenuProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type NumberOperator, OPERATORS_BY_TYPE, OperatorList, type OperatorListProps, OperatorSelector, type OperatorSelectorProps, type OperatorType, type Product, ProductLogo, type ProductLogoProps, type PropertyDefinition, PropertySelector, type PropertySelectorProps, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RelationOperator, RowActions, type RowActionsProps, SaveViewButton, type SaveViewButtonProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SortButton, type SortButtonProps, type SortField, StatusCell, type StatusCellProps, SummaryChip, type SummaryChipProps, Switch, SwitchCard, type SwitchCardProps, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, type TagsOperator, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, type TextOperator, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, ValueInput, type ValueInputProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, createFilterWithDefaults, emptyStateVariants, filterChipSegmentVariants, getDefaultOperator, getDefaultSuggestions, getValueInputType, infoMessageVariants, isNoValueOperator, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useFilterBarMode, useSidebarContext };
|
|
1168
|
+
export { AdvancedChip, type AdvancedChipProps, AdvancedPopover, type AdvancedPopoverProps, AdvancedRow, type AdvancedRowProps, Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, type BooleanOperator, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, BulkAction, type BulkActionItem, type BulkActionProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DEFAULT_OPERATOR_BY_TYPE, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableSettingsModal, type DataTableSettingsModalProps, type DataType, DateCell, type DateCellProps, type DateOperator, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerFooter, type DatePickerFooterProps, type DatePickerMode, DatePickerPanel, type DatePickerPanelProps, DatePickerPopover, type DatePickerProps, DatePickerRoot, DatePickerSelects, type DatePickerSelectsProps, type DatePickerSuggestion, DatePickerSuggestions, type DatePickerSuggestionsProps, DatePickerTrigger, type DateRange, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type EnumOperator, FilterBar, FilterBarButton, type FilterBarButtonProps, FilterBarLeft, type FilterBarLeftProps, type FilterBarMode, type FilterBarProps, FilterBarRight, type FilterBarRightProps, FilterChip, type FilterChipProps, FilterChipSegment, type FilterChipSegmentProps, type FilterCondition, FilterEditor, type FilterEditorProps, type FilterOperator, type FilterState, FilterSystem, type FilterSystemProps, type FilterValue, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, InteractiveFilterChip, type InteractiveFilterChipProps, KebabMenu, type KebabMenuProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type NumberOperator, OPERATORS_BY_TYPE, OperatorList, type OperatorListProps, OperatorSelector, type OperatorSelectorProps, type OperatorType, type Product, ProductLogo, type ProductLogoProps, type PropertyDefinition, PropertySelector, type PropertySelectorProps, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RelationOperator, RowActions, type RowActionsProps, SaveViewButton, type SaveViewButtonProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SortButton, type SortButtonProps, type SortField, StatusCell, type StatusCellProps, SummaryChip, type SummaryChipProps, Switch, SwitchCard, type SwitchCardProps, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, type TagsOperator, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, type TextOperator, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, ValueInput, type ValueInputProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, createFilterWithDefaults, emptyStateVariants, filterChipSegmentVariants, getDefaultOperator, getDefaultSuggestions, getValueInputType, infoMessageVariants, isNoValueOperator, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useFilterBarMode, useSidebarContext };
|