Estoy tratando de hacer una cuadrícula de datos con un botón de cambio para cambiar de selección simple a selección múltiple.
const dispatch = useDispatch(); const { selectedTransaction } = useSelector(...) const [enableMultipleSelection, setEnableMultipleSelection] = useState<boolean | undefined>(true); const handleEnableMultipleSelectionChange = useCallback((_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => { dispatch(toggleSelect([])) // testing with setTimeOut // work only 1 time setTimeOut(() => { setEnableMultipleSelection(checked) }, 1000) }, [dispatch]); const handleSelectionChange = useCallback((value: GridSelectionModel) => { dispatch(toggleSelect(value)) }, [dispatch]); <FormControlLabel control={<Switch checked={enableMultipleSelection} onChange={handleEnableMultipleSelectionChange} />} label="Select" /> <DataGrid disableSelectionOnClick={enableMultipleSelection} selectionModel={selectedTransaction} onSelectionModelChange={handleSelectionChange} checkboxSelection={enableMultipleSelection} {...} />No sé si es posible con el componente Mui porque cuando lo hago, tengo algún error.
index-esm.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'valueFormatter') at Object.getCellParams (index-esm.js:15) at ai.t.current.hasOwnProperty.t.current.<computed> [as getCellParams] (index-esm.js:1) at Object.setCellFocus (index-esm.js:15) at ai.t.current.hasOwnProperty.t.current.<computed> [as setCellFocus] (index-esm.js:1) at HTMLDocument.<anonymous> (index-esm.js:15)Realmente necesito ayuda por favor
Puede usar onSelectionModelChange para mantener solo la última casilla de verificación marcada:
onSelectionModelChange={(selection) => { if (!enableMultipleSelection && selection.length > 1) { const selectionSet = new Set(selectionModel); const result = selection.filter((s) => !selectionSet.has(s)); setSelectionModel(result); } else { setSelectionModel(selection); } }}Marque este codeandbox para ver el ejemplo.