Material-table: Conditional detail panel options

[jakeleventhal]

Is your feature request related to a problem? Please describe.
I want to be able to do the same thing as here https://github.com/mbrn/material-table/issues/609 as you are able to do for actions with detail panels.

Describe the solution you'd like
I want to conditionally have a detail panel for a row based on the conditions of the row

[jakeleventhal]

Didn't realize there was already a prop for this

[jakeleventhal]

There is a way to disabled the panel, but not hide it completely - reopening

[mbrn]

I can add hidden field to detailPanel asap.

[raph90]

Is there a way to conditionally not have a detail panel - something like :

detailPanel={[ { render: rowData => { if (!rowData.headerRow) { return <h2>yes</h2> } else { return false // this would completely remove any detail panel for this row } } } ]}

[jakeleventhal]

@raph90 I think it makes more sense to have a separate function that returns true or false that is different from the render function

so you would have something like:

// Show panel function
detailsPanelVisibile: (rowData) => rowData.someProp === 'sample',
// Render panel function
detailsPanel: (rowData) => <h2>rowData.data</h2>

[annuranjan2019]

I do have the same issue. It would be nice to have the same component for tables in both the cases - when I have to display the row details, and when I don't have any row details to show.

My suggestion is to make detailsPanel prop to accept false as well in case there is no component to render.
like:
detailsPanel: { rowHasDetails ? rowData => ... : false }

[ldsmike88]

Another way to do it would be to simply add another property:

```
detailPanel: [
rowData => ({
visible: rowData.expandable,
render: () =>

{rowData.name} {rowData.surname}

,
})
]
````

[aesnyder]

Has anyone figured out a way to do this? If so can you please share?

Otherwise, is anyone working on a pull request??

[ldsmike88]

The workaround is to disable it and use display: none on your icon:

const detailPanel = [
  rowData => ({
    disabled: !rowData.expandable,
    icon: () => <UnfoldMore className={!rowData.expandable && classes.displayNone} />,
    openIcon: UnfoldLess,
    render: () => <div>content</div>,
  })
];

[aesnyder]

Thanks @ldsmike88

[michaelgthomas]

The workaround is to disable it and use display: none on your icon:

const detailPanel = [
  rowData => ({
    disabled: !rowData.expandable,
    icon: () => <UnfoldMore className={!rowData.expandable && classes.displayNone} />,
    openIcon: UnfoldLess,
    render: () => <div>content</div>,
  })
];

THANK YOU SO MUCH!!!!!!!

[cristiangabor]

There is still a column where the icon should be. Is there a way not to show that column for detailPanel?

[viktor-mir]

Up topic :) !

My suggestion is to make detailsPanel prop to accept false as well in case there is no component to render.
like:
detailsPanel: { rowHasDetails ? rowData => ... : false }

This would be nice solution!

[viktor-mir]

The workaround is to disable it and use display: none on your icon:

const detailPanel = [
  rowData => ({
    disabled: !rowData.expandable,
    icon: () => <UnfoldMore className={!rowData.expandable && classes.displayNone} />,
    openIcon: UnfoldLess,
    render: () => <div>content</div>,
  })
];

BIG BIG THANK YOU! For a while it is best solution among existed.

[Gr8tDaNe]

There is still a column where the icon should be. Is there a way not to show that column for detailPanel?

I've created a custom package that hides the detailPanel column because I couldn't wait for it to be implemented, if you wanna test it, here it is.
Once installed you can just use options.renderDetailPanelColumn: false to hide it (remember to implement a rowclick or another way to open it).

I'm a noob so this is probably not the ideal way of publishing a package, but I was short on time.
I'll submit a pull request later today.

(I've pasted this in another issue too, sorry)

Ninja edit: set detailPanelColumnAlignment: "right",, otherwise the table doesn't render properly. I don't know why, but I'll look into it before my PR

[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.

[jakeleventhal]

not stale

[petr-like]

const detailPanel = condition ? [] : [
  rowData => ({
    render: () => <div>content</div>,
  })
];

With this decision, we don't render element.

[AlekseiMordas]

@petr-like I have a field code95, if this field empty - I don't want to show panel option for a particular row.
My code is:
detailPanel={ rowData => (rowData.code95==='') ? [] : [ rowData => ({ render: () => <div>content</div>, }) ] }
Unfortunately, it doesn't work. Can you please suggest the right way?