CODEWITHSUNDEEP
reactjsmaterial-ui
hannit cohen
hannit cohen

Reputation: 350

How to format a cell in react material-ui DataGrid

I have a react material-ui DataGrid. One of the cells shows text data representing status, which I want to show in a graphical way - specifically bootstrap badge.

The DataGrid code is:

const ProcessesColumns: ColDef[] = [
{ field: 'id', headerName: 'ID' },
{ field: 'name', headerName: 'Name', width: 300 },
{ field: 'status', headerName: 'Status', width: 130 },
];

const processes = [
{
    id: 1,
    name: 'aaa',
    status: 'Sucess',
},
{
    id: 2,
    name: 'bbb',
    status: 'Fail',
},
{
    id: 3,
    name: 'ccc',
    status: 'Sucess',
},
{
    id: 4,
    name: 'ddd',
    status: 'Success',
},
{
    id: 5,
    name: 'eee',
    status: 'Sucess',
},
{
    id: 6,
    name: 'fff',
    status: 'Fail',
},
]

<DataGrid rows={processes} columns={ProcessesColumns} pageSize={10} />

Upvotes: 0

Views: 9573

Answers (2)

mother_chucker
mother_chucker

Reputation: 55

I think you can do it with renderCell. Here's an example of something similar, and I hope it helps.

I have a column which cells I want to format to have an icon and a value, and I created that in a format function:

const priorityFormater = (cell) => {
    return (
        <span>
            <GrStatusGoodSmall className={taskPriorityColor(cell)} />
            <span className="priority-span">{cell}</span>
        </span>
    );
};

Column definition:

{
    field: "priority",
    headerName: "Priority",
    flex: 0,
    minWidth: 140,
    renderCell: (params) => {
        return priorityFormater(params.value);
    },
},

Result:

Priority formater with renderCell

Upvotes: 3

Clement Montois
Clement Montois

Reputation: 194

I think you should check this You can add a renderCell attribute on your status column definition

Upvotes: 2

Related Questions