liber-salti/build/Table/Table.types.d.ts

Saltí - Liber Design System

/// <reference types="react" />
import { IconName } from '../Icon/Icon.types';
interface PaginationProps {
    /**
     * Total table entries
     */
    count: number;
    /**
     * Amount of rows per page
     */
    rowsPerPage: number;
    /**
     * Options of rows per page
     */
    rowsPerPageOptions?: number[];
    /**
     * Current page
     */
    page: number;
    /**
     * Callback when changing page
     */
    onPageChange: (_: PointerEvent, targetPage: number) => void;
    /**
     * Callback when changing rows per page
     */
    onRowsPerPageChange: (e: PointerEvent) => void;
}
interface HeaderProps {
    /**
     * The title of the table
     */
    title?: string;
    /**
     * State of the batch checkbox
     */
    checkedAll?: boolean;
    /**
     * Indeterminate state of the batch checkbox
     */
    indeterminate?: boolean;
    /**
     * Page checkbox callback
     */
    onSelectPage?: () => void;
    /**
     * Table actions when nothing is selected
     */
    actions?: TableAction[];
    /**
     * Columns of the table
     */
    columns: TableColumn[];
    /**
     * Amount of rows selected
     */
    selectedAmount?: number;
    /**
     * Amount of selectable rows, overrides pagination.count on the header actions
     */
    selectableAmount?: number;
    /**
     * Callback of the header select all action
     */
    onSelectAll?: (action: 'select' | 'deselect') => void;
    /**
     * If `true`, the label of the select all button changes
     */
    allSelected?: boolean;
    /**
     * If `true`, the checkbox will be disabled
     */
    disableSelection?: boolean;
}
interface HeaderBatchProps {
    /**
     * Table actions when something is selected
     */
    actions?: TableAction[];
}
export interface RightActionsProps {
    /**
     * Label of the right actions column
     */
    label: string;
    /**
     * Actions on the right side of the table
     */
    actions?: TableAction[];
    /**
     * Maximum amount of actions on the table.
     * Used to generate the floating background.
     */
    actionsAmount?: number;
}
export interface TableColumn {
    /**
     * The content alignment.
     */
    align?: 'left' | 'right';
    /**
     * Label of the column
     */
    label: string;
    /**
     * Callback on column sorting
     */
    onSort?: () => void;
    /**
     * State of the column sorting
     */
    selected?: boolean;
    /**
     * If `true`, the column sorting will show an inverted icon
     */
    inverted?: boolean;
}
export interface TableAction {
    /**
     * Icon of the action
     */
    icon: IconName;
    /**
     * Label of the action
     */
    label: string;
    /**
     * Callback of the action
     */
    onClick?: () => void;
    /**
     * If `true`, the action will be disabled
     */
    disabled?: boolean;
    /**
     * Tooltip to be shown when the action is disabled
     */
    disabledTooltip?: string;
}
export interface TableProps {
    /**
     * If `true`, the padding of the rows is reduced
     */
    dense?: boolean;
    /**
     * The node that will show if `isEmpty` is true
     */
    emptyStateComponent?: React.ReactNode;
    /**
     * If `true`, the empty state will be shown
     */
    isEmpty?: boolean;
    /**
     * If `true`, the table loses elevation and border-radius
     */
    flat?: boolean;
    /**
     * Pagination props
     */
    pagination?: PaginationProps;
    /**
     * The rows of the table
     */
    children: React.ReactElement[];
    /**
     * Header settings
     */
    headerSettings: HeaderProps;
    /**
     * Header settings when something is selected
     */
    headerBatchSettings?: HeaderBatchProps;
    /**
     * Actions that show at the end of the table
     */
    rightActions?: RightActionsProps;
}
export {};