feat(widgets): persist Beszel and Docker 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,21 @@
         },
         "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."
+      },
+      "empty": {
+        "noContainers": "No containers found"
       }
     },
     "coolify": {
@@ -3954,11 +3965,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 +5375,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,34 @@
+import { describe, expect, test } from "vitest";
+
+import { parseColumnOrder, parseColumnWidths } from "../common/use-persisted-table-layout";
+
+const columnAccessors = ["name", "cpu", "memory", "disk", "temp"];
+
+describe("Beszel table column layout options", () => {
+  test("ignores malformed column layout JSON", () => {
+    expect(parseColumnOrder("{", columnAccessors)).toEqual([]);
+    expect(parseColumnWidths("[]", columnAccessors)).toEqual({});
+  });
+
+  test("removes stale and duplicate column accessors", () => {
+    expect(parseColumnOrder(JSON.stringify(["memory", "removed", "cpu", "memory"]), columnAccessors)).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,
+        }),
+        columnAccessors,
+      ),
+    ).toEqual({ cpu: 140 });
+  });
+});