Dash AG Grid - New examples in the docs

New in Dash AG Grid Docs

Since the release of dash-ag-grid 2.0.0 we are continuing to add new examples to the docs. We have almost 200 examples so far, and that’s only about half the number available in the upstream AG Grid docs. The grid has so many cool features!

Special thanks to Dash community member @Skiks for adding examples and reviewing the docs we have so far. It’s so helpful to get community input on the prototype docs before they’re moved over to the official dash-doc.

Here are some of the examples Sebastien has added:

Row Dragging: 5 new examples

Dragging multiple rows, row drag annimation, supress move when dragging

ag-grid-row-drag-options

Drag anywhere on the the row - note: no drag handle icon
ag-grid-row-drag-whole-row

Multiple drag handles - Note the custom text that appears while you move the rows

ag-grid-row-drag-multiple

Custom drag rows component
ag-grid-row-drag-custom

Row Height : Setting Variable Row Heights

Row Spanning:

Row Sorting: 5 new examples

  • Sorting with a custom comparitor function

  • Sorting Animation

  • Post sort - how to perform additional sorting after the grid has sorted the rows.

  • Sort API

  • Accented Sort - how to sort with locale-specific characters


Other new examples:

Centered Columns

Thanks @tphil10 for the example

New section: Select Everything or Just Filtered with 3 examples to demo the following props:

  • headerCheckboxSelectionFilteredOnly=False: The checkbox will select all rows when checked, and un-select all rows when unchecked. The checkbox will update its state based on all rows.
  • headerCheckboxSelectionFilteredOnly=True: The checkbox will select only filtered rows when checked and un-select only filtered rows when unchecked. The checkbox will update its state based only on filtered rows.
  • headerCheckboxSelectionCurrentPageOnly=True: The checkbox will select only the rows on the current page when checked, and un-select only the rows on the current page when unchecked.

New section: Server Side Row Model with 3 examples:

  • Simple example
  • With sort and filter
  • With pagination

New Section: Persistence

And More! Check out all the new examples in the docs:

5 Likes

So many great examples! I finally found time to implement first AG Grid tables into our company projects. It looks like AG Grid is super powerfull and there are so many options one can do. I am really glad it is being ported into Dash.

One problem I had was that it is really hard to find relevant information in documentation. Since it is fresh package google is pretty useless and the docu has no search bar so basically the only option is to check every relevant part by hand. I know the documentation will be the part of the dash documentation but even there the search experience is not perfect.

But considering everything I have to say huge THANK YOU for everything you did with AG Grid I believe it will be another backbone of dash experience for a really long time.

Hi @martin2097

Glad you are starting to use AG Grid in your projects and thanks for your kind words.

Your comment about the search is valid. I’ve heard that the dash docs will be getting a new and improved search feature, so this should be a short-term problem.

In the meantime, since we are attempting to keep the structure of the docs and the API as similar as possible to the upstream AG Grid component, it’s often possible to find the answer with a general Google search, or by using the search function on the AG Grid site. When you find the AG Grid page with the answer, you can go to the same page in the dash-ag-grid docs.

I agree, this is not ideal, but note that the temporary docs are written and hosted entirely by Dash community members. We appreciate your patience while Plotly works on getting first class dash-ag-grid docs released.

3 Likes

Thanks for the answer. It is good news that dash search will be overhauled because the library is getting really complex and there are so many community packages of dash this will be a great upgrade.

I am aware of current state and I think it was a good temporary solution. I was just interested in future plans because AG gris is probably the most complex community package so far :slight_smile:

Thanks again!

2 Likes

The amount of examples is impressive, and it is really helpful!

I wonder how can one extend “getRowsRequest” to accept more parameters to make Server Side Row model work?

Is it possible with adding some JS code in assets folder, like explained here?

“… dashAgGridComponentFunctions.js in the assets folder”

Hello @denisz,

The getRowsRequest is not quite available with the strick Server Side row model just yet.

However, you could potentially make your own workflow solely going the JS route. I have a feature request open for exposing the api and columnApi, possibly available upon the developer opting to do so.

I tried just adding it directly with the Server Side and the getRowsRequest but for some reason the info didnt want to be JSON compatible for the Dash callback, so this may be at an impasse.