Initialize Checkbox Selection based on Array Values DataGrid MUI

Question

I have a MUI Datagrid with 2 columns, ID and City Name, there are actually only 3 cities in the table. I have a citizen object like this:

const userMockup = {
  id: 1,
  name: "Citizen 1",
  cities: [1, 2],
  isAlive: true
};

The cities array in userMockup represents the cities in which the user lives (with their respective IDs).

I want the rows of the respective cities in which the user lives to be selected when the page loads, I read some DataGrid documentation but with my current code every row gets selected, I need only the rows with id 1 and 2 to be selected, since those are the user cities.

I suspect that something is wrong in the filter part of the selectionModel state.

Here is my code so far, hope you can help me!

Mohanad · Accepted Answer · 2023-02-03 16:06:27Z

1

I think your row filtering logic needs a bit of adjustment. It should be:

rows.filter((r) => userMockup.cities.includes(r.id))

answered Feb 3, 2023 at 16:06

Mohanad

3051 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucas Fernandez Over a year ago

Thanks for your answer! This definitely solves my question. I have one more question that I would like to know if you have the answer, if the cities array in userMockup object is like this: cities: [{id: 1}, {id: 2}] instead of an array of number, how can you do the filtering? Since this way, the filtering throws this exception: Argument of type 'number' is not assignable to parameter of type '{ id: number; }'

Mohanad Over a year ago

You would have to use either the userMockup.cities.find or userMockup.cities.findIndex methods instead. Google "Array.find()" and read more on MDN for examples.

Collectives™ on Stack Overflow

Initialize Checkbox Selection based on Array Values DataGrid MUI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related