SortColumn
Describes a sorted column.
interface SortColumn {
readonly columnKey: string;
readonly direction: SortDirection;
}
Properties
The key of the column being sorted.
The sort direction (‘ASC’ or ‘DESC’).
SortDirection
Sort direction values.
type SortDirection = 'ASC' | 'DESC';
'ASC' - Ascending order'DESC' - Descending order
RowsChangeData<TRow, TSummaryRow>
Data provided to onRowsChange callback.
interface RowsChangeData<R, SR = unknown> {
indexes: number[];
column: CalculatedColumn<R, SR>;
}
Properties
Array of row indexes that changed.
column
CalculatedColumn<R, SR>
required
The column where changes occurred.
ColSpanArgs<TRow, TSummaryRow>
Arguments passed to the colSpan function.
type ColSpanArgs<TRow, TSummaryRow> =
| { type: 'HEADER' }
| { type: 'ROW'; row: TRow }
| { type: 'SUMMARY'; row: TSummaryRow };
Variants
Example
import type { Column } from 'react-data-grid';
const columns: readonly Column<Row>[] = [
{
key: 'title',
name: 'Title',
colSpan(args) {
if (args.type === 'ROW' && args.row.isFullWidth) {
return 3; // Span 3 columns
}
return undefined;
}
}
];
RowHeightArgs<TRow>
Arguments passed to TreeDataGrid’s rowHeight prop when it is a function.
type RowHeightArgs<TRow> =
| { type: 'ROW'; row: TRow }
| { type: 'GROUP'; row: GroupRow<TRow> };
Variants
Example
function getRowHeight(args: RowHeightArgs<Row>): number {
if (args.type === 'GROUP') {
return 40;
}
return args.row.isLarge ? 60 : 35;
}
<TreeDataGrid rowHeight={getRowHeight} ... />
GroupRow<TRow>
Represents a grouped row in TreeDataGrid.
interface GroupRow<TRow> {
readonly childRows: readonly TRow[];
readonly id: string;
readonly parentId: unknown;
readonly groupKey: unknown;
readonly isExpanded: boolean;
readonly level: number;
readonly posInSet: number;
readonly setSize: number;
readonly startRowIndex: number;
}
Properties
Array of child rows in this group.
Unique identifier for the group.
ID of the parent group, if nested.
Whether the group is expanded.
Nesting level of the group (0 for top-level).
Position in the set (for ARIA).
Size of the set (for ARIA).
Starting row index of the group.
ColumnWidths
A map of column widths.
type ColumnWidths = ReadonlyMap<string, ColumnWidth>;
interface ColumnWidth {
readonly type: 'resized' | 'measured';
readonly width: number;
}
ColumnWidth Properties
type
'resized' | 'measured'
required
The type of width:
'resized' - Width set by user resizing'measured' - Width measured from content
columnWidths and onColumnWidthsChange props to control column widths externally.
Renderers<TRow, TSummaryRow>
Custom renderer configuration for the grid.
interface Renderers<TRow, TSummaryRow> {
renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
noRowsFallback?: Maybe<ReactNode>;
}
Properties
renderCell
(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode
Custom cell render function.
renderCheckbox
(props: RenderCheckboxProps) => ReactNode
Custom checkbox render function.
renderRow
(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode
Custom row render function.
renderSortStatus
(props: RenderSortStatusProps) => ReactNode
Custom sort status indicator render function.
Custom empty state to display when there are no rows.
Direction
Grid layout bidirectionality.
type Direction = 'ltr' | 'rtl';
'ltr' - Left-to-right (default)'rtl' - Right-to-left
CellNavigationMode
Cell navigation mode values.
type CellNavigationMode = 'NONE' | 'CHANGE_ROW';
'NONE' - No navigation when reaching the edge of a row'CHANGE_ROW' - Navigate to the next/previous row when reaching the edge
DataGridHandle
Handle type assigned to a grid’s ref for programmatic grid control.
interface DataGridHandle {
element: HTMLDivElement | null;
scrollToCell: (position: Partial<Position>) => void;
selectCell: (position: Position, options?: SelectCellOptions) => void;
}
Properties
element
HTMLDivElement | null
required
Reference to the grid DOM element.
scrollToCell
(position: Partial<Position>) => void
required
Scrolls the grid to bring the specified cell into view.gridRef.current?.scrollToCell({ rowIdx: 10, idx: 2 });
selectCell
(position: Position, options?: SelectCellOptions) => void
required
Selects the specified cell programmatically.gridRef.current?.selectCell(
{ rowIdx: 5, idx: 1 },
{ enableEditor: true }
);
Example
import { useRef } from 'react';
import { DataGrid, DataGridHandle } from 'react-data-grid';
function MyGrid() {
const gridRef = useRef<DataGridHandle>(null);
function scrollToTop() {
gridRef.current?.scrollToCell({ rowIdx: 0 });
}
return <DataGrid ref={gridRef} columns={columns} rows={rows} />;
}
DefaultColumnOptions<TRow, TSummaryRow>
Default options applied to all columns.
type DefaultColumnOptions<TRow, TSummaryRow> = Pick<
Column<TRow, TSummaryRow>,
| 'renderCell'
| 'renderHeaderCell'
| 'width'
| 'minWidth'
| 'maxWidth'
| 'resizable'
| 'sortable'
| 'draggable'
>;
Column properties that can be applied as defaults to all columns.
ResizedWidth
Type for resized column width values.
type ResizedWidth = number | 'max-content';
number - Width in pixels'max-content' - Automatically size to content
Omit<T, K>
Utility type for omitting properties from a type.
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
Maybe<T>
Utility type for optional values.
type Maybe<T> = T | undefined | null;
StateSetter<S>
Utility type for React state setters.
type StateSetter<S> = React.Dispatch<React.SetStateAction<S>>;