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>
</>
)
}
}
您可以按照上面示例中的方式使用。