@dnb/eufemia/cjs/components/table/Table.d.ts

DNB Eufemia Design System UI Library

import type { ReactNode, Ref, RefObject, TableHTMLAttributes } from 'react';
import ScrollView from './TableScrollView';
import type { TableStickyHeaderProps } from './TableStickyHeader';
import type { SkeletonShow } from '../skeleton/Skeleton';
import type { LocaleProps, SpacingProps } from '../../shared/types';
export type TableSizes = 'large' | 'medium' | 'small';
export type TableVariants = 'generic';
export { ScrollView };
export type TableProps = {
    /**
     * The content of the component.
     */
    children: ReactNode;
    /**
     * Custom `className` on the component root.
     * Default: `undefined`
     */
    className?: string;
    /**
     * If set to `true`, an overlaying skeleton with animation will be shown.
     * Default: `undefined`
     */
    skeleton?: SkeletonShow;
    /**
     * Spacing size inside the table header and data.
     * Default: `"large"`
     */
    size?: TableSizes;
    /**
     * Defines the visual style of the table header. Use `subtle` for a lighter appearance with reduced font-weight, smaller font-size, and muted text color.
     * Default: `"emphasis"`
     */
    variant?: TableVariants;
    /**
     * Use `true` to show borders between table data cells. Use `"horizontal"` to show only horizontal borders between rows.
     * Default: `false`
     */
    border?: boolean | 'horizontal';
    /**
     * Use `true` to show an outline border around the table.
     * Default: `false`
     */
    outline?: boolean;
    /**
     * Use `false` to disable alternating row background colors (striped rows).
     * Default: `true`
     */
    striped?: boolean;
    /**
     * Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.
     * Default: `null`
     */
    mode?: 'accordion' | 'navigation';
    /**
     * Defines where the chevron will be placed, should only be used together with `mode="accordion"`.
     * Default: `"left"`
     */
    accordionChevronPlacement?: 'left' | 'right';
    /**
     * If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.
     * Default: `null`
     */
    fixed?: boolean;
    /**
     * Ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.
     * Default: `undefined`
     */
    collapseAllHandleRef?: RefObject<() => void>;
} & TableStickyHeaderProps;
export type TableAllProps = TableProps & Omit<TableHTMLAttributes<HTMLTableElement>, 'border'> & LocaleProps & SpacingProps & {
    ref?: Ref<HTMLElement>;
};
declare const Table: {
    (componentProps: TableAllProps): import("react/jsx-runtime").JSX.Element;
    ScrollView: typeof ScrollView;
};
export default Table;
export { useTableKeyboardNavigation } from './useTableKeyboardNavigation';
export { default as Th } from './TableTh';
export { default as Td } from './TableTd';
export { default as Tr } from './TableTr';
export { useTableHighlight } from './useTableHighlight';