fix: mantine-react-table not localized #333 (#873)

packages/ui/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "exports": {
     ".": "./index.ts",
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./hooks": "./src/hooks/index.ts"
   },
   "typesVersions": {
     "*": {
@@ -23,11 +24,13 @@
   },
   "dependencies": {
     "@homarr/log": "workspace:^0.1.0",
+    "@homarr/common": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@mantine/core": "^7.11.2",
     "@mantine/dates": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "@tabler/icons-react": "^3.11.0",
+    "mantine-react-table": "2.0.0-beta.6",
     "next": "^14.2.5",
     "react": "^18.3.1"
   },

packages/ui/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-translated-mantine-react-table";

packages/ui/src/hooks/use-translated-mantine-react-table.ts

@@ -0,0 +1,22 @@
+import type { MRT_RowData, MRT_TableOptions } from "mantine-react-table";
+import { useMantineReactTable } from "mantine-react-table";
+import { MRT_Localization_EN } from "mantine-react-table/locales/en/index.cjs";
+
+import { objectKeys } from "@homarr/common";
+import { useScopedI18n } from "@homarr/translation/client";
+
+export const useTranslatedMantineReactTable = <TData extends MRT_RowData>(
+  tableOptions: Omit<MRT_TableOptions<TData>, "localization">,
+) => {
+  const t = useScopedI18n("common.mantineReactTable");
+  return useMantineReactTable<TData>({
+    ...tableOptions,
+    localization: objectKeys(MRT_Localization_EN).reduce(
+      (acc, key) => {
+        acc[key] = t(key);
+        return acc;
+      },
+      {} as typeof MRT_Localization_EN,
+    ),
+  });
+};