@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
65 lines (64 loc) • 2.29 kB
TypeScript
import { type ReactNode, type SyntheticEvent, type TdHTMLAttributes } from 'react';
import type { IconIcon } from '../icon/Icon';
import { TableAccordionContentSingle } from './table-accordion/TableAccordionContent';
export type TableTdClickInfo = {
trElement: HTMLTableRowElement | null;
tdElement: HTMLTableCellElement | null;
thElement: HTMLTableCellElement | null;
isSelected: boolean;
setSelected: (selected: boolean) => boolean;
};
export type TableTdProps = {
/**
* if set to `true`, no padding will be added
* Default: `false`
*/
noSpacing?: boolean;
/**
* Set to `horizontal` for padding on left and right side
* Default: `undefined`
*/
spacing?: 'horizontal';
/**
* Vertical alignment of the cell content.
* Default: `undefined`
*/
verticalAlign?: 'top' | 'middle' | 'bottom';
/**
* If set to `true`, the cell will be styled as selected.
* When provided (either `true` or `false`), the cell button will be
* announced as a toggle button by screen readers.
* Default: `undefined`
*/
selected?: boolean;
/**
* Highlights this cell with a subtle background.
* Automatically set when the parent Tr has `highlight`.
* Default: `false`
*/
highlight?: boolean;
/**
* Will emit when user clicks the cell button.
* Renders a native button inside the cell for accessibility.
* The second argument contains `trElement`, `tdElement`, `thElement` (the matching Th in thead), `isSelected`, and `setSelected`.
*/
onClick?: (event: SyntheticEvent, info: TableTdClickInfo) => void;
/**
* Icon to show in the navigable cell.
* Set to `true` for the default chevron icon, or pass a custom icon.
* Set to `false` to hide the icon.
* Only takes effect when `onClick` is provided.
* Default: `true`
*/
icon?: boolean | IconIcon;
/**
* The content of the component.
* Default: `null`
*/
children?: ReactNode;
};
declare function Td(componentProps: TableTdProps & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'onClick'>): import("react/jsx-runtime").JSX.Element;
declare namespace Td {
var AccordionContent: typeof TableAccordionContentSingle;
}
export default Td;