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.
function App() {
const columns = [
createColumn("annualSalary", "currency", "Salary"),
{
...createColumn("isActive", "boolean", "Active"),
width: 75,
},
createColumn("hireDate", "date", "Hire Date"),
{
...createColumn("lastName", "string", "Last Name"),
format: (value) => value.toUpperCase(),
},
createColumn("firstName", "string", "First Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.
function App() {
const columns = [
{
...createColumn("annualSalary", "string", "Salary"),
labelFunction: (item, column) => {
return `${item.firstName}'s Salary : € ${item.annualSalary.toFixed(2)}`;
},
},
createColumn("firstName", "string", "First Name"),
createColumn("lastName", "string", "Last Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.
function App() {
const columns = [
{
...createColumn("annualSalary", "string", "Salary"),
itemRenderer: (props) => {
const node = props.node;
const item = node.rowPosition.data;
return (
<div>
<i>
{item.firstName}'s Salary : € {item.annualSalary.toFixed(2)}
</i>
</div>
);
},
},
createColumn("lastName", "string", "Last Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.
function App() {
const columns = [
{
...createColumn("annualSalary", "string", "Salary"),
itemRenderer: (props) => {
const node = props.node;
const ctx = getContext(node.gridOptions);
const activeCell = ctx.modifications.activeCell;
const isActive =
activeCell &&
activeCell.rowIdentifier === node.rowPosition.uniqueIdentifier &&
activeCell.columnIdentifier ===
node.columnPosition.column.uniqueIdentifier;
const item = node.rowPosition.data;
return (
<div
style={{
display: "flex",
gap: 5,
justifyContent: "space-between",
alignItems: "center",
width: "100%",
}}
>
<div>
<i>{item.firstName} Cell Hover</i>
</div>
{isActive ? (
<div
style={{ cursor: "pointer" }}
className="ezgrid-dg-info-cell"
onClick={() => alert("clicked " + item.firstName)}
></div>
) : null}
</div>
);
},
},
{
...createColumn("isActive", "string", "Active"),
itemRenderer: (props) => {
const node = props.node;
const ctx = getContext(node.gridOptions);
const activeCell = ctx.modifications.activeCell;
const item = node.rowPosition.data;
const isActive =
activeCell &&
activeCell.rowIdentifier === node.rowPosition.uniqueIdentifier;
return (
<div
style={{
display: "flex",
gap: 5,
justifyContent: "space-between",
alignItems: "center",
width: "100%",
}}
>
<div>
<i>{item.firstName} Row Hover</i>
</div>
{isActive ? (
<div
style={{ cursor: "pointer" }}
className="ezgrid-dg-info-cell"
onClick={() => alert("clicked " + item.firstName)}
></div>
) : null}
</div>
);
},
},
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%", backgroundColor: "white" }}
gridOptions={{
enableActiveCellHighlight: true,
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.
function App() {
const columns = [
createColumn("annualSalary", "currency", "Salary"),
createColumn("hireDate", "date", "Hire Date"),
createColumn("lastName", "string", "Last Name"),
createColumn("firstName", "string", "First Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
rowStyleFunction: (node) => {
const item = node.rowPosition.data;
if (item.annualSalary > 75000) {
return { backgroundColor: "lightgreen" };
}
return { backgroundColor: "lightblue" };
},
}}
/>
);
}
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.
function App() {
const columns = [
createColumn("annualSalary", "currency", "Salary"),
createColumn("hireDate", "date", "Hire Date"),
createColumn("lastName", "string", "Last Name"),
createColumn("firstName", "string", "First Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
rowClassNamesFunction: (node) => {
const item = node.rowPosition.data;
if (item.annualSalary > 75000) {
return "ezgrid-dg-quick-find-cell";
}
},
}}
/>
);
}
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.
function App() {
const columns = [
{
...createColumn("annualSalary", "currency", "Salary"),
cellClassNamesFunction: (node) => {
const item = node.rowPosition.data;
if (item.annualSalary > 75000) {
return "ezgrid-dg-quick-find-cell";
}
},
},
createColumn("hireDate", "date", "Hire Date"),
createColumn("lastName", "string", "Last Name"),
createColumn("firstName", "string", "First Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.
function App() {
const columns = [
{
...createColumn("annualSalary", "currency", "Salary"),
cellStyleFunction: (node) => {
if (node.rowPosition.type !== RowType.Body) return;
const item = node.rowPosition.data;
if (item.annualSalary > 75000) {
return { backgroundColor: "lightgreen", color: "darkgreen" };
}
return { backgroundColor: "lightblue", color: "darkblue" };
},
},
createColumn("hireDate", "date", "Hire Date"),
createColumn("lastName", "string", "Last Name"),
createColumn("firstName", "string", "First Name"),
];
return (
<ReactDataGrid
style={{ height: "400px", width: "100%" }}
gridOptions={{
dataProvider: Employee.getAllEmployees(),
uniqueIdentifierOptions: {
useField: "employeeId",
},
columns,
}}
/>
);
}
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.