Material-table ReactJs toggle detailPanel open/closing from actions

Viewed 972

Is there a way to control the detailPanel opening/closing in material-table from the onClick() => {} action in the actions column ?

1 Answers

Eventualy I made it work by following this thread

export class Services extends React.Component {
   constructor() {
      super();
   }
   this.tableRef = React.createRef();

   render() {
       
      return (
         <MaterialTable
          tableRef={this.tableRef}
          icons={tableIcons}
          title= 'Service catalog table'
          columns={[{ title: "Service Name", field: "nom_service", editable: 'never'}]}
          actions={[
             (rowData) => {
                return ({
                  onClick: (event, rowData) => { 
                     this.tableRef.current.onToggleDetailPanel( [rowData.tableData.id],
                     this.tableRef.current.props.detailPanel[0].render)
                  }
              })}
               
          ]}

          detailPanel={[
            {
              icon: ()=> null,
              openIcon: ()=> null,
              disabled:true,
              render: rowData => {
              
                return (<p>{rowData.nom_service}</p>)
              }
             }  
            
          ]}
      )
  }
}
Related