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

Miranda Web Components component library

import type { SelectionState, SelectionType, SelectionValue } from '../../controllers/selection';
export type TableSize = 'small' | 'default' | 'large';
export type TableCellAlignment = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
export type TableCellTextAlignment = 'left' | 'center' | 'right';
export type TableSortDirection = 'asc' | 'desc';
export type TableProps = {
    /**
     * Determines the height of the cell.
     * @default 'default'
     */
    size?: TableSize;
    /**
     * Determines the initially selected rows.
     */
    initialSelected?: string[];
    /**
     * Determines the initially expanded rows.
     */
    initialExpanded?: string[];
    /**
     * Determines if the table is expandable.
     * @default false
     */
    expandable?: boolean;
    /**
     * Determines if the table is selectable.
     * @default false
     */
    selectable?: boolean;
};
export type TableCellProps = {
    /**
     * Cell content alignment considering the cross axis.
     * @default 'center'
     */
    align?: TableCellAlignment;
    /**
     * Cell content alignment considering the main axis.
     * @default 'flex-start'
     */
    justify?: TableCellAlignment;
    /**
     * The number of columns a cell should span.
     * @default 1
     */
    colspan?: number;
    /**
     * The text alignment of the cell.
     * @default 'left'
     */
    textAlign?: TableCellTextAlignment;
};
export type TableHeadCellSortEventDetails = {
    columnId: string;
    sortDirection: TableSortDirection | undefined;
};
export type TableHeadCellProps = TableCellProps & {
    /**
     * The number of columns a cell should span.
     * @default 1
     */
    colspan?: number;
    /**
     * 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;
    /**
     * The width of the cell.
     * @example
     * ```html
     * <m-table-cell width="100px">
     * 	Cell content
     * </m-table-cell>
     * <m-table-cell width="20rem">
     * 	Cell content
     * </m-table-cell>
     * <m-table-cell width="100">
     * 	Cell content
     * </m-table-cell>
     * ```
     */
    width?: string;
    /**
     * Click event handler for sortable head cells.
     */
    oncolumnsort?: (event: CustomEvent<TableHeadCellSortEventDetails>) => void;
};
export type TableRowProps = {
    /**
     * The value of the row. Use this to identify the row when selecting or expanding.
     * Alternatively, you can use the id property.
     */
    value?: string;
    /**
     * The id of the row. Use this to identify the row when expanding.
     * You can also use the value property.
     */
    id?: string;
    /**
     * Determines if the row should be initially expanded.
     */
    initialExpanded?: boolean;
};
export type TableActionsProps = {
    /**
     * Should the actions section stick to the bottom of the table.
     * @default false
     */
    sticky?: boolean;
};
export type TableContext = {
    gridColumns: string;
    isSelectable: boolean;
    selectionType: SelectionType;
    allValues: SelectionState;
    selectedValues: SelectionState;
    isExpandable: boolean;
    expansionType: SelectionType;
    expandedRows: SelectionState;
};
export type TableRowContext = {
    isExpanded: boolean;
    isIndeterminate: boolean;
    isSelected: boolean;
    isHeaderRow: boolean;
    isFooterRow: boolean;
};
export type TableSelectEventDetails = {
    value?: SelectionValue<string>;
};
export type TableExpandEventDetails = {
    value?: SelectionValue<string>;
};