Dash AG Grid - New examples in the docs

[AnnMarieW]

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

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

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

Custom drag rows component

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:

Dash AG Grid

[martin2097]

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.

[AnnMarieW]

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.

[martin2097]

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

Thanks again!

[denisz]

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?

Dash AG Grid Infinite Row Model

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

Dash AG Grid Components - Cell Renderers

“… dashAgGridComponentFunctions.js in the assets folder”

[jinnyzor]

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.

Expose Grid api and columnApi to JS

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.

[AnnMarieW]

Work is continuing on the Dash AG Grid docs. There are still many features that are available but not yet documented. We are working on adding and updating content based on the official AG Grid docs.

Special thanks to community member @Skiks who is methodically working through every chapter, making edits for clarity, consistency and accuracy and adding new examples. As of last week he has 18 merged pull requests in the dash-docs and completed the review of the first 16 pages in the Rows and Columns sections.

Here are just a few of the new examples:

Column Definitions

---

• Add §Grouping columns to introduce the concept including an example, with a link to the page Column Groups for
  details, as we use it in example §Column Types
• Add §Centered Columns
  
  

Updating Column Definitions

• Add §Updating Column Definition Properties - Partial Update with example using Patch() on columnDefs
• Add §Updating Column Definition Stateful Properties with example
• Add §Maintain Column Order with example
• Modify the example §Updating Column Groups to make it simpler and interesting

---

Column State

• Add §Column State Retrieval from the Updating Column Definitions page
• Add §Apply Partial State with example
• Add §Maintain the Column Order with example
• Add §Save and Restore Partial Column State with example
• Add §Update Column State - More examples
• Add §Width and Flex

Column Groups

• Add §Span Group Header with example
  
  

Column Moving

• Modify §Suppress Hide Leave to merge with §Lock Visible from AG Grid docs and add a new example
• Clean and improve example §Suppress Movable & Lock Position
• Add §Advanced Locked Position Example with example
  
  

Row Pinning

• Clean and improve examples
  • Add multi selection in §Pinned Top Rows
  • Add floating filter and custom cell renderer in §Pinned Bottom Rows
  • Use patch() instead of callback State()
    
    

Row Height

• Modify some text formatting
• Clean examples
• Modify intro
• Add §rowHeight Property
• Add §getRowHeight Function with example
• Add word wrap with word breaks

Row Dragging

• Add §Row Dragger inside Custom Cell Renderers and merge with §Row Dragger with Custom Start Drag Pixels
• Add §Full Width Row Dragging with example

Full Width Rows

• Add new page with:
  • §Define Full Width Rows with example
  • §Detailed Full Width Example with example
  • §Embedded Full Width Rows with example
  • §Full Width Keyboard Navigation with example

Full Width Rows

Full Width Rows with pinned columns

Printing

• Add new page with examples of making a printer friendly grid layout out.
• Ad example of printing a report

Infinite Row Model

In the Serverside Row Models 6 new examples using the Infinite Row Model:

• Sorting, Filtering and Selection
• Specify Selected Rows
• With a loading spinner
• 2 two pagination examples

AG Grid Enterprise - Set Filter

The Set Filter takes inspiration from Excel’s AutoFilter and allows filtering on sets of data.
Added 4 pages with 16 new examples:

[adamschroeder]

Thank you @AnnMarieW for sharing and thank you @Skiks for all your PRs and hard work.

These examples are really helpful in understanding what one can do with Dash AG Grid.

[entropy_l]

Ahanks you @AnnMarieW . Do you know how put the flags in the table cell? I tried to search for a while but couldn’t find a working example ( other than the similar examples cellrendering example ). Thanks.

[AnnMarieW]

HI @entropy_l

For general information on Cell rendering see:

Cell Renderer Components | Dash for Python Documentation | Plotly

For putting flags in the table cell, you can see examples of custom renderers here:

This one uses images from the assets folder:

Full Width Rows | Dash for Python Documentation | Plotly

The example below is for an AG Grid Enterprise feature, but the cell renderer works in AG Grid Community as well. It also uses a cool site that hosts images of flags, so you don’t need to keep them locally in the assets folder. https://flagpedia.net/

Filter List | Dash for Python Documentation | Plotly

If you have more questions on cell renderers, please feel free to open a new topic