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

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -4,7 +4,7 @@ import type { MantineColor } from "@mantine/core";
 import { Avatar, Badge, Box, Button, Group, Text } from "@mantine/core";
 import { IconPlayerPlay, IconPlayerStop, IconRotateClockwise, IconTrash } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
-import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -15,6 +15,7 @@ import type { TranslationFunction } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 const createColumns = (
   t: TranslationFunction,
@@ -74,7 +75,7 @@ export function DockerTable(initialData: RouterOutputs["docker"]["getContainers"
     refetchOnReconnect: false,
   });
   const relativeTime = useTimeAgo(data.timestamp);
-  const table = useMantineReactTable({
+  const table = useTranslatedMantineReactTable({
     data: data.containers,
     enableDensityToggle: false,
     enableColumnActions: false,

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx

@@ -5,12 +5,13 @@ import Link from "next/link";
 import { Anchor, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
-import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 interface UserListComponentProps {
   initialUserList: RouterOutputs["user"]["getAll"];
@@ -56,7 +57,7 @@ export const UserListComponent = ({ initialUserList }: UserListComponentProps) =
     [t],
   );
 
-  const table = useMantineReactTable({
+  const table = useTranslatedMantineReactTable({
     columns,
     data,
     enableRowSelection: true,

apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx

@@ -6,12 +6,13 @@ import { IconTrash } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import type { MRT_ColumnDef, MRT_Row } from "mantine-react-table";
-import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import { InviteCreateModal } from "./invite-create-modal";
 
@@ -52,7 +53,7 @@ export const InviteListComponent = ({ initialInvites }: InviteListComponentProps
     [t],
   );
 
-  const table = useMantineReactTable({
+  const table = useTranslatedMantineReactTable({
     columns,
     data,
     positionActionsColumn: "last",

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,

pnpm-lock.yaml

@@ -1143,6 +1143,9 @@ importers:
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
+      mantine-react-table:
+        specifier: 2.0.0-beta.6
+        version: 2.0.0-beta.6(@mantine/core@7.11.2(@mantine/hooks@7.11.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.11.2(@mantine/core@7.11.2(@mantine/hooks@7.11.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.11.2(react@18.3.1))(dayjs@1.11.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.11.2(react@18.3.1))(@tabler/icons-react@3.11.0(react@18.3.1))(clsx@2.1.1)(dayjs@1.11.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-international:
         specifier: ^1.2.4
         version: 1.2.4
@@ -1165,6 +1168,9 @@ importers:
 
   packages/ui:
     dependencies:
+      '@homarr/common':
+        specifier: workspace:^0.1.0
+        version: link:../common
       '@homarr/log':
         specifier: workspace:^0.1.0
         version: link:../log
@@ -1183,6 +1189,9 @@ importers:
       '@tabler/icons-react':
         specifier: ^3.11.0
         version: 3.11.0(react@18.3.1)
+      mantine-react-table:
+        specifier: 2.0.0-beta.6
+        version: 2.0.0-beta.6(@mantine/core@7.11.2(@mantine/hooks@7.11.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.11.2(@mantine/core@7.11.2(@mantine/hooks@7.11.2(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.11.2(react@18.3.1))(dayjs@1.11.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.11.2(react@18.3.1))(@tabler/icons-react@3.11.0(react@18.3.1))(clsx@2.1.1)(dayjs@1.11.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: ^14.2.5
         version: 14.2.5(@babel/core@7.24.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8)