# Introducing AGridable: Effortlessly format tabular data in your Dash app

**URL:** <https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815>\
**Category:** Dash Python\
**Tags:** community-components\
**Created:** [May 29, 2024, 9:00am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815 "2024-05-29T09:00:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lamesjaidler](https://avatars.discourse-cdn.com/v4/letter/l/f19dbf/32.png) [@lamesjaidler](https://community.plotly.com/u/lamesjaidler)\
**Post date:** [May 29, 2024, 9:00am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/1 "2024-05-29T09:00:26Z")

</div>

I’ve recently released a new Python library - **AGridable** - which makes formatting tables in your Dash app a breeze 💨

It’s a wrapper for the wonderful [Dash AG Grid](https://github.com/plotly/dash-ag-grid) library and enables users to quickly and easily apply formatting, without having to go through the (sometimes rather complex) process of configuration. For example, you can quickly and easily apply conditional colour formatting based on the range of values in a column.

Curious to learn more? Check out my detailed [Medium article](https://medium.com/@james_laidler/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app-732c589c1088) where I dive into how this library works, its features and how it can transform the development of your Dash app 🚀

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [May 29, 2024, 9:56am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/2 "2024-05-29T09:56:13Z")

</div>

Pretty cool 🙂

If you’re interested, there is a way to avoid having to copy the assets (CSS, js) and directly have them in your package and working with Dash.

---

<div class="post-metadata">

**Author:** ![lamesjaidler](https://avatars.discourse-cdn.com/v4/letter/l/f19dbf/32.png) [@lamesjaidler](https://community.plotly.com/u/lamesjaidler)\
**Post date:** [May 29, 2024, 10:56am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/3 "2024-05-29T10:56:41Z")

</div>

@RenaudLN thanks for replying - that sounds great! I couldn’t work out how to do it myself (I tried stringified JS functions but it only seemed to allow for single line functions, which doesn’t really work for more complex processes). Do you have any examples/docs you can link me to?

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [May 29, 2024, 11:10am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/4 "2024-05-29T11:10:40Z")

</div>

You simply need to add `_css_dist`, `_js_dist` (respecting a certain format) and ` __version__ ` to your main ` __init__.py`.

See [this link for an example](https://github.com/RenaudLN/dash-pydantic-form/blob/main/dash_pydantic_form/ __init__.py) 🙂  
(namespace refers to the name of the package, in your case would be `"agridable"`)

---

<div class="post-metadata">

**Author:** ![lamesjaidler](https://avatars.discourse-cdn.com/v4/letter/l/f19dbf/32.png) [@lamesjaidler](https://community.plotly.com/u/lamesjaidler)\
**Post date:** [May 29, 2024, 11:36am UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/5 "2024-05-29T11:36:32Z")

</div>

@RenaudLN thanks for sharing! I’ll give it a try 👍

---

<div class="post-metadata">

**Author:** ![lamesjaidler](https://avatars.discourse-cdn.com/v4/letter/l/f19dbf/32.png) [@lamesjaidler](https://community.plotly.com/u/lamesjaidler)\
**Post date:** [May 29, 2024, 9:50pm UTC](https://community.plotly.com/t/introducing-agridable-effortlessly-format-tabular-data-in-your-dash-app/84815/6 "2024-05-29T21:50:14Z")

</div>

@RenaudLN worked like a charm - many thanks for the tip! I’ve updated AGridable to 0.0.3 to reflect this; no longer have to copy over those pesky JS and CSS files 🙌
