import { type ComponentPropsWithoutRef } from 'react';
import { type HeadingProps } from '../Heading';
export type CellDataType = 'text' | 'amount';
/**
 * The props for the `DisplayTable` component.
 *
 * It extends the general attributes of `table` element.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
 */
export type DisplayTableProps = {
    /**
     * The title of the table.
     * This is used to provide a title for the table.
     * The title is displayed above the table.
     */
    title: string;
    /**
     * The tag of the title.
     * This is used to determine the HTML tag to be used for the title.
     * It can be any valid HTML heading tag, such as `h1`, `h2`, `h3`, etc.
     *
     * @default 'h4'
     */
    titleTag?: HeadingProps['tag'];
    /**
     * The lead text of the table.
     * This is used to provide additional information about the table.
     * The lead text is displayed above the table and under the title.
     */
    lead?: string;
    /**
     * Whether the header is fixed when scrolling horizontally.
     * If `true`, the header will be sticky.
     *
     * @default false
     */
    fixedHeader?: boolean;
    /**
     * The index of the column to fix on the left side.
     * It should be started from 0.
     *
     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
     * please add `table-layout: fixed` to the DisplayTable and specify the width of the each column.
     *
     * @default undefined
     */
    leftFixedColumnIndex?: number;
    /**
     * The index of the column to fix on the right side.
     * It should be started from 0.
     *
     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
     * please add `table-layout: fixed` to the DisplayTable and specify the width of the each column.
     *
     * @default undefined
     */
    rightFixedColumnIndex?: number;
    /**
     * The props for the wrapper element of the table.
     *
     * The DisplayTable component is wrapped with a `div` element.
     *
     * ```tsx
     * <div {...wrapperProps}>
     *   <table {...props}>
     *     ...
     *   </table>
     * </div>
     * ```
     *
     * Currently supported props are below.
     *
     * @property className - The class name of the wrapper element.
     */
    wrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
    /**
     * Whether the table is loading.
     * If `true`, four rows with the skeleton cell will be shown instead of the table content.
     *
     * @default false
     */
    loading?: boolean;
} & ComponentPropsWithoutRef<'table'>;