Material-table: Don't use custom render for grouping

[revskill10]

Currently, group dragging doesn't work if a column has a custom render function.

Solution

Use a dragRender function which specify the string to show when grouping

[victor-accarini]

@mbrn I believe I have the same problem and would like to help fix this, when rendering rows I need to show some specific icons, but when grouping the icons disappear because I receive just the value instead of the entire data row.

field: 'status',
render: (dataRow, renderType) => {
   return <Icon type={dataRow.type} /> // Breaks when I group by status
}

Also sometimes I need more than one attribute to render the cell correctly:

field: 'status',
render: (dataRow, renderType) => {
   // Now even if I check renderType === 'group' it doesn't work
   return <Icon type={dataRow.type + dataRow.extra} />
}

Do you prefer a specific function to handle group rendering label or should we handle everything inside the render function?

For the latter option it would be nice to send a third argument with all group rows data, so we could choose which rows to use when rendering for the group...

[csforbes]

For anyone else dealing with this issue, I was able to get past this issue by writing a "customRender" utility function.

function customRender(value, renderType, renderFunc, field, ...args) {
    if (renderType === 'row') {
        return renderFunc(value[field], ...args);
    }
    if (renderType === 'group') {
        return renderFunc(value, ...args);
    }
}

//normal render function
function renderCellData(status) {
   //do stuff
}

//using in column object
...
field: 'status',
render: (value, renderType) => customRender(value, renderType, renderCellData, 'status')

[KLM-GIT]

Thanks @csforbes - your solution works great for grouping by a rendered column value.

[somandubey]

For anyone else dealing with this issue, I was able to get past this issue by writing a "customRender" utility function.

function customRender(value, renderType, renderFunc, field, ...args) {
    if (renderType === 'row') {
        return renderFunc(value[field], ...args);
    }
    if (renderType === 'group') {
        return renderFunc(value, ...args);
    }
}

//normal render function
function renderCellData(status) {
   //do stuff
}

//using in column object
...
field: 'status',
render: (value, renderType) => customRender(value, renderType, renderCellData, 'status')

Thanks @csforbes, this was a nice hack to solve the same!, appreciate the share.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.