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

packages/translation/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "dayjs": "^1.11.12",
+    "mantine-react-table": "2.0.0-beta.6",
     "next-international": "^1.2.4"
   },
   "devDependencies": {

packages/translation/src/lang/de.ts

@@ -1,6 +1,7 @@
 import "dayjs/locale/de";
 
 import dayjs from "dayjs";
+import { MRT_Localization_DE } from "mantine-react-table/locales/de/index.cjs";
 
 dayjs.locale("de");
 
@@ -159,6 +160,7 @@ export default {
       placeholder: "Suche nach etwas",
       nothingFound: "Nichts gefunden",
     },
+    mantineReactTable: MRT_Localization_DE,
   },
   widget: {
     editModal: {

packages/translation/src/lang/en.ts

@@ -1,5 +1,7 @@
 import "dayjs/locale/en";
 
+import { MRT_Localization_EN } from "mantine-react-table/locales/en/index.cjs";
+
 export default {
   user: {
     title: "Users",
@@ -615,6 +617,7 @@ export default {
         },
       },
     },
+    mantineReactTable: MRT_Localization_EN,
   },
   section: {
     category: {

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,
+    ),
+  });
+};

packages/widgets/src/media-server/component.tsx

@@ -4,10 +4,11 @@ import { useMemo } from "react";
 import { Avatar, Box, Group, Text } from "@mantine/core";
 import { useListState } from "@mantine/hooks";
 import type { MRT_ColumnDef } from "mantine-react-table";
-import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
 
 import { clientApi } from "@homarr/api/client";
 import type { StreamSession } from "@homarr/integrations";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
 
@@ -78,7 +79,7 @@ export default function MediaServerWidget({
   // Otherwise it will always create a new array reference and cause the table to re-render
   const flatSessions = useMemo(() => currentStreams.flatMap((pair) => pair.sessions), [currentStreams]);
 
-  const table = useMantineReactTable({
+  const table = useTranslatedMantineReactTable({
     columns,
     data: flatSessions,
     enableRowSelection: false,