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

    Interface DataGridProps<T, C>

    Props for DataGrid.

    interface DataGridProps<T, C = unknown> {
        apiRef?: Ref<GridApi<T>>;
        className?: string;
        columns: ColumnDef<T, C>[];
        context?: C;
        dataSource: HxDataSource<T>;
        defaultPageSize?: number;
        emptyMessage?: ReactNode;
        exportFileName?: string;
        floatingFilter?: boolean;
        getRowId: (row: T) => RowId;
        headerHeight?: number;
        height?: string | number;
        onError?: (error: unknown) => void;
        onRowCommit?: (
            draft: T,
            original: T,
        ) => RowCommitResult | Promise<RowCommitResult>;
        onRowFilesDropped?: (row: T, files: File[]) => void;
        onSelectionChanged?: (ids: RowId[]) => void;
        pageSizeOptions?: number[];
        rowHeight?: number;
        selectable?: boolean;
        storageKey?: string;
        toolbar?: (api: GridApi<T>) => ReactNode;
    }

    Type Parameters

    • T

      The row type.

    • C = unknown

      The context type. Inferred from context; defaults to unknown.

    Index
    apiRef? className? columns context? dataSource defaultPageSize? emptyMessage? exportFileName? floatingFilter? getRowId headerHeight? height? onError? onRowCommit? onRowFilesDropped? onSelectionChanged? pageSizeOptions? rowHeight? selectable? storageKey? toolbar?
    apiRef?: Ref<GridApi<T>>

    Receives the imperative GridApi. Accepts a ref object or a callback ref.

    className?: string

    Extra classes on the grid's outer frame.

    columns: ColumnDef<T, C>[]

    The columns to render.

    Define these as a module constant or memoise on [] — anything volatile belongs in DataGridProps.context instead.

    context?: C

    Volatile app state handed to every cell renderer.

    This is the escape hatch that keeps columns static: put in-flight ids, permission checks and event handlers here, and changing them re-renders cells without rebuilding a single column definition.

    dataSource: HxDataSource<T>

    Where rows come from. Memoise it; a new identity causes a refetch.

    HxDataSource

    defaultPageSize?: number

    Rows per page before the user changes it. A persisted preference wins.

    20
    emptyMessage?: ReactNode

    Shown when a query returns no rows.

    'No rows'
    exportFileName?: string

    Base file name for CSV export, without the extension.

    'export'
    floatingFilter?: boolean

    Show the always-visible filter inputs under the header.

    true
    getRowId: (row: T) => RowId

    Stable identity for a row, used for selection, editing and GridApi.updateRows. Must be stable across refetches.

    headerHeight?: number

    Header height in pixels.

    36
    height?: string | number

    Height of the whole grid. Any CSS length; a number is treated as pixels.

    '70vh'
    onError?: (error: unknown) => void

    Called when a fetch or a commit throws. Aborted requests are not reported.

    onRowCommit?: (
        draft: T,
        original: T,
    ) => RowCommitResult | Promise<RowCommitResult>

    Enables row editing. Called when the user commits a row.

    Return { ok: false, errors } to keep the row open and paint each message onto the cell whose column id it is keyed by.

    Type Declaration

    RowCommitResult

    onRowFilesDropped?: (row: T, files: File[]) => void

    Enables dropping files onto a row (e.g. to attach documents to it).

    onSelectionChanged?: (ids: RowId[]) => void

    Called whenever the selection changes.

    Type Declaration

      • (ids: RowId[]): void

      • Parameters

        • ids: RowId[]

          Every selected row id, including rows on other pages.

        Returns void

    pageSizeOptions?: number[]

    Page sizes offered in the pager.

    [10, 20, 50, 100]
    rowHeight?: number

    Row height in pixels. Fixed for every row — that is what keeps virtualization O(1).

    36
    selectable?: boolean

    Show the checkbox selection column.

    true
    storageKey?: string

    localStorage key for column layout, sort, filters and page size.

    Omit it and nothing is persisted. Stored under hxg:<storageKey>.

    PersistedGridState

    toolbar?: (api: GridApi<T>) => ReactNode

    Rendered into the toolbar strip above the header, left of the built-in Columns and Export CSV buttons.

    Type Declaration

      • (api: GridApi<T>): ReactNode

      • Parameters

        • api: GridApi<T>

          The live imperative API.

        Returns ReactNode

    Settings
    Member Visibility

    On This Page
    Properties