diff --git a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx b/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx index 53643a93e..caea75a79 100644 --- a/apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx +++ b/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, diff --git a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx index 501476467..fd007209d 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx +++ b/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, diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx index accc23982..d5aea273e 100644 --- a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx +++ b/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", diff --git a/packages/translation/package.json b/packages/translation/package.json index 1c37f717c..252c24e68 100644 --- a/packages/translation/package.json +++ b/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": { diff --git a/packages/translation/src/lang/de.ts b/packages/translation/src/lang/de.ts index e0cbe8b72..c556cef68 100644 --- a/packages/translation/src/lang/de.ts +++ b/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: { diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts index 7fb97c109..f33aca419 100644 --- a/packages/translation/src/lang/en.ts +++ b/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: { diff --git a/packages/ui/package.json b/packages/ui/package.json index 5bc8a01f5..15964bcf9 100644 --- a/packages/ui/package.json +++ b/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" }, diff --git a/packages/ui/src/hooks/index.ts b/packages/ui/src/hooks/index.ts new file mode 100644 index 000000000..f8552e94a --- /dev/null +++ b/packages/ui/src/hooks/index.ts @@ -0,0 +1 @@ +export * from "./use-translated-mantine-react-table"; diff --git a/packages/ui/src/hooks/use-translated-mantine-react-table.ts b/packages/ui/src/hooks/use-translated-mantine-react-table.ts new file mode 100644 index 000000000..1be41a63b --- /dev/null +++ b/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 = ( + tableOptions: Omit, "localization">, +) => { + const t = useScopedI18n("common.mantineReactTable"); + return useMantineReactTable({ + ...tableOptions, + localization: objectKeys(MRT_Localization_EN).reduce( + (acc, key) => { + acc[key] = t(key); + return acc; + }, + {} as typeof MRT_Localization_EN, + ), + }); +}; diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx index 4acf12200..f70aa856c 100644 --- a/packages/widgets/src/media-server/component.tsx +++ b/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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c96fbd97f..d4a06f3e6 100644 --- a/pnpm-lock.yaml +++ b/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)