Is there any option available in DataGrid MUI to export columns with renderCell on a complex object?

3.3k Views Asked by At

I am exporting DataGrid @mui/x-data-grid table using CustomToolbar

I have one of the columns as below

        {
            field: 'industry_type',
            headerName: 'Industry',
            renderCell: (params) => {
                const industry = params.row.industry_type;
                return (
                    <>
                        <p>{`${industry.code}- ${industry.value}`} </p>
                    </>
                );
            }
        }

The csv file downloaded from export option gives the value as [object Object]

How do I get the actual value in csv downloaded file? I need help in fixing this. Thanks.

2

There are 2 best solutions below

1
On BEST ANSWER

Does valueGetter work for exports?

        {
            field: 'industry_type',
            headerName: 'Industry',
            renderCell: (params) => {
                const industry = params.row.industry_type;
                return (
                    <>
                        <p>{`${industry.code}- ${industry.value}`} </p>
                    </>
                );
            },
            valueGetter: (params) => `${params.row.industry_type.code}- ${params.row.industry_type.value}`,
        }
0
On

According to the MUI data grid docs here, you can provide the valueFormatter

{
        field: 'industry_type',
        headerName: 'Industry',
        renderCell: (params) => {
            const industry = params.row.industry_type;
            return (
                <>
                    <p>{`${industry.code}- ${industry.value}`} </p>
                </>
            );
        },
        valueFormatter: ({ value }) => `${value.industry_type.code}- ${value.industry_type.value}`,
    }