search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[data grid] Initial state for a checkbox using checkboxSelection #14265

Closed svidskiy closed 1 month ago

svidskiy commented 1 month ago

The problem in depth

How can you make a checkbox default to a true state and then change it to the opposite state when clicked?

Implementation using a base checkbox, but any attempts to change the logic prevent modifying the checkbox.

My example

Your environment

`npx @mui/envinfo` ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 18.18.0 - C:\Program Files\nodejs\node.EXE npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.17 @mui/icons-material: ^5.15.17 => 5.15.17 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.17 => 5.15.17 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-charts: ^7.12.1 => 7.12.1 @mui/x-charts-vendor: 7.12.1 @mui/x-data-grid: 7.3.2 @mui/x-data-grid-pro: ^7.3.2 => 7.3.2 @mui/x-date-pickers: ^7.4.0 => 7.4.0 @mui/x-date-pickers-pro: ^7.4.0 => 7.4.0 @mui/x-license: 7.2.0 @types/react: ^18.2.66 => 18.2.79 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.4.5 ```

Search keywords: data grid Order ID: 89766

michelengelen commented 1 month ago

you need to start with a fully selected rowSelectionModel. IT is basically just an array with all IDs in it: Row[id][]

You can most likely get this with a simple mapping: 

const initialRowSelectionModel = rows.map(row => row.id)
svidskiy commented 1 month ago

you need to start with a fully selected . IT is basically just an array with all IDs in it: rowSelectionModel``Row[id][]

You can most likely get this with a simple mapping:

const initialRowSelectionModel = rows.map(row => row.id)

Thank you, this is a working option

github-actions[bot] commented 1 month ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@svidskiy: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.