@payfit/unity-components
Version:
67 lines (66 loc) • 2.69 kB
TypeScript
import { default as React } from 'react';
import { ActionableProps } from '../../actionable/Actionable.js';
type BaseTableColumnHeaderProps = {
colIndex?: number;
rowIndex?: number;
align?: 'left' | 'center' | 'right';
isFocusable?: boolean;
};
type StaticTableColumnHeaderProps = BaseTableColumnHeaderProps & React.ThHTMLAttributes<HTMLTableCellElement>;
type InteractiveTableColumnHeaderProps = BaseTableColumnHeaderProps & ActionableProps;
export type TableColumnHeaderProps = (StaticTableColumnHeaderProps & {
onPress?: never;
}) | InteractiveTableColumnHeaderProps;
export declare const tableColumnHeader: 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 `TableColumnHeader` component renders a header cell in the table's header row.
* It can be either static or interactive (clickable) and supports text alignment.
* @param {TableColumnHeaderProps} props - The props for the `TableColumnHeader` component
* @param {ReactNode} props.children - The content to render in the header cell
* @param {number} [props.colIndex=0] - The index of the column (automatically set by TableHeader)
* @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableHeader)
* @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the header cell
* @param {Function} [props.onPress] - Optional callback for when the header is clicked (makes the header interactive)
* @example
* ```tsx
* import { TableColumnHeader } from '@payfit/unity-components'
*
* <TableColumnHeader>Name</TableColumnHeader>
* ```
* @example
* ```tsx
* // Interactive header with center alignment
* import { TableColumnHeader } from '@payfit/unity-components'
*
* <TableColumnHeader
* align="center"
* onPress={() => console.log('Header clicked')}
* >
* Department
* </TableColumnHeader>
* ```
* @see {@link TableColumnHeaderProps} for all available props
* @remarks
* {@link https://unity-components.payfit.io/?path=/story/data-table-tablecolumnheader--docs|API and Demos} •
* {@link https://payfit.design|Design docs}
*/
declare const TableColumnHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>>;
export { TableColumnHeader };