Support switching out differently shaped datasets in DataGrid

[Jan Potoms]

Summary

I have two datasets that I'd like to show in a datagrid. Each dataset has a different shape. e.g.

const data1 = [{name: 'Joe', age: 100}, {name: 'Anne', age: 100}, {name: 'Pete', age: 100},  {name: 'Leo', age: 100}]
const data2 = [{order: 'O1', color: 'blue'}, {order: 'O2', color: 'green'}, {order: 'O3', color: 'red'},  {order: 'O4', color: 'cyan'}]

It is possible to display these datasets in a single datagrid conditionally by binding

rows = condition ? data1 : data2

and have a condition state on the page decide which dataset to show in the grid.

However, the columns definition is always static. It won't change when the dataset changes.

There are several ways in which the problem can be solved

1. make columns property bindable

Allow for binding the columns property to a json structure that represents the column definitions. Then one could use the same tactic as used in the rows to switch between columns

columns = condition ? data1 : data2

2. Expand data providers

Data providers represent backend data sets. At the moment they don't include any schema information. We could let the DataGrid accept Toolpad core data providers which do include a schema. We could make the dataprovider bindable so a user could switch between two of them conditionally on the grid.

Examples

No response

Motivation

https://discord.com/channels/1131323012554174485/1131329982669525015/1232708642701053983

Search keywords: data grid rows