Skip to main content

Row Customization

There are multiple ways to customize the rows in the grid.

  • Using the format property of the column definition
  • Using the labelFunction property of the column definition
  • Using the itemRenderer property of the column definition

If you just need to customize the styling, you can also use

  • rowStyleFunction property of the grid options
  • rowClassNamesFunction property of the grid options
  • cellClassNamesFunction property of the column definition
  • cellStyleFunction property of the column definition

Lets start with the simplest way to customize the rows, using the format property of the column definition.

Using the format property

Live Editor
Result
Loading...

In the example above, we are using the format property of the column definition to customize the rows. As you can see, we are using the format property to convert the lastName column to uppercase. We are also using the format property to convert the annualSalary column to currency, and the hireDate column to date, and the isActive column to boolean.

Using the labelFunction property

Sometimes, you may want to customize the row using a function. For example, you may want to display the first name and last name in a single column. You can do this by using the labelFunction property of the column definition.

Live Editor
Result
Loading...

In this example, we are using the labelFunction to display the first name and the salary of the employee. The labelFunction is called with the item and the column. The item is the row data and the column is the column definition. You can use this to format the value of the cell based on the column.

Using the itemRenderer property

Sometimes, you may want to customize the row using a custom component. For example, you may want to display the first name and last name in a single column. You can do this by using the itemRenderer property of the column definition.

Live Editor
Result
Loading...

In this example, we are using the itemRenderer to display the first name and the salary of the employee. The itemRenderer is called with the props. The props contains the node, which has a reference to the row data and the column definition. You can use this to format the value of the cell based on the column.

Using itemRenderers to render icons

Lets say you want to render an icon based on the value of the cell when the user hovers over the cell. You can do this by using the itemRenderer property of the column definition.

Live Editor
Result
Loading...

Using the rowStyleFunction property

Sometimes, you may want to customize the row using a function. For example, you may want to change the background color of the row based on the value of the row. You can do this by using the rowStyleFunction property of the grid options.

Live Editor
Result
Loading...

In this example, we are using the rowStyleFunction to change the background color of the row based on the salary of the employee. The rowStyleFunction is called with the node. The node has a reference to the row data. You can use this to format the value of the cell based on the column.

Using the rowClassNamesFunction property

Sometimes, you may want to customize the row using a function. For example, you may want to change the background color of the row based on the value of the row. You can do this by using the rowClassNamesFunction property of the grid options.

Live Editor
Result
Loading...

In this example, we are using the rowClassNamesFunction to change the background color of the row based on the salary of the employee. The rowClassNamesFunction is called with the node. The node has a reference to the row data. You can use this to format the value of the cell based on the column.

Using the cellClassNamesFunction property

Sometimes, you may want to customize the cell using a function. For example, you may want to change the background color of the cell based on the value of the cell. You can do this by using the cellClassNamesFunction property of the grid options.

Live Editor
Result
Loading...

In this example, we are using the cellClassNamesFunction to change the background color of the cell based on the salary of the employee. The cellClassNamesFunction is called with the node. The node has a reference to the row data and the column definition. You can use this to format the value of the cell based on the column.

Using the cellStyleFunction property

Sometimes, you may want to customize the cell using a function. For example, you may want to change the background color of the cell based on the value of the cell. You can do this by using the cellStyleFunction property of the grid options.

Live Editor
Result
Loading...

In this example, we are using the cellStyleFunction to change the background color of the cell based on the salary of the employee. The cellStyleFunction is called with the node. The node has a reference to the row data and the column definition. You can use this to format the value of the cell based on the column.