Search code examples
datagridreact-admin

custom rows in react-admin list view

I am using the react-admin list component and want to add a custom layout for specific rows.

Usually, each row is build by the list component using the data from the data-provider. I would like to customize specific rows based on the data of the row. These specific rows should not use the standard layout (and columns), but a specially defined one.

Here is a example, what I am looking for: enter image description here

The special rows should be selected according to the data object. Standard data object, which forms a standard row, may look like:

{ 
    id: 127,
    Reference: "OEPEE4",
    author_id: 12,
    ...
}

The special entry may look like:

{
    id: 128,
    isSpecial: true,
    text: "Lorem Ipsum ...",
    ...
}

Does anyone know how to achieve this? Thanks!

Solution

  • I think the key lies in creating your custom DataGrid component's body and rows, because that way you would be able to check the value of record.isSpecial, as the record is passed to the component. Take a look at this part of the docs.

    I tried playing around a bit with a custom DataGridRow (here's the sandbox), and I was able to display only the text when the record has the isSpecial property, although I think you would need to style the cells and the row. Maybe you get some ideas from it. Let me know if it helps.