diff --git a/spreadsheet_oca/README.rst b/spreadsheet_oca/README.rst
index 7ff051d7..eae5fe5d 100644
--- a/spreadsheet_oca/README.rst
+++ b/spreadsheet_oca/README.rst
@@ -88,6 +88,26 @@ Usage
        of ``account.account`` model. (``income``, ``asset_receivable``,
        etc.)
 
+**Edit the columns of a list**
+------------------------------
+
+- Open the list side panel (``Data`` menu, then the list name).
+- In the ``Columns`` section you can remove or reorder the columns, and
+  add new ones with the field selector. Relational fields can be
+  followed to add related values, e.g. ``Company > Name``
+  (``company_id.name``).
+- Click on ``Insert list`` to write the updated columns in the sheet.
+
+**Group a pivot by related fields**
+-----------------------------------
+
+- Open the pivot side panel and click on ``Add`` in the ``Columns`` or
+  ``Rows`` section.
+- Click on the arrow next to a many2one field to see the fields of the
+  related model, then pick one, e.g. ``Company > Fiscal Country``.
+- Only stored fields can be used, as the grouping is done in the
+  database.
+
 .. |image1| image:: https://raw.githubusercontent.com/OCA/spreadsheet/19.0/spreadsheet_oca/static/description/spreadsheet_create.png
 .. |image2| image:: https://raw.githubusercontent.com/OCA/spreadsheet/19.0/spreadsheet_oca/static/description/spreadsheet_edit.png
 .. |image3| image:: https://raw.githubusercontent.com/OCA/spreadsheet/19.0/spreadsheet_oca/static/description/o-spreadsheet.png
diff --git a/spreadsheet_oca/__manifest__.py b/spreadsheet_oca/__manifest__.py
index 27a685c7..ac540bd0 100644
--- a/spreadsheet_oca/__manifest__.py
+++ b/spreadsheet_oca/__manifest__.py
@@ -47,5 +47,8 @@
             "spreadsheet_oca/static/src/spreadsheet/bundle/chart_panels.esm.js",
             "spreadsheet_oca/static/src/spreadsheet/bundle/chart_panel.esm.js",
         ],
+        "web.assets_unit_tests": [
+            "spreadsheet_oca/static/tests/**/*",
+        ],
     },
 }
diff --git a/spreadsheet_oca/readme/USAGE.md b/spreadsheet_oca/readme/USAGE.md
index 935707dc..1a43da2a 100644
--- a/spreadsheet_oca/readme/USAGE.md
+++ b/spreadsheet_oca/readme/USAGE.md
@@ -37,3 +37,19 @@
   > - `ODOO.ACCOUNT.GROUP(type)`: Returns the account ids of a given
   >   group where type should be a value of the `account_type` field of
   >   `account.account` model. (`income`, `asset_receivable`, etc.)
+
+## **Edit the columns of a list**
+
+- Open the list side panel (`Data` menu, then the list name).
+- In the `Columns` section you can remove or reorder the columns, and add
+  new ones with the field selector. Relational fields can be followed to
+  add related values, e.g. `Company > Name` (`company_id.name`).
+- Click on `Insert list` to write the updated columns in the sheet.
+
+## **Group a pivot by related fields**
+
+- Open the pivot side panel and click on `Add` in the `Columns` or `Rows`
+  section.
+- Click on the arrow next to a many2one field to see the fields of the
+  related model, then pick one, e.g. `Company > Fiscal Country`.
+- Only stored fields can be used, as the grouping is done in the database.
diff --git a/spreadsheet_oca/static/description/index.html b/spreadsheet_oca/static/description/index.html
index cab1e206..cc348cfe 100644
--- a/spreadsheet_oca/static/description/index.html
+++ b/spreadsheet_oca/static/description/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
-<title>Spreadsheet Oca</title>
+<title>README.rst</title>
 <style type="text/css">
 
 /*
@@ -384,14 +384,16 @@ <h1>Spreadsheet Oca</h1>
 <ul class="simple">
 <li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a><ul>
 <li><a class="reference internal" href="#create-a-new-spreadsheet" id="toc-entry-2"><strong>Create a new spreadsheet</strong></a></li>
+<li><a class="reference internal" href="#edit-the-columns-of-a-list" id="toc-entry-3"><strong>Edit the columns of a list</strong></a></li>
+<li><a class="reference internal" href="#group-a-pivot-by-related-fields" id="toc-entry-4"><strong>Group a pivot by related fields</strong></a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#development" id="toc-entry-3">Development</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="toc-entry-4">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="toc-entry-5">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="toc-entry-6">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="toc-entry-7">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="toc-entry-8">Maintainers</a></li>
+<li><a class="reference internal" href="#development" id="toc-entry-5">Development</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-6">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-7">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-8">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="toc-entry-9">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-10">Maintainers</a></li>
 </ul>
 </li>
 </ul>
@@ -445,15 +447,37 @@ <h3><a class="toc-backref" href="#toc-entry-2"><strong>Create a new spreadsheet<
 </li>
 </ul>
 </div>
+<div class="section" id="edit-the-columns-of-a-list">
+<h3><a class="toc-backref" href="#toc-entry-3"><strong>Edit the columns of a list</strong></a></h3>
+<ul class="simple">
+<li>Open the list side panel (<tt class="docutils literal">Data</tt> menu, then the list name).</li>
+<li>In the <tt class="docutils literal">Columns</tt> section you can remove or reorder the columns, and
+add new ones with the field selector. Relational fields can be
+followed to add related values, e.g. <tt class="docutils literal">Company &gt; Name</tt>
+(<tt class="docutils literal">company_id.name</tt>).</li>
+<li>Click on <tt class="docutils literal">Insert list</tt> to write the updated columns in the sheet.</li>
+</ul>
+</div>
+<div class="section" id="group-a-pivot-by-related-fields">
+<h3><a class="toc-backref" href="#toc-entry-4"><strong>Group a pivot by related fields</strong></a></h3>
+<ul class="simple">
+<li>Open the pivot side panel and click on <tt class="docutils literal">Add</tt> in the <tt class="docutils literal">Columns</tt> or
+<tt class="docutils literal">Rows</tt> section.</li>
+<li>Click on the arrow next to a many2one field to see the fields of the
+related model, then pick one, e.g. <tt class="docutils literal">Company &gt; Fiscal Country</tt>.</li>
+<li>Only stored fields can be used, as the grouping is done in the
+database.</li>
+</ul>
+</div>
 </div>
 <div class="section" id="development">
-<h2><a class="toc-backref" href="#toc-entry-3">Development</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-5">Development</a></h2>
 <p>If you want to develop custom business functions, you can add others,
 based on the file
 <a class="reference external" href="https://github.com/odoo/odoo/blob/16.0/addons/spreadsheet_account/static/src/accounting_functions.js">https://github.com/odoo/odoo/blob/16.0/addons/spreadsheet_account/static/src/accounting_functions.js</a></p>
 </div>
 <div class="section" id="bug-tracker">
-<h2><a class="toc-backref" href="#toc-entry-4">Bug Tracker</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-6">Bug Tracker</a></h2>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/spreadsheet/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
@@ -461,15 +485,15 @@ <h2><a class="toc-backref" href="#toc-entry-4">Bug Tracker</a></h2>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h2><a class="toc-backref" href="#toc-entry-5">Credits</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-7">Credits</a></h2>
 <div class="section" id="authors">
-<h3><a class="toc-backref" href="#toc-entry-6">Authors</a></h3>
+<h3><a class="toc-backref" href="#toc-entry-8">Authors</a></h3>
 <ul class="simple">
 <li>CreuBlanca</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h3><a class="toc-backref" href="#toc-entry-7">Contributors</a></h3>
+<h3><a class="toc-backref" href="#toc-entry-9">Contributors</a></h3>
 <ul class="simple">
 <li>Enric Tobella</li>
 <li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
@@ -487,7 +511,7 @@ <h3><a class="toc-backref" href="#toc-entry-7">Contributors</a></h3>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h3><a class="toc-backref" href="#toc-entry-8">Maintainers</a></h3>
+<h3><a class="toc-backref" href="#toc-entry-10">Maintainers</a></h3>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org">
 <img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
diff --git a/spreadsheet_oca/static/src/spreadsheet/bundle/filter_panel_datasources.esm.js b/spreadsheet_oca/static/src/spreadsheet/bundle/filter_panel_datasources.esm.js
index 892ea5c7..cad18a47 100644
--- a/spreadsheet_oca/static/src/spreadsheet/bundle/filter_panel_datasources.esm.js
+++ b/spreadsheet_oca/static/src/spreadsheet/bundle/filter_panel_datasources.esm.js
@@ -1,17 +1,27 @@
 import * as spreadsheet from "@odoo/o-spreadsheet";
-import {Component, onWillStart, onWillUpdateProps, useRef, useState} from "@odoo/owl";
+import {
+    Component,
+    onWillStart,
+    onWillUpdateProps,
+    useRef,
+    useState,
+    useSubEnv,
+} from "@odoo/owl";
 import {Domain} from "@web/core/domain";
 import {DomainSelector} from "@web/core/domain_selector/domain_selector";
 import {DomainSelectorDialog} from "@web/core/domain_selector_dialog/domain_selector_dialog";
+import {ModelFieldSelector} from "@web/core/model_field_selector/model_field_selector";
+import {ModelFieldSelectorPopover} from "@web/core/model_field_selector/model_field_selector_popover";
 import {ODOO_AGGREGATORS} from "@spreadsheet/pivot/pivot_helpers";
 import {_t} from "@web/core/l10n/translation";
 import {formatDate} from "@web/core/l10n/dates";
 import {useService} from "@web/core/utils/hooks";
 
 const {DateTime} = luxon;
-const {PivotTitleSection, PivotLayoutConfigurator} = spreadsheet.components;
+const {AddDimensionButton, PivotTitleSection, PivotLayoutConfigurator} =
+    spreadsheet.components;
 const {useLocalStore, PivotSidePanelStore} = spreadsheet.stores;
-const {sidePanelRegistry, topbarMenuRegistry, pivotSidePanelRegistry} =
+const {sidePanelRegistry, topbarMenuRegistry, pivotSidePanelRegistry, pivotRegistry} =
     spreadsheet.registries;
 
 topbarMenuRegistry.addChild("data_sources", ["data"], (env) => {
@@ -39,12 +49,95 @@ topbarMenuRegistry.addChild("data_sources", ["data"], (env) => {
     ]);
 });
 
+/**
+ * Field selector popover that only follows many2one relations, the only ones
+ * the ORM accepts in a read_group path (e.g. "company_id.country_id").
+ */
+class PivotFieldSelectorPopover extends ModelFieldSelectorPopover {
+    canFollowRelationFor(fieldDef) {
+        return fieldDef.type === "many2one" && fieldDef.groupable;
+    }
+}
+
+/**
+ * "Add" button of the pivot rows/columns. It replaces the flat field list
+ * of o-spreadsheet by the Odoo field selector so related fields can be
+ * picked as dimensions (e.g. "Company > Country").
+ */
+export class RelationalAddDimensionButton extends AddDimensionButton {
+    get resModel() {
+        return this.env.pivotResModel;
+    }
+    /**
+     * @param {Object} field
+     * @param {String} path path of the page holding the field, empty on the
+     * root model
+     */
+    filterField(field, path) {
+        const isFollowable = field.type === "many2one" && field.groupable;
+        if (!path) {
+            const unusedFields = new Set(this.props.fields.map((f) => f.name));
+            return unusedFields.has(field.name) || isFollowable;
+        }
+        // X2many fields cannot be part of a read_group path
+        return (
+            !["one2many", "many2many"].includes(field.type) &&
+            (isFollowable || pivotRegistry.get("ODOO").isGroupable(field))
+        );
+    }
+    onPathSelected(path, field) {
+        // The popover also calls update when it opens a page: only react to
+        // an actual field selection.
+        if (!field) {
+            return;
+        }
+        this.props.onFieldPicked(path);
+    }
+    closePopover() {
+        this.popover.isOpen = false;
+    }
+}
+RelationalAddDimensionButton.template = "spreadsheet_oca.RelationalAddDimensionButton";
+RelationalAddDimensionButton.components = {
+    ...AddDimensionButton.components,
+    PivotFieldSelectorPopover,
+};
+
 export class PivotLayoutConfiguratorWithAggregators extends PivotLayoutConfigurator {
     setup() {
         super.setup();
         this.AGGREGATORS = ODOO_AGGREGATORS;
+        useSubEnv({
+            pivotResModel: this.env.model.getters.getPivotCoreDefinition(
+                this.props.pivotId
+            ).model,
+        });
+    }
+    /**
+     * A followed many2one stays pickable in the field selector even when it
+     * is already a dimension, so ignore duplicates here.
+     */
+    isUsedDimension(fieldName) {
+        const {columns, rows} = this.props.definition;
+        return [...columns, ...rows].some((d) => d.fieldName === fieldName);
+    }
+    addColumnDimension(fieldName) {
+        if (!this.isUsedDimension(fieldName)) {
+            super.addColumnDimension(fieldName);
+        }
+    }
+    addRowDimension(fieldName) {
+        if (!this.isUsedDimension(fieldName)) {
+            super.addRowDimension(fieldName);
+        }
     }
 }
+PivotLayoutConfiguratorWithAggregators.template =
+    "spreadsheet_oca.PivotLayoutConfigurator";
+PivotLayoutConfiguratorWithAggregators.components = {
+    ...PivotLayoutConfigurator.components,
+    RelationalAddDimensionButton,
+};
 
 export class PivotTitleSectionInsertion extends PivotTitleSection {
     get cogWheelMenuItems() {
@@ -148,7 +241,7 @@ PivotPanelDisplay.components = {
     PivotTitleSectionInsertion,
     PivotLayoutConfiguratorWithAggregators,
 };
-PivotPanelDisplay.properties = {
+PivotPanelDisplay.props = {
     pivotId: String,
 };
 
@@ -162,6 +255,10 @@ export class PivotPanel extends Component {
 }
 
 PivotPanel.template = "spreadsheet_oca.PivotPanel";
+PivotPanel.props = {
+    pivotId: {type: String, optional: true},
+    "*": true,
+};
 PivotPanel.components = {
     PivotPanelDisplay,
 };
@@ -170,18 +267,56 @@ pivotSidePanelRegistry.add("ODOO", {
     editor: PivotPanel,
 });
 
+// Field types that cannot be displayed in a list cell
+const UNSUPPORTED_LIST_FIELD_TYPES = [
+    "binary",
+    "json",
+    "properties",
+    "properties_definition",
+];
+
 export class ListPanelDisplay extends Component {
     setup() {
-        this.state = useState({listRows: undefined});
+        this.state = useState({listRows: undefined, newColumnPath: ""});
         this.dialog = useService("dialog");
-        onWillStart(this.modelData.bind(this));
-        onWillUpdateProps(this.modelData.bind(this));
+        this.fieldService = useService("field");
+        // Labels of the column paths, keyed by "model:path"
+        this.columnLabels = {};
+        onWillStart(() => this.modelData(this.props));
+        onWillUpdateProps((nextProps) => this.modelData(nextProps));
     }
-    async modelData() {
+    async modelData(props) {
         this.ListDataSource = await this.env.model.getters.getAsyncListDataSource(
-            this.props.listId
+            props.listId
         );
         this.modelLabel = await this.ListDataSource.getModelLabel();
+        await this.loadColumnLabels(props.listDefinition);
+    }
+    /**
+     * Compute a readable label ("Company > Name") for every column path.
+     * Labels are cached, so only new paths trigger a field lookup.
+     */
+    async loadColumnLabels({model, columns}) {
+        const missing = (columns || []).filter(
+            (path) => !(`${model}:${path}` in this.columnLabels)
+        );
+        await Promise.all(
+            missing.map(async (path) => {
+                const {isInvalid, displayNames} =
+                    await this.fieldService.loadPathDescription(model, path);
+                this.columnLabels[`${model}:${path}`] = {
+                    label: isInvalid ? path : displayNames.join(" > "),
+                    isInvalid,
+                };
+            })
+        );
+    }
+    get columns() {
+        const {model, columns} = this.props.listDefinition;
+        return (columns || []).map((path) => ({
+            path,
+            ...(this.columnLabels[`${model}:${path}`] || {label: path}),
+        }));
     }
     get domain() {
         return new Domain(this.props.listDefinition.domain).toString();
@@ -208,6 +343,77 @@ export class ListPanelDisplay extends Component {
             domain: new Domain(domain).toList(),
         });
     }
+    /**
+     * Hide the fields that cannot be shown in a cell. Relational fields stay
+     * visible so the user can follow them (e.g. company_id > name).
+     */
+    filterColumnField(field) {
+        return !UNSUPPORTED_LIST_FIELD_TYPES.includes(field.type);
+    }
+    onNewColumnPathUpdate(path) {
+        this.state.newColumnPath = path || "";
+    }
+    addColumn() {
+        const path = this.state.newColumnPath;
+        if (!path || this.props.listDefinition.columns.includes(path)) {
+            return;
+        }
+        this.updateColumns([...this.props.listDefinition.columns, path]);
+        this.state.newColumnPath = "";
+    }
+    removeColumn(index) {
+        const columns = [...this.props.listDefinition.columns];
+        columns.splice(index, 1);
+        this.updateColumns(columns);
+    }
+    moveColumn(index, delta) {
+        const columns = [...this.props.listDefinition.columns];
+        const target = index + delta;
+        if (target < 0 || target >= columns.length) {
+            return;
+        }
+        [columns[index], columns[target]] = [columns[target], columns[index]];
+        this.updateColumns(columns);
+    }
+    updateColumns(columns) {
+        const list = JSON.parse(
+            JSON.stringify(
+                this.env.model.getters.getListModelDefinition(this.props.listId)
+            )
+        );
+        list.metaData.columns = columns;
+        this.env.model.dispatch("UPDATE_ODOO_LIST", {
+            listId: this.props.listId,
+            list,
+        });
+    }
+    /**
+     * Resolve the type of every column, following relations when the column
+     * is a path like "company_id.name". Related columns get an explicit
+     * header so it is clear which record the value comes from.
+     */
+    async getInsertColumns(list) {
+        return Promise.all(
+            list.columns.map(async (name) => {
+                const {isInvalid, names, modelsInfo} = await this.fieldService.loadPath(
+                    list.model,
+                    name
+                );
+                if (isInvalid) {
+                    return {name, type: "char"};
+                }
+                const field = modelsInfo.at(-1).fieldDefs[names.at(-1)];
+                const column = {name, type: field.type};
+                if (names.length > 1) {
+                    // Escape quotes: the label ends up inside a formula string
+                    column.string = this.columnLabels[
+                        `${list.model}:${name}`
+                    ]?.label.replaceAll('"', '\\"');
+                }
+                return column;
+            })
+        );
+    }
     async insertList() {
         const listId = this.props.listId;
         const zone = this.env.model.getters.getSelectedZone();
@@ -215,10 +421,8 @@ export class ListPanelDisplay extends Component {
         const totalRows = parseInt(this.state.listRows, 10) || dataSource.maxPosition;
         const list = this.env.model.getters.getListDefinition(listId);
         const sheetId = this.env.model.getters.getActiveSheetId();
-        const columns = list.columns.map((name) => ({
-            name,
-            type: dataSource.getField(name).type,
-        }));
+        await this.loadColumnLabels(list);
+        const columns = await this.getInsertColumns(list);
         this.env.model.dispatch("RE_INSERT_ODOO_LIST_WITH_TABLE", {
             sheetId: sheetId,
             col: zone.left,
@@ -244,6 +448,7 @@ export class ListPanelDisplay extends Component {
 ListPanelDisplay.template = "spreadsheet_oca.ListPanelDisplay";
 ListPanelDisplay.components = {
     DomainSelector,
+    ModelFieldSelector,
 };
 ListPanelDisplay.props = {
     listId: String,
@@ -260,6 +465,10 @@ export class ListPanel extends Component {
 }
 
 ListPanel.template = "spreadsheet_oca.ListPanel";
+ListPanel.props = {
+    listId: {type: String, optional: true},
+    "*": true,
+};
 ListPanel.components = {
     ListPanelDisplay,
 };
diff --git a/spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet.xml b/spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet.xml
index 96bea1a8..982aa3d9 100644
--- a/spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet.xml
+++ b/spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet.xml
@@ -66,6 +66,57 @@
         </div>
     </t>
 
+    <!-- Only rows and columns use the relational field selector: measures
+         keep the o-spreadsheet list (and its "Add calculated measure"). -->
+    <t
+        t-name="spreadsheet_oca.PivotLayoutConfigurator"
+        t-inherit="o-spreadsheet-PivotLayoutConfigurator"
+        t-inherit-mode="primary"
+    >
+        <xpath
+            expr="//AddDimensionButton[@onFieldPicked.bind='addColumnDimension']"
+            position="replace"
+        >
+            <RelationalAddDimensionButton
+                onFieldPicked.bind="addColumnDimension"
+                fields="props.unusedGroupableFields"
+            />
+        </xpath>
+        <xpath
+            expr="//AddDimensionButton[@onFieldPicked.bind='addRowDimension']"
+            position="replace"
+        >
+            <RelationalAddDimensionButton
+                onFieldPicked.bind="addRowDimension"
+                fields="props.unusedGroupableFields"
+            />
+        </xpath>
+    </t>
+
+    <t t-name="spreadsheet_oca.RelationalAddDimensionButton" owl="1">
+        <button
+            class="add-dimension o-button"
+            t-on-click="togglePopover"
+            t-ref="button"
+        >Add</button>
+        <Popover
+            t-if="popover.isOpen"
+            t-props="popoverProps"
+            class="'o_spreadsheet_oca_add_dimension_popover'"
+        >
+            <PivotFieldSelectorPopover
+                resModel="resModel"
+                path="''"
+                showSearchInput="true"
+                isDebugMode="!!env.debug"
+                filter.bind="filterField"
+                update.bind="onPathSelected"
+                close.bind="closePopover"
+            />
+            <t t-slot="default" />
+        </Popover>
+    </t>
+
     <t t-name="spreadsheet_oca.ListPanel" owl="1">
         <t t-if="listId">
             <ListPanelDisplay listId="listId" listDefinition="listDefinition" />
@@ -97,6 +148,71 @@
                     Edit domain
                 </div>
             </div>
+            <div
+                class="o_spreadsheet_oca_datasource_panel_field o_spreadsheet_oca_list_columns"
+            >
+                <div
+                    class="o_spreadsheet_oca_datasource_panel_field_title"
+                >Columns</div>
+                <div
+                    t-foreach="columns"
+                    t-as="column"
+                    t-key="column.path"
+                    class="o_spreadsheet_oca_list_column d-flex align-items-center gap-1"
+                >
+                    <span
+                        class="flex-grow-1 text-truncate"
+                        t-att-class="{'text-danger': column.isInvalid}"
+                        t-att-title="column.path"
+                        t-esc="column.label"
+                    />
+                    <button
+                        class="btn btn-link btn-sm p-0 o_spreadsheet_oca_list_column_up"
+                        title="Move up"
+                        t-att-disabled="column_first"
+                        t-on-click="() => this.moveColumn(column_index, -1)"
+                    >
+                        <i class="fa fa-arrow-up" />
+                    </button>
+                    <button
+                        class="btn btn-link btn-sm p-0 o_spreadsheet_oca_list_column_down"
+                        title="Move down"
+                        t-att-disabled="column_last"
+                        t-on-click="() => this.moveColumn(column_index, 1)"
+                    >
+                        <i class="fa fa-arrow-down" />
+                    </button>
+                    <button
+                        class="btn btn-link btn-sm p-0 text-danger o_spreadsheet_oca_list_column_remove"
+                        title="Remove column"
+                        t-on-click="() => this.removeColumn(column_index)"
+                    >
+                        <i class="fa fa-trash" />
+                    </button>
+                </div>
+                <div class="d-flex align-items-center gap-1 mt-2">
+                    <div class="flex-grow-1 o_spreadsheet_oca_list_column_selector">
+                        <ModelFieldSelector
+                            path="state.newColumnPath"
+                            resModel="props.listDefinition.model"
+                            readonly="false"
+                            allowEmpty="true"
+                            followRelations="true"
+                            isDebugMode="!!env.debug"
+                            update="(path) => this.onNewColumnPathUpdate(path)"
+                            filter.bind="filterColumnField"
+                        />
+                    </div>
+                    <button
+                        class="btn btn-secondary btn-sm o_spreadsheet_oca_list_column_add"
+                        t-att-disabled="!state.newColumnPath"
+                        t-on-click="addColumn"
+                    >Add</button>
+                </div>
+                <div class="o_spreadsheet_oca_pivot_panel_info mt-1">
+                    Re-insert the list to apply column changes to the sheet.
+                </div>
+            </div>
             <div class="o_spreadsheet_oca_datasource_panel_field o-sidePanelButtons">
                 <button
                     t-on-click="insertList"
diff --git a/spreadsheet_oca/static/src/spreadsheet/spreadsheet.scss b/spreadsheet_oca/static/src/spreadsheet/spreadsheet.scss
index aae0756b..b204348c 100644
--- a/spreadsheet_oca/static/src/spreadsheet/spreadsheet.scss
+++ b/spreadsheet_oca/static/src/spreadsheet/spreadsheet.scss
@@ -63,3 +63,9 @@
         }
     }
 }
+
+// o-spreadsheet's .o-popover has no background: give the field selector
+// the same one it gets inside Odoo's own popovers.
+.o_spreadsheet_oca_add_dimension_popover {
+    background-color: $popover-bg;
+}
diff --git a/spreadsheet_oca/static/tests/list_panel_columns.test.js b/spreadsheet_oca/static/tests/list_panel_columns.test.js
new file mode 100644
index 00000000..1779c2a8
--- /dev/null
+++ b/spreadsheet_oca/static/tests/list_panel_columns.test.js
@@ -0,0 +1,108 @@
+import {Component, onWillUnmount, xml} from "@odoo/owl";
+import {contains, mountWithCleanup} from "@web/../tests/web_test_helpers";
+import {describe, expect, test} from "@odoo/hoot";
+import {getCellFormula, getCellValue} from "@spreadsheet/../tests/helpers/getters";
+import {ListPanel} from "@spreadsheet_oca/spreadsheet/bundle/filter_panel_datasources.esm";
+import {animationFrame} from "@odoo/hoot-mock";
+import {createSpreadsheetWithList} from "@spreadsheet/../tests/helpers/list";
+import {defineSpreadsheetModels} from "@spreadsheet/../tests/helpers/data";
+import {waitForDataLoaded} from "@spreadsheet/helpers/model";
+
+describe.current.tags("desktop");
+defineSpreadsheetModels();
+
+/**
+ * O-spreadsheet re-renders its side panels on every model update; do the same
+ * here since the panel is mounted outside of the spreadsheet component.
+ */
+class Parent extends Component {
+    static template = xml`<ListPanel listId="props.listId"/>`;
+    static components = {ListPanel};
+    static props = {listId: String};
+    setup() {
+        const model = this.env.model;
+        model.on("update", this, () => this.render(true));
+        onWillUnmount(() => model.off("update", this));
+    }
+}
+
+async function mountListPanel(columns = ["foo", "product_id"]) {
+    const {model, env} = await createSpreadsheetWithList({columns, linesNumber: 2});
+    const listId = model.getters.getListIds()[0];
+    await mountWithCleanup(Parent, {
+        env,
+        componentEnv: {
+            model,
+            openSidePanel: () => true,
+            askConfirmation: (message, callback) => callback(),
+        },
+        props: {listId},
+    });
+    return {model, listId};
+}
+
+function getColumns(model, listId) {
+    return model.getters.getListDefinition(listId).columns;
+}
+
+async function addColumnFromSelector(fieldName, subFieldName) {
+    await contains(
+        ".o_spreadsheet_oca_list_column_selector .o_model_field_selector"
+    ).click();
+    await contains(
+        `.o_model_field_selector_popover_item[data-name='${fieldName}'] .o_model_field_selector_popover_relation_icon`
+    ).click();
+    await contains(
+        `.o_model_field_selector_popover_item[data-name='${subFieldName}'] .o_model_field_selector_popover_item_name`
+    ).click();
+    await contains(".o_spreadsheet_oca_list_column_add").click();
+}
+
+test("shows the current columns with their labels", async () => {
+    await mountListPanel();
+    expect(".o_spreadsheet_oca_list_column span").toHaveCount(2);
+    expect(".o_spreadsheet_oca_list_column span:first").toHaveText("Foo");
+    expect(".o_spreadsheet_oca_list_column span:last").toHaveText("Product");
+});
+
+test("can add a related field as a column", async () => {
+    const {model, listId} = await mountListPanel();
+    await addColumnFromSelector("product_id", "name");
+    expect(getColumns(model, listId)).toEqual(["foo", "product_id", "product_id.name"]);
+    await animationFrame();
+    expect(".o_spreadsheet_oca_list_column span:last").toHaveText(
+        "Product > Product Name"
+    );
+});
+
+test("does not add the same column twice", async () => {
+    const {model, listId} = await mountListPanel(["foo"]);
+    await addColumnFromSelector("product_id", "name");
+    await addColumnFromSelector("product_id", "name");
+    expect(getColumns(model, listId)).toEqual(["foo", "product_id.name"]);
+});
+
+test("can remove and reorder columns", async () => {
+    const {model, listId} = await mountListPanel(["foo", "bar", "product_id"]);
+    await contains(
+        ".o_spreadsheet_oca_list_column:last .o_spreadsheet_oca_list_column_up"
+    ).click();
+    expect(getColumns(model, listId)).toEqual(["foo", "product_id", "bar"]);
+    await contains(
+        ".o_spreadsheet_oca_list_column:first .o_spreadsheet_oca_list_column_remove"
+    ).click();
+    expect(getColumns(model, listId)).toEqual(["product_id", "bar"]);
+});
+
+test("re-inserting the list writes the related column", async () => {
+    const {model} = await mountListPanel(["foo"]);
+    await addColumnFromSelector("product_id", "name");
+    await contains(".o-sidePanelButtons .btn-success").click();
+    expect(getCellFormula(model, "B1")).toBe(
+        '=ODOO.LIST.HEADER(1,"product_id.name","Product > Product Name")'
+    );
+    expect(getCellFormula(model, "B2")).toBe('=ODOO.LIST(1,1,"product_id.name")');
+    await waitForDataLoaded(model);
+    expect(getCellValue(model, "B1")).toBe("Product > Product Name");
+    expect(getCellValue(model, "B2")).toBe("xphone");
+});
diff --git a/spreadsheet_oca/static/tests/pivot_relational_dimension.test.js b/spreadsheet_oca/static/tests/pivot_relational_dimension.test.js
new file mode 100644
index 00000000..b5aa0c8a
--- /dev/null
+++ b/spreadsheet_oca/static/tests/pivot_relational_dimension.test.js
@@ -0,0 +1,84 @@
+import {Component, xml} from "@odoo/owl";
+import {contains, mountWithCleanup} from "@web/../tests/web_test_helpers";
+import {describe, expect, test} from "@odoo/hoot";
+import {Spreadsheet} from "@odoo/o-spreadsheet";
+import {animationFrame} from "@odoo/hoot-mock";
+import {createSpreadsheetWithPivot} from "@spreadsheet/../tests/helpers/pivot";
+import {defineSpreadsheetModels} from "@spreadsheet/../tests/helpers/data";
+import {waitForDataLoaded} from "@spreadsheet/helpers/model";
+
+describe.current.tags("desktop");
+defineSpreadsheetModels();
+
+class Parent extends Component {
+    static template = xml`<Spreadsheet model="props.model"/>`;
+    static components = {Spreadsheet};
+    static props = {model: Object};
+}
+
+const ITEM = ".o_model_field_selector_popover_item";
+
+async function openPivotPanel() {
+    const {model, env, pivotId} = await createSpreadsheetWithPivot();
+    await mountWithCleanup(Parent, {
+        env,
+        props: {model},
+        noMainContainer: true,
+    });
+    await animationFrame();
+    await contains(".o-topbar-menu[data-id='data']").click();
+    await contains(".o-menu-item[data-name='item_pivot_1']").click();
+    return {model, pivotId};
+}
+
+async function addTemplateColumn() {
+    await contains(".o-spreadsheet .add-dimension").click();
+    await contains(
+        `${ITEM}[data-name='product_id'] .o_model_field_selector_popover_relation_icon`
+    ).click();
+    await contains(
+        `${ITEM}[data-name='template_id'] .o_model_field_selector_popover_item_name`
+    ).click();
+}
+
+function getColumnFieldNames(model, pivotId) {
+    return model.getters
+        .getPivotCoreDefinition(pivotId)
+        .columns.map((col) => col.fieldName);
+}
+
+test("pivot 'Add' only allows following many2one relations", async () => {
+    await openPivotPanel();
+    await contains(".o-spreadsheet .add-dimension").click();
+    expect(
+        `${ITEM}[data-name='product_id'] .o_model_field_selector_popover_relation_icon`
+    ).toHaveCount(1);
+    expect(`${ITEM}[data-name='tag_ids']`).toHaveCount(1);
+    expect(
+        `${ITEM}[data-name='tag_ids'] .o_model_field_selector_popover_relation_icon`
+    ).toHaveCount(0);
+});
+
+test("can add a related field as pivot column", async () => {
+    const {model, pivotId} = await openPivotPanel();
+    await addTemplateColumn();
+    expect(getColumnFieldNames(model, pivotId)).toEqual([
+        "foo",
+        "product_id.template_id",
+    ]);
+    await waitForDataLoaded(model);
+    await animationFrame();
+    expect(
+        ".o-spreadsheet .pivot-dimension:contains('Product > Template')"
+    ).toHaveCount(1);
+});
+
+test("an already used dimension is not added twice", async () => {
+    const {model, pivotId} = await openPivotPanel();
+    await addTemplateColumn();
+    await addTemplateColumn();
+    expect(getColumnFieldNames(model, pivotId)).toEqual([
+        "foo",
+        "product_id.template_id",
+    ]);
+});