improvement: Server-side sorting for mo.ui.table

[wasimsandhu]

📝 Summary

Moves column sorting to the backend for mo.ui.table, enabling full table sort per #1573.

🔍 Description of Changes

• Register sort_values function in mo.ui.table with arguments for single-column sort.
• Implement sorting for list of values, list of dicts, dict of lists, and pd/pl/pa dataframes.
• Refactor tanstack react-table in data-table.tsx for server-side sorting (see this SO thread).
• Conditionally render DataTableComponent from LoadingDataTableComponent instead of DataTablePlugin.
• Call sort_values function in LoadingDataTableComponent and pass sort state to DataTableComponent, which passes it to DataTable.

⏰ To Do

• [x] Fix uncaught exception on frontend when clearing sort
• [x] Update sorting state on data change
• [x] Test and debug sort for list of values and dict of lists
• [x] Sorting for dataframes
• [x] Address useEffect warnings
• [x] Fix backend type errors
• [x] Extend to mo.ui.dataframe (?)

📋 Checklist

• [x] I have read the contributor guidelines.
• [x] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• [x] I have added tests for the changes made.
• [x] I have run the code and verified that it works as expected.

📜 Reviewers

@akshayka AND @mscolnick

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marimo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 10:08pm
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2024 10:08pm

[wasimsandhu]

[wasimsandhu]

Summarizing how I'm blocked here after moving the sort state and function call to LoadingDataTableComponent.

Currently, LoadingDataTableComponent is rendered when the given data prop is of type string (CSV urls for large data). It then renders DataTableComponent. The sorting state is passed like:

SortingState pair -> LoadingDataTableComponent -> DataTableComponent -> DataTable

The problem is that DataTableComponent can be conditionally rendered when data is not a file url but contains the actual data, which means this component needs to 1) be able to call the sort function itself, and 2) do it without interfering with a possible upstream LoadingDataTableComponent.

I think the solution here is to get rid of Loading and merge the loading logic into DataTableComponent, but I don't want to perform that refactoring in case there was a specific reason to have two components instead of one.

[wasimsandhu]

Adding some unit tests, brb.

[github-actions[bot]]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.6.18-dev9

[wasimsandhu]

Woohoo!