v4.0.0-alpha.34 +
Breaking changes were included with Version v4.0.0-alpha.34. onRowSelected has been removed and onSelectionModelChange now returns an array with indexes of the selected rows. You can alter the selection model directly via onSelectionModelChange:
Example from Material UI Docs:
import * as React from 'react'
import { DataGrid } from '@material-ui/data-grid'
import { useDemoData } from '@material-ui/x-grid-data-generator'
export default function ControlledSelectionGrid() {
const { data } = useDemoData({
dataSet: 'Commodity',
rowLength: 10,
maxColumns: 6,
})
const [selectionModel, setSelectionModel] = React.useState([])
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel)
}}
selectionModel={selectionModel}
{...data}
/>
</div>
)
}
Updated Demo on Code Sandbox
Material UI Docs - Controlled Selection
Material UI DataTable Change Log on GitHub
Version 4.0.0-alpha.21:
Instead of
onSelectionChange={(newSelection) => {
console.log(newSelection)
}}
Try onRowSelected, like so:
onRowSelected={(GridRowSelectedParams) => {
console.log(GridRowSelectedParams);
}}
If you want to keep track of the selection state of all rows, you should use this:
onSelectionModelChange={(GridSelectionModelChangeParams) => {
// This will return {selections: [selected row indexes]}
console.log(GridSelectionModelChangeParams);
if (Array.isArray(GridSelectionModelChangeParams.selectionModel)) {
// Iterate the selection indexes:
GridSelectionModelChangeParams.selectionModel.forEach(
// Get the row data:
(selection_index) => console.log(rows[selection_index])
);
}
}}
I set up a Code Sandbox with a working demo for you to try out