How to control programmatically the toggling of a row?

问题

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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/57460159/how-to-control-programmatically-the-toggling-of-a-row

标签

reactjs

material-ui

material-table