材料表 ReactJs 切換細節面板從動作打開/關閉

Question

有沒有辦法通過操作列中的 onClick() => {} 操作控制材料表中的 detailPanel 打開/關閉？

Answer 1

最終我通過遵循這個線程使它工作

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