feat(widgets): persist table layouts

apps/docs/docs/widgets/beszel-system-table/index.mdx

@@ -17,10 +17,17 @@ import { beszelIntegration } from '@site/docs/integrations/beszel';
   categories={['System Monitoring']}
 />
 
-This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, and the table supports sorting by any column. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.
+This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, dragged into a different order, and resized from their headers. Column order and widths are saved automatically for each widget. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.
 
 Select a system row to open the complete statistics view, including system, filesystem, Docker, historical, and realtime charts.
 
+### Interactions
+
+- **Reorder columns** by dragging their headers
+- **Resize columns** by dragging a header's right edge
+- **Sort systems** by selecting a sortable column header
+- **Open system statistics** by selecting a row
+
 ### Supported Integrations
 
 <WidgetIntegrations items={[{

apps/docs/docs/widgets/docker-containers/index.mdx

@@ -40,10 +40,13 @@ import dockerTable from './img/table.png';
 
 ### Interactions
 
-Each container row has an action menu (accessible via the three-dot icon) with the following options:
+Drag column headers to reorder them and drag a header's edge to resize it. The layout is saved automatically for each widget instance and restored after a reload. These controls are disabled while the board is in edit mode.
+
+Each container row has an action menu, accessible via the three-dot icon or by right-clicking the row, with the following options:
+
 - **View logs** - opens a dedicated terminal page streaming the container's logs
 - **Start** / **Stop** / **Restart** - manage the container's state
-- **Remove** - remove the container
+- **Remove** - permanently remove the container after a second confirmation click
 - **Add to Homarr** - create a bookmark app from the container
 
 ### Adding the widget

apps/docs/docs/widgets/docker-containers/index.ts

@@ -8,6 +8,12 @@ export const dockerContainersWidget: WidgetDefinition = {
   path: "../../widgets/docker-containers",
   configuration: {
     items: [
+      {
+        name: "Columns to show",
+        description: "Select which columns are visible in the table",
+        values: "Name, State, Host, CPU usage, Memory usage, and Actions",
+        defaultValue: "All columns",
+      },
       {
         name: "Enable items sorting",
         description: "Allows to sort containers by clicking on the column headers",

packages/translation/src/lang/en.json

@@ -2428,10 +2428,18 @@
         },
         "descendingDefaultSort": {
           "label": "Invert sorting"
+        },
+        "columnOrder": {
+          "label": "Column order"
+        },
+        "columnWidths": {
+          "label": "Column widths"
         }
       },
       "error": {
-        "internalServerError": "Failed to fetch containers stats"
+        "internalServerError": "Failed to fetch containers stats",
+        "layoutSaveTitle": "Table layout not saved",
+        "layoutSaveMessage": "The Docker table layout could not be saved. Try moving or resizing the column again."
       }
     },
     "coolify": {
@@ -3954,11 +3962,19 @@
         },
         "showAgent": {
           "label": "Show agent version"
+        },
+        "columnOrder": {
+          "label": "Column order"
+        },
+        "columnWidths": {
+          "label": "Column widths"
         }
       },
       "noRecords": "No systems found",
       "error": {
-        "internalServerError": "Unable to connect to Beszel. Check your integration settings."
+        "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
+        "layoutSaveTitle": "Unable to save table layout",
+        "layoutSaveMessage": "Your column order or widths could not be saved. Please try again."
       },
       "column": {
         "system": "System",
@@ -5356,6 +5372,7 @@
       },
       "remove": {
         "label": "Remove",
+        "confirm": "Click again to remove permanently",
         "notification": {
           "success": {
             "title": "Containers removed",

packages/widgets/src/beszel-system-table/component.spec.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+
+import { parseColumnOrder, parseColumnWidths } from "./component";
+
+describe("Beszel table column layout options", () => {
+  test("ignores malformed column layout JSON", () => {
+    expect(parseColumnOrder("{")).toEqual([]);
+    expect(parseColumnWidths("[]")).toEqual({});
+  });
+
+  test("removes stale and duplicate column accessors", () => {
+    expect(parseColumnOrder(JSON.stringify(["memory", "removed", "cpu", "memory"]))).toEqual(["memory", "cpu"]);
+  });
+
+  test("keeps only finite positive widths for known columns", () => {
+    expect(
+      parseColumnWidths(
+        JSON.stringify({
+          cpu: 140,
+          memory: -1,
+          disk: "160px",
+          removed: 100,
+          temp: null,
+        }),
+      ),
+    ).toEqual({ cpu: 140 });
+  });
+});

packages/widgets/src/beszel-system-table/component.tsx

@@ -2,10 +2,10 @@
 
 import "./styles.css";
 
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Center, Group, Indicator, Loader, Progress, Text } from "@mantine/core";
 import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
-import { DataTable } from "mantine-datatable";
+import { DataTable, useDataTableColumns } from "mantine-datatable";
 import {
   Activity,
   Battery,
@@ -21,6 +21,7 @@ import {
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
@@ -43,6 +44,21 @@ const directionMultiplier: Record<string, number> = { asc: 1, desc: -1 };
 
 type SystemRowWithKey = BeszelSystemRow & { _key: string };
 
+const columnAccessors = [
+  "name",
+  "cpu",
+  "memory",
+  "disk",
+  "gpu",
+  "loadAvg",
+  "netBytes",
+  "temp",
+  "battery",
+  "services",
+  "uptime",
+  "agentVersion",
+] as const satisfies readonly (keyof BeszelSystemRow)[];
+
 interface SizeConfig {
   iconSize: number;
   fontSize: "xs" | "sm";
@@ -70,11 +86,48 @@ const getSizeConfig = (width: number): SizeConfig => {
   };
 };
 
+export const parseColumnOrder = (value: string): string[] => {
+  if (!value) return [];
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (!Array.isArray(parsed)) return [];
+
+    const allowed = new Set<string>(columnAccessors);
+    return parsed.filter(
+      (accessor, index): accessor is string =>
+        typeof accessor === "string" && allowed.has(accessor) && parsed.indexOf(accessor) === index,
+    );
+  } catch {
+    return [];
+  }
+};
+
+export const parseColumnWidths = (value: string): Record<string, number> => {
+  if (!value) return {};
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return {};
+
+    const allowed = new Set<string>(columnAccessors);
+    return Object.fromEntries(
+      Object.entries(parsed).filter(
+        (entry): entry is [string, number] =>
+          allowed.has(entry[0]) && typeof entry[1] === "number" && Number.isFinite(entry[1]) && entry[1] > 0,
+      ),
+    );
+  } catch {
+    return {};
+  }
+};
+
 export default function BeszelSystemTableWidget({
   options,
   integrationIds,
   isEditMode,
   width,
+  boardId,
+  itemId,
+  setOptions,
 }: WidgetComponentProps<"beszelSystemTable">) {
   const t = useScopedI18n("widget.beszelSystemTable");
   const { openModal } = useModalAction(BeszelSystemStatsModal);
@@ -83,7 +136,25 @@ export default function BeszelSystemTableWidget({
     error: systemsError,
     isPending,
   } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
-  const size = getSizeConfig(width);
+  const size = useMemo(() => getSizeConfig(width), [width]);
+
+  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
+    onError: () =>
+      showErrorNotification({
+        title: t("error.layoutSaveTitle"),
+        message: t("error.layoutSaveMessage"),
+      }),
+  });
+  const persistLayout = useCallback(
+    (newOptions: Partial<Pick<typeof options, "columnOrder" | "columnWidths">>) => {
+      setOptions({ newOptions });
+      if (boardId && itemId) saveItemOptions({ boardId, itemId, newOptions });
+    },
+    [boardId, itemId, saveItemOptions, setOptions],
+  );
+
+  const savedOrder = useMemo(() => parseColumnOrder(options.columnOrder), [options.columnOrder]);
+  const savedWidths = useMemo(() => parseColumnWidths(options.columnWidths), [options.columnWidths]);
 
   const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
 
@@ -91,6 +162,12 @@ export default function BeszelSystemTableWidget({
     columnAccessor: options.sortBy,
     direction: options.sortDirection as "asc" | "desc",
   });
+  useEffect(() => {
+    setSortStatus({
+      columnAccessor: options.sortBy,
+      direction: options.sortDirection as "asc" | "desc",
+    });
+  }, [options.sortBy, options.sortDirection]);
 
   const sortedSystems = useMemo(() => {
     const accessor = sortStatus.columnAccessor as keyof BeszelSystemRow;
@@ -122,6 +199,8 @@ export default function BeszelSystemTableWidget({
     const cols: (DataTableColumn<SystemRowWithKey> | false)[] = [
       {
         accessor: "name",
+        width: 160,
+        ellipsis: true,
         title: (
           <Group gap={4} wrap="nowrap">
             <Server size={size.iconSize} />
@@ -130,7 +209,7 @@ export default function BeszelSystemTableWidget({
         ),
         sortable: true,
         render: (record) => (
-          <Group gap={8} wrap="nowrap">
+          <Group gap={8} wrap="nowrap" style={{ overflow: "hidden" }}>
             <Indicator color={statusColorMap[record.status]} size={7} />
             <Text size={size.fontSize} fw={500} truncate>
               {record.name}
@@ -140,6 +219,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showCpu && {
         accessor: "cpu",
+        width: 140,
         title: (
           <Group gap={4} wrap="nowrap">
             <Cpu size={size.iconSize} />
@@ -151,6 +231,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showMemory && {
         accessor: "memory",
+        width: 140,
         title: (
           <Group gap={4} wrap="nowrap">
             <MemoryStick size={size.iconSize} />
@@ -162,6 +243,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showDisk && {
         accessor: "disk",
+        width: 160,
         title: (
           <Group gap={4} wrap="nowrap">
             <HardDrive size={size.iconSize} />
@@ -181,6 +263,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showGpu && {
         accessor: "gpu",
+        width: 140,
         title: (
           <Group gap={4} wrap="nowrap">
             <Monitor size={size.iconSize} />
@@ -192,6 +275,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showLoadAvg && {
         accessor: "loadAvg",
+        width: 100,
         title: (
           <Group gap={4} wrap="nowrap">
             <Activity size={size.iconSize} />
@@ -208,6 +292,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showNet && {
         accessor: "netBytes",
+        width: 100,
         title: (
           <Group gap={4} wrap="nowrap">
             <Network size={size.iconSize} />
@@ -223,6 +308,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showTemp && {
         accessor: "temp",
+        width: 80,
         title: (
           <Group gap={4} wrap="nowrap">
             <Thermometer size={size.iconSize} />
@@ -234,6 +320,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showBattery && {
         accessor: "battery",
+        width: 70,
         title: (
           <Group gap={4} wrap="nowrap">
             <Battery size={size.iconSize} />
@@ -244,6 +331,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showServices && {
         accessor: "services",
+        width: 80,
         title: (
           <Group gap={4} wrap="nowrap">
             <Server size={size.iconSize} />
@@ -255,6 +343,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showUptime && {
         accessor: "uptime",
+        width: 90,
         title: (
           <Group gap={4} wrap="nowrap">
             <Activity size={size.iconSize} />
@@ -266,6 +355,7 @@ export default function BeszelSystemTableWidget({
       },
       options.showAgent && {
         accessor: "agentVersion",
+        width: 90,
         title: (
           <Group gap={4} wrap="nowrap">
             <Wifi size={size.iconSize} />
@@ -280,10 +370,87 @@ export default function BeszelSystemTableWidget({
     return cols.filter(Boolean) as DataTableColumn<SystemRowWithKey>[];
   }, [options, t, size]);
 
-  const handleRowClick = ({ record }: { record: SystemRowWithKey }) => {
-    const integrationId = record._key.split(":")[0] ?? "";
-    openModal({ integrationId, systemId: record.id }, { title: record.name });
-  };
+  const visibleAccessors = useMemo(() => columns.map(({ accessor }) => String(accessor)), [columns]);
+  const visibleAccessorSet = useMemo(() => new Set(visibleAccessors), [visibleAccessors]);
+  const restoredOrder = useMemo(
+    () => [
+      ...savedOrder.filter((accessor) => visibleAccessorSet.has(accessor)),
+      ...visibleAccessors.filter((accessor) => !savedOrder.includes(accessor)),
+    ],
+    [savedOrder, visibleAccessors, visibleAccessorSet],
+  );
+  const storeKey = `beszel-system-table-${itemId ?? "preview"}-${[...visibleAccessors].toSorted().join(",")}`;
+  const { effectiveColumns, columnsOrder, columnsWidth, setColumnsOrder, setMultipleColumnWidths } =
+    useDataTableColumns<SystemRowWithKey>({
+      key: storeKey,
+      columns,
+    });
+
+  const lastStoreKey = useRef(storeKey);
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (lastStoreKey.current !== storeKey) {
+      lastStoreKey.current = storeKey;
+      hydrated.current = false;
+    }
+    if (hydrated.current) return;
+
+    if (restoredOrder.length > 0) setColumnsOrder(restoredOrder);
+    const visibleWidths = Object.entries(savedWidths)
+      .filter(([accessor]) => visibleAccessorSet.has(accessor))
+      .map(([accessor, columnWidth]) => ({ accessor, width: columnWidth }));
+    if (visibleWidths.length > 0) setMultipleColumnWidths(visibleWidths);
+
+    requestAnimationFrame(() => {
+      hydrated.current = true;
+    });
+  }, [restoredOrder, savedWidths, setColumnsOrder, setMultipleColumnWidths, storeKey, visibleAccessorSet]);
+
+  const previousOrder = useRef(columnsOrder);
+  const previousWidths = useRef(columnsWidth);
+  useEffect(() => {
+    if (!hydrated.current) return;
+
+    const orderChanged = JSON.stringify(columnsOrder) !== JSON.stringify(previousOrder.current);
+    const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(previousWidths.current);
+    previousOrder.current = columnsOrder;
+    previousWidths.current = columnsWidth;
+    if (!orderChanged && !widthsChanged) return;
+
+    const newLayout: Partial<Pick<typeof options, "columnOrder" | "columnWidths">> = {};
+    if (orderChanged) {
+      const fullOrder = [...savedOrder, ...columnAccessors.filter((accessor) => !savedOrder.includes(accessor))];
+      const reorderedVisibleColumns = [...columnsOrder];
+      const mergedOrder = fullOrder.map((accessor) =>
+        visibleAccessorSet.has(accessor) ? (reorderedVisibleColumns.shift() ?? accessor) : accessor,
+      );
+      newLayout.columnOrder = JSON.stringify(mergedOrder);
+    }
+    if (widthsChanged) {
+      const widthMap: Record<string, number> = { ...savedWidths };
+      for (const entry of columnsWidth) {
+        const accessor = Object.keys(entry)[0];
+        if (!accessor || !visibleAccessorSet.has(accessor)) continue;
+        const columnWidth = entry[accessor as keyof typeof entry];
+        if (typeof columnWidth === "number" && Number.isFinite(columnWidth) && columnWidth > 0) {
+          widthMap[accessor] = columnWidth;
+        } else if (typeof columnWidth === "string" && columnWidth.endsWith("px")) {
+          const parsedWidth = Number.parseInt(columnWidth, 10);
+          if (Number.isFinite(parsedWidth) && parsedWidth > 0) widthMap[accessor] = parsedWidth;
+        }
+      }
+      newLayout.columnWidths = JSON.stringify(widthMap);
+    }
+    persistLayout(newLayout);
+  }, [columnsOrder, columnsWidth, persistLayout, savedOrder, savedWidths, visibleAccessorSet]);
+
+  const handleRowClick = useCallback(
+    ({ record }: { record: SystemRowWithKey }) => {
+      const integrationId = record._key.split(":")[0] ?? "";
+      openModal({ integrationId, systemId: record.id }, { title: record.name });
+    },
+    [openModal],
+  );
 
   if (systemsError) throw systemsError;
 
@@ -305,15 +472,28 @@ export default function BeszelSystemTableWidget({
         withTableBorder={false}
         borderRadius={0}
         highlightOnHover
+        striped="odd"
+        stripedColor={{ dark: "dark.7", light: "gray.0" }}
+        highlightOnHoverColor={{ dark: "dark.5", light: "gray.1" }}
+        verticalAlign="center"
         fz={size.fontSize}
         records={sortedSystems}
-        columns={columns}
+        columns={effectiveColumns}
         sortStatus={sortStatus}
         onSortStatusChange={setSortStatus}
         noRecordsText={t("noRecords")}
         idAccessor="_key"
         height="100%"
         className="beszel-table"
+        storeColumnsKey={storeKey}
+        textSelectionDisabled
+        defaultColumnProps={{
+          noWrap: true,
+          draggable: true,
+          resizable: true,
+          cellsStyle: () => ({ padding: `${size.cellPadding}px 8px` }),
+        }}
+        scrollAreaProps={{ type: "auto", scrollbarSize: 6 }}
         onRowClick={isEditMode ? undefined : handleRowClick}
       />
     </div>

packages/widgets/src/beszel-system-table/index.ts

@@ -29,28 +29,36 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
-    return optionsBuilder.from((factory) => ({
-      statusFilter: factory.select({
-        defaultValue: "all",
-        options: statusOptions,
+    return optionsBuilder.from(
+      (factory) => ({
+        statusFilter: factory.select({
+          defaultValue: "all",
+          options: statusOptions,
+        }),
+        sortBy: factory.select({ defaultValue: "name", options: sortOptions }),
+        sortDirection: factory.select({
+          defaultValue: "asc",
+          options: sortDirectionOptions,
+        }),
+        showCpu: factory.switch({ defaultValue: true }),
+        showMemory: factory.switch({ defaultValue: true }),
+        showDisk: factory.switch({ defaultValue: true }),
+        showGpu: factory.switch({ defaultValue: true }),
+        showLoadAvg: factory.switch({ defaultValue: true }),
+        showNet: factory.switch({ defaultValue: true }),
+        showTemp: factory.switch({ defaultValue: true }),
+        showBattery: factory.switch({ defaultValue: true }),
+        showServices: factory.switch({ defaultValue: true }),
+        showUptime: factory.switch({ defaultValue: true }),
+        showAgent: factory.switch({ defaultValue: true }),
+        columnOrder: factory.text({ defaultValue: "" }),
+        columnWidths: factory.text({ defaultValue: "" }),
       }),
-      sortBy: factory.select({ defaultValue: "name", options: sortOptions }),
-      sortDirection: factory.select({
-        defaultValue: "asc",
-        options: sortDirectionOptions,
-      }),
-      showCpu: factory.switch({ defaultValue: true }),
-      showMemory: factory.switch({ defaultValue: true }),
-      showDisk: factory.switch({ defaultValue: true }),
-      showGpu: factory.switch({ defaultValue: true }),
-      showLoadAvg: factory.switch({ defaultValue: true }),
-      showNet: factory.switch({ defaultValue: true }),
-      showTemp: factory.switch({ defaultValue: true }),
-      showBattery: factory.switch({ defaultValue: true }),
-      showServices: factory.switch({ defaultValue: true }),
-      showUptime: factory.switch({ defaultValue: true }),
-      showAgent: factory.switch({ defaultValue: true }),
-    }));
+      {
+        columnOrder: { shouldHide: () => true },
+        columnWidths: { shouldHide: () => true },
+      },
+    );
   },
   errors: {
     INTERNAL_SERVER_ERROR: {

packages/widgets/src/docker/component.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "vitest";
+
+import { parseColumnOrder, parseColumnWidths } from "./component";
+
+describe("Docker table column layout options", () => {
+  test("ignores malformed column layout JSON", () => {
+    expect(parseColumnOrder("{")).toEqual([]);
+    expect(parseColumnWidths("[]")).toEqual({});
+  });
+
+  test("removes stale and duplicate column accessors", () => {
+    expect(parseColumnOrder(JSON.stringify(["memoryUsage", "removed", "name", "memoryUsage"]))).toEqual([
+      "memoryUsage",
+      "name",
+    ]);
+  });
+
+  test("keeps only finite positive widths for known columns", () => {
+    expect(
+      parseColumnWidths(
+        JSON.stringify({
+          name: 180,
+          state: -1,
+          host: "120px",
+          removed: 100,
+          actions: null,
+        }),
+      ),
+    ).toEqual({ name: 180 });
+  });
+});

packages/widgets/src/docker/component.tsx

@@ -1,23 +1,90 @@
 "use client";
 
-import { useMemo } from "react";
-import { ActionIcon, Avatar, Badge, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
-import type { IconProps } from "@tabler/icons-react";
-import { IconBrandDocker, IconPlayerPlay, IconPlayerStop, IconRefresh, IconRotateClockwise } from "@tabler/icons-react";
-import type { MRT_ColumnDef, MRT_VisibilityState } from "mantine-react-table";
-import { MantineReactTable } from "mantine-react-table";
+import "./styles.css";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ActionIcon, Avatar, Badge, Box, Center, Group, Menu, Portal, Stack, Text, Tooltip } from "@mantine/core";
+import {
+  IconBrandDocker,
+  IconCategoryPlus,
+  IconDots,
+  IconFileText,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconRefresh,
+  IconRotateClockwise,
+  IconTrash,
+} from "@tabler/icons-react";
+import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
+import { DataTable, useDataTableColumns } from "mantine-datatable";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { formatBytes, useTimeAgo } from "@homarr/common";
 import type { ContainerState } from "@homarr/docker";
 import { containerStateColorMap, cpuUsageColor, memoryUsageColor, safeValue } from "@homarr/docker/shared";
+import { useModalAction } from "@homarr/modals";
+import { AddDockerAppToHomarr } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
 
+type DockerContainer = RouterOutputs["docker"]["getContainers"]["containers"][number];
+type ContainerAction = "start" | "stop" | "restart" | "remove";
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  container: DockerContainer;
+}
+
+interface ContainerActionHandlers {
+  onAction: (action: ContainerAction, container: DockerContainer) => void;
+  onAddToHomarr: (container: DockerContainer) => void;
+  onOpenLogs: (container: DockerContainer) => void;
+}
+
+const columnAccessors = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
+
+const createContainerLogsPath = (container: Pick<DockerContainer, "id" | "name">) =>
+  `/manage/tools/docker/logs/${container.id}?name=${encodeURIComponent(container.name)}`;
+
+export const parseColumnOrder = (value: string): string[] => {
+  if (!value) return [];
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (!Array.isArray(parsed)) return [];
+
+    const allowed = new Set<string>(columnAccessors);
+    return parsed.filter(
+      (accessor, index): accessor is string =>
+        typeof accessor === "string" && allowed.has(accessor) && parsed.indexOf(accessor) === index,
+    );
+  } catch {
+    return [];
+  }
+};
+
+export const parseColumnWidths = (value: string): Record<string, number> => {
+  if (!value) return {};
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return {};
+
+    const allowed = new Set<string>(columnAccessors);
+    return Object.fromEntries(
+      Object.entries(parsed).filter(
+        (entry): entry is [string, number] =>
+          allowed.has(entry[0]) && typeof entry[1] === "number" && Number.isFinite(entry[1]) && entry[1] > 0,
+      ),
+    );
+  } catch {
+    return {};
+  }
+};
+
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   const t = useScopedI18n("docker.field.state.option");
 
@@ -28,276 +95,373 @@ const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   );
 };
 
-const actionIconIconStyle: IconProps["style"] = {
-  height: "var(--ai-icon-size)",
-  width: "var(--ai-icon-size)",
-};
-
 const createColumns = (
   t: ReturnType<typeof useScopedI18n<"docker">>,
-): MRT_ColumnDef<RouterOutputs["docker"]["getContainers"]["containers"][number]>[] => [
+  handlers: ContainerActionHandlers,
+  sortingEnabled: boolean,
+): DataTableColumn<DockerContainer>[] => [
   {
-    id: "name",
-    accessorKey: "name",
-    header: t("field.name.label"),
-    Cell({ renderedCellValue, row }) {
-      return (
-        <Group gap="xs" wrap="nowrap">
-          <Avatar variant="outline" size={20} src={row.original.iconUrl} />
-          <Text p="0.5" size="sm" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-            {renderedCellValue}
-          </Text>
-        </Group>
-      );
-    },
-  },
-  {
-    id: "state",
-    accessorKey: "state",
-    size: 100,
-    header: t("field.state.label"),
-    Cell({ row }) {
-      return <ContainerStateBadge state={row.original.state} />;
-    },
-  },
-  {
-    id: "host",
-    accessorKey: "host",
-    size: 100,
-    header: t("field.host.label"),
-    Cell({ row }) {
-      return (
-        <Text size="xs" truncate="end">
-          {row.original.host}
+    accessor: "name",
+    title: t("field.name.label"),
+    width: 180,
+    ellipsis: true,
+    sortable: sortingEnabled,
+    render: (container) => (
+      <Group gap="xs" wrap="nowrap" style={{ overflow: "hidden" }}>
+        <Avatar
+          variant="outline"
+          radius="sm"
+          size={20}
+          styles={{ image: { objectFit: "contain" } }}
+          src={container.iconUrl}
+          style={{ flexShrink: 0 }}
+        >
+          {container.name.at(0)?.toUpperCase()}
+        </Avatar>
+        <Text size="sm" truncate>
+          {container.name}
         </Text>
-      );
-    },
+      </Group>
+    ),
   },
   {
-    id: "cpuUsage",
-    sortingFn: (rowA, rowB) => {
-      const cpuUsageA = safeValue(rowA.original.cpuUsage);
-      const cpuUsageB = safeValue(rowB.original.cpuUsage);
-
-      return cpuUsageA - cpuUsageB;
-    },
-    accessorKey: "cpuUsage",
-    size: 80,
-    header: t("field.stats.cpu.label"),
-    Cell({ row }) {
-      const cpuUsage = safeValue(row.original.cpuUsage);
-
+    accessor: "state",
+    title: t("field.state.label"),
+    width: 100,
+    sortable: sortingEnabled,
+    render: (container) => <ContainerStateBadge state={container.state} />,
+  },
+  {
+    accessor: "host",
+    title: t("field.host.label"),
+    width: 120,
+    sortable: sortingEnabled,
+    ellipsis: true,
+    render: (container) => (
+      <Text size="xs" truncate title={container.host}>
+        {container.host}
+      </Text>
+    ),
+  },
+  {
+    accessor: "cpuUsage",
+    title: t("field.stats.cpu.label"),
+    width: 80,
+    sortable: sortingEnabled,
+    render: (container) => {
+      const cpuUsage = safeValue(container.cpuUsage);
       return (
-        <Text size="xs" c={cpuUsageColor(cpuUsage, row.original.state)}>
+        <Text size="xs" c={cpuUsageColor(cpuUsage, container.state)}>
           {cpuUsage.toFixed(2)}%
         </Text>
       );
     },
   },
   {
-    id: "memoryUsage",
-    sortingFn: (rowA, rowB) => {
-      const memoryUsageA = safeValue(rowA.original.memoryUsage);
-      const memoryUsageB = safeValue(rowB.original.memoryUsage);
-
-      return memoryUsageA - memoryUsageB;
-    },
-    accessorKey: "memoryUsage",
-    size: 80,
-    header: t("field.stats.memory.label"),
-    Cell({ row }) {
-      const bytesUsage = safeValue(row.original.memoryUsage);
-
+    accessor: "memoryUsage",
+    title: t("field.stats.memory.label"),
+    width: 100,
+    sortable: sortingEnabled,
+    render: (container) => {
+      const memoryUsage = safeValue(container.memoryUsage);
       return (
-        <Text size="xs" c={memoryUsageColor(bytesUsage, row.original.state)}>
-          {formatBytes(bytesUsage)}
+        <Text size="xs" c={memoryUsageColor(memoryUsage, container.state)}>
+          {formatBytes(memoryUsage)}
         </Text>
       );
     },
   },
   {
-    id: "actions",
-    accessorKey: "actions",
-    size: 80,
-    header: t("action.title"),
-    enableSorting: false,
-    Cell({ row }) {
-      const utils = clientApi.useUtils();
-      // eslint-disable-next-line no-restricted-syntax
-      const onSettled = async () => {
-        await utils.docker.getContainers.invalidate();
-      };
-      const { mutateAsync: startContainer } = clientApi.docker.startAll.useMutation({ onSettled });
-      const { mutateAsync: stopContainer } = clientApi.docker.stopAll.useMutation({ onSettled });
-      const { mutateAsync: restartContainer } = clientApi.docker.restartAll.useMutation({ onSettled });
-
-      const handleActionAsync = async (action: "start" | "stop" | "restart") => {
-        const mutation = action === "start" ? startContainer : action === "stop" ? stopContainer : restartContainer;
-
-        await mutation(
-          { ids: [row.original.id] },
-          {
-            onSuccess() {
-              showSuccessNotification({
-                title: t(`action.${action}.notification.success.title`),
-                message: t(`action.${action}.notification.success.message`),
-              });
-            },
-            onError() {
-              showErrorNotification({
-                title: t(`action.${action}.notification.error.title`),
-                message: t(`action.${action}.notification.error.message`),
-              });
-            },
-          },
-        );
-      };
-
-      return (
-        <Group wrap="nowrap" gap="xs">
-          <Tooltip label={row.original.state === "running" ? t("action.stop.label") : t("action.start.label")}>
-            <ActionIcon
-              variant="subtle"
-              size="xs"
-              radius="100%"
-              onClick={() => handleActionAsync(row.original.state === "running" ? "stop" : "start")}
-            >
-              {row.original.state === "running" ? (
-                <IconPlayerStop style={actionIconIconStyle} />
-              ) : (
-                <IconPlayerPlay style={actionIconIconStyle} />
-              )}
-            </ActionIcon>
-          </Tooltip>
-          <Tooltip label={t("action.restart.label")}>
-            <ActionIcon variant="subtle" size="xs" radius="100%" onClick={() => handleActionAsync("restart")}>
-              <IconRotateClockwise style={actionIconIconStyle} />
-            </ActionIcon>
-          </Tooltip>
-        </Group>
-      );
-    },
+    accessor: "actions",
+    title: "",
+    width: 44,
+    textAlign: "right",
+    render: (container) => <ContainerMenuButton container={container} handlers={handlers} />,
   },
 ];
 
-export default function DockerWidget({ options, width, isEditMode }: WidgetComponentProps<"dockerContainers">) {
+const compareContainers = (
+  first: DockerContainer,
+  second: DockerContainer,
+  accessor: DataTableSortStatus<DockerContainer>["columnAccessor"],
+) => {
+  if (accessor === "cpuUsage") return safeValue(first.cpuUsage) - safeValue(second.cpuUsage);
+  if (accessor === "memoryUsage") return safeValue(first.memoryUsage) - safeValue(second.memoryUsage);
+
+  const firstValue = first[accessor as "name" | "state" | "host"];
+  const secondValue = second[accessor as "name" | "state" | "host"];
+  return String(firstValue ?? "").localeCompare(String(secondValue ?? ""));
+};
+
+const useContainerAction = (action: ContainerAction) => {
+  const t = useScopedI18n("docker.action");
+  const utils = clientApi.useUtils();
+
+  return clientApi.docker[`${action}All`].useMutation({
+    async onSettled() {
+      await utils.docker.getContainers.invalidate();
+    },
+    onSuccess() {
+      showSuccessNotification({
+        title: t(`${action}.notification.success.title`),
+        message: t(`${action}.notification.success.message`),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        title: t(`${action}.notification.error.title`),
+        message: t(`${action}.notification.error.message`),
+      });
+    },
+  });
+};
+
+export default function DockerWidget({
+  options,
+  width,
+  isEditMode,
+  boardId,
+  itemId,
+  setOptions,
+}: WidgetComponentProps<"dockerContainers">) {
   const t = useScopedI18n("docker");
+  const tWidget = useScopedI18n("widget.dockerContainers");
+  const router = useRouter();
+  const { openModal } = useModalAction(AddDockerAppToHomarr);
   const isTiny = width <= 256;
 
   const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
-  const containers = data?.containers ?? [];
+  const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
   const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
   const relativeTime = useTimeAgo(timestamp);
 
-  const totalContainers = containers.length;
+  const { mutate: startContainer } = useContainerAction("start");
+  const { mutate: stopContainer } = useContainerAction("stop");
+  const { mutate: restartContainer } = useContainerAction("restart");
+  const { mutate: removeContainer } = useContainerAction("remove");
+  const handleContainerAction = useCallback(
+    (action: ContainerAction, container: DockerContainer) => {
+      if (action === "start") startContainer({ ids: [container.id] });
+      else if (action === "stop") stopContainer({ ids: [container.id] });
+      else if (action === "restart") restartContainer({ ids: [container.id] });
+      else removeContainer({ ids: [container.id] });
+    },
+    [removeContainer, restartContainer, startContainer, stopContainer],
+  );
+  const handleOpenLogs = useCallback(
+    (container: DockerContainer) => router.push(createContainerLogsPath(container)),
+    [router],
+  );
+  const handleAddToHomarr = useCallback(
+    (container: DockerContainer) => openModal({ selectedContainers: [container] }),
+    [openModal],
+  );
+  const actionHandlers = useMemo<ContainerActionHandlers>(
+    () => ({
+      onAction: handleContainerAction,
+      onAddToHomarr: handleAddToHomarr,
+      onOpenLogs: handleOpenLogs,
+    }),
+    [handleAddToHomarr, handleContainerAction, handleOpenLogs],
+  );
 
-  const totals = useMemo(() => {
-    return containers.reduce(
-      (acc, container) => {
-        acc.cpu += safeValue(container.cpuUsage);
-        acc.memory += safeValue(container.memoryUsage);
-        return acc;
-      },
-      { cpu: 0, memory: 0 },
-    );
-  }, [containers]);
-
-  const columns = useMemo(() => createColumns(t), [t]);
-
-  const columnVisibility: MRT_VisibilityState = {
-    name: options.columns.includes("name"),
-    state: options.columns.includes("state"),
-    host: options.columns.includes("host"),
-    cpuUsage: options.columns.includes("cpuUsage"),
-    memoryUsage: options.columns.includes("memoryUsage"),
-    actions: options.columns.includes("actions"),
-  };
-
-  const table = useTranslatedMantineReactTable({
-    columns,
-    data: containers,
-    enablePagination: false,
-    enableTopToolbar: false,
-    enableBottomToolbar: false,
-    enableColumnActions: false,
-    enableSorting: options.enableRowSorting && !isEditMode,
-    enableStickyHeader: false,
-    enableColumnOrdering: false,
-    enableRowSelection: false,
-    enableFullScreenToggle: false,
-    enableGlobalFilter: false,
-    enableDensityToggle: false,
-    enableFilters: false,
-    enableHiding: false,
-    initialState: {
-      sorting: [{ id: options.defaultSort, desc: options.descendingDefaultSort }],
-      density: "xs",
-    },
-    state: {
-      columnVisibility,
-    },
-    mantinePaperProps: {
-      flex: 1,
-      withBorder: false,
-      shadow: undefined,
-    },
-    mantineTableProps: {
-      className: "docker-widget-table",
-      style: {
-        tableLayout: "fixed",
-      },
-    },
-    mantineTableHeadProps: {
-      fz: "xs",
-    },
-    mantineTableHeadCellProps: {
-      p: 4,
-    },
-    mantineTableBodyCellProps: {
-      p: 4,
-    },
-    mantineTableContainerProps: {
-      style: {
-        height: "100%",
-      },
-    },
+  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
+    onError: () =>
+      showErrorNotification({
+        title: tWidget("error.layoutSaveTitle"),
+        message: tWidget("error.layoutSaveMessage"),
+      }),
   });
+  const persistLayout = useCallback(
+    (newOptions: Partial<Pick<typeof options, "columnOrder" | "columnWidths">>) => {
+      setOptions({ newOptions });
+      if (boardId && itemId) saveItemOptions({ boardId, itemId, newOptions });
+    },
+    [boardId, itemId, saveItemOptions, setOptions],
+  );
 
-  if (options.columns.length === 0)
+  const savedOrder = useMemo(() => parseColumnOrder(options.columnOrder), [options.columnOrder]);
+  const savedWidths = useMemo(() => parseColumnWidths(options.columnWidths), [options.columnWidths]);
+
+  const defaultDirection = options.descendingDefaultSort ? "desc" : "asc";
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<DockerContainer>>({
+    columnAccessor: options.defaultSort,
+    direction: defaultDirection,
+  });
+  useEffect(() => {
+    setSortStatus({ columnAccessor: options.defaultSort, direction: defaultDirection });
+  }, [defaultDirection, options.defaultSort]);
+
+  const sortedContainers = useMemo(() => {
+    const multiplier = sortStatus.direction === "desc" ? -1 : 1;
+    return [...containers].toSorted(
+      (first, second) => compareContainers(first, second, sortStatus.columnAccessor) * multiplier,
+    );
+  }, [containers, sortStatus]);
+
+  const totals = useMemo(
+    () =>
+      containers.reduce(
+        (acc, container) => {
+          acc.cpu += safeValue(container.cpuUsage);
+          acc.memory += safeValue(container.memoryUsage);
+          return acc;
+        },
+        { cpu: 0, memory: 0 },
+      ),
+    [containers],
+  );
+
+  const selectedColumns = useMemo(() => new Set<string>(options.columns), [options.columns]);
+  const columns = useMemo(() => {
+    const sortingEnabled = options.enableRowSorting && !isEditMode;
+    return createColumns(t, actionHandlers, sortingEnabled).filter(({ accessor }) =>
+      selectedColumns.has(String(accessor)),
+    );
+  }, [actionHandlers, isEditMode, options.enableRowSorting, selectedColumns, t]);
+  const visibleAccessors = useMemo(() => columns.map(({ accessor }) => String(accessor)), [columns]);
+  const visibleAccessorSet = useMemo(() => new Set(visibleAccessors), [visibleAccessors]);
+  const restoredOrder = useMemo(
+    () => [
+      ...savedOrder.filter((accessor) => visibleAccessorSet.has(accessor)),
+      ...visibleAccessors.filter((accessor) => !savedOrder.includes(accessor)),
+    ],
+    [savedOrder, visibleAccessors, visibleAccessorSet],
+  );
+  const storeKey = `docker-containers-${itemId ?? "preview"}-${[...visibleAccessors].toSorted().join(",")}`;
+  const { effectiveColumns, columnsOrder, columnsWidth, setColumnsOrder, setMultipleColumnWidths } =
+    useDataTableColumns<DockerContainer>({
+      key: storeKey,
+      columns,
+    });
+
+  const lastStoreKey = useRef(storeKey);
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (lastStoreKey.current !== storeKey) {
+      lastStoreKey.current = storeKey;
+      hydrated.current = false;
+    }
+    if (hydrated.current) return;
+
+    if (restoredOrder.length > 0) setColumnsOrder(restoredOrder);
+    const visibleWidths = Object.entries(savedWidths)
+      .filter(([accessor]) => visibleAccessorSet.has(accessor))
+      .map(([accessor, columnWidth]) => ({ accessor, width: columnWidth }));
+    if (visibleWidths.length > 0) setMultipleColumnWidths(visibleWidths);
+
+    requestAnimationFrame(() => {
+      hydrated.current = true;
+    });
+  }, [restoredOrder, savedWidths, setColumnsOrder, setMultipleColumnWidths, storeKey, visibleAccessorSet]);
+
+  const previousOrder = useRef(columnsOrder);
+  const previousWidths = useRef(columnsWidth);
+  useEffect(() => {
+    if (!hydrated.current) return;
+
+    const orderChanged = JSON.stringify(columnsOrder) !== JSON.stringify(previousOrder.current);
+    const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(previousWidths.current);
+    previousOrder.current = columnsOrder;
+    previousWidths.current = columnsWidth;
+    if (!orderChanged && !widthsChanged) return;
+
+    const newLayout: Partial<Pick<typeof options, "columnOrder" | "columnWidths">> = {};
+    if (orderChanged) {
+      const fullOrder = [...savedOrder, ...columnAccessors.filter((accessor) => !savedOrder.includes(accessor))];
+      const reorderedVisibleColumns = [...columnsOrder];
+      const mergedOrder = fullOrder.map((accessor) =>
+        visibleAccessorSet.has(accessor) ? (reorderedVisibleColumns.shift() ?? accessor) : accessor,
+      );
+      newLayout.columnOrder = JSON.stringify(mergedOrder);
+    }
+    if (widthsChanged) {
+      const widthMap: Record<string, number> = { ...savedWidths };
+      for (const entry of columnsWidth) {
+        const accessor = Object.keys(entry)[0];
+        if (!accessor || !visibleAccessorSet.has(accessor)) continue;
+        const columnWidth = entry[accessor as keyof typeof entry];
+        if (typeof columnWidth === "number" && Number.isFinite(columnWidth) && columnWidth > 0) {
+          widthMap[accessor] = columnWidth;
+        } else if (typeof columnWidth === "string" && columnWidth.endsWith("px")) {
+          const parsedWidth = Number.parseInt(columnWidth, 10);
+          if (Number.isFinite(parsedWidth) && parsedWidth > 0) widthMap[accessor] = parsedWidth;
+        }
+      }
+      newLayout.columnWidths = JSON.stringify(widthMap);
+    }
+    persistLayout(newLayout);
+  }, [columnsOrder, columnsWidth, persistLayout, savedOrder, savedWidths, visibleAccessorSet]);
+
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const closeContextMenu = useCallback(() => setContextMenu(null), []);
+  const handleContextMenu = useCallback(({ record, event }: { record: DockerContainer; event: React.MouseEvent }) => {
+    event.preventDefault();
+    setContextMenu({ x: event.clientX, y: event.clientY, container: record });
+  }, []);
+
+  if (options.columns.length === 0) {
     return (
       <Center h="100%">
         <Text>{t("error.noColumns")}</Text>
       </Center>
     );
+  }
 
   return (
-    <Stack gap={0} h="100%" display="flex">
-      <MantineReactTable table={table} />
+    <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
+      <Box style={{ flex: 1, minHeight: 0 }}>
+        <DataTable
+          style={{ pointerEvents: isEditMode ? "none" : undefined }}
+          withTableBorder={false}
+          borderRadius={0}
+          highlightOnHover
+          striped="odd"
+          stripedColor={{ dark: "dark.7", light: "gray.0" }}
+          highlightOnHoverColor={{ dark: "dark.5", light: "gray.1" }}
+          verticalAlign="center"
+          fetching={isFetching && containers.length === 0}
+          loaderBackgroundBlur={2}
+          fz={width < 400 ? "xs" : "sm"}
+          records={sortedContainers}
+          columns={effectiveColumns}
+          storeColumnsKey={storeKey}
+          textSelectionDisabled
+          sortStatus={sortStatus}
+          onSortStatusChange={options.enableRowSorting && !isEditMode ? setSortStatus : undefined}
+          idAccessor="id"
+          height="100%"
+          className="docker-containers-table"
+          defaultColumnProps={{
+            noWrap: true,
+            draggable: true,
+            resizable: true,
+            cellsStyle: () => ({ padding: width < 400 ? "2px 8px" : "4px 8px" }),
+          }}
+          scrollAreaProps={{ type: "auto", scrollbarSize: 6 }}
+          onRowContextMenu={isEditMode ? undefined : handleContextMenu}
+          onScroll={() => {
+            if (contextMenu) closeContextMenu();
+          }}
+        />
+      </Box>
 
       {!isTiny && (
-        <Group
-          justify="space-between"
-          style={{
-            borderTop: "0.0625rem solid var(--border-color)",
-          }}
-          p={4}
-        >
+        <Group justify="space-between" style={{ borderTop: "0.0625rem solid var(--border-color)" }} p={4} wrap="nowrap">
           <Group gap={4} wrap="nowrap">
             <IconBrandDocker size={20} style={{ flexShrink: 0 }} />
-            <Text size="sm" truncate="end">
-              {t("table.footer", { count: totalContainers.toString() })}
+            <Text size="sm" truncate>
+              {t("table.footer", { count: containers.length.toString() })}
             </Text>
           </Group>
 
-          <Group gap="sm" wrap="wrap" justify="flex-end" style={{ flex: 1, minWidth: 0 }}>
+          <Group gap="sm" wrap="nowrap" justify="flex-end" style={{ minWidth: 0 }}>
             <Text size="sm" style={{ whiteSpace: "nowrap" }}>
               {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
             </Text>
-
             <Text size="sm" style={{ whiteSpace: "nowrap" }}>
               {t("table.totalMemory", { memory: formatBytes(totals.memory) })}
             </Text>
-
             <Tooltip label={t("table.refresh.lastUpdated", { when: relativeTime })}>
               <ActionIcon
                 size="sm"
@@ -307,12 +471,147 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
                 onClick={() => void refetch()}
                 aria-label={t("table.refresh.lastUpdated", { when: relativeTime })}
               >
-                <IconRefresh style={actionIconIconStyle} />
+                <IconRefresh size={16} />
               </ActionIcon>
             </Tooltip>
           </Group>
         </Group>
       )}
+
+      {contextMenu && <ContainerContextMenu state={contextMenu} handlers={actionHandlers} onClose={closeContextMenu} />}
     </Stack>
   );
 }
+
+function ContainerMenuButton({
+  container,
+  handlers,
+}: {
+  container: DockerContainer;
+  handlers: ContainerActionHandlers;
+}) {
+  const t = useScopedI18n("docker.action");
+  const [opened, setOpened] = useState(false);
+  const close = () => setOpened(false);
+
+  return (
+    <Menu opened={opened} onChange={setOpened} closeOnItemClick={false} withinPortal position="bottom-end" shadow="sm">
+      <Menu.Target>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="sm"
+          aria-label={t("title")}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <IconDots size={16} />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <ContainerActionItems container={container} handlers={handlers} onClose={close} />
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
+
+function ContainerActionItems({
+  container,
+  handlers,
+  onClose,
+}: {
+  container: DockerContainer;
+  handlers: ContainerActionHandlers;
+  onClose: () => void;
+}) {
+  const t = useScopedI18n("docker.action");
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const stateAction = container.state === "running" ? "stop" : "start";
+  const StateIcon = stateAction === "stop" ? IconPlayerStop : IconPlayerPlay;
+
+  const invokeAction = (action: ContainerAction) => {
+    handlers.onAction(action, container);
+    onClose();
+  };
+
+  return (
+    <>
+      <Menu.Label>{container.name}</Menu.Label>
+      <Menu.Item
+        leftSection={<IconFileText size={14} />}
+        onClick={() => {
+          handlers.onOpenLogs(container);
+          onClose();
+        }}
+      >
+        {t("logs.label")}
+      </Menu.Item>
+      <Menu.Divider />
+      <Menu.Item
+        color={stateAction === "start" ? "green" : "red"}
+        leftSection={<StateIcon size={14} />}
+        onClick={() => invokeAction(stateAction)}
+      >
+        {t(`${stateAction}.label`)}
+      </Menu.Item>
+      <Menu.Item color="orange" leftSection={<IconRotateClockwise size={14} />} onClick={() => invokeAction("restart")}>
+        {t("restart.label")}
+      </Menu.Item>
+      {!confirmRemove ? (
+        <Menu.Item color="red" leftSection={<IconTrash size={14} />} onClick={() => setConfirmRemove(true)}>
+          {t("remove.label")}
+        </Menu.Item>
+      ) : (
+        <Menu.Item color="red" leftSection={<IconTrash size={14} />} onClick={() => invokeAction("remove")}>
+          {t("remove.confirm")}
+        </Menu.Item>
+      )}
+      <Menu.Divider />
+      <Menu.Item
+        leftSection={<IconCategoryPlus size={14} />}
+        onClick={() => {
+          handlers.onAddToHomarr(container);
+          onClose();
+        }}
+      >
+        {t("addToHomarr.label")}
+      </Menu.Item>
+    </>
+  );
+}
+
+function ContainerContextMenu({
+  state,
+  handlers,
+  onClose,
+}: {
+  state: ContextMenuState;
+  handlers: ContainerActionHandlers;
+  onClose: () => void;
+}) {
+  return (
+    <Portal>
+      <Box
+        pos="fixed"
+        top={0}
+        left={0}
+        w="100vw"
+        h="100vh"
+        style={{ zIndex: 1000 }}
+        onClick={onClose}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          onClose();
+        }}
+      >
+        <Menu opened shadow="md" position="bottom-start" withinPortal={false} closeOnItemClick={false}>
+          <Menu.Target>
+            <Box pos="fixed" style={{ left: state.x, top: state.y, width: 1, height: 1 }} />
+          </Menu.Target>
+          <Menu.Dropdown onClick={(event) => event.stopPropagation()}>
+            <ContainerActionItems container={state.container} handlers={handlers} onClose={onClose} />
+          </Menu.Dropdown>
+        </Menu>
+      </Box>
+    </Portal>
+  );
+}

packages/widgets/src/docker/index.ts

@@ -27,29 +27,37 @@ export const { definition, componentLoader } = createWidgetDefinition("dockerCon
   icon: IconBrandDocker,
   queryKey: [["docker", "getContainers"]],
   createOptions() {
-    return optionsBuilder.from((factory) => ({
-      columns: factory.multiSelect({
-        defaultValue: [...allColumnsList],
-        options: allColumnsList.map((value) => ({
-          value,
-          label: (t) => t(columnTranslationKeyMap[value]),
-        })),
-        searchable: true,
+    return optionsBuilder.from(
+      (factory) => ({
+        columns: factory.multiSelect({
+          defaultValue: [...allColumnsList],
+          options: allColumnsList.map((value) => ({
+            value,
+            label: (t) => t(columnTranslationKeyMap[value]),
+          })),
+          searchable: true,
+        }),
+        enableRowSorting: factory.switch({
+          defaultValue: false,
+        }),
+        defaultSort: factory.select({
+          defaultValue: "name",
+          options: columnsList.map((value) => ({
+            value,
+            label: (t) => t(`widget.dockerContainers.option.defaultSort.option.${value}`),
+          })),
+        }),
+        descendingDefaultSort: factory.switch({
+          defaultValue: false,
+        }),
+        columnOrder: factory.text({ defaultValue: "" }),
+        columnWidths: factory.text({ defaultValue: "" }),
       }),
-      enableRowSorting: factory.switch({
-        defaultValue: false,
-      }),
-      defaultSort: factory.select({
-        defaultValue: "name",
-        options: columnsList.map((value) => ({
-          value,
-          label: (t) => t(`widget.dockerContainers.option.defaultSort.option.${value}`),
-        })),
-      }),
-      descendingDefaultSort: factory.switch({
-        defaultValue: false,
-      }),
-    }));
+      {
+        columnOrder: { shouldHide: () => true },
+        columnWidths: { shouldHide: () => true },
+      },
+    );
   },
   errors: {
     INTERNAL_SERVER_ERROR: {

packages/widgets/src/docker/styles.css

@@ -0,0 +1,45 @@
+/* Keep the table transparent so the board card controls the surface. */
+.docker-containers-table,
+.docker-containers-table .mantine-datatable-table,
+.docker-containers-table .mantine-datatable-table thead,
+.docker-containers-table .mantine-datatable-table tbody,
+.docker-containers-table .mantine-datatable-table tfoot,
+.docker-containers-table th,
+.docker-containers-table td {
+  background-color: transparent !important;
+}
+
+.docker-containers-table .mantine-datatable-table tr {
+  background-color: transparent;
+}
+
+.docker-containers-table .mantine-datatable-table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
+}
+
+.docker-containers-table th {
+  white-space: nowrap;
+  background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
+  backdrop-filter: blur(8px);
+}
+
+.docker-containers-table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.docker-containers-table td .mantine-Text-root,
+.docker-containers-table td .mantine-Group-root {
+  white-space: nowrap;
+  flex-wrap: nowrap;
+}
+
+.docker-containers-table .mantine-datatable-header-cell-sortable-icon {
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.docker-containers-table th:hover .mantine-datatable-header-cell-sortable-icon {
+  opacity: 1;
+}