Data Grid
Learn about how to use data grids in Toolpad Studio.
Demo
Toolpad Studio builds on top of the MUI X Data Grid to add faster customisation and integration with your internal tools.
Usage
A Data Grid is an essential component in an internal application. The following properties make it usable to work alongside other Toolpad Studio components, queries, data providers.
Rows
Rows property requires an array of data to show inside the data grid. It can be configured either by clicking on it and providing JSON or by binding it to a query output. The video below shows how to bind data to data grid using rows linking:
Columns
Columns property is used to configure the columns to be displayed. Choose a column and you'll get a pop-up window to configure its header name, width, alignment and data type.
From the type drop down you can also customize a column.
Id field
Id field property is used to identify which column contains the id column. By default, the data grid looks for a property named id in the data set to get that identifier. If the row's identifier is not called id, then you need to use this prop to tell the data grid where it's located.
Selection
This property shows the currently selected row or null in case no row has been selected. It is available to be bound to take any action on the selected row like deleting a row from data grid.
Loading
Loading property is used to to inform the user when the data is being prepared. It can be bound to React query properties like isFetching, isLoading.
Appearance
density
Takes three options: compact, standard and comfortable. The first two are shown below:
Compact
Standard
hideToolbar
This prop is used to show – or hide – the toolbar from the data grid. The following Data Grid is rendered along with the toolbar, by setting hideToolbar to true:
Grouping and aggregating (PRO)
When you use the Toolpad pro plan, the DataGrid gains grouping and aggregating capabilities. You can turn this off for individual columns.