@hypothesis/frontend-shared/lib/components/data/DataTable.d.ts

Shared components, styles and utilities for Hypothesis projects

import type { ComponentChildren, JSX } from 'preact';
import type { CompositeProps, Order, OrderDirection } from '../../types';
import type { TableProps } from './Table';
export type TableColumn<Field> = {
    field: Field;
    label: string;
    classes?: string;
};
type ComponentProps<Row> = Pick<TableProps, 'borderless' | 'title' | 'striped' | 'grid'> & {
    rows: Row[];
    columns: TableColumn<keyof Row>[];
    /** Content to render if rows is empty (and not in a loading state) */
    emptyMessage?: ComponentChildren;
    loading?: boolean;
    selectedRow?: Row | null;
    /**
     * Callback when a row is "selected" by click or key press.
     *
     * If using multi-selection (see {@link ComponentProps.selectedRows}) this
     * will be passed only the most recently selected row. Use
     * {@link ComponentProps.onSelectRows} to receive the full selection.
     */
    onSelectRow?: (r: Row) => void;
    /**
     * Selected rows. If this property is set it enables multi-selection. The
     * user will be able to select a contiguous range of rows via shift+click or
     * shift + arrow keys.
     */
    selectedRows?: Row[];
    /**
     * Callback when rows are selected by click or key press.
     *
     * If multi-selection is enabled, this may have multiple entries (see
     * {@link ComponentProps.selectedRows} otherwise it will have one entry.
     */
    onSelectRows?: (r: Row[]) => void;
    /**
     * Callback when a row is "confirmed" by double-click or pressing "Enter"
     */
    onConfirmRow?: (r: Row) => void;
    /** Current sort order */
    order?: Order<keyof Row>;
    /**
     * Callback invoked when user clicks a column header to change the sort order.
     * When a header is clicked, if that's not the active order, it is set with
     * order='ascending'.
     * If the active header is clicked consecutively, direction toggles between
     * 'ascending' and 'descending'.
     */
    onOrderChange?: (order: Order<keyof Row>) => void;
    /**
     * Columns that can be used to order the table. Ignored if `onOrderChange` is
     * not provided.
     * No columns will be orderable if this is not provided.
     *
     * This can be a map of columns and order directions, to indicate the initial
     * direction to use when a column becomes the ordered one
     */
    orderableColumns?: Array<keyof Row> | Partial<Record<keyof Row, OrderDirection>>;
    /** Callback to render an individual table cell */
    renderItem?: (r: Row, field: keyof Row) => ComponentChildren;
};
export type DataTableProps<Row> = CompositeProps & ComponentProps<Row> & Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'rows' | 'role' | 'loading'>;
/**
 * An interactive table of rows and columns with a sticky header.
 */
export default function DataTable<Row>({ children, elementRef, columns, rows, selectedRow, selectedRows, loading, renderItem, onSelectRow, onSelectRows, onConfirmRow, emptyMessage, order, onOrderChange, orderableColumns, title, borderless, striped, grid, ...htmlAttributes }: DataTableProps<Row>): JSX.Element;
export {};