@payfit/unity-components
Version:
73 lines (72 loc) • 2.83 kB
TypeScript
import { default as React } from 'react';
export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
colIndex?: number;
rowIndex?: number;
align?: 'left' | 'center' | 'right';
isRowHeader?: boolean;
/**
* Whether this cell should be focusable for keyboard navigation.
* Set to false when the cell contains interactive elements like buttons, checkboxes, etc.
* @default true
*/
isFocusable?: boolean;
}
export declare const tableCell: import('tailwind-variants').TVReturnType<{
align: {
left: string;
center: string;
right: string;
};
}, undefined, string[], {
align: {
left: string;
center: string;
right: string;
};
}, undefined, import('tailwind-variants').TVReturnType<{
align: {
left: string;
center: string;
right: string;
};
}, undefined, string[], unknown, unknown, undefined>>;
/**
* The `TableCell` component renders a cell in the table, containing data.
* It handles keyboard navigation, focus management, and accessibility attributes.
* @component
* @param {TableCellProps} props - The props for the `TableCell` component
* @param {ReactNode} props.children - The content to render in the cell
* @param {number} [props.colIndex=0] - The index of the column (automatically set by TableRow)
* @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableRow)
* @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the cell
* @param {boolean} [props.isRowHeader=false] - Whether this cell is a row header (renders as `<th>` instead of `<td>`)
* @param {boolean} [props.isFocusable=true] - Whether this cell should be focusable for keyboard navigation. Set to false when the cell contains interactive elements.
* @example
* ```tsx
* import { TableCell } from '@payfit/unity-components'
*
* <TableCell>Cell content</TableCell>
* ```
* @example
* ```tsx
* // Row header with right alignment
* import { TableCell } from '@payfit/unity-components'
*
* <TableCell isRowHeader align="right">Employee ID</TableCell>
* ```
* @example
* ```tsx
* // Cell with interactive content (checkbox) - not focusable
* import { TableCell, CheckboxStandalone } from '@payfit/unity-components'
*
* <TableCell isFocusable={false}>
* <CheckboxStandalone>Select item</CheckboxStandalone>
* </TableCell>
* ```
* @see {@link TableCellProps} for all available props
* @remarks
* {@link https://unity-components.payfit.io/?path=/story/data-table-tablecell--docs|API and Demos} •
* {@link https://payfit.design|Design docs}
*/
declare const TableCell: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>>;
export { TableCell };