Material-table: All rows with detailpanel expanded by default

[felipe989]

Hello.

How can I set an initial default (all lines expanded or not) to a detailpanel?
Or how can I expand the detailpanel of all rows at once?

I'm currently expanding via single line click, but would like to leave an initial default for the entire table.
onRowClick = {(event, rowData, togglePanel) => togglePanel ()}

Edit:
I found de defaultExpanded: true, but it does not seem to work.

[mbrn]

Hi @felipe989 ,

defaultExpanded is about tree data feature. currently there is way to open all detail panels. But i may find a solution.(not immediately)

[john-pc]

@mbrn Maybe better to add an option details open by some key value array

[mbrn]

@john-pc , I will consider this.

[willchris2]

Hello Everyone,
is there already a solution ?
Im struggling with the same problem.

Greetings

[amir-aimco]

Hi Everyone,
Is there any update on this one or any other solution?

[tylercaceres]

Any update on this or work around in the meantime? Thanks in advance.

[cworf]

would love this feature, I have an order cart that dynamically builds itself as the user changes the variant quantities of the active product. I would like to be able to set the order cart table to expand the details panel of the product which is currently being edited.

[gehres]

I actually don't know if i'm helping you, but, I solved this with a workaround.
In short, I did a override of the body component and inserted the render function of my detailPanel to tableData variable...

components={{
                    Body: props => {
                        let renderData = props.renderData
                        renderData.forEach((d,i)=>{
                            renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
                        })
                        props = {...props,renderData:renderData}
                        return <MTableBody {...props} />
                    }

                }}

Hope it help!
@mbrn , please, let me know if it's not right.

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

[simorocksTheBest]

That helped a lot,
I wrote this, using some of what you've done, this living inside a function component.

components={{
            Body: props => {
                let renderData = props.renderData,
                    i = 0;

                while(i < (renderData || []).length){                
                    renderData[i].tableData.showDetailPanel = expandAll === true && !expandAllApplied ? props.detailPanel : renderData[i].tableData.showDetailPanel;
                    i++;

                }

                expandAllApplied = true;
                setTimeout(()=>{setExpandAll(false)},500);

                props = {...props,renderData:renderData}
                return <MTableBody {...props} />
            }

        }}

In an effort to provide an expand all button, but not perpetually force the detail panels open.
I'm fairly new to react, so I'm struggling with bits and pieces, the above works but it throws errors along the lines of messing with state, when the component is been unmounted.

So I guess what I'm trying to achieve is an expand and collapse all, but still allow the user to optionally close or open the detail panels afterwards.

I actually don't know if i'm helping you, but, I solved this with a workaround.
In short, I did a override of the body component and inserted the render function of my detailPanel to tableData variable...

components={{
                    Body: props => {
                        let renderData = props.renderData
                        renderData.forEach((d,i)=>{
                            renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
                        })
                        props = {...props,renderData:renderData}
                        return <MTableBody {...props} />
                    }

                }}

Hope it help!
@mbrn , please, let me know if it's not right.

[shubhamappstec]

I actually don't know if i'm helping you, but, I solved this with a workaround.
In short, I did a override of the body component and inserted the render function of my detailPanel to tableData variable...

components={{
                    Body: props => {
                        let renderData = props.renderData
                        renderData.forEach((d,i)=>{
                            renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
                        })
                        props = {...props,renderData:renderData}
                        return <MTableBody {...props} />
                    }

                }}

Hope it help!
@mbrn , please, let me know if it's not right.

thanks for the code but then after I am not able to collapse!

[gehres]

I actually don't know if i'm helping you, but, I solved this with a workaround.
In short, I did a override of the body component and inserted the render function of my detailPanel to tableData variable...

components={{
                    Body: props => {
                        let renderData = props.renderData
                        renderData.forEach((d,i)=>{
                            renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
                        })
                        props = {...props,renderData:renderData}
                        return <MTableBody {...props} />
                    }

                }}

Hope it help!
@mbrn , please, let me know if it's not right.

thanks for the code but then after I am not able to collapse!

This way, you should control your collapse state on your own

[pthomas931]

I actually don't know if i'm helping you, but, I solved this with a workaround.
In short, I did a override of the body component and inserted the render function of my detailPanel to tableData variable...

components={{
                    Body: props => {
                        let renderData = props.renderData
                        renderData.forEach((d,i)=>{
                            renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
                        })
                        props = {...props,renderData:renderData}
                        return <MTableBody {...props} />
                    }

                }}

Hope it help!
@mbrn , please, let me know if it's not right.

thanks for the code but then after I am not able to collapse!

I've managed to prevent breaking the collapse by checking for the showDetailPanel prop, shown here:

components={{
  Body: props => {
    let renderData = props.renderData
    renderData.forEach((d,i) => {
      if (!renderData[i].tableData.hasOwnProperty("showDetailPanel"))
        renderData[i].tableData.showDetailPanel = props.detailPanel[0].render
    })
    props = {...props,renderData:renderData}
    return <MTableBody {...props} />
  }
}}

Works for now, but know this could change in future releases.

[ishake]

I could really use this option as well!

[alexander-r-jaimy]

is there a foreseen future when this will be available?