Optional cellOptional cellA function that can be used to customize the class names of each cell in this column. If this function is null or returns null, the cell will have the default class names. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return a string of class names.
cellClassNamesFunction: (node) => {
if (node.rowPosition.data.name === 'John') {
return 'my-class-name';
}
return '';
}
Optional cellA function that can be used to control the enabled flag of each cell in this column. If this function is null or returns null, the cell will be enabled, selectable, and rollovers will work. If this function returns false, the cell will not be selectable, the item renderers will be disabled and it will have no rollovers. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should true or false.
Optional cellA function that can be used to control the selectable flag of each cell in this column. If this function is null or returns null, the cell will be selectable will work. If this function returns false, the cell will not be selectable, This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should true or false.
Optional cellA function that can be used to customize the style of each cell in this column. If this function is null or returns null, the cell will have the default style. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return a style object.
cellStyleFunction: (node) => {
if (node.rowPosition.data.name === 'John') {
return {color: 'red'};
}
return {};
}
Optional childrenThe name of the field or property in the data provider item associated with the column. Each DataGridColumn control requires this property and/or the labelFunction property to be set in order to calculate the displayable text for the item renderer. If the dataField and labelFunction properties are set, the data is displayed using the labelFunction and sorted using the dataField. If the property named in the dataField does not exist, the sortCompareFunction must be set for the sort to work correctly. This value of this property is not necessarily the String that is displayed in the column header. This property is used only to access the data in the data provider. For more information, see the headerText property.
Optional dragOptional editOptional enableFlag to enable selection of a row when a cell within that row is clicked. You may choose to set this to false when you have an explicit selection checkbox in the row. Setting this flag to false will disable the row selection when any cell within this column is clicked.
Optional enableenableColumnMenu is used to enable the column menu for this column. Default value is true.
Optional enableenableDrag is used to enable drag the drag indicator on this column. Default value is true.
Optional enableenableFocus is used to enable focus on this column. Default value is true.
Optional enableFor grouped datagrids, when a single column represents entities from various nest levels, its nice to visually indent them. Set this parameter to true for such columns If you wish to programatically control the padding, you could do so via the rendererInitialized event on the grid.
true
Optional enableenableDrag is used to enable drag move on this column. Default value is true.
Optional enableenableDrag is used to enable resize on this column. Default value is true.
Optional enableFlag that indicates whether the user can click on the header of this column to sort the data provider.
true
Optional excludeOptional excludeOptional excludeOptional filterOptions for the header of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/filters
Optional footerOptions for the footer of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/footers
Optional formatOptions for the formatting a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/body#formatters
Optional formatterOptional headerOptions for the header of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/headers
Optional hiddenOptional itemThe renderer for item renderer instances that display the data for each item in the column. You can specify a function callback item renderer component as the value of this property.
null
Optional labelA function that determines the text to display in this column. By default
the column displays the text for the field in the data that matches the
column name. However, sometimes you want to display text based on
more than one field in the data, or display something that does not
have the format that you want.
In such a case you specify a callback function using labelFunction.
For the DataGrid control, the method signature has the following form:
labelFunction(item:Object, column:ColumnOptions):String
Where item contains the DataGrid item object, and
column specifies the DataGrid column.
A callback function might concatenate the firstName and lastName fields in the data, or do some custom formatting on a Date, or convert a number for the month into the string for the month.
Optional lockThe grid supports the following selection modes:
Optional parentOptional percentPlease see widthMode for more details.
Optional selectionOptional sortOptional textOptional textOptional textOptional variableOptional widthPlease see widthMode for more details.
Optional widthThe columnWidthMode property on the column specifies how the column widths are applied. This property defaults to "none".
The grid provides a rich mechanism to control column widths. Column widths are a complicated topic because there are a number of scenarios and rules that we need to account for
Finally, there are the below calculations once the column widths are allocated:
auto
https://reactdatagrid.com/examples/?example=Column_Width_Mode
Generated using TypeDoc
A function that can be used to customize the attributes of each cell in this column. If this function is null or returns null, the cell will have the default attributes. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return an object of attributes.
Example