@flanksource/clicky-ui/dist/data/DataTable.d.ts

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { ReactNode } from 'react';
import { SortDir } from '../hooks/use-sort';
import { Density } from '../hooks/use-density';
import { FilterBarProps } from '../components/FilterBar';
import { TimestampOptions } from './cells/Timestamp';
import { TagActionsContextValue, TagsOptions } from './cells/TagList';
import { BadgeStatus } from './Badge';
export type { TimestampOptions, TagsOptions };
export type DataTableColumnKind = "timestamp" | "tags" | "status";
export type StatusOptions<T extends Record<string, unknown> = Record<string, unknown>> = {
    map?: (raw: unknown, row: T) => BadgeStatus | null;
    showLabel?: boolean;
    title?: (raw: unknown, row: T) => string;
};
type FilterValue = string | number | boolean | null | undefined | Array<string | number | boolean>;
export type DataTableRowDetailContext<T extends Record<string, unknown> = Record<string, unknown>> = {
    columns: DataTableColumn<T>[];
    visibleColumns: DataTableColumn<T>[];
    tagActionsByColumn: Record<string, TagActionsContextValue>;
};
export type DataTableColumn<T extends Record<string, unknown> = Record<string, unknown>> = {
    key: string;
    label: ReactNode;
    sortable?: boolean;
    filterable?: boolean;
    grow?: boolean;
    shrink?: boolean;
    resizable?: boolean;
    hideable?: boolean;
    minWidth?: number;
    maxWidth?: number;
    align?: "left" | "center" | "right";
    render?: (value: unknown, row: T) => ReactNode;
    sortValue?: (value: unknown, row: T) => unknown;
    filterValue?: (value: unknown, row: T) => FilterValue;
    cellClassName?: string;
    headerClassName?: string;
    /**
     * Built-in cell kind. When set, DataTable supplies a default renderer,
     * a default `sortValue` and a default `filterValue` (all overridable).
     * - "timestamp": adaptive format (relative / time / short / iso) chosen
     *   from the spread of values in `data`.
     * - "tags": chip list with `+N` overflow; auto-multi-filter on tag tokens.
     * - "status": colored dot with the standard error/warning/success palette
     *   (token-mapped — "ERROR", "failed", "fatal" all collapse to "error").
     */
    kind?: DataTableColumnKind;
    timestamp?: TimestampOptions;
    tags?: TagsOptions;
    status?: StatusOptions<T>;
};
export type DataTableColumnInput<T extends Record<string, unknown> = Record<string, unknown>> = DataTableColumn<T> | string;
export type DataTableProps<T extends Record<string, unknown> = Record<string, unknown>> = {
    data: T[];
    /**
     * Column descriptors. Pass a bare string for a default column —
     * `"foo"` is equivalent to `{ key: "foo", label: "foo" }` — handy for
     * ad-hoc query results where the column metadata is just a list of names.
     * Mix and match strings with full descriptors as needed.
     */
    columns: Array<DataTableColumnInput<T>>;
    emptyMessage?: string;
    className?: string;
    autoFilter?: boolean;
    showGlobalFilter?: boolean;
    globalFilter?: string;
    onGlobalFilterChange?: (value: string) => void;
    globalFilterPlaceholder?: string;
    defaultSort?: {
        key: string;
        dir?: SortDir;
    };
    filterBarProps?: Omit<FilterBarProps, "search" | "filters">;
    getRowId?: (row: T, index: number) => string;
    onRowClick?: (row: T) => void;
    isRowClickable?: (row: T) => boolean;
    getRowHref?: (row: T) => string | undefined;
    renderExpandedRow?: (row: T, context: DataTableRowDetailContext<T>) => ReactNode;
    resizableColumns?: boolean;
    persistColumnWidths?: boolean;
    columnResizeStorageKey?: string;
    hideableColumns?: boolean;
    persistColumnVisibility?: boolean;
    columnVisibilityStorageKey?: string;
    density?: Density;
    defaultDensity?: Density;
    onDensityChange?: (density: Density | undefined) => void;
    persistDensity?: boolean;
    densityStorageKey?: string;
    showDensityControl?: boolean;
    showHeaderFilters?: boolean;
};
export declare function DataTable<T extends Record<string, unknown>>({ data, columns: columnsInput, emptyMessage: _emptyMessage, className, autoFilter, showGlobalFilter, globalFilter, onGlobalFilterChange, globalFilterPlaceholder, defaultSort, filterBarProps, getRowId, onRowClick, isRowClickable, getRowHref, renderExpandedRow, resizableColumns, persistColumnWidths, columnResizeStorageKey, hideableColumns, persistColumnVisibility, columnVisibilityStorageKey, density, defaultDensity, onDensityChange, persistDensity, densityStorageKey, showDensityControl, showHeaderFilters, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
export declare function inferColumns<T extends Record<string, unknown>>(data: T[]): DataTableColumn<T>[];
//# sourceMappingURL=DataTable.d.ts.map