问题
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