UNPKG

@payfit/unity-components

Version:

192 lines (191 loc) 6.43 kB
import { default as React, PropsWithChildren } from 'react'; import { VariantProps } from '@payfit/unity-themes'; export interface TableRootProps extends PropsWithChildren { /** * The minimum number of rows to display, affecting the minimum height */ minRows?: number; /** * The maximum number of rows to display, affecting the maximum height */ maxRows?: number; } /** * @component * The `TableRoot` component serves as the container for the table and its pagination controls. * It provides styling and layout for the table, including min and max height constraints. * The pagination remains fixed while the table content can scroll horizontally if needed. * @param {TableRootProps} props - The props for the `TableRoot` component * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height * @param {ReactNode} props.children - The table and pagination components * @example * ```tsx * import { TableRoot, Table } from '@payfit/unity-components' * * <TableRoot minRows={5} maxRows={20}> * <Table> * <TableHeader>...</TableHeader> * <TableBody>...</TableBody> * </Table> * <TablePagination pageCount={5} rowCount={100} rowsPerPage={20} currentPage={1} /> * </TableRoot> * ``` * @see {@link TableRootProps} for all available props * @see {@link Table} for the table component * @see {@link TablePagination} for the pagination component */ declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLDivElement>>; declare const tableVariant: import('tailwind-variants').TVReturnType<{ horizontalScroll: { true: { table: string; }; false: { wrapper: string; table: string; }; }; layout: { fixed: { wrapper: string; table: string; }; auto: { table: string; }; }; }, { wrapper: string[]; table: string[]; }, undefined, { horizontalScroll: { true: { table: string; }; false: { wrapper: string; table: string; }; }; layout: { fixed: { wrapper: string; table: string; }; auto: { table: string; }; }; }, { wrapper: string[]; table: string[]; }, import('tailwind-variants').TVReturnType<{ horizontalScroll: { true: { table: string; }; false: { wrapper: string; table: string; }; }; layout: { fixed: { wrapper: string; table: string; }; auto: { table: string; }; }; }, { wrapper: string[]; table: string[]; }, undefined, unknown, unknown, undefined>>; export interface TableProps extends React.HTMLAttributes<HTMLTableElement> { /** * The label for the table. This is used for accessibility purposes. */ label?: string; /** * The description for the table. This is used for accessibility purposes. * ``` */ description?: string; /** * Enables horizontal scrolling if the table overflows its container. Enabled by default. */ isHorizontalScrollEnabled?: boolean; /** * Enable internal scroll virtualization * @default false */ enableVirtualization?: boolean; /** * Estimated row height in pixels used by the virtualizer. Default ~40 (uy:h-500) * @default 40 */ estimatedRowHeight?: number; /** * Number of extra rows rendered above/below the viewport * @default 5 */ overscan?: number; /** * Controls the table layout algorithm: * - `'auto'` (default): Columns adapt to content. Enables horizontal scrolling. Best for flexible, content-driven tables. * - `'fixed'`: Columns use explicit widths from headers. Disables horizontal scrolling. Best for predictable layouts that fit the container. * @default 'auto' */ layout?: VariantProps<typeof tableVariant>['layout']; } export interface TableImperativeHandler { /** * Scrolls the table contents to the top. */ scrollToTop: () => void; } /** * The `Table` component provides a fully accessible, keyboard-navigable data table with support for row and column headers, * pagination, and empty states. It follows WAI-ARIA grid pattern for accessibility. * The component supports two layout modes: * - **Auto layout** (default): Columns adapt to content with horizontal scrolling enabled * - **Fixed layout**: Explicit column widths that fit the container without horizontal scrolling * @param {TableProps} props - The props for the `Table` component * @example * ```tsx * import { Table, TableRoot, TableHeader, TableBody, TableRow, TableCell, TableColumnHeader } from '@payfit/unity-components' * * <TableRoot> * <Table label="Employee data" description="List of employees with their details"> * <TableHeader> * <TableColumnHeader>Name</TableColumnHeader> * <TableColumnHeader>Position</TableColumnHeader> * <TableColumnHeader>Department</TableColumnHeader> * </TableHeader> * <TableBody> * <TableRow> * <TableCell isRowHeader>John Doe</TableCell> * <TableCell>Developer</TableCell> * <TableCell>Engineering</TableCell> * </TableRow> * </TableBody> * </Table> * </TableRoot> * ``` * @see {@link TableProps} for all available props * @see {@link TableRoot} for the container component * @see {@link TableHeader} for the header component * @see {@link TableBody} for the body component * @see {@link TableRow} for the row component * @see {@link TableCell} for the cell component * @see {@link TableColumnHeader} for the column header component * @see {@link TablePagination} for the pagination component * @see {@link TableEmptyState} for the empty state component * @remarks * {@link https://unity-components.payfit.io/?path=/story/data-table--default|API and Demos} • * {@link https://payfit.design|Design docs} */ declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableImperativeHandler>>; export { Table, TableRoot };