Material-table: Ability to show or hide Detail Panel

[tr3ysmith]

I need to be able to show or hide a detail panel from outside of the row. It would be really nice if i was able to pass a prop to the row that would allow me to change whether the panel is expanded or not. Currently i know that there is a row click function, but that doesn't help me.

My case is that I have the data for the table coming from a Redux store. I'd like to be able to trigger the row to expand by simply changing a boolean in the redux store.

[ogenodisho]

I think you're going to have to handle this yourself. Set the boolean in your redux store and when the material table loads, programmatically toggle the detail panel using the row click function for every row where your boolean is set.

[mbrn]

Hi @tr3ysmith

You can use tableRef to access onToggleDetailPanel function. Take a look at code

class DetailPanelWithRowClick extends React.Component {
  constructor(props) {
    super(props);

    this.tableRef = React.createRef();
  }


  render() {
    return (
    <>
      <MaterialTable
        tableRef={this.tableRef}
        columns={[
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        ]}
        title="Detail Panel With RowClick Preview"
        detailPanel={rowData => {
          return (
            <iframe
              width="100%"
              height="315"
              src="https://www.youtube.com/embed/C0DPdy98e4c"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            />
          )
        }}
        onRowClick={(event, rowData, togglePanel) => togglePanel()}
      />
      <button onClick={() => {
        this.tableRef.current.onToggleDetailPanel([0], rowData => <div>{rowData.name}</div>)
      }}>toggle second line</button>
      </>
    )
  }
}

I am closing issue. You can reopen if it requires.

[tr3ysmith]

Thanks so much!!! @mbrn

[tr3ysmith]

So i adjusted the function so that it reuses the detail panel function originally defined as a prop to the MaterialTable:

this.tableRef.current.onToggleDetailPanel([rowIndex], this.tableRef.current.props.detailPanel)

This prevents you from having to click the collapse arrow twice.

[rocketkittens]

Example usage within detailPanel prop:

detailPanel={rowData => {
  return (
    <Button onClick={() => {
       tableRef.current.onToggleDetailPanel(
         [rowData.tableData.id],
         tableRef.current.props.detailPanel
      )
    }} >Close</Button>
  )
}}

Example usage when using render function (used when detailPanel is array):

const onToggleDetailPanel = (rowData) => {
    tableRef.current.onToggleDetailPanel(
        [rowData.tableData.id],
        tableRef.current.props.detailPanel[0].render
    )
}

[ingvaldlorentzen]

Posting here in case someone stubles upon this solution.
If you use the solution provided here, you will get issues if you are using filtering or search.
See https://github.com/mbrn/material-table/issues/1653 for more info on why.

Anyways, I found a workaround:

tableRef.current.onToggleDetailPanel(
         [tableRef.current.dataManager.sortedData.findIndex(item => item.id === rowData.id)],
         tableRef.current.props.detailPanel[0].render)

Now, use this workaround at your own risk, it's a bit hacky.
But basically, what I'm doing is finding the new index of the item in the sortedData array. Luckily, I had a unique id in the dataset I could easily find, if you don't have any unique fields in your dataset, then I'm not sure how you would go about solving this, but you might be able to figure something out by looking at the data in the tableRef or dataManager objects.

[sanathkumarx]

If you are using grouping you need to modify @ingvaldlorentzen 's code as follows

            const x = tableRef.current.dataManager.groupedData.findIndex(item => item.value === rowData.parentId);
            const y = tableRef.current.dataManager.groupedData[x].data.findIndex(item => item.childId === rowData.childId);

            tableRef.current.onToggleDetailPanel([x,y], tableRef.current.props.detailPanel[1].render);