Comments (14)
More clarity (since I feel some is needed):
I bound my callback function this {this} in constructor
Then in the method, I tried to use the array index args being sent relate to the state data. This doesn't work, so I'm just not sure how to use the data being displayed on the screen to get a row's data that way. I have tried relating the indices to this.state.data, but when I sort the on screen grid in any way, the on screen data won't match the state data indices...
from mui-datatables.
Yeah, I think it could work. overall one thing that stuck out from this whole conversation was what about saving the check/unchecked states. I'm going to add in a prop to load those in incase someone from server side wants to hydrate that state.
So overall, from this ticket the two things to take:
- Add additional info to the onSelectRows to return { index, dataIndex}
- Add additional prop so a user from server side could rehydrate selected rows (if they chose todo so)
from mui-datatables.
Hey @JordanKadish, you're like the biggest package supporter! Not sure where I would be without all your feedback :).
Ok, I'm seeing your issue now. While it's nice to get the index of what is currently selected what is really required is the index of where it is in relation to the provided datastore. What if we modified onRowsSelected to return the following (imagine if we checked off both rows):
[{ index: 0, dataIndex: 0 }],
[{ index: 0, dataIndex: 0 }, { index: 1, dataIndex: 1 }],
from mui-datatables.
Also, if that is something that will help would you want to take this work up?
from mui-datatables.
When returning the dataIndex (assuming that is the one related to what's in the data in browser) I'm not sure how to utilise that index to get rows from in-browser.
The use case I am going for is basically when someone selects a row, it would be helpful to have some key passed in so that when the row is selected, we can more easily identify which row it was. For example if each row has some u_id, that could be passed into the onRowsSelected function in options somehow so when the function is called, instead of returning indicies just return the arrays containing the u_id that was ticked/unticked, and then the array of u_id's that are currently ticked
from mui-datatables.
Ok, the way i'm seeing it if data looks like this:
const data = [
["bob", "smith"],
["john", "apple"]
];
Steps:
- Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 1}] - Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 1}, {index: 1, dataIndex: 1}] - Sort by surname, ascending
- Untick row 1 (which should be "john apple")
-> onRowsSelect returns [{ index: 0, dataIndex: 1}], [ { index: 0, dataIndex: 0} ]
So, when receiving that onRowSelect you could examine what is available for rowsSelected from function(currentRowsSelected: array, rowsSelected: array) => void
And in that Array looking at dataIndex you could then do the following:
const data = [
["bob", "smith"],
["john", "apple"]
];
const options = {
onRowsSelect: (rowsSelected, allRows) => {
allRows.forEach(row => {
const dataRow = data[row.dataIndex]; // this is the row in your data source
console.log(dataRow);
});
console.log(rowsSelected, allRows);
},
};
Looking at this I believe I should change function(currentRowsSelected: array, rowsSelected: array) => void
to function(currentRowsClicked: array, rowsSelected: array) => void
because this callback triggers on a tick/untick
Is this helpful?
from mui-datatables.
Okay so you're saying row.index will be the INITIAL index when the table was first created? With the dataIndex variable in the example you provided, I'm not sure what it's doing: you select the first row and dataIndex becomes 1, but then when you select the second row, its dataIndex is already 1? And then in the final example, the initial row 1's dataIndex has now become 0??
from mui-datatables.
Okay so you're saying row.index will be the INITIAL index when the table was first created?
Yes
Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 1}]
Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 1}, {index: 1, dataIndex: 1}]
Sorry, a mistake (getting late for me here and I'm going to bed at this point). This is what I meant:
Click on row #1
-> onRowsSelect returns [{ index: 0, dataIndex: 0} ], [ {index: 0, dataIndex: 0}]
Click on row #2
-> onRowsSelect returns [{ index: 1, dataIndex: 1} ], [ {index: 0, dataIndex: 0}, {index: 1, dataIndex: 1}]
Sort by surname, ascending
Untick row 1 (which should be "john apple")
-> onRowsSelect returns [{ index: 0, dataIndex: 1}], [ { index: 1, dataIndex: 0} ]
from mui-datatables.
Ah I see. Sure, I think this could work assuming devs keep track of clicked items relative to the current page being sent client side. IE if user requests 5 items to render to screen and clicks some, those clicked items will need some reference point that can be sent back to server. I would imagine that on grid render/re-render, the page being sent can be contained in the data variable and a row extracted via the dataIndex, and then that row could contain a u_id or something
from mui-datatables.
This is great info, as i'm running into a similar issue. Also would it be possible to add select button in the mobile(stacked) version? or maybe allow a selectableRows
function for the mobile(stacked) version tied to a button.
Thanks Jordan and gregnb.
from mui-datatables.
Upgrade to the latest version. onSelectRows function will now return { index, dataIndex }
from mui-datatables.
onRowsSelect not onSelectRows?
from mui-datatables.
Hi, is it possible to pass in my own ID for dataIndex? As I have a list of projects, I would want to select multiple rows to delete and it would be good if I can pass in the project ID of the selected rows.
from mui-datatables.
Owner
What if we do a short in one column and then select a row? In that case the index we get on select will be different from actual array of objects.
In that case, this will not work:
allRows.forEach(row => {
const dataRow = data[row.dataIndex]; // this is the row in your data source
console.log(dataRow);
});
Example :
const data = [
["Rocky", "24"],
["Bob", "19"]
["Jhon", "21"]
];
Then I will do short by name. :
So data will be like inside datatable :
data = [
["Bob", "19"]
["Jhon", "21"]
["Rocky", "24"],
];
In this case bellow solution will give me wrong index
const options = {
onRowsSelect: (rowsSelected, allRows) => {
allRows.forEach(row => {
const dataRow = data[row.dataIndex]; // this is the row in your data source
console.log(dataRow);
});
console.log(rowsSelected, allRows);
},
};
Can you please suggest how to solve this issue?
from mui-datatables.
Related Issues (20)
- Warning "You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used." when using vite HOT 2
- It throws the exception if "page" is larger than its maximum page HOT 1
- Request
- Custom function for selected rows
- Selected rows persist on page change
- Vertical scroll bar on records ONLY?
- customize selectToolbar ( add other actions instead of just the default delete action)?
- how to customize the inbuilt filter function to Cascading Dropdown
- custom filter, removed chip provide wrong `filterPos` when its value is 0 HOT 1
- An option to modify delete icon?
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 6
- Column Drag not working HOT 3
- in customHeadRender only 1 column needs to sort and not remaining elements HOT 1
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
- Twitching while dragging columns
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.