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.

Column pinning (PRO)

When you use the Toolpad pro plan, the grid columns can be individually pinned. You can also pre-initialize the grid with pinned columns by using the Pinned option in the column editor:

For example, a table where the Name column is pinned to the left, and the Location column to the right looks as follows:

API

See the documentation below for a complete reference to all props available to the datagrid component in Toolpad Studio.

• <datagrid />