I am currently creating a React web application and am using a DataGrid from google's Material-UI. The grid renders based on a selection of a select list(i.e if the select list is of fruits, and the user selects apples, a related DataGrid will render with info about apples. If the user selects another fruit, another related datagrid will render, similar to a Master/Detail relationship).
Since DataGrid offers row selection, I would like to have the first row preselected every time the grid renders, including when the user first enters the page. Currently, the grid renders without any rows selected, and requires the user to click on a row in order to make a selection. I saw on that controlled selection may be possible() although the documentation doesn't explain this in great detail.
I also tried a hack from stackOverflow(Can I initialize the checkbox selection in a material-ui DataGrid?) but that did not seem to work either. I feel like this feature is easier to implement than i am making it out, and should be included out of the box. Thank you in advance!
Edit: Adding a sample code for reference.
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
export default function SingleRowSelectionGrid() {
const [selectedRowID, setSelectedRowID] = useState(0);
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{ field: "firstName", headerName: "First name", width: 130 },
{ field: "lastName", headerName: "Last name", width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90,
},
];
const rows = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
onSelectionChange={(selectedRow) => {
setSelectedRowID(selectedRow.rowIds[0])}}
/>
</div>
);
}
I am currently creating a React web application and am using a DataGrid from google's Material-UI. The grid renders based on a selection of a select list(i.e if the select list is of fruits, and the user selects apples, a related DataGrid will render with info about apples. If the user selects another fruit, another related datagrid will render, similar to a Master/Detail relationship).
Since DataGrid offers row selection, I would like to have the first row preselected every time the grid renders, including when the user first enters the page. Currently, the grid renders without any rows selected, and requires the user to click on a row in order to make a selection. I saw on that controlled selection may be possible(https://material-ui.com/components/data-grid/selection/#controlled-selection) although the documentation doesn't explain this in great detail.
I also tried a hack from stackOverflow(Can I initialize the checkbox selection in a material-ui DataGrid?) but that did not seem to work either. I feel like this feature is easier to implement than i am making it out, and should be included out of the box. Thank you in advance!
Edit: Adding a sample code for reference.
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
export default function SingleRowSelectionGrid() {
const [selectedRowID, setSelectedRowID] = useState(0);
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{ field: "firstName", headerName: "First name", width: 130 },
{ field: "lastName", headerName: "Last name", width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90,
},
];
const rows = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
onSelectionChange={(selectedRow) => {
setSelectedRowID(selectedRow.rowIds[0])}}
/>
</div>
);
}
- Can you provide your code so that we can see what we are working with (you can create a basic example and remove sensitive or proprietary data)? I need an example of what you are trying to do along with your explanation of what you are trying to accomplish. That will help me be able to see if I can help you identify the problem. – Jason Bellomy Commented Feb 11, 2021 at 16:38
- @JasonBellomy Sure! I updated the post to include an example of my code. Thanks in advance! – Lucas Commented Feb 11, 2021 at 18:03
4 Answers
Reset to default 13You need to use the selectionModel prop in the DataGrid component.
...
<DataGrid
checkboxSelection
rows={rows}
columns={columns}
onSelectionChange={(newSelection) => {
setSelection(newSelection.rowIds);
}}
selectionModel={selectedRows}
/>
...
Based on your code, and looking at the Material-UI DataGrid documentation, it looks like you are missing the checkboxSelection property.
Try this and see if it works:
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
const columns = [
{ field: "id", headerName: "ID", width: 70 },
{ field: "firstName", headerName: "First name", width: 130 },
{ field: "lastName", headerName: "Last name", width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90
}
];
const rows = [
{ id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
];
export default function SingleRowSelectionGrid() {
const [selectedRows, setSelection] = React.useState([]);
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
rows={rows}
columns={columns}
onSelectionChange={(newSelection) => {
setSelection(newSelection.rowIds);
}}
/>
{
selectedRows.map(row =>
<span>{row}<span>
)
}
</div>
);
}
Today I had a similar problem. The above mentioned methods work, unless you're fetching data/rows from different sources like ParentPage/State & API. In this code, list is passed by another page as state, so it's instant, while movies are fetched from API, so it takes longer. The problem is when content passed to selectionModel prop, there are no rows/movies to be rendered. I think then Material-UI Data Grid sets content = []. The solution is in the code.
export default function ListItem() {
const location = useLocation();
const { dispatch } = useContext(ListsContext);
const [list, setList] = useState(location.state.list);
const { movies, dispatch: dispatchMovies } = useContext(MoviesContext);
const [content, setContent] = useState(list.content);
useEffect(() => {
getMovies(dispatchMovies).then((elem) => setContent(list.content));
}, [dispatchMovies, list]);
<DataGrid
rows={movies}
disableSelectionOnClick
columns={columns}
rowsPerPageOptions={[10]}
checkboxSelection
onSelectionModelChange={(item) => {setContent(item);}}
selectionModel={content}
/>
There is alternate soulution using Datagrid API, setRowSelectionModel in useEffect. This is complicated but has benefit of not rerendering entire grid on selection.
export default function ListItem() {
const [initialContent, setInitialContent] = useState(props.initialContent);
const [content, setContent] = useState(initialContent);
const apiRef = useGridApiRef();
useEffect(() => {
if (apiRef?.current?.setRowSelectionModel) {
apiRef.current.setRowSelectionModel(initialContent); // Or props.initialContent if it is not lifted
}
}, [initialContent, apiRef]);
<DataGrid
apiRef={apiRef}
onRowSelectionModelChange={(item) => {setContent(item);}}
/>
The idea behind two states is that initialContent is not changed, i used that in situation where i propagated the rowSelectionModel to parent. But If selection stays in component or is provided using ref to the parent, you can use just props.initialContent as source directly inside useEffect function.
api description
how to call api