@helix-x/datagrid-ui - v0.1.2
    Preparing search index...

    Interface ResolvedColumn<T, C>

    A ColumnDef with every optional default filled in.

    Produced by resolveColumn. Mostly internal, but exported because the exporter helpers and the columns panel take it.

    interface ResolvedColumn<T, C = unknown> {
        align?: "left" | "right" | "center";
        cellClassName?: string | ((row: T) => string);
        cellRenderer?: (params: CellRendererParams<T, C>) => ReactNode;
        colId: string;
        editable?: boolean | ((row: T) => boolean);
        editor?: BuiltinEditor | EditorComponent<T, C>;
        editorParams?: { options?: SelectOption[]; placeholder?: string };
        exportValue?: (row: T) => string;
        field?: string;
        fieldAliases?: string[];
        filter?: false | FilterKind;
        filterParams?: {
            suppressFloatingFilter?: boolean;
            values?: string[] | (() => Promise<string[]>);
        };
        flex?: number;
        header: ReactNode;
        headerClassName?: string;
        headerName?: string;
        hide?: boolean;
        lockPosition?: boolean;
        maxWidth?: number;
        minWidth: number;
        pinned?: Pinned;
        resizable: boolean;
        sortable: boolean;
        suppressExport?: boolean;
        valueFormatter?: (value: unknown, row: T) => string;
        valueGetter?: (row: T) => unknown;
        width: number;
    }

    Type Parameters

    • T

      The row type.

    • C = unknown

      The context type.

    Hierarchy (View Summary)

    Index
    align? cellClassName? cellRenderer? colId editable? editor? editorParams? exportValue? field? fieldAliases? filter? filterParams? flex? header headerClassName? headerName? hide? lockPosition? maxWidth? minWidth pinned? resizable sortable suppressExport? valueFormatter? valueGetter? width
    align?: "left" | "right" | "center"

    Horizontal alignment of the cell content.

    'left'
    cellClassName?: string | ((row: T) => string)

    Extra classes on every cell, optionally per row.

    cellRenderer?: (params: CellRendererParams<T, C>) => ReactNode

    Render the cell as markup. Presentation only — sorting and filtering still use field, so a decorated cell keeps behaving like a plain one.

    colId: string

    Always present — colId, or field when colId was omitted.

    editable?: boolean | ((row: T) => boolean)

    Whether the cell can be edited, optionally per row.

    editor?: BuiltinEditor | EditorComponent<T, C>

    Which editor to use: a BuiltinEditor name or your own component.

    'text'
    editorParams?: { options?: SelectOption[]; placeholder?: string }

    Extra options for the editor named by ColumnDef.editor.

    Type Declaration

    • Optionaloptions?: SelectOption[]

      Choices for the select editor.

    • Optionalplaceholder?: string

      Placeholder for the text and number editors.

    exportValue?: (row: T) => string

    The flat string written to CSV and the clipboard. Supply this whenever ColumnDef.cellRenderer produces markup.

    field?: string

    Dotted path into the row ('customer.name'), and the key sent to the server for sorting and filtering.

    Omit it for purely derived columns and supply colId plus valueGetter instead.

    fieldAliases?: string[]

    Alternative flat keys to try when the server flattens nested fields — some backends return {"customer.name": x} rather than a nested object, and change the prefix when grouping is on.

    filter?: false | FilterKind

    Which filter UI to offer, or false for none.

    undefined (no filter)
    filterParams?: {
        suppressFloatingFilter?: boolean;
        values?: string[] | (() => Promise<string[]>);
    }

    Extra options for the filter named by ColumnDef.filter.

    Type Declaration

    • OptionalsuppressFloatingFilter?: boolean

      Hide the always-visible filter input under the header for this column.

    • Optionalvalues?: string[] | (() => Promise<string[]>)

      Options for a set filter: a static list, or a function called the first time the popover opens so the list can come from an API.

    flex?: number

    Share of the leftover horizontal space, like flex-grow. A column with flex: 2 takes twice the slack of one with flex: 1.

    header: ReactNode

    Header content. Any node — an icon, a tooltip wrapper, anything.

    headerClassName?: string

    Extra classes on the header cell.

    headerName?: string

    Plain-text header for exports and aria labels. Required in practice whenever header is a node rather than a string.

    hide?: boolean

    Start hidden. The user can still reveal it from the columns panel.

    lockPosition?: boolean

    Prevent the user dragging this column out of position.

    maxWidth?: number

    Ceiling for user resizing.

    minWidth: number

    Resolved minimum width.

    pinned?: Pinned

    Stick this column to an edge while the rest scroll horizontally.

    resizable: boolean

    Resolved resizability.

    sortable: boolean

    Resolved sortability.

    suppressExport?: boolean

    Leave this column out of CSV and clipboard output entirely.

    valueFormatter?: (value: unknown, row: T) => string

    Turn the raw value into its display string. Also used for exports unless ColumnDef.exportValue is given.

    valueGetter?: (row: T) => unknown

    Compute the cell value instead of reading field. Takes precedence over every other lookup.

    width: number

    Resolved width, never below minWidth.

    Settings
    Member Visibility

    On This Page
    Properties