@loadsmart/miranda-wc/dist/components/table/table.types.d.ts

Miranda Web Components component library

import type { SelectionState, SelectionValue } from '../../controllers/selection';
export type TableSize = 'small' | 'default' | 'large';
export type TableCellAlignment = 'left' | 'center' | 'right';
export type TableCellVerticalAlign = 'top' | 'middle' | 'bottom';
export type TableSortDirection = 'asc' | 'desc';
export type TableProps = {
    /**
     * Determines the height of the cell.
     * @default 'default'
     */
    size?: TableSize;
    /**
     * Determines the selected rows before the element is rendered.
     */
    initialSelection?: string[];
};
export type TableCellProps = {
    /**
     * Text alignment value.
     * @default 'left'
     */
    alignment?: TableCellAlignment;
    /**
     * Vertical align value.
     * @default 'middle'
     */
    verticalAlign?: TableCellVerticalAlign;
};
export type TableHeadCellSortEventDetails = {
    columnId: string;
    sortDirection: TableSortDirection | undefined;
};
export type TableHeadCellProps = TableCellProps & {
    /**
     * Useful to identify the selected column header when sorting.
     */
    columnId: string;
    /**
     * If true, the sort handle will be rendered next to the main content.
     * @default false
     */
    sortable?: boolean;
    /**
     * If sortable is true and sortDirection is provided, the handle icon will point to the given direction, otherwise, it will show up-down arrows.
     */
    sortDirection?: TableSortDirection;
    /**
     * Applies disabled styles to the cell. Even if sortable is true, it won't be clickable.
     * @default false
     */
    disabled?: boolean;
    /**
     * Click event handler for sortable head cells.
     */
    oncolumnsort?: (event: CustomEvent<TableHeadCellSortEventDetails>) => void;
};
export type TableActionsProps = {
    /**
     * Should the actions section stick to the bottom of the table.
     * @default false
     */
    sticky?: boolean;
};
export type TableSelectionCellProps = {
    /**
     * Determines the item value
     */
    value: string;
};
export type TableContext = TableProps & {
    selection: SelectionState;
    rows: SelectionState;
};
export type TableSelectEventDetail = ({
    type: 'toggle';
} & {
    value: string;
}) | ({
    type: 'toggle-all';
} & {
    value: boolean;
});
export type TableRegisterAllEventDetail = {
    value: string[];
};
export type TableSelectEventDetails = {
    value?: SelectionValue<string>;
};