feat(frontend): add Table component with TableField renderer for tabular data input (#11751)

### Changes 🏗️

- Added a new `Table` component for handling tabular data input
- Created supporting hooks and helper functions for the Table component
- Added Storybook stories to showcase different Table configurations
- Implemented a custom `TableField` renderer for JSON Schema forms
- Updated type display info to support the new "table" format
- Added schema matcher to detect and render table fields appropriately

![Screenshot 2026-01-12 at
11.29.04 AM.png](https://app.graphite.com/user-attachments/assets/71469d59-469f-4cb0-882b-a49791fe948d.png)

![Screenshot 2026-01-12 at
11.28.54 AM.png](https://app.graphite.com/user-attachments/assets/81193f32-0e16-435e-bb66-5d2aea98266a.png)

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Verified Table component renders correctly with various
configurations
  - [x] Tested adding and removing rows in the Table
- [x] Confirmed data changes are properly tracked and reported via
onChange
  - [x] Verified TableField renderer works with JSON Schema forms
  - [x] Checked that table format is properly detected in the schema

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added a Table component for displaying and editing tabular data with
support for adding/deleting rows, read-only mode, and customizable
labels.
* Added support for rendering array fields as tables in form inputs with
configurable columns and values.

* **Tests**
* Added comprehensive Storybook stories demonstrating various Table
configurations and behaviors.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts

@@ -89,6 +89,18 @@ export function extractOptions(
 
 // get display type and color for schema types [need for type display next to field name]
 export const getTypeDisplayInfo = (schema: any) => {
+  if (
+    schema?.type === "array" &&
+    "format" in schema &&
+    schema.format === "table"
+  ) {
+    return {
+      displayType: "table",
+      colorClass: "!text-indigo-500",
+      hexColor: "#6366f1",
+    };
+  }
+
   if (schema?.type === "string" && schema?.format) {
     const formatMap: Record<
       string,

autogpt_platform/frontend/src/components/molecules/Table/Table.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { TooltipProvider } from "@/components/atoms/Tooltip/BaseTooltip";
+import { Table } from "./Table";
+
+const meta = {
+  title: "Molecules/Table",
+  component: Table,
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    allowAddRow: {
+      control: "boolean",
+      description: "Whether to show the Add row button",
+    },
+    allowDeleteRow: {
+      control: "boolean",
+      description: "Whether to show delete buttons for each row",
+    },
+    readOnly: {
+      control: "boolean",
+      description:
+        "Whether the table is read-only (renders text instead of inputs)",
+    },
+    addRowLabel: {
+      control: "text",
+      description: "Label for the Add row button",
+    },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    columns: ["name", "email", "role"],
+    allowAddRow: true,
+    allowDeleteRow: true,
+  },
+};
+
+export const WithDefaultValues: Story = {
+  args: {
+    columns: ["name", "email", "role"],
+    defaultValues: [
+      { name: "John Doe", email: "john@example.com", role: "Admin" },
+      { name: "Jane Smith", email: "jane@example.com", role: "User" },
+      { name: "Bob Wilson", email: "bob@example.com", role: "Editor" },
+    ],
+    allowAddRow: true,
+    allowDeleteRow: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    columns: ["name", "email"],
+    defaultValues: [
+      { name: "John Doe", email: "john@example.com" },
+      { name: "Jane Smith", email: "jane@example.com" },
+    ],
+    readOnly: true,
+  },
+};
+
+export const NoAddOrDelete: Story = {
+  args: {
+    columns: ["name", "email"],
+    defaultValues: [
+      { name: "John Doe", email: "john@example.com" },
+      { name: "Jane Smith", email: "jane@example.com" },
+    ],
+    allowAddRow: false,
+    allowDeleteRow: false,
+  },
+};
+
+export const SingleColumn: Story = {
+  args: {
+    columns: ["item"],
+    allowAddRow: true,
+    allowDeleteRow: true,
+    addRowLabel: "Add item",
+  },
+};
+
+export const CustomAddLabel: Story = {
+  args: {
+    columns: ["key", "value"],
+    allowAddRow: true,
+    allowDeleteRow: true,
+    addRowLabel: "Add new entry",
+  },
+};
+
+export const KeyValuePairs: Story = {
+  args: {
+    columns: ["key", "value"],
+    defaultValues: [
+      { key: "API_KEY", value: "sk-..." },
+      { key: "DATABASE_URL", value: "postgres://..." },
+    ],
+    allowAddRow: true,
+    allowDeleteRow: true,
+    addRowLabel: "Add variable",
+  },
+};

autogpt_platform/frontend/src/components/molecules/Table/Table.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import {
+  Table as BaseTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/__legacy__/ui/table";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
+import { Text } from "@/components/atoms/Text/Text";
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTable, RowData } from "./useTable";
+import { formatColumnTitle, formatPlaceholder } from "./helpers";
+
+export interface TableProps {
+  columns: string[];
+  defaultValues?: RowData[];
+  onChange?: (rows: RowData[]) => void;
+  allowAddRow?: boolean;
+  allowDeleteRow?: boolean;
+  addRowLabel?: string;
+  className?: string;
+  readOnly?: boolean;
+}
+
+export function Table({
+  columns,
+  defaultValues,
+  onChange,
+  allowAddRow = true,
+  allowDeleteRow = true,
+  addRowLabel = "Add row",
+  className,
+  readOnly = false,
+}: TableProps) {
+  const { rows, handleAddRow, handleDeleteRow, handleCellChange } = useTable({
+    columns,
+    defaultValues,
+    onChange,
+  });
+
+  const showDeleteColumn = allowDeleteRow && !readOnly;
+  const showAddButton = allowAddRow && !readOnly;
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="overflow-hidden rounded-xl border border-zinc-200 bg-white">
+        <BaseTable>
+          <TableHeader>
+            <TableRow className="border-b border-zinc-100 bg-zinc-50/50">
+              {columns.map((column) => (
+                <TableHead
+                  key={column}
+                  className="h-10 px-3 text-sm font-medium text-zinc-600"
+                >
+                  {formatColumnTitle(column)}
+                </TableHead>
+              ))}
+              {showDeleteColumn && <TableHead className="w-[50px]" />}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row, rowIndex) => (
+              <TableRow key={rowIndex} className="border-none">
+                {columns.map((column) => (
+                  <TableCell key={`${rowIndex}-${column}`} className="p-2">
+                    {readOnly ? (
+                      <Text
+                        variant="body"
+                        className="px-3 py-2 text-sm text-zinc-800"
+                      >
+                        {row[column] || "-"}
+                      </Text>
+                    ) : (
+                      <Input
+                        id={`table-${rowIndex}-${column}`}
+                        label={formatColumnTitle(column)}
+                        hideLabel
+                        value={row[column] ?? ""}
+                        onChange={(e) =>
+                          handleCellChange(rowIndex, column, e.target.value)
+                        }
+                        placeholder={formatPlaceholder(column)}
+                        size="small"
+                        wrapperClassName="mb-0"
+                      />
+                    )}
+                  </TableCell>
+                ))}
+                {showDeleteColumn && (
+                  <TableCell className="p-2">
+                    <Button
+                      variant="icon"
+                      size="icon"
+                      onClick={() => handleDeleteRow(rowIndex)}
+                      aria-label="Delete row"
+                      className="text-zinc-400 transition-colors hover:text-red-500"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+            {showAddButton && (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length + (showDeleteColumn ? 1 : 0)}
+                  className="p-2"
+                >
+                  <Button
+                    variant="outline"
+                    size="small"
+                    onClick={handleAddRow}
+                    leftIcon={<Plus className="h-4 w-4" />}
+                    className="w-fit"
+                  >
+                    {addRowLabel}
+                  </Button>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </BaseTable>
+      </div>
+    </div>
+  );
+}
+
+export { type RowData } from "./useTable";

autogpt_platform/frontend/src/components/molecules/Table/helpers.ts

@@ -0,0 +1,7 @@
+export const formatColumnTitle = (key: string): string => {
+  return key.charAt(0).toUpperCase() + key.slice(1);
+};
+
+export const formatPlaceholder = (key: string): string => {
+  return `Enter ${key.toLowerCase()}`;
+};

autogpt_platform/frontend/src/components/molecules/Table/useTable.ts

@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+
+export type RowData = Record<string, string>;
+
+interface UseTableOptions {
+  columns: string[];
+  defaultValues?: RowData[];
+  onChange?: (rows: RowData[]) => void;
+}
+
+export function useTable({
+  columns,
+  defaultValues,
+  onChange,
+}: UseTableOptions) {
+  const createEmptyRow = (): RowData => {
+    const emptyRow: RowData = {};
+    columns.forEach((column) => {
+      emptyRow[column] = "";
+    });
+    return emptyRow;
+  };
+
+  const [rows, setRows] = useState<RowData[]>(() => {
+    if (defaultValues && defaultValues.length > 0) {
+      return defaultValues;
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (defaultValues !== undefined) {
+      setRows(defaultValues);
+    }
+  }, [defaultValues]);
+
+  const updateRows = (newRows: RowData[]) => {
+    setRows(newRows);
+    onChange?.(newRows);
+  };
+
+  const handleAddRow = () => {
+    const newRows = [...rows, createEmptyRow()];
+    updateRows(newRows);
+  };
+
+  const handleDeleteRow = (rowIndex: number) => {
+    const newRows = rows.filter((_, index) => index !== rowIndex);
+    updateRows(newRows);
+  };
+
+  const handleCellChange = (
+    rowIndex: number,
+    columnKey: string,
+    value: string,
+  ) => {
+    const newRows = rows.map((row, index) => {
+      if (index === rowIndex) {
+        return {
+          ...row,
+          [columnKey]: value,
+        };
+      }
+      return row;
+    });
+    updateRows(newRows);
+  };
+
+  const clearAll = () => {
+    updateRows([]);
+  };
+
+  return {
+    rows,
+    handleAddRow,
+    handleDeleteRow,
+    handleCellChange,
+    clearAll,
+    createEmptyRow,
+  };
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/anyof/AnyOfField.tsx

@@ -12,13 +12,7 @@ export const AnyOfField = (props: FieldProps) => {
   const { fields } = registry;
   const { SchemaField: _SchemaField } = fields;
   const { nodeId } = registry.formContext;
-
   const { isInputConnected } = useEdgeStore();
-
-  const uiOptions = getUiOptions(props.uiSchema, props.globalUiOptions);
-
-  const Widget = getWidget({ type: "string" }, "select", registry.widgets);
-
   const {
     handleOptionChange,
     enumOptions,
@@ -27,6 +21,15 @@ export const AnyOfField = (props: FieldProps) => {
     field_id,
   } = useAnyOfField(props);
 
+  const parentCustomFieldId = findCustomFieldId(schema);
+  if (parentCustomFieldId) {
+    return null;
+  }
+
+  const uiOptions = getUiOptions(props.uiSchema, props.globalUiOptions);
+
+  const Widget = getWidget({ type: "string" }, "select", registry.widgets);
+
   const handleId = getHandleId({
     uiOptions,
     id: field_id + ANY_OF_FLAG,

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/TableField/TableField.tsx

@@ -0,0 +1,52 @@
+import { descriptionId, FieldProps, getTemplate, titleId } from "@rjsf/utils";
+import { Table, RowData } from "@/components/molecules/Table/Table";
+import { useMemo } from "react";
+
+export const TableField = (props: FieldProps) => {
+  const { schema, formData, onChange, fieldPathId, registry, uiSchema } = props;
+
+  const itemSchema = schema.items as any;
+  const properties = itemSchema?.properties || {};
+
+  const columns: string[] = useMemo(() => {
+    return Object.keys(properties);
+  }, [properties]);
+
+  const handleChange = (rows: RowData[]) => {
+    onChange(rows, fieldPathId?.path.slice(0, -1));
+  };
+
+  const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry);
+  const DescriptionFieldTemplate = getTemplate(
+    "DescriptionFieldTemplate",
+    registry,
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <TitleFieldTemplate
+        id={titleId(fieldPathId)}
+        title={schema.title || ""}
+        required={true}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <DescriptionFieldTemplate
+        id={descriptionId(fieldPathId)}
+        description={schema.description || ""}
+        schema={schema}
+        registry={registry}
+      />
+
+      <Table
+        columns={columns}
+        defaultValues={formData}
+        onChange={handleChange}
+        allowAddRow={true}
+        allowDeleteRow={true}
+        addRowLabel="Add row"
+      />
+    </div>
+  );
+};

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts

@@ -3,6 +3,7 @@ import { CredentialsField } from "./CredentialField/CredentialField";
 import { GoogleDrivePickerField } from "./GoogleDrivePickerField/GoogleDrivePickerField";
 import { MultiSelectField } from "./MultiSelectField/MultiSelectField";
 import { isMultiSelectSchema } from "../utils/schema-utils";
+import { TableField } from "./TableField/TableField";
 
 export interface CustomFieldDefinition {
   id: string;
@@ -37,6 +38,17 @@ export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
     matcher: isMultiSelectSchema,
     component: MultiSelectField,
   },
+  {
+    id: "custom/table_field",
+    matcher: (schema: any) => {
+      return (
+        schema.type === "array" &&
+        "format" in schema &&
+        schema.format === "table"
+      );
+    },
+    component: TableField,
+  },
 ];
 
 export function findCustomFieldId(schema: any): string | null {