diff --git a/config-ui/src/api/index.ts b/config-ui/src/api/index.ts
index 378ba14777e..f69c8cb13ca 100644
--- a/config-ui/src/api/index.ts
+++ b/config-ui/src/api/index.ts
@@ -22,6 +22,7 @@ import * as apiKey from './api-key';
 import * as auth from './auth';
 import * as blueprint from './blueprint';
 import * as connection from './connection';
+import * as org from './org';
 import * as pipeline from './pipeline';
 import plugin from './plugin';
 import * as project from './project';
@@ -39,6 +40,7 @@ export const API = {
   auth,
   blueprint,
   connection,
+  org,
   pipeline,
   plugin,
   project,
diff --git a/config-ui/src/api/org/index.ts b/config-ui/src/api/org/index.ts
new file mode 100644
index 00000000000..deb5cc98328
--- /dev/null
+++ b/config-ui/src/api/org/index.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { request } from '@/utils';
+
+// The org plugin stores teams, users and their account mapping as whole CSV files:
+// every PUT replaces the entire table (deleteAll + save), so the UI always sends
+// back the complete set of rows rather than a delta.
+const upload = (path: string, csv: string, filename: string) => {
+  const data = new FormData();
+  data.append('file', new Blob([csv], { type: 'text/csv' }), filename);
+  return request(path, { method: 'put', data });
+};
+
+export const getTeams = (): Promise<string> => request('/plugins/org/teams.csv');
+
+export const updateTeams = (csv: string) => upload('/plugins/org/teams.csv', csv, 'teams.csv');
+
+export const getUsers = (): Promise<string> => request('/plugins/org/users.csv');
+
+export const updateUsers = (csv: string) => upload('/plugins/org/users.csv', csv, 'users.csv');
+
+// Returns every known account (one per connected tool identity) with the UserId it
+// is currently mapped to, not only the accounts that already have one.
+export const getUserAccountMapping = (): Promise<string> => request('/plugins/org/user_account_mapping.csv');
+
+export const updateUserAccountMapping = (csv: string) =>
+  upload('/plugins/org/user_account_mapping.csv', csv, 'user_account_mapping.csv');
diff --git a/config-ui/src/app/router.tsx b/config-ui/src/app/router.tsx
index c9ffe5f235c..e7f1a9043f3 100644
--- a/config-ui/src/app/router.tsx
+++ b/config-ui/src/app/router.tsx
@@ -35,6 +35,7 @@ import {
   Pipelines,
   Pipeline,
   ApiKeys,
+  Team,
   NotFound,
 } from '@/routes';
 
@@ -112,6 +113,10 @@ export const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: 'teams',
+        element: <Team />,
+      },
       {
         path: 'keys',
         element: <ApiKeys />,
diff --git a/config-ui/src/routes/index.ts b/config-ui/src/routes/index.ts
index 12e9f77bafe..8550e0a0f9d 100644
--- a/config-ui/src/routes/index.ts
+++ b/config-ui/src/routes/index.ts
@@ -27,3 +27,4 @@ export * from './not-found';
 export * from './onboard';
 export * from './pipeline';
 export * from './project';
+export * from './team';
diff --git a/config-ui/src/routes/layout/config.tsx b/config-ui/src/routes/layout/config.tsx
index ae6ac5dbf17..862d9529ab2 100644
--- a/config-ui/src/routes/layout/config.tsx
+++ b/config-ui/src/routes/layout/config.tsx
@@ -21,6 +21,7 @@ import {
   ProjectOutlined,
   ExperimentOutlined,
   KeyOutlined,
+  TeamOutlined,
   DashboardOutlined,
   FileSearchOutlined,
   ApiOutlined,
@@ -66,6 +67,11 @@ export const menuItems: MenuItem[] = [
       },
     ],
   },
+  {
+    key: `${PATH_PREFIX}/teams`,
+    label: 'Teams',
+    icon: <TeamOutlined />,
+  },
   {
     key: `${PATH_PREFIX}/keys`,
     label: 'API Keys',
diff --git a/config-ui/src/routes/team/editable-table.tsx b/config-ui/src/routes/team/editable-table.tsx
new file mode 100644
index 00000000000..a6316df9507
--- /dev/null
+++ b/config-ui/src/routes/team/editable-table.tsx
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { DeleteOutlined } from '@ant-design/icons';
+import { Table, Input, Select, Button, Tooltip } from 'antd';
+
+export type EditableRow = Record<string, string> & { _key: string };
+
+export type EditableField = {
+  key: string;
+  title: string;
+  type?: 'text' | 'select' | 'multiple';
+  width?: number;
+  placeholder?: string;
+  options?: Array<{ label: string; value: string }>;
+  // Multi-value fields are stored in the CSV as a single delimited cell.
+  separator?: string;
+  editable?: boolean;
+  invalid?: (row: EditableRow, rows: EditableRow[]) => string | undefined;
+};
+
+interface Props {
+  fields: EditableField[];
+  rows: EditableRow[];
+  onChange: (rows: EditableRow[]) => void;
+  removable?: boolean;
+  emptyText?: string;
+}
+
+export const EditableTable = ({ fields, rows, onChange, removable = true, emptyText }: Props) => {
+  const update = (key: string, field: string, value: string) =>
+    onChange(rows.map((row) => (row._key === key ? { ...row, [field]: value } : row)));
+
+  const columns = fields.map((field) => ({
+    title: field.title,
+    dataIndex: field.key,
+    width: field.width,
+    render: (value: string, row: EditableRow) => {
+      if (field.editable === false) {
+        return value || <span style={{ color: '#9ca3af' }}>—</span>;
+      }
+
+      if (field.type === 'select' || field.type === 'multiple') {
+        const separator = field.separator ?? ';';
+        const multiple = field.type === 'multiple';
+        return (
+          <Select
+            style={{ width: '100%' }}
+            mode={multiple ? 'multiple' : undefined}
+            allowClear
+            showSearch
+            optionFilterProp="label"
+            placeholder={field.placeholder}
+            options={field.options}
+            value={multiple ? (value ? value.split(separator).filter(Boolean) : []) : value || undefined}
+            onChange={(next) =>
+              update(
+                row._key,
+                field.key,
+                multiple ? ((next as string[]) ?? []).join(separator) : ((next as string) ?? ''),
+              )
+            }
+          />
+        );
+      }
+
+      const error = field.invalid?.(row, rows);
+      return (
+        <Tooltip title={error} open={error ? undefined : false}>
+          <Input
+            status={error ? 'error' : undefined}
+            placeholder={field.placeholder}
+            value={value}
+            onChange={(e) => update(row._key, field.key, e.target.value)}
+          />
+        </Tooltip>
+      );
+    },
+  }));
+
+  if (removable) {
+    columns.push({
+      title: '',
+      dataIndex: '_actions',
+      width: 50,
+      render: (_: string, row: EditableRow) => (
+        <Button
+          type="text"
+          icon={<DeleteOutlined />}
+          onClick={() => onChange(rows.filter((it) => it._key !== row._key))}
+        />
+      ),
+    });
+  }
+
+  return (
+    <Table
+      rowKey="_key"
+      size="small"
+      columns={columns}
+      dataSource={rows}
+      pagination={false}
+      locale={{ emptyText }}
+      scroll={{ x: true }}
+    />
+  );
+};
diff --git a/config-ui/src/routes/team/index.ts b/config-ui/src/routes/team/index.ts
new file mode 100644
index 00000000000..d26db93112c
--- /dev/null
+++ b/config-ui/src/routes/team/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export * from './team';
diff --git a/config-ui/src/routes/team/team.tsx b/config-ui/src/routes/team/team.tsx
new file mode 100644
index 00000000000..0e9525f9217
--- /dev/null
+++ b/config-ui/src/routes/team/team.tsx
@@ -0,0 +1,238 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Flex, Tabs, Button, Alert } from 'antd';
+
+import API from '@/api';
+import { PageHeader } from '@/components';
+import { useRefreshData } from '@/hooks';
+import { operator, parseCSV, stringifyCSV } from '@/utils';
+import type { CSVTable } from '@/utils';
+
+import { EditableTable } from './editable-table';
+import type { EditableRow, EditableField } from './editable-table';
+
+type Resource = 'teams' | 'users' | 'accounts';
+
+let keySeed = 0;
+const nextKey = () => `row-${(keySeed += 1)}`;
+
+const withKeys = (table: CSVTable): EditableRow[] =>
+  table.rows.map((row) => ({ ...row, _key: nextKey() }) as EditableRow);
+
+const toCSV = (headers: string[], rows: EditableRow[]) =>
+  stringifyCSV({
+    headers,
+    rows: rows.map(({ _key, ...rest }) => rest),
+  });
+
+const required = (field: string, label: string) => (row: EditableRow) =>
+  row[field]?.trim() ? undefined : `${label} is required`;
+
+const uniqueId = (row: EditableRow, rows: EditableRow[]) => {
+  const id = row.Id?.trim();
+  if (!id) {
+    return 'Id is required';
+  }
+  return rows.filter((it) => it.Id?.trim() === id).length > 1 ? 'Id must be unique' : undefined;
+};
+
+export const Team = () => {
+  const [tab, setTab] = useState<Resource>('teams');
+  const [operating, setOperating] = useState(false);
+  const [version, setVersion] = useState(1);
+
+  const [teams, setTeams] = useState<EditableRow[]>([]);
+  const [users, setUsers] = useState<EditableRow[]>([]);
+  const [accounts, setAccounts] = useState<EditableRow[]>([]);
+  const [headers, setHeaders] = useState<Record<Resource, string[]>>({
+    teams: ['Id', 'Name', 'Alias', 'ParentId', 'SortingIndex'],
+    users: ['Id', 'Name', 'Email', 'TeamIds'],
+    accounts: [],
+  });
+
+  const { data, ready } = useRefreshData(
+    () =>
+      Promise.all([API.org.getTeams(), API.org.getUsers(), API.org.getUserAccountMapping()]).then(
+        ([teamsCSV, usersCSV, accountsCSV]) => ({
+          teams: parseCSV(teamsCSV),
+          users: parseCSV(usersCSV),
+          accounts: parseCSV(accountsCSV),
+        }),
+      ),
+    [version],
+  );
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    setTeams(withKeys(data.teams));
+    setUsers(withKeys(data.users));
+    setAccounts(withKeys(data.accounts));
+    setHeaders({
+      teams: data.teams.headers.length ? data.teams.headers : headers.teams,
+      users: data.users.headers.length ? data.users.headers : headers.users,
+      accounts: data.accounts.headers,
+    });
+  }, [data]);
+
+  const teamOptions = useMemo(
+    () =>
+      teams
+        .filter((team) => team.Id?.trim())
+        .map((team) => ({ label: team.Name?.trim() || team.Id, value: team.Id.trim() })),
+    [teams],
+  );
+
+  const userOptions = useMemo(
+    () =>
+      users
+        .filter((user) => user.Id?.trim())
+        .map((user) => ({ label: user.Name?.trim() || user.Id, value: user.Id.trim() })),
+    [users],
+  );
+
+  const teamFields: EditableField[] = [
+    { key: 'Id', title: 'Id', width: 120, placeholder: 'e.g. 1', invalid: uniqueId },
+    { key: 'Name', title: 'Name', width: 220, placeholder: 'e.g. Platform', invalid: required('Name', 'Name') },
+    { key: 'Alias', title: 'Alias', width: 140, placeholder: 'e.g. PLT' },
+    {
+      key: 'ParentId',
+      title: 'Parent team',
+      width: 200,
+      type: 'select',
+      placeholder: 'No parent',
+      options: teamOptions,
+    },
+    { key: 'SortingIndex', title: 'Sorting index', width: 130, placeholder: '0' },
+  ];
+
+  const userFields: EditableField[] = [
+    { key: 'Id', title: 'Id', width: 140, placeholder: 'e.g. 1', invalid: uniqueId },
+    { key: 'Name', title: 'Name', width: 200, placeholder: 'Full name', invalid: required('Name', 'Name') },
+    { key: 'Email', title: 'Email', width: 240, placeholder: 'name@example.com' },
+    { key: 'TeamIds', title: 'Teams', type: 'multiple', placeholder: 'Select teams', options: teamOptions },
+  ];
+
+  const accountFields: EditableField[] = [
+    { key: 'Id', title: 'Account Id', width: 260, editable: false },
+    { key: 'UserName', title: 'Username', width: 160, editable: false },
+    { key: 'Email', title: 'Email', width: 220, editable: false },
+    { key: 'Organization', title: 'Organization', width: 160, editable: false },
+    { key: 'UserId', title: 'Mapped user', width: 220, type: 'select', placeholder: 'Unmapped', options: userOptions },
+  ];
+
+  const invalid = useMemo(() => {
+    const rows = tab === 'teams' ? teams : tab === 'users' ? users : [];
+    const fields = tab === 'teams' ? teamFields : tab === 'users' ? userFields : [];
+    return rows.some((row) => fields.some((field) => field.invalid?.(row, rows)));
+  }, [tab, teams, users]);
+
+  const handleAdd = () => {
+    if (tab === 'teams') {
+      setTeams([...teams, { _key: nextKey(), Id: '', Name: '', Alias: '', ParentId: '', SortingIndex: '0' }]);
+    } else if (tab === 'users') {
+      setUsers([...users, { _key: nextKey(), Id: '', Name: '', Email: '', TeamIds: '' }]);
+    }
+  };
+
+  const handleSave = async () => {
+    const payload = {
+      teams: () => API.org.updateTeams(toCSV(headers.teams, teams)),
+      users: () => API.org.updateUsers(toCSV(headers.users, users)),
+      accounts: () => API.org.updateUserAccountMapping(toCSV(headers.accounts, accounts)),
+    }[tab];
+
+    const [success] = await operator(payload, {
+      setOperating,
+      formatMessage: () => 'Saved. Re-run the project pipeline to refresh team metrics.',
+    });
+
+    if (success) {
+      setVersion(version + 1);
+    }
+  };
+
+  return (
+    <PageHeader
+      breadcrumbs={[{ name: 'Teams', path: '/teams' }]}
+      description="Define your teams, their members, and which tool accounts belong to each member. Team dashboards in Grafana read this data."
+    >
+      <Alert
+        style={{ marginBottom: 16 }}
+        type="info"
+        showIcon
+        message="Saving replaces the entire table"
+        description="The org plugin stores each of these as a whole file, so a save overwrites every row — including rows added by someone else since this page loaded."
+      />
+      <Tabs
+        activeKey={tab}
+        onChange={(key) => setTab(key as Resource)}
+        items={[
+          { key: 'teams', label: `Teams (${teams.length})` },
+          { key: 'users', label: `Members (${users.length})` },
+          { key: 'accounts', label: `Account Mapping (${accounts.length})` },
+        ]}
+      />
+      {tab === 'teams' && (
+        <EditableTable
+          fields={teamFields}
+          rows={teams}
+          onChange={setTeams}
+          emptyText={ready ? 'No teams yet. Add one to get started.' : 'Loading…'}
+        />
+      )}
+      {tab === 'users' && (
+        <EditableTable
+          fields={userFields}
+          rows={users}
+          onChange={setUsers}
+          emptyText={ready ? 'No members yet. Add one, then assign them to a team.' : 'Loading…'}
+        />
+      )}
+      {tab === 'accounts' && (
+        <EditableTable
+          fields={accountFields}
+          rows={accounts}
+          onChange={setAccounts}
+          removable={false}
+          emptyText={
+            ready
+              ? 'No accounts collected yet. Run a data collection first — accounts come from your connected tools.'
+              : 'Loading…'
+          }
+        />
+      )}
+      <Flex style={{ marginTop: 16 }} justify="space-between">
+        {tab === 'accounts' ? (
+          <span />
+        ) : (
+          <Button icon={<PlusOutlined />} onClick={handleAdd}>
+            Add {tab === 'teams' ? 'team' : 'member'}
+          </Button>
+        )}
+        <Button type="primary" loading={operating} disabled={!ready || invalid} onClick={handleSave}>
+          Save changes
+        </Button>
+      </Flex>
+    </PageHeader>
+  );
+};
diff --git a/config-ui/src/utils/csv.test.ts b/config-ui/src/utils/csv.test.ts
new file mode 100644
index 00000000000..3afc75d9b60
--- /dev/null
+++ b/config-ui/src/utils/csv.test.ts
@@ -0,0 +1,73 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { parseCSV, stringifyCSV } from './csv';
+
+describe('parseCSV', () => {
+  it('parses the org plugin teams.csv shape', () => {
+    const { headers, rows } = parseCSV('Id,Name,Alias,ParentId,SortingIndex\n1,Platform,PLT,,0\n2,Payments,PAY,1,1\n');
+
+    expect(headers).toEqual(['Id', 'Name', 'Alias', 'ParentId', 'SortingIndex']);
+    expect(rows).toEqual([
+      { Id: '1', Name: 'Platform', Alias: 'PLT', ParentId: '', SortingIndex: '0' },
+      { Id: '2', Name: 'Payments', Alias: 'PAY', ParentId: '1', SortingIndex: '1' },
+    ]);
+  });
+
+  it('keeps quoted delimiters, escaped quotes and embedded newlines in one field', () => {
+    const { rows } = parseCSV('Id,Name\n1,"Platform, Core"\n2,"He said ""hi"""\n3,"two\nlines"\n');
+
+    expect(rows.map((row) => row.Name)).toEqual(['Platform, Core', 'He said "hi"', 'two\nlines']);
+  });
+
+  it('handles CRLF line endings and a header-only file', () => {
+    expect(parseCSV('Id,Name\r\n1,Platform\r\n').rows).toEqual([{ Id: '1', Name: 'Platform' }]);
+    expect(parseCSV('Id,Name\n').rows).toEqual([]);
+  });
+
+  it('pads rows that are missing trailing fields', () => {
+    expect(parseCSV('Id,Name,Email\n1,Platform\n').rows).toEqual([{ Id: '1', Name: 'Platform', Email: '' }]);
+  });
+});
+
+describe('stringifyCSV', () => {
+  it('round-trips a table unchanged', () => {
+    const csv = 'Id,Name,Email,TeamIds\nu1,Itai,itai@example.com,1;2\nu2,Dana,dana@example.com,2\n';
+
+    expect(stringifyCSV(parseCSV(csv))).toBe(csv);
+  });
+
+  it('quotes only the fields that need it', () => {
+    const csv = stringifyCSV({
+      headers: ['Id', 'Name'],
+      rows: [
+        { Id: '1', Name: 'Platform, Core' },
+        { Id: '2', Name: 'He said "hi"' },
+        { Id: '3', Name: 'plain' },
+      ],
+    });
+
+    expect(csv).toBe('Id,Name\n1,"Platform, Core"\n2,"He said ""hi"""\n3,plain\n');
+  });
+
+  it('writes an empty cell for a column the row does not carry', () => {
+    expect(stringifyCSV({ headers: ['Id', 'UserId'], rows: [{ Id: 'acc-1' }] })).toBe('Id,UserId\nacc-1,\n');
+  });
+});
diff --git a/config-ui/src/utils/csv.ts b/config-ui/src/utils/csv.ts
new file mode 100644
index 00000000000..986cf405aeb
--- /dev/null
+++ b/config-ui/src/utils/csv.ts
@@ -0,0 +1,119 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export type CSVTable = {
+  // Kept in the order the server sent them: the org plugin's endpoints round-trip
+  // whole files, so columns the UI does not edit still have to be written back.
+  headers: string[];
+  rows: Array<Record<string, string>>;
+};
+
+// parseCSV implements the subset of RFC 4180 that gocsv (used by the org plugin)
+// emits: double quotes around fields containing a delimiter, quote or newline,
+// with embedded quotes doubled.
+export const parseCSV = (text: string): CSVTable => {
+  const records: string[][] = [];
+  let record: string[] = [];
+  let field = '';
+  let quoted = false;
+  let i = 0;
+
+  const endField = () => {
+    record.push(field);
+    field = '';
+  };
+
+  const endRecord = () => {
+    endField();
+    // A trailing newline must not produce a spurious empty record.
+    if (record.length > 1 || record[0] !== '') {
+      records.push(record);
+    }
+    record = [];
+  };
+
+  while (i < text.length) {
+    const char = text[i];
+
+    if (quoted) {
+      if (char === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 2;
+          continue;
+        }
+        quoted = false;
+        i += 1;
+        continue;
+      }
+      field += char;
+      i += 1;
+      continue;
+    }
+
+    if (char === '"' && field === '') {
+      quoted = true;
+      i += 1;
+      continue;
+    }
+
+    if (char === ',') {
+      endField();
+      i += 1;
+      continue;
+    }
+
+    if (char === '\r' && text[i + 1] === '\n') {
+      endRecord();
+      i += 2;
+      continue;
+    }
+
+    if (char === '\n' || char === '\r') {
+      endRecord();
+      i += 1;
+      continue;
+    }
+
+    field += char;
+    i += 1;
+  }
+
+  if (field !== '' || record.length) {
+    endRecord();
+  }
+
+  const [headers = [], ...body] = records;
+
+  return {
+    headers,
+    rows: body.map((cells) =>
+      headers.reduce<Record<string, string>>((acc, header, index) => {
+        acc[header] = cells[index] ?? '';
+        return acc;
+      }, {}),
+    ),
+  };
+};
+
+const escapeField = (value: string) => (/[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value);
+
+export const stringifyCSV = ({ headers, rows }: CSVTable): string =>
+  [headers, ...rows.map((row) => headers.map((header) => row[header] ?? ''))]
+    .map((cells) => cells.map((cell) => escapeField(cell)).join(','))
+    .join('\n') + '\n';
diff --git a/config-ui/src/utils/index.ts b/config-ui/src/utils/index.ts
index 9b21e33e202..d65cd8d6bb6 100644
--- a/config-ui/src/utils/index.ts
+++ b/config-ui/src/utils/index.ts
@@ -16,6 +16,7 @@
  *
  */
 
+export * from './csv';
 export * from './operator';
 export * from './request';
 export * from './time';