My task involves organizing the data into columns:
const columns: GridColDef[] = [
{
field: "firstName",
headerName: "First name",
width: 150,
editable: true,
},
{
field: "lastName",
headerName: "Last name",
width: 150,
editable: true,
},
{
field: "age",
headerName: "Age",
type: "number",
width: 110,
editable: true,
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not sortable.",
sortable: false,
width: 160,
valueGetter: (params: GridValueGetterParams) =>
`${params.row.firstName || ""} ${params.row.lastName || ""}`,
},
];
The actual data placed within rows consists of:
const rows = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 14 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: 25 },
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];
I have implemented an onRowClick functionality which captures the clicked row data for further processing.
The requirement is to disable a row if the individual's age is over 30.
(visual reference provided in this image: link)
For the code implementation, please refer to the following link: sandbox