@sesamehr/react-design-system 0.1.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/LICENSE +21 -0
- package/README.md +89 -0
- package/dist/Button/Button.d.ts +12 -0
- package/dist/Button/index.d.ts +7 -0
- package/dist/Data/Table/Table.d.ts +43 -0
- package/dist/Data/Table/TableAvatar/TableAvatar.d.ts +13 -0
- package/dist/Data/Table/TableBody/TableBody.d.ts +21 -0
- package/dist/Data/Table/TableBulkHeader/TableBulkHeader.d.ts +13 -0
- package/dist/Data/Table/TableCell/TableCell.d.ts +8 -0
- package/dist/Data/Table/TableColumnVisibility/TableColumnVisibility.d.ts +10 -0
- package/dist/Data/Table/TableDragCell/TableDragCell.d.ts +6 -0
- package/dist/Data/Table/TableEmpty/TableEmpty.d.ts +3 -0
- package/dist/Data/Table/TableExpandCell/TableExpandCell.d.ts +6 -0
- package/dist/Data/Table/TableFixed/TableFixed.d.ts +27 -0
- package/dist/Data/Table/TableFixed/index.d.ts +1 -0
- package/dist/Data/Table/TableHead/TableHead.d.ts +3 -0
- package/dist/Data/Table/TableHeaderCell/TableHeaderCell.d.ts +18 -0
- package/dist/Data/Table/TablePagination/TablePagination.d.ts +10 -0
- package/dist/Data/Table/TableRow/TableRow.d.ts +11 -0
- package/dist/Data/Table/TableRow/rowDrag.d.ts +17 -0
- package/dist/Data/Table/TableRowExpanded/TableRowExpanded.d.ts +5 -0
- package/dist/Data/Table/TableSelectCell/TableSelectCell.d.ts +9 -0
- package/dist/Data/Table/hooks/index.d.ts +20 -0
- package/dist/Data/Table/hooks/useDragToScroll/useDragToScroll.d.ts +19 -0
- package/dist/Data/Table/hooks/useFixedColumns.d.ts +8 -0
- package/dist/Data/Table/hooks/useScrollShadow/useScrollShadow.d.ts +14 -0
- package/dist/Data/Table/hooks/useTable/useTable.d.ts +3 -0
- package/dist/Data/Table/hooks/useTable/useTable.types.d.ts +55 -0
- package/dist/Data/Table/hooks/useTableColumns/useTableColumns.d.ts +2 -0
- package/dist/Data/Table/hooks/useTableColumns/useTableColumns.types.d.ts +31 -0
- package/dist/Data/Table/hooks/useTableDetailRow/useTableDetailRow.d.ts +2 -0
- package/dist/Data/Table/hooks/useTableDetailRow/useTableDetailRow.types.d.ts +29 -0
- package/dist/Data/Table/hooks/useTablePagination/useTablePagination.d.ts +44 -0
- package/dist/Data/Table/hooks/useTablePinning/index.d.ts +2 -0
- package/dist/Data/Table/hooks/useTablePinning/useTablePinning.d.ts +2 -0
- package/dist/Data/Table/hooks/useTablePinning/useTablePinning.types.d.ts +50 -0
- package/dist/Data/Table/hooks/useTableSelection/useTableSelection.d.ts +2 -0
- package/dist/Data/Table/hooks/useTableSelection/useTableSelection.types.d.ts +31 -0
- package/dist/Data/Table/hooks/useTableSorting/useTableSorting.d.ts +2 -0
- package/dist/Data/Table/hooks/useTableSorting/useTableSorting.types.d.ts +24 -0
- package/dist/Data/Table/index.d.ts +17 -0
- package/dist/Data/Table/types.d.ts +90 -0
- package/dist/Display/Avatar/Avatar.d.ts +23 -0
- package/dist/Display/Avatar/hooks/useAvatarBullet.d.ts +16 -0
- package/dist/Display/Avatar/index.d.ts +9 -0
- package/dist/Display/AvatarGroup/AvatarGroup.d.ts +16 -0
- package/dist/Display/AvatarGroup/index.d.ts +1 -0
- package/dist/Display/Badge/Badge.d.ts +6 -0
- package/dist/Display/Badge/index.d.ts +6 -0
- package/dist/Display/PaymentCard/PaymentCard.d.ts +13 -0
- package/dist/Display/PaymentCard/index.d.ts +20 -0
- package/dist/Feedback/Alert/Alert.d.ts +18 -0
- package/dist/Feedback/Alert/AlertClose.d.ts +3 -0
- package/dist/Feedback/Alert/AlertDescription.d.ts +3 -0
- package/dist/Feedback/Alert/AlertIcon.d.ts +3 -0
- package/dist/Feedback/Alert/AlertTitle.d.ts +3 -0
- package/dist/Feedback/Alert/AlertToggle.d.ts +3 -0
- package/dist/Feedback/Alert/alert-context.d.ts +12 -0
- package/dist/Feedback/Alert/index.d.ts +7 -0
- package/dist/Feedback/Bullet/Bullet.d.ts +7 -0
- package/dist/Feedback/Bullet/index.d.ts +7 -0
- package/dist/Feedback/Dialog/Dialog.d.ts +12 -0
- package/dist/Feedback/Dialog/DialogContent.d.ts +6 -0
- package/dist/Feedback/Dialog/DialogDescription.d.ts +3 -0
- package/dist/Feedback/Dialog/DialogOverlay.d.ts +4 -0
- package/dist/Feedback/Dialog/DialogTitle.d.ts +3 -0
- package/dist/Feedback/Dialog/DialogTwoPanelContent.d.ts +8 -0
- package/dist/Feedback/Dialog/index.d.ts +7 -0
- package/dist/Feedback/Popover/Popover.d.ts +14 -0
- package/dist/Feedback/Popover/PopoverContent.d.ts +6 -0
- package/dist/Feedback/Popover/index.d.ts +3 -0
- package/dist/Feedback/StatusBadge/StatusBadge.d.ts +6 -0
- package/dist/Feedback/StatusBadge/index.d.ts +9 -0
- package/dist/Feedback/Tooltip/Tooltip.d.ts +16 -0
- package/dist/Feedback/Tooltip/TooltipContent.d.ts +6 -0
- package/dist/Feedback/Tooltip/index.d.ts +2 -0
- package/dist/Forms/Field/FieldGroup/FieldGroup.d.ts +4 -0
- package/dist/Forms/Field/FieldLabel/FieldLabel.d.ts +2 -0
- package/dist/Forms/Field/FieldMessage/FieldMessage.d.ts +5 -0
- package/dist/Forms/Field/index.d.ts +3 -0
- package/dist/Forms/Inputs/Combobox/Combobox.d.ts +27 -0
- package/dist/Forms/Inputs/Combobox/ComboboxChipsInput.d.ts +12 -0
- package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts +13 -0
- package/dist/Forms/Inputs/Combobox/ComboboxEmpty.d.ts +10 -0
- package/dist/Forms/Inputs/Combobox/ComboboxGroup.d.ts +7 -0
- package/dist/Forms/Inputs/Combobox/ComboboxInput.d.ts +14 -0
- package/dist/Forms/Inputs/Combobox/ComboboxItem.d.ts +10 -0
- package/dist/Forms/Inputs/Combobox/ComboboxSeparator.d.ts +10 -0
- package/dist/Forms/Inputs/Combobox/context.d.ts +26 -0
- package/dist/Forms/Inputs/Combobox/index.d.ts +8 -0
- package/dist/Forms/Inputs/Combobox/types.d.ts +8 -0
- package/dist/Forms/Inputs/InputGroup/InputGroup.d.ts +2 -0
- package/dist/Forms/Inputs/InputNumber/InputNumber.d.ts +18 -0
- package/dist/Forms/Inputs/InputNumber/InputNumberContent.d.ts +2 -0
- package/dist/Forms/Inputs/InputNumber/InputNumberContext.d.ts +20 -0
- package/dist/Forms/Inputs/InputNumber/InputNumberDecrement.d.ts +3 -0
- package/dist/Forms/Inputs/InputNumber/InputNumberIncrement.d.ts +3 -0
- package/dist/Forms/Inputs/InputNumber/InputNumberInput.d.ts +3 -0
- package/dist/Forms/Inputs/InputNumber/index.d.ts +5 -0
- package/dist/Forms/Inputs/InputText/InputText.d.ts +14 -0
- package/dist/Forms/Inputs/Toggle/Checkbox/Checkbox.d.ts +11 -0
- package/dist/Forms/Inputs/Toggle/RadioButton/RadioButton.d.ts +7 -0
- package/dist/Forms/Inputs/Toggle/RadioButton/RadioGroup.d.ts +9 -0
- package/dist/Forms/Inputs/Toggle/Switch/Switch.d.ts +13 -0
- package/dist/Forms/Inputs/Toggle/Switch/constants.d.ts +1 -0
- package/dist/Forms/Inputs/Toggle/ToggleDescription/ToggleDescription.d.ts +5 -0
- package/dist/Forms/Inputs/Toggle/ToggleGroup/ToggleGroup.d.ts +7 -0
- package/dist/Forms/Inputs/Toggle/ToggleLabel/ToggleLabel.d.ts +5 -0
- package/dist/Forms/Inputs/Toggle/index.d.ts +8 -0
- package/dist/Forms/Inputs/index.d.ts +5 -0
- package/dist/Layout/Resizable/Resizable.d.ts +13 -0
- package/dist/Layout/Resizable/ResizableHandle.d.ts +21 -0
- package/dist/Layout/Resizable/ResizablePanel.d.ts +20 -0
- package/dist/Layout/Resizable/index.d.ts +3 -0
- package/dist/Navigation/Accordion/Accordion.d.ts +4 -0
- package/dist/Navigation/Accordion/AccordionContent.d.ts +3 -0
- package/dist/Navigation/Accordion/AccordionItem.d.ts +3 -0
- package/dist/Navigation/Accordion/AccordionTrigger.d.ts +3 -0
- package/dist/Navigation/Accordion/index.d.ts +4 -0
- package/dist/Navigation/Breadcrumb/Breadcrumb.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbEllipsis.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbItem.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbLink.d.ts +7 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbList.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbPage.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/BreadcrumbSeparator.d.ts +2 -0
- package/dist/Navigation/Breadcrumb/index.d.ts +7 -0
- package/dist/Navigation/Tabs/Tabs.d.ts +4 -0
- package/dist/Navigation/Tabs/TabsContent.d.ts +3 -0
- package/dist/Navigation/Tabs/TabsList.d.ts +3 -0
- package/dist/Navigation/Tabs/TabsTrigger.d.ts +3 -0
- package/dist/Navigation/Tabs/index.d.ts +4 -0
- package/dist/Transitions/TransitionBase.d.ts +30 -0
- package/dist/Transitions/TransitionBounce/TransitionBounce.d.ts +7 -0
- package/dist/Transitions/TransitionBounce/index.d.ts +1 -0
- package/dist/Transitions/TransitionExpand/TransitionExpand.d.ts +7 -0
- package/dist/Transitions/TransitionExpand/index.d.ts +1 -0
- package/dist/Transitions/TransitionFade/TransitionFade.d.ts +7 -0
- package/dist/Transitions/TransitionFade/index.d.ts +1 -0
- package/dist/Transitions/TransitionFlip/TransitionFlip.d.ts +13 -0
- package/dist/Transitions/TransitionFlip/index.d.ts +1 -0
- package/dist/Transitions/TransitionSlideX/TransitionSlideX.d.ts +10 -0
- package/dist/Transitions/TransitionSlideX/index.d.ts +1 -0
- package/dist/Transitions/TransitionSlideY/TransitionSlideY.d.ts +10 -0
- package/dist/Transitions/TransitionSlideY/index.d.ts +1 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/main.d.ts +25 -0
- package/dist/react-design-system.css +1 -0
- package/dist/react-design-system.js +19498 -0
- package/dist/react-design-system.umd.cjs +165 -0
- package/package.json +94 -0
- package/src/assets/styles/mainTheme.css +1 -0
- package/src/assets/styles/primitives.css +98 -0
- package/src/assets/styles/theme-v2.css +298 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Sesame HR
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @sesamehr/react-design-system
|
|
2
|
+
|
|
3
|
+
React component library and design tokens for the Sesame HR design system.
|
|
4
|
+
|
|
5
|
+
Accessible, composable components built on [Radix UI](https://www.radix-ui.com/) and styled with [Tailwind CSS v4](https://tailwindcss.com/), shipped as an ESM + UMD bundle with full TypeScript types.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @sesamehr/react-design-system
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
This package has peer dependencies you must install alongside it:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom tailwindcss
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
| Peer | Supported range |
|
|
20
|
+
| ------------- | -------------------- |
|
|
21
|
+
| `react` | `^18.3.0 \|\| ^19.0.0` |
|
|
22
|
+
| `react-dom` | `^18.3.0 \|\| ^19.0.0` |
|
|
23
|
+
| `tailwindcss` | `^4.1.7` |
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
Import the stylesheet once at your app root, then use the components:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// main.tsx / App entry — import the compiled styles once
|
|
31
|
+
import '@sesamehr/react-design-system/style.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button, Avatar, Alert } from '@sesamehr/react-design-system';
|
|
36
|
+
|
|
37
|
+
export function Example() {
|
|
38
|
+
return (
|
|
39
|
+
<div>
|
|
40
|
+
<Avatar initials="SH" size="lg" />
|
|
41
|
+
<Button variant="default">Save</Button>
|
|
42
|
+
<Alert>Saved successfully.</Alert>
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Design tokens
|
|
49
|
+
|
|
50
|
+
The compiled stylesheet already includes the tokens. If you want the raw token
|
|
51
|
+
layers (e.g. to `@reference` them from your own Tailwind setup), they are
|
|
52
|
+
exported separately:
|
|
53
|
+
|
|
54
|
+
```css
|
|
55
|
+
@import '@sesamehr/react-design-system/assets/styles/mainTheme.css';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### `cn` utility
|
|
59
|
+
|
|
60
|
+
The class-merging helper used internally is also exported:
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
import { cn } from '@sesamehr/react-design-system/lib/utils';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Components
|
|
67
|
+
|
|
68
|
+
- **Buttons** — Button
|
|
69
|
+
- **Forms** — Input, InputNumber, InputGroup, Combobox, Checkbox, Switch, RadioButton, Toggle, Field
|
|
70
|
+
- **Data** — Table (sorting, selection, pinning, row drag & drop, pagination), TablePagination, Avatar cells
|
|
71
|
+
- **Display** — Avatar, AvatarGroup, Badge, PaymentCard
|
|
72
|
+
- **Feedback** — Alert, Dialog, Popover, Tooltip, StatusBadge, Bullet
|
|
73
|
+
- **Navigation** — Tabs, Accordion, Breadcrumb
|
|
74
|
+
- **Layout** — Resizable
|
|
75
|
+
- **Transitions** — Fade, Expand, Flip, Bounce, SlideX, SlideY
|
|
76
|
+
|
|
77
|
+
All components ship with TypeScript definitions and support `ref` forwarding.
|
|
78
|
+
|
|
79
|
+
## Dark mode
|
|
80
|
+
|
|
81
|
+
Components react to the `dark` class on a parent element (typically `<html>`):
|
|
82
|
+
|
|
83
|
+
```ts
|
|
84
|
+
document.documentElement.classList.toggle('dark', isDark);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
[MIT](./LICENSE) © Sesame HR
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ButtonVariants } from '.';
|
|
2
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
variant?: ButtonVariants['variant'];
|
|
4
|
+
size?: ButtonVariants['size'];
|
|
5
|
+
/** Render as the child element instead of a `<button>` (Radix Slot). */
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Button — mirrors `@orxata/core` Button.
|
|
10
|
+
* `asChild` replaces reka-ui's `<Primitive as-child>` via `@radix-ui/react-slot`.
|
|
11
|
+
*/
|
|
12
|
+
export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
export { Button, type ButtonProps } from './Button';
|
|
3
|
+
export declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "link" | "default" | "success" | "secondary" | "outline" | "destructive" | "ghost" | null | undefined;
|
|
5
|
+
size?: "default" | "icon" | "sm" | "lg" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { UseTableReturn } from './hooks/useTable/useTable';
|
|
3
|
+
import { CellContext, ColumnDef } from './types';
|
|
4
|
+
export interface TableComponentProps<TData = unknown> {
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
enableDragToScroll?: boolean;
|
|
7
|
+
table?: UseTableReturn<TData>;
|
|
8
|
+
/**
|
|
9
|
+
* Cell render prop (replaces the `cell-${field}` scoped slots). Return
|
|
10
|
+
* `undefined` to fall back to the column's `cellSlot`.
|
|
11
|
+
*/
|
|
12
|
+
renderCell?: (field: string, ctx: CellContext<TData> & {
|
|
13
|
+
rowIndex: number;
|
|
14
|
+
}) => ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Header render prop (replaces the `header-${field}` scoped slots). Return
|
|
17
|
+
* `undefined` to fall back to `column.header ?? column.field`.
|
|
18
|
+
*/
|
|
19
|
+
renderHeader?: (field: string, column: ColumnDef<TData>) => ReactNode;
|
|
20
|
+
/** Detail-row render prop (`detail-row` scoped slot). */
|
|
21
|
+
detailRow?: (ctx: {
|
|
22
|
+
row: TData;
|
|
23
|
+
rowIndex: number;
|
|
24
|
+
}) => ReactNode;
|
|
25
|
+
/** Custom bulk header (`bulk-header` slot). Overrides the auto bulk header. */
|
|
26
|
+
bulkHeader?: ReactNode;
|
|
27
|
+
/** Bulk action controls (`bulk-actions` slot). */
|
|
28
|
+
bulkActions?: ReactNode;
|
|
29
|
+
/** Pagination content (`pagination` slot). */
|
|
30
|
+
pagination?: ReactNode;
|
|
31
|
+
/** Empty state content (`empty` slot). */
|
|
32
|
+
empty?: ReactNode;
|
|
33
|
+
/** Left fixed section content (`fixed-left` slot) — custom mode only. */
|
|
34
|
+
fixedLeft?: ReactNode;
|
|
35
|
+
/** Right fixed section content (`fixed-right` slot) — custom mode only. */
|
|
36
|
+
fixedRight?: ReactNode;
|
|
37
|
+
/** Center table content (default slot) — custom mode only. */
|
|
38
|
+
children?: ReactNode;
|
|
39
|
+
}
|
|
40
|
+
export declare function Table<TData = unknown>({ enableDragToScroll, table, renderCell, renderHeader, detailRow: detailRowSlot, bulkHeader, bulkActions, pagination, empty, fixedLeft, fixedRight, children, }: TableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export declare namespace Table {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface TableAvatarProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
2
|
+
/** Image source URL */
|
|
3
|
+
src?: string;
|
|
4
|
+
/** Fallback initials (max 2 characters) */
|
|
5
|
+
initials?: string;
|
|
6
|
+
/** Disabled state */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Full name to display */
|
|
9
|
+
name: string;
|
|
10
|
+
/** Subtitle (department, role, etc.) */
|
|
11
|
+
subtitle?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const TableAvatar: import('react').ForwardRefExoticComponent<TableAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface TableBodyProps extends React.ComponentPropsWithoutRef<'tbody'> {
|
|
2
|
+
/** Enable row drag & drop reordering */
|
|
3
|
+
draggable?: boolean;
|
|
4
|
+
/** Items array for drag reordering (required when draggable=true) */
|
|
5
|
+
items?: unknown[];
|
|
6
|
+
/** Called when items are reordered */
|
|
7
|
+
onReorder?: (items: unknown[]) => void;
|
|
8
|
+
/**
|
|
9
|
+
* Derives the sortable id for each item. MUST match the `dragId` passed to
|
|
10
|
+
* each child `TableRow`. Defaults to the array index — pass a stable key
|
|
11
|
+
* (e.g. `(row) => row.id`) whenever rows are keyed by something other than
|
|
12
|
+
* their position, or reordering across renders will misbehave.
|
|
13
|
+
*/
|
|
14
|
+
getItemId?: (item: unknown, index: number) => string | number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Styled `<tbody>`. When `draggable`, wraps rows in a dnd-kit sortable
|
|
18
|
+
* context — replacing the Vue `vue-draggable-plus` (Sortable.js) integration.
|
|
19
|
+
* Sortable item ids are derived from the index of each `items` entry.
|
|
20
|
+
*/
|
|
21
|
+
export declare const TableBody: import('react').ForwardRefExoticComponent<TableBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface TableBulkHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
3
|
+
selectedCount?: number;
|
|
4
|
+
total?: number;
|
|
5
|
+
/** Custom feedback content (replaces the default text). */
|
|
6
|
+
feedback?: (props: {
|
|
7
|
+
selectedCount: number;
|
|
8
|
+
total: number;
|
|
9
|
+
}) => ReactNode;
|
|
10
|
+
/** Action controls rendered on the right. */
|
|
11
|
+
actions?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare const TableBulkHeader: import('react').ForwardRefExoticComponent<TableBulkHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ColumnAlign } from '../types';
|
|
2
|
+
export interface TableCellProps extends React.ComponentPropsWithoutRef<'td'> {
|
|
3
|
+
align?: ColumnAlign;
|
|
4
|
+
fixed?: 'left' | 'right';
|
|
5
|
+
/** CSS value for multiple fixed columns, e.g. '48px' */
|
|
6
|
+
fixedOffset?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const TableCell: import('react').ForwardRefExoticComponent<TableCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ColumnDef } from '../types';
|
|
3
|
+
export interface TableColumnVisibilityProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onToggle'> {
|
|
4
|
+
columns: ColumnDef[];
|
|
5
|
+
visibility?: Record<string, boolean>;
|
|
6
|
+
/** Custom header content (replaces the default "Columns" label). */
|
|
7
|
+
header?: ReactNode;
|
|
8
|
+
onToggle?: (field: string) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const TableColumnVisibility: import('react').ForwardRefExoticComponent<TableColumnVisibilityProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface TableDragCellProps extends React.ComponentPropsWithoutRef<'td'> {
|
|
2
|
+
header?: boolean;
|
|
3
|
+
fixed?: boolean;
|
|
4
|
+
fixedOffset?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare const TableDragCell: import('react').ForwardRefExoticComponent<TableDragCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type TableEmptyProps = React.ComponentPropsWithoutRef<'div'>;
|
|
2
|
+
/** Empty state display. Renders `children`, or a default message. */
|
|
3
|
+
export declare const TableEmpty: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface TableExpandCellProps extends React.ComponentPropsWithoutRef<'td'> {
|
|
2
|
+
expanded?: boolean;
|
|
3
|
+
header?: boolean;
|
|
4
|
+
onToggle?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const TableExpandCell: import('react').ForwardRefExoticComponent<TableExpandCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface TableFixedContextValue {
|
|
3
|
+
hasLeftFixed: boolean;
|
|
4
|
+
hasRightFixed: boolean;
|
|
5
|
+
}
|
|
6
|
+
export declare const TableFixedContext: import('react').Context<TableFixedContextValue>;
|
|
7
|
+
export interface TableFixedProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
8
|
+
loading?: boolean;
|
|
9
|
+
enableDragToScroll?: boolean;
|
|
10
|
+
/** e.g., '48px' for checkbox column */
|
|
11
|
+
leftWidth?: string;
|
|
12
|
+
/** e.g., '48px' for actions column */
|
|
13
|
+
rightWidth?: string;
|
|
14
|
+
/** Content of the left fixed section (`fixed-left` slot). */
|
|
15
|
+
fixedLeft?: ReactNode;
|
|
16
|
+
/** Content of the right fixed section (`fixed-right` slot). */
|
|
17
|
+
fixedRight?: ReactNode;
|
|
18
|
+
/** Bulk header content (`bulk-header` slot). */
|
|
19
|
+
bulkHeader?: ReactNode;
|
|
20
|
+
/** Pagination content (`pagination` slot). */
|
|
21
|
+
pagination?: ReactNode;
|
|
22
|
+
/** Empty state content (`empty` slot). */
|
|
23
|
+
empty?: ReactNode;
|
|
24
|
+
/** Center scrollable table content (default slot). */
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
}
|
|
27
|
+
export declare const TableFixed: import('react').ForwardRefExoticComponent<TableFixedProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TableFixed, TableFixedContext, type TableFixedProps, type TableFixedContextValue, } from './TableFixed';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>;
|
|
2
|
+
/** Styled `<thead>` wrapping its children in a header row. */
|
|
3
|
+
export declare const TableHead: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import('react').RefAttributes<HTMLTableSectionElement>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ColumnAlign } from '../types';
|
|
2
|
+
export interface TableHeaderCellProps extends Omit<React.ComponentPropsWithoutRef<'th'>, 'onDrop'> {
|
|
3
|
+
sortable?: boolean;
|
|
4
|
+
sorted?: boolean;
|
|
5
|
+
sortDirection?: 'asc' | 'desc' | null;
|
|
6
|
+
resizable?: boolean;
|
|
7
|
+
resizing?: boolean;
|
|
8
|
+
draggable?: boolean;
|
|
9
|
+
align?: ColumnAlign;
|
|
10
|
+
width?: string;
|
|
11
|
+
fixed?: 'left' | 'right';
|
|
12
|
+
/** CSS value for multiple fixed columns */
|
|
13
|
+
fixedOffset?: string;
|
|
14
|
+
onSort?: () => void;
|
|
15
|
+
onResizeStart?: (event: React.MouseEvent | React.TouchEvent) => void;
|
|
16
|
+
onColumnDrop?: (sourceField: string) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare const TableHeaderCell: import('react').ForwardRefExoticComponent<TableHeaderCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface TablePaginationProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
2
|
+
page?: number;
|
|
3
|
+
pageSize?: number;
|
|
4
|
+
pageCount?: number;
|
|
5
|
+
total?: number;
|
|
6
|
+
pageSizes?: number[];
|
|
7
|
+
onPageChange?: (page: number) => void;
|
|
8
|
+
onPageSizeChange?: (pageSize: number) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const TablePagination: import('react').ForwardRefExoticComponent<TablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface TableRowProps extends React.ComponentPropsWithoutRef<'tr'> {
|
|
2
|
+
selected?: boolean;
|
|
3
|
+
expanded?: boolean;
|
|
4
|
+
/**
|
|
5
|
+
* Sortable id for row drag & drop. When set, the row becomes draggable and
|
|
6
|
+
* MUST live inside a `<TableBody draggable>` (which provides the dnd-kit
|
|
7
|
+
* context). The value has to match the id produced by TableBody's `getItemId`.
|
|
8
|
+
*/
|
|
9
|
+
dragId?: string | number;
|
|
10
|
+
}
|
|
11
|
+
export declare const TableRow: import('react').ForwardRefExoticComponent<TableRowProps & import('react').RefAttributes<HTMLTableRowElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bridges a sortable `TableRow` to its drag handle (`TableDragCell`).
|
|
3
|
+
*
|
|
4
|
+
* `useSortable` puts the node ref + transform on the `<tr>`, but the drag
|
|
5
|
+
* *activator* (the grip icon) lives in a child cell. This context passes the
|
|
6
|
+
* activator ref + attributes/listeners down so the grip — and only the grip —
|
|
7
|
+
* starts a drag, instead of the whole row.
|
|
8
|
+
*
|
|
9
|
+
* Typed loosely on purpose: dnd-kit's attribute/listener maps don't line up
|
|
10
|
+
* cleanly with intrinsic element props, and they are only ever spread.
|
|
11
|
+
*/
|
|
12
|
+
export interface RowDragHandle {
|
|
13
|
+
attributes: Record<string, unknown>;
|
|
14
|
+
listeners: Record<string, unknown> | undefined;
|
|
15
|
+
setActivatorNodeRef: (element: HTMLElement | null) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const RowDragContext: import('react').Context<RowDragHandle | null>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export interface TableRowExpandedProps extends React.ComponentPropsWithoutRef<'tr'> {
|
|
2
|
+
expanded?: boolean;
|
|
3
|
+
colspan?: number;
|
|
4
|
+
}
|
|
5
|
+
export declare const TableRowExpanded: import('react').ForwardRefExoticComponent<TableRowExpandedProps & import('react').RefAttributes<HTMLTableRowElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface TableSelectCellProps extends Omit<React.ComponentPropsWithoutRef<'td'>, 'onChange'> {
|
|
2
|
+
checked?: boolean | 'indeterminate';
|
|
3
|
+
header?: boolean;
|
|
4
|
+
/** Usually fixed to left */
|
|
5
|
+
fixed?: boolean;
|
|
6
|
+
fixedOffset?: string;
|
|
7
|
+
onChange?: (checked: boolean) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const TableSelectCell: import('react').ForwardRefExoticComponent<TableSelectCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export { useTable } from './useTable/useTable';
|
|
2
|
+
export type { UseTableOptions, UseTableReturn, } from './useTable/useTable.types';
|
|
3
|
+
export { useTableSelection } from './useTableSelection/useTableSelection';
|
|
4
|
+
export type { SelectionOptions, SelectionInstance, SelectionPluginDef, } from './useTableSelection/useTableSelection.types';
|
|
5
|
+
export { useTableSorting } from './useTableSorting/useTableSorting';
|
|
6
|
+
export type { SortingOptions, SortingInstance, SortingPluginDef, } from './useTableSorting/useTableSorting.types';
|
|
7
|
+
export { useTablePagination } from './useTablePagination/useTablePagination';
|
|
8
|
+
export type { UseTablePaginationOptions, UseTablePaginationReturn, } from './useTablePagination/useTablePagination';
|
|
9
|
+
export { useTableDetailRow } from './useTableDetailRow/useTableDetailRow';
|
|
10
|
+
export type { DetailRowOptions, DetailRowInstance, DetailRowPluginDef, } from './useTableDetailRow/useTableDetailRow.types';
|
|
11
|
+
export { useTablePinning } from './useTablePinning/useTablePinning';
|
|
12
|
+
export type { PinningOptions, PinningInstance, PinningPluginDef, CellInfo, HeaderInfo, } from './useTablePinning/useTablePinning.types';
|
|
13
|
+
export { useTableColumns } from './useTableColumns/useTableColumns';
|
|
14
|
+
export type { ColumnsOptions, ColumnsInstance, ColumnsPluginDef, } from './useTableColumns/useTableColumns.types';
|
|
15
|
+
export { useScrollShadow } from './useScrollShadow/useScrollShadow';
|
|
16
|
+
export type { UseScrollShadowOptions, UseScrollShadowReturn, } from './useScrollShadow/useScrollShadow';
|
|
17
|
+
export { useDragToScroll } from './useDragToScroll/useDragToScroll';
|
|
18
|
+
export type { UseDragToScrollOptions, UseDragToScrollReturn, } from './useDragToScroll/useDragToScroll';
|
|
19
|
+
export { useFixedColumns } from './useFixedColumns';
|
|
20
|
+
export type { UseFixedColumnsOptions } from './useFixedColumns';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface UseDragToScrollOptions {
|
|
3
|
+
/** Whether drag-to-scroll is enabled */
|
|
4
|
+
enabled?: boolean | (() => boolean);
|
|
5
|
+
/** Cursor to show while dragging */
|
|
6
|
+
cursor?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface UseDragToScrollReturn {
|
|
9
|
+
/** Whether the user is currently dragging to scroll */
|
|
10
|
+
isDragging: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Hook for drag-to-scroll functionality.
|
|
14
|
+
* Allows horizontal scrolling by dragging with the mouse.
|
|
15
|
+
*
|
|
16
|
+
* Note: If using row drag & drop, set enabled=false to avoid conflicts.
|
|
17
|
+
* Use @dnd-kit for row reordering instead.
|
|
18
|
+
*/
|
|
19
|
+
export declare function useDragToScroll(elementRef: RefObject<HTMLElement | null>, options?: UseDragToScrollOptions): UseDragToScrollReturn;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface UseFixedColumnsOptions {
|
|
3
|
+
leftWidth?: number;
|
|
4
|
+
rightWidth?: number;
|
|
5
|
+
}
|
|
6
|
+
export declare function useFixedColumns(scrollContainerRef: RefObject<HTMLElement | null>, leftContainerRef: RefObject<HTMLElement | null>, rightContainerRef: RefObject<HTMLElement | null>): {
|
|
7
|
+
syncRowHeights: () => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface UseScrollShadowOptions {
|
|
3
|
+
/** Threshold in pixels to consider content as scrollable */
|
|
4
|
+
threshold?: number;
|
|
5
|
+
}
|
|
6
|
+
export interface UseScrollShadowReturn {
|
|
7
|
+
/** Whether to show left shadow (content hidden on left) */
|
|
8
|
+
showLeftShadow: boolean;
|
|
9
|
+
/** Whether to show right shadow (content hidden on right) */
|
|
10
|
+
showRightShadow: boolean;
|
|
11
|
+
/** Manually update shadow state */
|
|
12
|
+
updateShadows: () => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function useScrollShadow(elementRef: RefObject<HTMLElement | null>, options?: UseScrollShadowOptions): UseScrollShadowReturn;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Table as TanstackTable } from '@tanstack/react-table';
|
|
2
|
+
import { ColumnDef, TableMode } from '../../types';
|
|
3
|
+
import { ColumnsInstance, ColumnsPluginDef } from '../useTableColumns/useTableColumns.types';
|
|
4
|
+
import { DetailRowInstance, DetailRowPluginDef } from '../useTableDetailRow/useTableDetailRow.types';
|
|
5
|
+
import { PinningInstance, PinningPluginDef } from '../useTablePinning/useTablePinning.types';
|
|
6
|
+
import { SelectionInstance, SelectionPluginDef } from '../useTableSelection/useTableSelection.types';
|
|
7
|
+
import { SortingInstance, SortingPluginDef } from '../useTableSorting/useTableSorting.types';
|
|
8
|
+
/** A value that may be provided directly or via a getter function. */
|
|
9
|
+
export type MaybeGetter<T> = T | (() => T);
|
|
10
|
+
export interface UseTableOptions<TData> {
|
|
11
|
+
/** Table data */
|
|
12
|
+
data: MaybeGetter<TData[]>;
|
|
13
|
+
/** Column definitions */
|
|
14
|
+
columns?: MaybeGetter<ColumnDef<TData>[]>;
|
|
15
|
+
/** Table mode: 'client' for local data, 'server' for remote data */
|
|
16
|
+
mode?: TableMode;
|
|
17
|
+
/** Whether the table data is currently loading */
|
|
18
|
+
loading?: MaybeGetter<boolean>;
|
|
19
|
+
/** Row key field or getter function */
|
|
20
|
+
rowKey?: string | ((row: TData) => string | number);
|
|
21
|
+
/** Selection plugin (created with useTableSelection) */
|
|
22
|
+
selection?: SelectionPluginDef<TData>;
|
|
23
|
+
/** Detail row plugin (created with useTableDetailRow) */
|
|
24
|
+
detailRow?: DetailRowPluginDef<TData>;
|
|
25
|
+
/** Sorting plugin (created with useTableSorting) */
|
|
26
|
+
sorting?: SortingPluginDef;
|
|
27
|
+
/** Columns plugin (created with useTableColumns) */
|
|
28
|
+
columnManager?: ColumnsPluginDef;
|
|
29
|
+
/** Pinning plugin (created with useTablePinning) */
|
|
30
|
+
pinning?: PinningPluginDef<TData>;
|
|
31
|
+
}
|
|
32
|
+
export interface UseTableReturn<TData> {
|
|
33
|
+
/** TanStack table instance */
|
|
34
|
+
instance: TanstackTable<TData>;
|
|
35
|
+
/** Rows from the row model */
|
|
36
|
+
rows: TData[];
|
|
37
|
+
/** Column definitions */
|
|
38
|
+
columns: ColumnDef<TData>[];
|
|
39
|
+
/** Get unique key for a row */
|
|
40
|
+
getRowKey: (row: TData, index: number) => string | number;
|
|
41
|
+
/** Table mode (client/server) */
|
|
42
|
+
mode: TableMode;
|
|
43
|
+
/** Whether the table data is currently loading */
|
|
44
|
+
loading: boolean;
|
|
45
|
+
/** Selection plugin instance (if provided) */
|
|
46
|
+
selection?: SelectionInstance;
|
|
47
|
+
/** Detail row plugin instance (if provided) */
|
|
48
|
+
detailRow?: DetailRowInstance;
|
|
49
|
+
/** Sorting plugin instance (if provided) */
|
|
50
|
+
sorting?: SortingInstance;
|
|
51
|
+
/** Columns plugin instance (if provided) */
|
|
52
|
+
columnManager?: ColumnsInstance;
|
|
53
|
+
/** Pinning plugin instance (if provided) */
|
|
54
|
+
pinning?: PinningInstance<TData>;
|
|
55
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ColumnOrderState, ColumnResizeMode, ColumnVisibilityState } from '../../types';
|
|
2
|
+
export interface ColumnsOptions {
|
|
3
|
+
/** Enable column resizing */
|
|
4
|
+
enableResizing?: boolean;
|
|
5
|
+
/** Resize mode: 'onChange' or 'onEnd' */
|
|
6
|
+
resizeMode?: ColumnResizeMode;
|
|
7
|
+
/** Initial visibility state */
|
|
8
|
+
initialVisibility?: ColumnVisibilityState;
|
|
9
|
+
/** Initial column order */
|
|
10
|
+
initialOrder?: ColumnOrderState;
|
|
11
|
+
}
|
|
12
|
+
export interface ColumnsInstance {
|
|
13
|
+
visibility: ColumnVisibilityState;
|
|
14
|
+
isVisible: (field: string) => boolean;
|
|
15
|
+
toggleVisibility: (field: string) => void;
|
|
16
|
+
setVisibility: (visibility: ColumnVisibilityState) => void;
|
|
17
|
+
showColumn: (field: string) => void;
|
|
18
|
+
hideColumn: (field: string) => void;
|
|
19
|
+
order: ColumnOrderState;
|
|
20
|
+
setOrder: (order: ColumnOrderState) => void;
|
|
21
|
+
resetOrder: () => void;
|
|
22
|
+
moveColumn: (field: string, toIndex: number) => void;
|
|
23
|
+
sizing: Record<string, number>;
|
|
24
|
+
getSize: (field: string) => number;
|
|
25
|
+
setSize: (field: string, size: number) => void;
|
|
26
|
+
}
|
|
27
|
+
export interface ColumnsPluginDef {
|
|
28
|
+
type: 'columns';
|
|
29
|
+
options: ColumnsOptions;
|
|
30
|
+
create: (tableInstance: unknown, defaultOrder: () => string[]) => ColumnsInstance;
|
|
31
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface DetailRowOptions {
|
|
2
|
+
/** Initially expanded row keys */
|
|
3
|
+
initial?: (string | number)[];
|
|
4
|
+
/** Allow multiple rows to be expanded at once (default: true) */
|
|
5
|
+
allowMultiple?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface DetailRowInstance {
|
|
8
|
+
/** Expansion state: Record<rowKey, boolean> or true for all */
|
|
9
|
+
expanded: Record<string, boolean> | boolean;
|
|
10
|
+
/** Check if a specific row is expanded */
|
|
11
|
+
isExpanded: (key: string | number) => boolean;
|
|
12
|
+
/** Whether all rows are expanded */
|
|
13
|
+
isAllExpanded: boolean;
|
|
14
|
+
/** Toggle expansion for a specific row */
|
|
15
|
+
toggle: (key: string | number) => void;
|
|
16
|
+
/** Toggle expansion for all rows */
|
|
17
|
+
toggleAll: () => void;
|
|
18
|
+
/** Expand specific rows */
|
|
19
|
+
expand: (keys: (string | number)[]) => void;
|
|
20
|
+
/** Collapse specific rows */
|
|
21
|
+
collapse: (keys: (string | number)[]) => void;
|
|
22
|
+
/** Collapse all rows */
|
|
23
|
+
collapseAll: () => void;
|
|
24
|
+
}
|
|
25
|
+
export interface DetailRowPluginDef<TData = unknown> {
|
|
26
|
+
type: 'detailRow';
|
|
27
|
+
options: DetailRowOptions;
|
|
28
|
+
create: (rows: TData[], getRowKey: (row: TData, index: number) => string | number) => DetailRowInstance;
|
|
29
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { UseTableReturn } from '../useTable/useTable';
|
|
2
|
+
import { MaybeGetter } from '../useTable/useTable.types';
|
|
3
|
+
export interface UseTablePaginationOptions {
|
|
4
|
+
initialPageSize?: number;
|
|
5
|
+
/** Total item count for server-side pagination (overrides rows.length) */
|
|
6
|
+
totalCount?: MaybeGetter<number>;
|
|
7
|
+
}
|
|
8
|
+
export interface UseTablePaginationReturn {
|
|
9
|
+
/** Current page number (1-based) */
|
|
10
|
+
page: number;
|
|
11
|
+
/** Items per page */
|
|
12
|
+
pageSize: number;
|
|
13
|
+
/** Total number of pages */
|
|
14
|
+
pageCount: number;
|
|
15
|
+
/** Total number of items */
|
|
16
|
+
total: number;
|
|
17
|
+
/** Go to specific page (1-based) */
|
|
18
|
+
setPage: (page: number) => void;
|
|
19
|
+
/** Set page size */
|
|
20
|
+
setPageSize: (size: number) => void;
|
|
21
|
+
/** Go to next page */
|
|
22
|
+
nextPage: () => void;
|
|
23
|
+
/** Go to previous page */
|
|
24
|
+
prevPage: () => void;
|
|
25
|
+
/** Go to first page */
|
|
26
|
+
firstPage: () => void;
|
|
27
|
+
/** Go to last page */
|
|
28
|
+
lastPage: () => void;
|
|
29
|
+
/** Can go to next page */
|
|
30
|
+
canNextPage: boolean;
|
|
31
|
+
/** Can go to previous page */
|
|
32
|
+
canPrevPage: boolean;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Pagination is left *uncontrolled* — owned by the TanStack instance — on
|
|
36
|
+
* purpose. The previous version held page state in a local `useState` and pushed
|
|
37
|
+
* it onto the instance via an `onPaginationChange` + `setOptions` effect, which
|
|
38
|
+
* applied the change one render too late, so the visible rows never moved (the
|
|
39
|
+
* "pagination doesn't work" bug). Driving the instance directly
|
|
40
|
+
* (`nextPage()`, `setPageIndex()`, ...) updates its internal state synchronously
|
|
41
|
+
* and re-renders the consumer, and `useTable` now reads the row model fresh each
|
|
42
|
+
* render, so the page actually changes.
|
|
43
|
+
*/
|
|
44
|
+
export declare function useTablePagination<TData>(table: UseTableReturn<TData>, options?: UseTablePaginationOptions): UseTablePaginationReturn;
|