@hypothesis/frontend-shared/lib/components/Table.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * An interactive table of items with a sticky header.
 *
 * @template Item
 * @param {TableProps<Item>} props
 */
export function Table<Item>({ accessibleLabel, classes, containerClasses, emptyItemsMessage, isLoading, items, onSelectItem, onUseItem, renderItem, selectedItem, tableHeaders, }: TableProps<Item>): import("preact").JSX.Element;
export type TableHeader = {
    label: string;
    /**
     * - Additional CSS classes for the column's `<th>` element
     */
    classes?: string | undefined;
};
export type TableProps<Item> = {
    /**
     * - An accessible label for the table
     */
    accessibleLabel: string;
    /**
     * - Extra CSS classes to apply to the <table>
     */
    classes?: string | undefined;
    /**
     * - Extra CSS classes to apply to the outermost
     * element, which is a <Scrollbox> div
     */
    containerClasses?: string | undefined;
    /**
     * - Optional message to display if
     * there are no `items`. Will only display when the Table is not loading.
     */
    emptyItemsMessage?: import("preact").ComponentChildren;
    /**
     * - The columns to display in this table
     */
    tableHeaders: TableHeader[];
    /**
     * - Show an indicator that data for the table is
     * currently being fetched
     */
    isLoading?: boolean | undefined;
    /**
     * -
     * The items to display in this table, one per row. `renderItem` defines how
     * information from each item is represented as a series of table cells.
     */
    items: Item[];
    /**
     * -
     * A function to render an item as a table row. It should return
     * a `<td>` element for each `tableHeader` column, wrapped in a `Fragment`
     */
    renderItem: (it: Item, selected: boolean) => any;
    /**
     * - The currently selected item from `items`
     */
    selectedItem: Item | null;
    /**
     * -
     * Callback invoked when the user changes the selected item
     */
    onSelectItem: (it: Item) => void;
    /**
     * -
     * Callback invoked when a user chooses to use an item by double-clicking it
     * or pressing Enter while it is selected
     */
    onUseItem: (it: Item) => void;
};