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

    Interface ColumnDef<T, C>

    One column. This is the main thing you write when using the grid.

    const columns: ColumnDef<Person>[] = [
      { field: 'id',   header: 'ID', width: 90, filter: 'number' },
      { field: 'name', header: 'Name', flex: 1, filter: 'text', editable: true },
      {
        field: 'status',
        header: 'Status',
        filter: 'set',
        filterParams: { values: () => fetch('/api/statuses').then((r) => r.json()) },
        editable: true,
        editor: 'select',
        editorParams: { options: [{ label: 'Active', value: 'ACTIVE' }] },
      },
      {
        colId: 'fullName',
        header: 'Full name',
        sortable: false,
        valueGetter: (row) => `${row.first} ${row.last}`,
      },
    ];

    Define columns as a module constant or memoise on []. Anything volatile belongs in DataGridProps.context instead, which reaches every renderer without rebuilding a single definition.

    interface ColumnDef<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

    Stable identity, used as the key in the sort and filter models and in persisted layout. Falls back to field when omitted; one of the two is required.

    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

    Floor for both flex and user resizing.

    60
    pinned?: Pinned

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

    resizable?: boolean

    Allow drag-to-resize.

    true
    sortable?: boolean

    Allow click-to-sort on the header.

    true
    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

    Starting width in pixels.

    150

    Settings
    Member Visibility

    On This Page
    Properties