How to control programmatically the toggling of a row?

Question

I'm using MaterialTable with REACT (Datatable for React based on Material-UI Table. material-table.com) more precisely the detailed-panel - material-table.com/#/docs/features/detail-panel

What do I need? user should open/close detailed panels and drag/drop items between them.

The problem: each time I React rendering the table all detailed panels are closes.

I'm seeking for a solution that will allow me to set a flag for each row that notes whether it's hidden or open. So while rendering .. React will not close all rows automatically.

I tried setting options and events on the table and panels - None were able to control the row toggling.

The code is very simple:

<MaterialTable
           title = "Group Keywords Preview"
           columns = {[
                 { title : "Group", field : "group" },
                 { title : "Weight", field : "weight" }
           ]}
           options={{
               selection: true
           }}
           data = { my data ...}
           detailPanel = {[
                    {
                        tooltip : 'Show Group',
                        render : rowData => {
                              return <my react component .. />
                        }
                    }
            ]}

/>

Does material-table have any flag/method to toggle a row programmatically? Can I do it in another way?

Thanks in advance.

score 3 · Answer 1 · answered Jul 08 '20 at 21:21

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>
      </>
    )
  }
}

You can use as used in above example.

I believe this is the [source](https://github.com/mbrn/material-table/issues/1340#issuecomment-555845261) of that example. — NicoE, Apr 20 '22 at 16:21

score 0 · Answer 2 · answered Aug 12 '19 at 11:33

0

Yes you can do that. Material table mutates your data by adding a tableData object to each item.

It looks like this:

"tableData":{"id":0,"checked":true}}

This controls the row id, if the item is checked and other things like filtering etc. By changing the checked key to true/false, you can control the selection of the items programmatically.

Hope this helps. Happy coding.

answered Aug 12 '19 at 11:33

Domino987

8,475
2
15
38

Thanks for your help. Unfortunately, this will not help here. I need some toggling manipulation on the row or panel, not on the data. Besides that, there are options to set "check", "filter" etc but no option to set "the row is open/close" – yahu Aug 12 '19 at 12:08
The detail panel is saved in there as well with the toggleDetailPanel function. Maybe you can work with that? – Domino987 Aug 12 '19 at 12:21
Do they have a documentation page or just material-table.com (which is more like examples and code? – yahu Aug 12 '19 at 12:42
They do not document that, because it's internal data handling. But you can hijack it. – Domino987 Aug 12 '19 at 12:58

How to control programmatically the toggling of a row?

2 Answers2

Linked