Feat/Fix : Dataframe element fix and improvements

[Allaoua9]

This PR was implemented in collaboration with @tonca, many thanks to him !

• Fixed issue with horizontal overflow in the pagination footer
• Improved the Dataframe element by adding filters, sorting, column selection and ability to select the number of lines to display
• New features are optional and disabled by default

---

Summary by cubic

Upgrades the Dataframe element with per-column filters, column visibility, page size control, expandable rows, and a clear-filters action for easier exploration. Also fixes pagination footer overflow, aligns frontend/backend defaults for new options, and safely handles None data.

• New Features

  • Per-column filters and sorting in headers.
  • Column visibility dropdown with select/deselect all; controllable from Python via Dataframe(show_column_visibility=..., show_column_filters=...) and exposed as showColumnVisibility/showColumnFilters in @chainlit/react-client (off by default).
  • Page size selector (5/10/20/50) and a compact rows count indicator.
  • Expandable rows with a full details view on click.
  • New i18n strings for the Dataframe UI across locales, including a localized “no results” state.

• Bug Fixes

  • Fixed horizontal overflow in the pagination footer.
  • Backend: handle data=None in Dataframe.__post_init__ and add (de)serialization for the new visibility/filter flags to keep frontend and backend in sync.

^{Written for commit c583629. Summary will update on new commits.}

[cubic-dev-ai]

5 issues found across 25 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/Elements/Dataframe.tsx">

<violation number="1" location="frontend/src/components/Elements/Dataframe.tsx:78">
P2: Column filter always stores text input, but numeric columns use different filter semantics in TanStack, causing incorrect filtering for number fields.</violation>

<violation number="2" location="frontend/src/components/Elements/Dataframe.tsx:324">
P2: Expanded row details ignore column visibility and reveal hidden column data.</violation>
</file>

<file name="backend/chainlit/translations/zh-TW.json">

<violation number="1" location="backend/chainlit/translations/zh-TW.json:264">
P3: `zh-TW` translation uses a Simplified character in `filterPlaceholder`, causing mixed-script UI text.</violation>
</file>

<file name="backend/chainlit/element.py">

<violation number="1" location="backend/chainlit/element.py:450">
P2: Dataframe now serializes new flags, but Element.from_dict() still lacks a dataframe case and will rebuild these elements as File, losing dataframe type/options when rehydrating from dicts.</violation>
</file>

<file name="backend/chainlit/translations/kn.json">

<violation number="1" location="backend/chainlit/translations/kn.json:261">
P3: The new Kannada translation for `deselectAll` contains a Telugu character (U+0C15) in the middle of the word, resulting in mixed-script, potentially unreadable UI text for kn users.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="backend/chainlit/element.py">

<violation number="1" location="backend/chainlit/element.py:185">
P1: `Element.from_dict()` constructs `Dataframe` without `data`, causing runtime `TypeError` during dataframe deserialization.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[hayescode]

Thanks @Allaoua9. I like the dataframe improvements, but I can't approve it yet because the frontend defaults currently make the new controls effectively opt-out for payloads that omit the new fields. Please align the frontend defaults with the documented/backend false default so older dataframe payloads remain backward-compatible.

[hayescode]

This default is the opposite of the backend/public contract added in this PR. IDataframeElement.showColumnVisibility / showColumnFilters are optional and documented as defaulting to false, but older or persisted dataframe payloads that omit these fields will now render both controls enabled because the frontend falls back to true. Can we make the frontend default align with the contract so absent fields stay opt-in?

[Allaoua9]

Hi @hayescode
Thanks for the review !

I have fixed the issue, now the frontend is aligned with the backend.