[core] Initial DataGrid component

[Janpot]

Bring in DataProvider and DataGrid from the prototype.

Supports all CRUD operations, and serverside/clientside pagination

docs preview

[apedroferreira]

Looks great!
Didn't really comment anything major, just some grammar when i went through it and some other small things.

[mnajdova]

A bit of feedback, can we pin the panel for adding item, I scrolled and suddenly forgot that I had the panel open and wondered why the button is disabled. If we don't pin it, maybe we can make the button always enabled and scroll to the panel if clicked twice (I would go with the pin options from these two).

One more thing, maybe we can add some separator between the fields in the panel and maybe add a disabled state if the user cannot enter some field (e.g. the id is auto-generated).

When using both update and delete, it would be great if the update icons don't cover the remove icon.

The rest looks great 👌

[mnajdova]

I also noticed that the API links are broken, they point to toolpad-core/api/component instead of toolpad/core/api/component. It works as expected on master.

[Janpot]

A bit of feedback, can we pin the panel for adding item, I scrolled and suddenly forgot that I had the panel open and wondered why the button is disabled.

At the moment, the add row logic is built on top of an empty row in editing mode, would like to pin this row but that's a X pro feature. Potential solutions I can think of:

1. keep using an empty draft row, but disable scrolling when this UI is active
2. build instead as a form in a drawer that overlays the datagrid

For me, personally, 2. makes a lot of sense. For tables with lots of columns, vertical scroll in a form feels more natural than horizontal scrolling in an editable row.

One more thing, maybe we can add some separator between the fields in the panel and maybe add a disabled state if the user cannot enter some field (e.g. the id is auto-generated).

Yep, it being built as a row makes customizing this a bit awkward

When using both update and delete, it would be great if the update icons don't cover the remove icon.

The idea would be to keep the delete action available even when the row is in update mode? Basically, show 3 icons?

[mnajdova]

For me, personally, 2. makes a lot of sense. For tables with lots of columns, vertical scroll in a form feels more natural than horizontal scrolling in an editable row.

Right makes sense, I was too focused on this particular use-case.

The idea would be to keep the delete action available even when the row is in update mode? Basically, show 3 icons?

I would vote for this yes. Not a hard push tough, but it seemed a bit awkward that the icon was not there.

[Janpot]

Ok, I'll try it out with a form in follow-up. In the meantime I've disabled scrolling when the create flow is activated.
Another advantage would be: The current method also sort of forces us to use row editing mode only. If the creation flow does not build on top of editing, we can leave users the choice whether they want row or cell editing.

Regarding the row actions, I was trying to avoid having to make the column wider than two icons. But we can make that three. Another option is to to have in editing mode a save icon, and a menu that contains a cancel action and a delete action. If we can enable cell editing mode again, we can even reduce it to a delete icon only.

[mnajdova]

Regarding the row actions, I was trying to avoid having to make the column wider than two icons. But we can make that three. Another option is to to have in editing mode a save icon, and a menu that contains a cancel action and a delete action. If we can enable cell editing mode again, we can even reduce it to a delete icon only.

Sounds good, feel free to tackle in a follow up. We can maybe ask someone from the design team for an opinion.

[Janpot]

I also noticed that the API links are broken, they point to toolpad-core/api/component instead of toolpad/core/api/component. It works as expected on master.

This was fixed on master in the meantime, merged these changes in this branch

[apedroferreira]

I also noticed that the API links are broken, they point to toolpad-core/api/component instead of toolpad/core/api/component. It works as expected on master.

I've added the fix in the monorepo mui/material-ui#42362

Ah Jan already answered!

[apedroferreira]

Looks good!