@cfxlabsinc/b2b-services
    Preparing search index...

    Type Alias DataTableColumn<T, S>

    type DataTableColumn<T, S extends string = string> = {
        align?: "left" | "right";
        cell: (row: T) => ReactNode;
        className?: string;
        header: string;
        headerContent?: ReactNode;
        hideHeader?: boolean;
        id: string;
        kind?: DataTableColumnKind;
        priority?: "low" | "medium";
        rowHeader?: boolean;
        sortField?: SortFieldOf<S>;
        truncate?: boolean | { title: (row: T) => string | undefined };
    }

    Type Parameters

    • T
    • S extends string = string
    Index
    align? cell className? header headerContent? hideHeader? id kind? priority? rowHeader? sortField? truncate?
    align?: "left" | "right"
    cell: (row: T) => ReactNode
    className?: string

    Applied to the column's th and every td: hiding, widths, a sticky column.

    header: string

    The column's name: its visible header, and the sort link's label.

    headerContent?: ReactNode

    Rendered in place of header, e.g. a header with a hint tooltip or a toggle.

    hideHeader?: boolean

    Keeps header for assistive tech only, as on an actions column.

    id: string
    kind?: DataTableColumnKind
    priority?: "low" | "medium"

    Drops the column while the table would otherwise scroll, e.g. beside a docked panel: low first, then medium. Unset never hides, nor does the column the table is sorted by.

    rowHeader?: boolean

    Renders this column's cells as th scope="row", naming each row for assistive tech.

    sortField?: SortFieldOf<S>

    Makes the header a sort link emitting ${sortField}_${dir}.

    truncate?: boolean | { title: (row: T) => string | undefined }

    Clips the cell to one line; resting the pointer on a clipped cell shows its full text over it, under a row link too. The column takes the width the others leave and gives it back first, down to 12rem, before any priority column drops. A string cell is its own text; otherwise pass title, which is also the no-JS hover title.

    Settings
    Member Visibility

    On This Page
    Properties