How to Retrieve Selected Rows in MUI Grid #2023

mui data grid component allows developers to create tables from data sets, allowing them to display relevant information in an organized and efficient manner. The component provides a variety of features including sorting, searching, paging, filtering and more. It also provides custom column rendering for advanced customization options. Additionally, the component supports integration with other components such as charts and maps for comprehensive analysis of large datasets. With its intuitive user interface and powerful features, mui data grid makes it easy to construct beautiful interactive tables out of any data set.

MUI Data Grid is highly flexible and configurable – users can customize how their table looks and behaves in order to best suit their needs. Users can customize row heights, add columns or remove columns easily right within the component’s settings. Additionally, developers can hook into the data grid’s events to create custom behaviors within their applications.

The component is also easily extensible – users can write their own custom components and integrate them with the mui data grid. This allows for a wide range of powerful features such as creating dynamic filters or integrating with external services like Google Maps or Timezone API.

Overall, MUI Data Grid provides an efficient and easy-to-use solution for quickly constructing interactive tables out of any data set. With its intuitive user interface, powerful features and high degree of customization, it makes building beautiful tables out of complex datasets easier than ever before!

Get Selected Row in MUI Grid

     <DataGrid style={{ height: 700, width: '100%', }}
                    rows={rows}
                    columns={columns}
                    pageSize={10}
                    rowsPerPageOptions={[10]}
                    checkboxSelection
                    disableSelectionOnClick

                    onSelectionModelChange={(ids) => {
                        const selectedIDs = new Set(ids);
                        const selectedRows = rows.filter((row) =>
                            selectedIDs.has(row.id),
                        );

                        setSelectedRows(selectedRows);
                    }}
                />

                <pre style={{ fontSize: 10 }}>
                    {JSON.stringify(selectedRows, null, 4)}
                </pre>

Get Selected Row in MUI Grid