@dnb/eufemia/components/table/TableTd.d.ts

DNB Eufemia Design System UI Library

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;