Skip to content

feat(ui): remember mantine-react-table preferences per table#4811

Open
ajnart wants to merge 3 commits intodevfrom
feat/table-remember-preferences
Open

feat(ui): remember mantine-react-table preferences per table#4811
ajnart wants to merge 3 commits intodevfrom
feat/table-remember-preferences

Conversation

@ajnart
Copy link
Member

@ajnart ajnart commented Jan 7, 2026

Summary

Adds per-table preference persistence for Mantine React Table (MRT) when using useTranslatedMantineReactTable.

How it works (and why it looks a bit “weird”)

  • There can be a small layout shift on first load: on a full page load, Next.js server-rendered HTML cannot include localStorage preferences.

  • Client-side navigation feels instant: when navigating within the app, the table is rendered client-side and the preference hydration runs immediately (before paint) via an isomorphic layout effect, so the saved preferences apply almost instantly.

  • Why useIsomorphicLayoutEffect exists: it uses useLayoutEffect only in the browser (to apply preferences before paint), but falls back to useEffect on the server to avoid React warnings.

  • Why localization uses useQuery (non-suspense): using suspense here could delay preference hydration; we load localization asynchronously and attach it when ready.

  • Why a reducer: preferences are stored as one state object to reduce multiple useState calls and keep updates consistent.

ajnart added 2 commits January 7, 2026 14:17
Add a translated MRT hook that accepts a stable table id and persists user preferences (column visibility/order/sizing/pinning, density, pagination, sorting, filters) to localStorage.

Notes:
- Uses an isomorphic layout effect to hydrate on first mount (avoids SSR hydration mismatch).
- Uses a reducer to manage preference state as a single object.
- Loads MRT localization via non-suspense query so preference hydration is not blocked.
Pass a stable `id` into `useTranslatedMantineReactTable` across management tables, widgets, and modals so column/layout preferences are stored independently per table.
@ajnart ajnart requested a review from a team as a code owner January 7, 2026 13:19
@deepsource-io
Copy link
Contributor

deepsource-io bot commented Jan 7, 2026

Here's the code health analysis summary for commits 70f3ab2..d51aba1. View details on DeepSource ↗.

Analysis Summary

AnalyzerStatusSummaryLink
DeepSource JavaScript LogoJavaScript✅ SuccessView Check ↗

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

Meierschlumpf

This comment was marked as outdated.

@ajnart

This comment was marked as outdated.

lammersbjorn

This comment was marked as spam.

@ajnart ajnart enabled auto-merge (squash) January 15, 2026 20:19
@Meierschlumpf
Copy link
Member

Okay I discarded my code, it causes an infinity loop. Do you think the benefit of adding this outweights the problems it has with flickering and changing of UI between server & client? Because for example if I choose to have 5 per page and open the user management page it shows me 10 until it has completed loading where it now shows me 5

@ajnart
Copy link
Member Author

ajnart commented Jan 19, 2026

Okay I discarded my code, it causes an infinity loop. Do you think the benefit of adding this outweights the problems it has with flickering and changing of UI between server & client? Because for example if I choose to have 5 per page and open the user management page it shows me 10 until it has completed loading where it now shows me 5

I am not 100% sure about this, personally I don't mind a small refresh if it gets me to see the info I care about. I think we should consider this looking at all the tables used throughout the app and decide. We could make it some kind of toggle to "save layout to localstorage" as a good compromise (false by default)

@Meierschlumpf
Copy link
Member

Yeah I like the idea of having it an option to the user, then by default nobody will complain and if they use the feature they "know" why it looks like it does

@ajnart
Copy link
Member Author

ajnart commented Feb 5, 2026

Waiting for #4915 to be merged before adding a new preference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants