Top
DataGrid - Using a data source
DataGrid
The dataSource prop specifies the source of data for grid contents. The <DataGrid /> supports both sync & async dataSource.
The simplest use-case is a synchronous dataSource, in the form of an array. The dataSource items (the objects in the array) are not constrained to a specific shape, but they need to have a property which can be used as a unique identifier (most often, this is called "id"). When configuring the <DataGrid />, this property should be specified in the idProperty="id". The properties in the dataSource items, although not constrained to a certain shape, will generally match the configured columns.
To boost performance of the <DataGrid />, we treat props as immutable and only update the <DataGrid /> when you pass different props.
So for example, to improve the rendering performance, make sure you pass the same reference to a dataSource when rendering the grid, instead of building the dataSource in the render function of your app and passing it new each time to the grid, even when the dataSource doesn't change.
Passing the same dataSource on each render when it doesn't change is especially important in some cases when the <DataGrid /> indexes your dataSource array or performs other performance-sensitive tasks.
Besides a plain array, the <DataGrid /> supports async dataSource which can be specified as a Promise or a function returning a Promise. Again, the rules of immutability apply, so make sure you pass a reference to the same Promise/function when you want to render the same-exact dataSource.
The promise (as specified by dataSource or as returned by the dataSource function) should be resolved with two possible value types:
  • an array - to be used as the data for the grid
  • an object with the data: Array and count: Number properties - this is generally useful when using remote data with pagination and the count represents the total number of records on the server (only a part of those are sent to the client via pagination).
Besides returning a Promise, dataSource as a function can also return an array, for synchronous dataSource that you want to have full control over (this function is called with information about sortInfo, and limit).
By default, when an async dataSource is used, a <LoadMask is displayed while the promise is unresolved, and hidden once the promise is resolved. However, you can also use the controlled loading prop to have full control over when the grid shows the loading mask.
TIP: You can also use onLoadingChange to know when the <LoadMask is being shown or hidden.
For details on using pagination with the dataSource, see the pagination page.
When there is no data available in the <DataGrid />, a message indicating that no records are available is shown, as specified by emptyText.