@payfit/unity-components
Version:
72 lines (71 loc) • 2.61 kB
TypeScript
import { default as React, ReactNode } from 'react';
export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
/**
* Render prop that shows an empty state when there are no rows.
*/
renderEmptyState?: () => ReactNode;
/**
* Render prop that shows an empty or update state that takes precedence over children. Use this to show a state inside the table body when there is already data in the table.
*/
renderDataState?: () => ReactNode | undefined;
}
export declare const tableBody: import('tailwind-variants').TVReturnType<{
isEmpty: {
true: string[];
false: string[];
};
}, undefined, string[], {
isEmpty: {
true: string[];
false: string[];
};
}, undefined, import('tailwind-variants').TVReturnType<{
isEmpty: {
true: string[];
false: string[];
};
}, undefined, string[], unknown, unknown, undefined>>;
/**
* The `TableBody` component renders the body section of a table, containing rows of data.
* It automatically processes its children to add row indices and handles empty states.
* @component
* @param {TableBodyProps} props - The props for the `TableBody` component
* @param {ReactNode} props.children - The rows to render (typically TableRow components)
* @param {Function} [props.renderEmptyState] - Optional function to render custom content when there are no rows
* @example
* ```tsx
* import { TableBody, TableRow, TableCell } from '@payfit/unity-components'
*
* <TableBody>
* <TableRow>
* <TableCell>John Doe</TableCell>
* <TableCell>john.doe@example.com</TableCell>
* </TableRow>
* <TableRow>
* <TableCell>Jane Smith</TableCell>
* <TableCell>jane.smith@example.com</TableCell>
* </TableRow>
* </TableBody>
* ```
* @example
* ```tsx
* // With empty state
* import { TableBody, TableEmptyState } from '@payfit/unity-components'
*
* <TableBody
* renderEmptyState={() => (
* <TableEmptyState>
* <TableEmptyStateText variant="title">No data available</TableEmptyStateText>
* </TableEmptyState>
* )}
* />
* ```
* @see {@link TableBodyProps} for all available props
* @see {@link TableRow} for the row component
* @see {@link TableEmptyState} for the empty state component
* @remarks
* {@link https://unity-components.payfit.io/?path=/story/data-table-tablebody--default|API and Demos} •
* {@link https://payfit.design|Design docs}
*/
declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
export { TableBody };