Collapsible grouped view based on column values (custom widget)

Showcase
1

A custom widget to visually group records with fold/unfold accordion-style — similar to Notion or Airtable grouped views.

Live demo: Test folding groups - Grist

Source: grist-widget-grouped-view

Features:

  • Group by any column
  • Fold / unfold each group — or all at once
  • Sort groups alphabetically or by record count
  • Per-group color picker (persisted via grist.setOption())
  • Configurable boolean display (✓/✗, Oui/Non, badge…) — shown only when a boolean column is present
  • Vertical scroll per group with adjustable max height
  • WCAG 2.1 AA accessibility — keyboard navigation, ARIA, semantic HTML

To use it, add a Custom Widget view, point it to:
https://maximelacoste.github.io/grist-widget-grouped-view/widget_groupes.html
then select Read table access.

Overview :

2026-03-20 09_22_11-Test folding groups - Grist — Mozilla Firefox
2026-03-20 09_22_11-Test folding groups - Grist — Mozilla Firefox1522×894 69.7 KB

Config panel :

2026-03-20 09_22_27-Test folding groups - Grist — Mozilla Firefox
2026-03-20 09_22_27-Test folding groups - Grist — Mozilla Firefox1515×460 31.1 KB

9 Likes
March 2026 newsletter - Grist automations and the busiest community month yet
2

Wow!! I love it! :heart_eyes: Thank you for sharing.

1 Like
3

You can thank Claude AI too. :smiling_face:

1 Like
4

Looks really nice, Maxime. Thank you for your work. I see some use cases in the future for us.
Would it be possible to support english?

5

Thanks. Most (a huge most) part of the work was made by Claude AI. The code is open, don’t hesitate to adapt it to your needs.:dove:

6

That is something I´ve been thinking about. The french community is very productive and has developed some nice looking widgets across the board. Unfortunately, they´re mostly not localized.

I could try to translate some of them via GitLocalize (which I have never done before). But how would that work for this widget specifically? Does it recognize my region settings in Grist?

Apparently this was already a question on GitHub; Add a how-to translate documentation · Issue #394 · gristlabs/grist-help · GitHub

7

Claude wants to reassure you ^^

"Good news: the widget can detect the browser language automatically via navigator.language,
without needing any Grist setting. I already use this approach in another widget
(radar chart).

For this grouped view widget, I’ll add EN/FR detection in the next version —
all UI strings (toolbar labels, settings panel, boolean formats, empty state messages)
will switch automatically based on the browser locale.

GitLocalize is a great idea for larger projects, but for a single-file widget like this one,
a simple const i18n = { fr: {...}, en: {...} } object with navigator.language.startsWith('fr')
is enough and keeps everything self-contained.

I’ll update the GitHub repo shortly. If you’d like to contribute translations for other languages
(ES, DE…), a PR with an extra key in the i18n object would be very welcome!"

1 Like
8

Thanks for your input, it was very helpful. I implemented it, everything was fine, until today, it just isn’t working. Any ideas?

9

It should be fixed now.