@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
58 lines (57 loc) • 2.74 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';
/**
* When `true`, the cell is styled as selected (highlighted background and selected icon/border). Requires `onClick` to take effect, since the selected styling targets the cell button. When provided (either `true` or `false`), the cell button is announced as a toggle button by screen readers via `aria-pressed`. Use `setSelected` from the `onClick` callback to toggle the state.
* Default: `undefined`
*/
selected?: boolean;
/**
* If set to `true`, the cell receives a highlighted background. Automatically set when the parent `<Tr>` has `highlight`, or when the corresponding `<Th>` in the same column has `highlight`.
* Default: `false`
*/
highlight?: boolean;
/**
* Will emit when user clicks the cell button. The second argument is an object with `trElement` (the parent `HTMLTableRowElement`), `tdElement` (the `HTMLTableCellElement`), `thElement` (the matching `<Th>` from `<thead>`, or `null` if not found), `isSelected` (current selected state), and `setSelected` (function to update the selected state — only effective when the `selected` prop is provided).
* Default: `undefined`
*/
onClick?: (event: SyntheticEvent, info: TableTdClickInfo) => void;
/**
* Icon to show in the clickable 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: `undefined`
*/
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;