Feature Request: Global localization, global default options (Context?)

[bobo96run]

Hi and thank you first for this awesome library!

Currently we have to set the localization per table instance https://www.material-react-table.com/docs/guides/localization#relevant-table-options

I find it unlikely that an app mixes several languages in its UI, hence we would set the same locale in each of our table instances.

Similarly to theme or date localization adapter, I would expect having the ability to define the (default) locale once in the app, typically as a context provider, like theme. This would also prevent some future dev from forgetting to set the localization of a new table instance.

Of course, I could write a custom hook wrapper around useMaterialReactTable to set the locale, but again, some future dev might miss my custom hook and use the plain useMaterialReactTable hook directly instead, bypassing my "default" option setting.

I tried deep mutating the MRT_Localization_EN object that is used as default value in MRT, but unfortunately the library build embeds it inside index.esm.js and does not export it; the MRT_Localization_EN object that we can import from "material-react-table/locales/en" is actually a different reference, therefore mutating it has no effect. If the former were exported, this hack could work.

But beyond global localization, the same idea may apply to other default options, like MRT_Default_Icons (which is also not exported).

Therefore I am posting this Feature Request: add the ability to define common MRT options, typically at app-level.

As for the implementation, we could imagine a Context that is consumed to set the default options, for example something like:

// New Context provided by MRT?
export const MRT_Default_Options_Context = React.createContext({});

// Inside useMRT_TableOptions.ts
  const defaultOptions = React.useContext(MRT_Default_Options_Context);

  localization = useMemo(
    () => ({
      ...MRT_Localization_EN,
      ...defaultOptions?.localization, // extra merge point, if provided
      ...localization,
    }),
    [defaultOptions?.localization, localization],
  );
  // etc.

// Usage example
<MRT_Default_Options_Context.Provider value={{ localization: MRT_Localization_FR }}>
  <MyTableComponent />
  {/* other tables... */}
</MRT_Default_Options_Context.Provider>

const MyTableComponent = () => {
  const tableInstance = useMaterialReactTable({
    columns: columns,
    data: data,
    // No need to set the localization! But we can still override it if desired!
  });

  return <MRT_TableContainer table={tableInstance} />;
};

I can submit a Pull Request if you are ready to take such feature in.
Please let me know!

[KevinVandy]

I think you are over thinking it. The locale can be passed in dynamicly in just about any way possible. Sure use context, or state, or whatever.

[bobo96run]

Hi, thank you for your quick feedback!

It looks like I did not properly described my point: I am not talking about how to pass a locale to a given table instance, but about configuring MRT "globally" (e.g. at project/app level), so that we do not even need to pass the locale explicitly to each instance (typically to avoid forgetting to localize an instance, or using the improper boilerplate to retrieve it from whatever single source of truth).

Like we do not need to pass the locale adapter to each DatePicker, but configure a parent Date LocalizationProvider.

Or did I miss some way to do so already in MRT?

[KevinVandy]

Just make your context providers global by wrapping the whole app?

[bobo96run]

Hi,
Obviously, like 99% of React Context usage.
Sorry if my example conveyed another idea.

I will rephrase my initial post, as it seems like it is interpreted as asking for your opinion on how I am using MRT, whereas I am requesting a new Feature.

I know how to pass a value to localization option, that this value may be dynamic, and how to hook that value to a state, context, whatever, typically so that it is bound at app-level to a single source of truth. That is not my point.

What I am pointing out, is that with the current API of MRT, I have to re-declare this option in all my table instances, using the same boilerplate to hook it to my single source of truth. Same for any other option (e.g. enableColumnOrdering, enableExpandAll, etc.). E.g.:

export const appLevelMrtOptions = {
  localization: MRT_Localization_FR,
  enableColumnOrdering: true,
};

// Whenever we instantiate a new table:
const table = useMaterialReactTable({
  ...appLevelMrtOptions, // Do not forget to spread common table options!
  columns: columns,
  data: data,
});

The above example becomes a little bit more complex when this code is shared, since appLevelMrtOptions would depend on the consumer project. Then we would typically need a React Context. Nothing too complex, granted.

But very much like many other libraries provide a Context to specify such "global" options (like Theme in MUI), if MRT were to provide directly such Context, it would lift the associated boilerplate at each table instance (see proposed usage example in my initial post).

Of course I could make some wrapper Custom Hooks around useMRT_TableOptions and useMaterialReactTable (and it is probably what I will end up doing, if this post still fails to explain my FR), but nothing would prevent a new part of the code from directly using MRT hooks, bypassing our wrappers.

I was asking for your opinion so that I would make a Pull Request if you were ready to take such feature in.
The config of issues and discussions templates in this repo was giving me the impression that this was the workflow that you wanted to follow.

[diginikkari]

I like this idea. We are also having lot's of different tables and there are some boilerplate configuration that needs to be provider for each table instance. e.g. used locale, mrtTheme, default density state etc. Altough it's not difficult to create custom hook which extends useMaterialReactTable and uses your own contexts. Issue with custom hook is how to make sure that it's always used in your project.

export function useCustomMaterialReactTable<TData extends MRT_RowData>({
  initialState,
  ...options
}: MRT_TableOptions<TData>) {
  const { mrtLocale } = useLocale();

  const tableInstance = useMaterialReactTable<TData>({
    localization: mrtLocale,
    mrtTheme: (theme) => ({
      baseBackgroundColor: theme.palette.background.paper,
    }),
    initialState: {
      density: 'compact',
      ...initialState,
    },
    ...options,
  });

  return tableInstance;
}