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:
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
Sorting with a custom comparitor function
Post sort - how to perform additional sorting after the grid has sorted the rows.
Accented Sort - how to sort with locale-specific characters
Other new examples:
Thanks @tphil10 for the example
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.
- Simple example
- With sort and filter
- With pagination
And More! Check out all the new examples in the docs:
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.
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.
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
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
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.
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:
- 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
- Add §Updating Column Definition Properties - Partial Update with example using Patch() on
- 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
- 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
- Add §Span Group Header with example
- 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
- Clean and improve examples
- Add multi selection in §Pinned Top Rows
- Add floating filter and custom cell renderer in §Pinned Bottom Rows
patch() instead of callback
- Modify some text formatting
- Clean examples
- Modify intro
- Add §rowHeight Property
- Add §getRowHeight Function with example
- Add word wrap with word breaks
- Add §Row Dragger inside Custom Cell Renderers and merge with §Row Dragger with Custom Start Drag Pixels
- Add §Full Width Row Dragging with example
- 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
- Add new page with examples of making a printer friendly grid layout out.
- Ad example of printing a report
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
The Set Filter takes inspiration from Excel’s AutoFilter and allows filtering on sets of data.
Added 4 pages with 16 new examples:
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.
4 posts were split to a new topic: Dash Ag Grid Pivot Example
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.
For general information on Cell rendering see:
For putting flags in the table cell, you can see examples of custom renderers here:
This one uses images from the assets folder:
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/
If you have more questions on cell renderers, please feel free to open a new topic