Consider AG Grid as recommended default over Dash data table

[antonymilne]

Originally posted by @antonymilne in https://github.com/mckinsey/vizro/issues/114#issuecomment-1770347893

Just from quickly playing around with the the example dashboard here, I prefer the AG Grid. I wonder whether we should be recommending that instead of Dash data table as the default table for people to use in the (I guess) most common case that someone just wants to draw a nice table?

• for small screen sizes the table has its own little scroll bar rather than stretching out the whole screen
• I can rearrange column order by drag and drop
• the active row is highlighted
• the style just feels a bit more modern and slicker somehow (though dark theme is obviously not usable right now)

I'd guess some of these you can probably also achieve with Dash data table by using appropriate styling parameters or arguments though?

These are just my impressions from playing around for a few seconds though, so don't take them too seriously - it's the first time I've used both sorts of table, so I don't know what each is capable of or how easily we can get all the features we want out of each. But curious what other people think - should Dash data table or AG Grid be the "default" table that we suggest people to use?

[antonymilne]

@maxschulz-COL @huong-li-nguyen @petar-qb @Joseph-Perkins interested in your thoughts on the above since you're all more familiar with what people like to do with our tables.

Either way I think we will eventually have both dash_data_table and dash_ag_grid available in our codebase and hence we will also need some brief documentation on which to use when (even if this just links to comparison pages already written on other sites).

So following #114 my proposed next steps would be:

1. implement dash_ag_grid (will help to ensure all the table filtering code etc. is sufficiently generic)
2. play around with AG Grid and DataTable some more to get a better feel for them
3. write docs/example apps to help users decide which to use when

Though none of this is high priority as far as I'm concerned.

[huong-li-nguyen]

@antonymilne, thanks for raising this! I think it's important, and I would love to enable the dash_ag_grid as soon as possible.

After publishing the data table as our initial version, I agree with your proposed steps. For now, the highest priority is to get a table version out, and after that we can definitely refine.

I haven't tested the AG grid in detail yet, but you are right that most of the use cases you mention above could also be achieved via the dash_data_table by using the relevant arguments. To give you some examples:

For small screen sizes, the table has its little scroll bar rather than stretching out the whole screen.

• This should also be possible in the data table via activating pagination or inserting the table inside an HTML div where we active the scrolling behavior

I can rearrange column order by drag and drop.

• Here, the AG grid seems to be the better alternative. In the dash_data_table, you can add/delete columns and thus also affect the column order to some extent, but the drag-and-drop does seem like a better user experience

The active row is highlighted

• An example of how this can be done in the data table is here

The style feels a bit more modern and slicker somehow (though a dark theme is not usable right now).

• This we can control; we just haven't styled the data table properly yet, but of course, I agree that it's nice that the default styling of the dash_ag_grid already looks slick and modern from the beginning on. Our design for the table is relatively minimal - I am confident that this can be achieved in both the dash_data_table and dash_ag_grid.

I know these examples are also not exhaustive, as these were just the initial things you noticed, so I agree, it would be great to compare the most commonly requested features in a table and provide some side-by-side comparisons.

@Joseph-Perkins - do we have a list of user requirements for a table? That would be really helpful to get started, to prioritise which features we should compare in a table. Otherwise we can start compiling this together :)

[petar-qb]

Thanks for raising this issue @antonymilne!

I agree that we need to enable both implementations and probably many others, but right now I'm just being introduced to the capabilities and limitations of dash.dataTable. Here is a concrete example of what is possible with it and what we implemented in a previous project (link to video). Looks good? 😄 (there are some features that are not presented here, but are part of the same example, so contact me to show you all if you are interested).

I'm not very familiar with dash AgGrid capabilities (but I know it does not support server paging) so I can't say much about it. All I can say is that I'm happy with the customisation benefits that dash datatable' provides, but there's still a chance thatdash AgGridis even more customisable and may have better performance benefits, but I can't say. However, I believe (but we need to prove this) thatdash datatable` is more widespread among the audience and that Vizro users are accordingly more familiar with this approach.

[AnnMarieW]

This looks like a fantastic project and nice to see it available open source.

It would be great to see AG Grid as the default table component in Vizro. DataTable is a good component, but I think Dash AG Grid has a better UI and more features. It's also easier to style and customize.

it would be great to compare the most commonly requested features in a table and provide some side-by-side comparisons.

• I'm part of the community team developing Dash AG Grid and I'm also familiar with DataTable. I could help with creating examples and doing side-by-side comparisons.

I'm not very familiar with dash AgGrid capabilities (but I know it does not support server paging)

• Server side pagination is available: https://dash.plotly.com/dash-ag-grid/infinite-row-model#pagination

• More info on pagination here: https://dash.plotly.com/dash-ag-grid/pagination

  a dark theme is not usable right now

• Is this still an issue? If so, I could probably help with that. For example, this site demos Dash AG Grid in light and dark color modes for all the themes available in the Dash Bootstrap Components library.

dash datatable is more widespread among the audience and that Vizro users are accordingly more familiar with this approach.

• I expect this is true since DataTable has been around for a long time. However, it's not under active development -- there have been (almost) no new features for years. I think it won't be long before Dash AG Grid is the preferred component for working with tabular data in Dash.

[antonymilne]

Hello @AnnMarieW, amazing to see such a Dash celebrity here! 🤩 I am constantly referring to your Dash pages posts and examples in particular - thank you for all your work on the amazing feature! What we're doing just wouldn't have been possible without everything you've done. I'm curious to know how you found out about Vizro if you don't mind sharing?

Thanks for all the comments on Dash AG Grid, it's great to get some more context on it. I didn't realise that DataTable wasn't actively developed any more, but from what you say it sounds like AG Grid should be the preferred option going forward 👍

The comment about the dark theme not being usable right now is not at all a problem with AG Grid, it was just because we hadn't put any effort into styling yet. I'm sure we will be able to style it properly when we get a chance to do so (or can ask you for help if we have difficulty!).

Since I first made this issue, things have changed a bit so just to update you: we actually released the table functionality last week with vizro 0.1.6. By design there is a single Table model which can take a (somewhat) arbitrary table function in its figure argument. Hence it's actually already sort of possible to use Dash AG Grid in Vizro just by using a custom table function. We deliberately did not tie the Table model to Dash DataTable so that we could enable AG Grid easily in future.

The reason I say sort of possible is that, while the grid will render and respond correctly to filters, we do not yet have:

• built in vizro.tables.dash_ag_grid function
• nice styling applied (also work in progress for the Dash DataTable actually to update the styling so it matches designs)
• ability to use all the different callbacks with Dash AG Grid natively with our actions system (e.g. to filter a graph in response to clicking on the table)

All of these are very much on the backlog though and I hope we will be able to finish implementing them by the end of year!

Due to the Table model structure there is no good way for us to specify a default Table.figure function though (just like we don't have a default Graph.figure function). In this sense all our built in table functions (dash_data_table and soon dash_ag_grid also) are "equally preferred", since one or the other must be explicitly chosen by the user. It sounds like AG Grid should be first choice for most users though, so we should definitely make that recommendation clear in our documentation once we've enabled it properly.

[AnnMarieW]

Hi @antonymilne

"a Dash celebrity"

Haha - you are too kind :blush: . I'm glad you found my contributions helpful. I think I discovered Vizro in the trending repos section in my GitHub homepage feed. I also read your Medium article.

It can be challenging to create a low code solution that is also scalable and customizable. It looks like you are on track to achieve all these objectives with Vizro. I'm a huge fan of open source projects, and I'm happy to help with any Dash related issues.

update - Feel free to post some information about Vizro on the Dash community forum - I'm sure people will be very interested to learn more about it. :slightly_smiling_face: