gregnb / gregnb/mui-datatables
How I can use many tables.
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
I need use many tables in my app, therefore. the checkbox should be from each table. but, when I select the row of my table 1 the row 1 of the table 2 is also selected, how can I solve this.
My Table One
```
const optionsTabOne = {
filter: true,
selectableRows: "single",
selectableRowsOnClick: true,
filterType: "dropdown",
responsive: this.state.stacked ? 'stacked' : 'scrollMaxHeight',
rowsPerPage: 10,
rowsSelected: this.state.rowsSelected,
download: true,
downloadOptions: {
filename: "tabOne.csv"
},
onRowsSelect: (rowsSelected, allRows) => {
this.setState(state => ({
...state,
rowsSelected: allRows.map(row => row.dataIndex),
rowsSelectedData: this.state.dataOne[allRows[0]["dataIndex"]],
}));
},
};
{
return [
item.col1,
item.col2,
item.col2,
item.col3,
];
})}
columns={this.state.columnTabOne}
options={optionsTabOne}
id="tabTwoo"
key="tabTwoo"
/>
```
My Table Twoo
```
const optionsTabTwoo = {
filter: true,
selectableRows: "single",
selectableRowsOnClick: true,
filterType: "dropdown",
responsive: this.state.stacked ? 'stacked' : 'scrollMaxHeight',
rowsPerPage: 10,
rowsSelected: this.state.rowsSelected,
download: true,
downloadOptions: {
filename: "tabTwoo.csv"
},
onRowsSelect: (rowsSelected, allRows) => {
this.setState(state => ({
...state,
rowsSelected: allRows.map(row => row.dataIndex),
rowsSelectedData: this.state.dataTwoo[allRows[0]["dataIndex"]],
}));
},


};
{
return [
item.col1,
item.col2,
item.col3
];
})}
columns={this.state.columnTabTwoo}
options={optionsTabTwoo}
id="tabTwoo"
key="tabTwoo"
/>
```
how edit the property rowsSelected on option table??
I try
https://codesandbox.io/s/use-check-many-tables-qv3ms?file=/src/App.js
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked CodeSandbox and the MUIDataTable options shown in the issue, especially rowsSelected and onRowsSelect. Reproduce selecting a row in each table, then inspect how the shared state is passed to both instances. Done means each table maintains independent row selection without changing the other table's selection.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100