gregnb / gregnb/mui-datatables

How I can use many tables.

Open
#1,296 2 comments 0 reactions 0 assignees View on GitHub
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"]],
}));

},
![manyTables](https://user-images.githubusercontent.com/17419095/83169563-d54a0700-a0d8-11ea-9ac0-3cac4b1a341c.png)
![manyTables](https://user-images.githubusercontent.com/17419095/83169612-e85cd700-a0d8-11ea-878e-df3518938620.png)

};

{
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.