Column<TRow, TSummaryRow>
Defines the configuration for a column in the grid.
interface Column<TRow, TSummaryRow = unknown> {
readonly name: string | ReactElement;
readonly key: string;
readonly width?: Maybe<number | string>;
readonly minWidth?: Maybe<number>;
readonly maxWidth?: Maybe<number>;
readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
readonly headerCellClass?: Maybe<string>;
readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
readonly frozen?: Maybe<boolean>;
readonly resizable?: Maybe<boolean>;
readonly sortable?: Maybe<boolean>;
readonly draggable?: Maybe<boolean>;
readonly sortDescendingFirst?: Maybe<boolean>;
readonly editorOptions?: Maybe<{
readonly displayCellContent?: Maybe<boolean>;
readonly commitOnOutsideClick?: Maybe<boolean>;
readonly closeOnExternalRowChange?: Maybe<boolean>;
}>;
}
Properties
name
string | ReactElement
required
The name of the column. Displayed in the header cell by default.
A unique key to distinguish each column.
width
number | string
default:"'auto'"
Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns.Can be:
- A number (pixels):
80
- A percentage:
'25%'
- CSS grid values:
'max-content', 'minmax(100px, max-content)'
Minimum column width in pixels.
Maximum column width in pixels.
cellClass
string | ((row: TRow) => Maybe<string>)
Class name(s) for cells. Can be a string or a function that returns a class name based on the row.
Class name(s) for the header cell.
summaryCellClass
string | ((row: TSummaryRow) => Maybe<string>)
Class name(s) for summary cells. Can be a string or a function that returns a class name based on the summary row.
renderCell
(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode
Render function to render the content of cells.
Render function to render the content of the header cell.
renderSummaryCell
(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode
Render function to render the content of summary cells.
renderGroupCell
(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode
Render function to render the content of group cells when using TreeDataGrid.
renderEditCell
(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode
Render function to render the content of edit cells. When set, the column is automatically set to be editable.
editable
boolean | ((row: TRow) => boolean)
Enables cell editing. If set and no editor property specified, then a text input will be used as the cell editor.
colSpan
(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>
Function to determine how many columns this cell should span. Returns the number of columns to span, or undefined for no spanning.
Determines whether column is frozen. Frozen columns are pinned to the start edge (left in LTR, right in RTL).
Enable resizing of the column.
Enable sorting of the column.
Enable dragging of the column.
Sets the column sort order to be descending instead of ascending the first time the column is sorted.
Options for cell editing.Render the cell content in addition to the edit cell content. Enable this option when the editor is rendered outside the grid, like a modal for example. By default, the cell content is not rendered when the edit cell is open.
Commit changes when clicking outside the cell.
Close the editor when the row value changes externally.
CalculatedColumn<TRow, TSummaryRow>
Extends Column with additional computed properties used internally by the grid. This is the type passed to render functions.
interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
readonly idx: number;
readonly level: number;
readonly width: number | string;
readonly minWidth: number;
readonly maxWidth: number | undefined;
readonly resizable: boolean;
readonly sortable: boolean;
readonly draggable: boolean;
readonly frozen: boolean;
readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
readonly renderHeaderCell: (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;
}
Properties
Inherits all properties from Column<TRow, TSummaryRow> with the following additions and modifications:
parent
CalculatedColumnParent<TRow, TSummaryRow> | undefined
Parent column group if nested.
Nesting level when using column groups.
Column width (non-optional, computed from Column.width or defaults).
Minimum column width in pixels (non-optional, defaults to 50).
maxWidth
number | undefined
required
Maximum column width in pixels (non-optional).
Whether column is resizable (non-optional, defaults to false).
Whether column is sortable (non-optional, defaults to false).
Whether column is draggable (non-optional, defaults to false).
Whether column is frozen (non-optional, defaults to false).
renderCell
(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode
required
Cell renderer (non-optional, defaults to renderValue).
Header cell renderer (non-optional, defaults to renderHeaderCell).
ColumnGroup<TRow, TSummaryRow>
Defines a group of columns that share a common header.
interface ColumnGroup<R, SR = unknown> {
readonly name: string | ReactElement;
readonly headerCellClass?: Maybe<string>;
readonly children: readonly ColumnOrColumnGroup<R, SR>[];
}
Properties
name
string | ReactElement
required
The name of the column group. It will be displayed in the header cell.
Class name(s) for the header cell.
children
readonly ColumnOrColumnGroup<R, SR>[]
required
Child columns or column groups.
CalculatedColumnParent<TRow, TSummaryRow>
Represents a parent column group in the calculated column structure.
interface CalculatedColumnParent<R, SR> {
readonly name: string | ReactElement;
readonly parent: CalculatedColumnParent<R, SR> | undefined;
readonly idx: number;
readonly colSpan: number;
readonly level: number;
readonly headerCellClass?: Maybe<string>;
}
Properties
name
string | ReactElement
required
The name of the column group.
parent
CalculatedColumnParent<R, SR> | undefined
required
Parent column group if nested.
Number of columns this group spans.
Class name(s) for the header cell.
ColumnOrColumnGroup<TRow, TSummaryRow>
Union type representing either a Column or a ColumnGroup.
type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
CalculatedColumnOrColumnGroup<TRow, TSummaryRow>
Union type representing either a CalculatedColumnParent or a CalculatedColumn.
type CalculatedColumnOrColumnGroup<R, SR> =
| CalculatedColumnParent<R, SR>
| CalculatedColumn<R, SR>;