Interface: DataGridProps\<TRow\>

Defined in: src/components/DataGrid.tsx:76

Props for the <DataGrid> component — the single entry point that renders both flat and tree-mode grids. TRow is the row data type.

Type Parameters

TRow

TRow

Properties

advancedFilter?

optional advancedFilter?: AdvancedFilterConfig

Defined in: src/components/DataGrid.tsx:148

Configures advanced filter state and server push-down.

aggregation?

optional aggregation?: AggregationConfig

Defined in: src/components/DataGrid.tsx:144

Configures aggregate rendering for grouped rows and the footer.

apiRef?

optional apiRef?: object

Defined in: src/components/DataGrid.tsx:138

Imperative grid API ref.

current

current: GridApi<TRow> | null

columnManagement?

optional columnManagement?: boolean | ColumnManagementConfig

Defined in: src/components/DataGrid.tsx:152

Enables column management integrations.

columnOrder?

optional columnOrder?: ColumnOrderState

Defined in: src/components/DataGrid.tsx:104

Controlled column order.

columnPinning?

optional columnPinning?: ColumnPinningState

Defined in: src/components/DataGrid.tsx:110

Controlled column pinning.

columns

columns: AnyColumn<TRow>[]

Defined in: src/components/DataGrid.tsx:80

The column definitions.

columnSizing?

optional columnSizing?: ColumnSizingState

Defined in: src/components/DataGrid.tsx:116

Controlled column widths keyed by column id.

contextMenu?

optional contextMenu?: true | ContextMenuConfig<TRow>

Defined in: src/components/DataGrid.tsx:200

Enables the right-click context menu. true = defaults; pass a config to override.

data

data: TRow[]

Defined in: src/components/DataGrid.tsx:78

The rows to display.

dataSource?

optional dataSource?: DataSource<TRow>

Defined in: src/components/DataGrid.tsx:86

Optional external data source with server-side capabilities (lazy loading, pagination, etc.). When provided, the grid uses this instead of creating an InMemoryDataSource from data.

defaultColumnOrder?

optional defaultColumnOrder?: ColumnOrderState

Defined in: src/components/DataGrid.tsx:106

Initial uncontrolled column order. Defaults to the columns order.

defaultColumnPinning?

optional defaultColumnPinning?: ColumnPinningState

Defined in: src/components/DataGrid.tsx:112

Initial uncontrolled column pinning. Defaults to each column’s pin field.

defaultColumnSizing?

optional defaultColumnSizing?: ColumnSizingState

Defined in: src/components/DataGrid.tsx:118

Initial uncontrolled column widths keyed by column id.

defaultExpanded?

optional defaultExpanded?: boolean

Defined in: src/components/DataGrid.tsx:95

Tree mode: when true, every row starts expanded. Defaults to false.

defaultSort?

optional defaultSort?: ColumnSort[]

Defined in: src/components/DataGrid.tsx:97

Initial sorting state — an ordered list of column sorts.

defaultViewState?

optional defaultViewState?: ViewState

Defined in: src/components/DataGrid.tsx:154

Initial view state to restore after table creation.

density?

optional density?: Density

Defined in: src/components/DataGrid.tsx:128

Visual density. Default: ‘standard’.

editable?

optional editable?: EditableConfig

Defined in: src/components/DataGrid.tsx:136

Enables cell editing. Omit to keep the grid read-only.

export?

optional export?: ExportConfig<TRow>

Defined in: src/components/DataGrid.tsx:150

Configures grid export defaults.

flashOnUpdate?

optional flashOnUpdate?: FlashConfig

Defined in: src/components/DataGrid.tsx:207

Briefly highlights cells whose values change between renders. Useful with useLiveUpdates or any other source of streaming row updates. Default off.

groupBy?

optional groupBy?: string[]

Defined in: src/components/DataGrid.tsx:102

Row grouping: column ids to group by, in nesting order. Mutually exclusive with tree mode; when treeData is provided, tree wins.

height?

optional height?: number

Defined in: src/components/DataGrid.tsx:88

Height of the scrollable body area in pixels. Defaults to 400.

icons?

optional icons?: Partial<Record<StrataIconName, ComponentType<{ className?: string; size?: number; }>>>

Defined in: src/components/DataGrid.tsx:134

Icon overrides for the grid’s built-in icons.

onCellEditEnd?

optional onCellEditEnd?: (event) => void

Defined in: src/components/DataGrid.tsx:160

Called when a cell edit ends.

Parameters

event

columnId

string

committed

boolean

newValue

unknown

rowId

string

value

unknown

Returns

void

onCellEditStart?

optional onCellEditStart?: (event) => void

Defined in: src/components/DataGrid.tsx:158

Called when a cell edit starts.

Parameters

event

columnId

string

rowId

string

value

unknown

Returns

void

onColumnOrderChange?

optional onColumnOrderChange?: (state) => void

Defined in: src/components/DataGrid.tsx:108

Called when drag-to-reorder changes the column order.

Parameters

state

ColumnOrderState

Returns

void

onColumnPinningChange?

optional onColumnPinningChange?: (state) => void

Defined in: src/components/DataGrid.tsx:114

Called when column pinning changes.

Parameters

state

ColumnPinningState

Returns

void

onColumnSizingChange?

optional onColumnSizingChange?: (state) => void

Defined in: src/components/DataGrid.tsx:120

Called when column resize changes column widths.

Parameters

state

ColumnSizingState

Returns

void

onFillRange?

optional onFillRange?: (event) => void

Defined in: src/components/DataGrid.tsx:198

Called when the user completes a fill-handle drag.

Parameters

event

FillRangeEvent

Returns

void

onPaginationChange?

optional onPaginationChange?: (state) => void

Defined in: src/components/DataGrid.tsx:181

Called whenever the grid’s paginated state changes. Use this to drive a shell-rendered status bar with total count, current page, or loading state — ViewState intentionally doesn’t include pagination, so this callback is the supported seam.

Parameters

state

currentPage

number

error

Error | null

hasMore

boolean

isLoading

boolean

pageSize

number

totalCount

number

totalPages

number

Returns

void

onRowEditEnd?

optional onRowEditEnd?: (event) => void

Defined in: src/components/DataGrid.tsx:170

Called when a row edit ends.

Parameters

event

changes

Record<string, { newValue: unknown; oldValue: unknown; }>

committed

boolean

rowId

string

Returns

void

onRowEditStart?

optional onRowEditStart?: (event) => void

Defined in: src/components/DataGrid.tsx:168

Called when a row edit starts.

Parameters

event

rowId

string

Returns

void

onSelectionChange?

optional onSelectionChange?: (state) => void

Defined in: src/components/DataGrid.tsx:124

Called when row selection changes.

Parameters

state

SelectionState

Returns

void

onTreeChange?

optional onTreeChange?: (state, changeSet) => void

Defined in: src/components/DataGrid.tsx:142

Called when the tree editor state changes.

Parameters

state

TreeState<TRow>

changeSet

ChangeSet<TRow>

Returns

void

onViewStateChange?

optional onViewStateChange?: (state) => void

Defined in: src/components/DataGrid.tsx:156

Called when serializable view state changes.

Parameters

state

ViewState

Returns

void

pagination?

optional pagination?: PaginationConfig

Defined in: src/components/DataGrid.tsx:146

Configures pagination behavior.

rowActions?

optional rowActions?: RowActionsConfig<TRow>

Defined in: src/components/DataGrid.tsx:196

Renders a built-in actions column with per-row buttons. Supports inline icon buttons and kebab-menu displays. The column is pinned to the right edge by default; set pin: false to leave it unpinned, or pin: 'left' to pin it to the left.