Skip to content

The Admin Dashboard does not allow adding new columns to an existing data table even when using the Dashboard Extension API to extend the list query and define display components. #4642

@dmilanaraujo

Description

@dmilanaraujo

Describe the bug
The Admin Dashboard does not allow adding new columns to an existing data table even when using the Dashboard Extension API to extend the list query and define display components.

After adding customFields to an entity and extending the dashboard using defineDashboardExtension, the custom field data is successfully fetched, but the new columns are not rendered in the existing table.

To Reproduce
Steps to reproduce the behavior:

  1. Add customFields to an entity (in this case StockLocation).
  2. Create a Dashboard extension plugin to extend the table query and define display components.
  3. Restart the server and rebuild the Admin Dashboard.
  4. Open Admin → Stock Locations.
  5. Observe that the custom columns do not appear in the table.

Expected behavior
When using the Dashboard Extension API:

  • extendListDocument should extend the GraphQL query.
  • displayComponents should allow rendering new columns in the existing table.

The custom fields should appear as new columns in the list view.

Actual behavior
Even though the query is extended and the plugin loads correctly, the table does not render the new columns.

Error logs
If applicable, paste any relevant error messages or stack traces:

No errors are shown in console or server logs.
The extension loads, but the columns are not displayed.

Environment (please complete the following information):

  • @vendure/core version: 3.6.1
  • Nodejs version: 22
  • Database: postgres
  • Operating System: Windows
  • Browser: Chrome
  • Package manager: npm and pnpm

Configuration
Vendure Dashboard extension plugin used to add the custom columns:

defineDashboardExtension({
    dataTables: [{
        pageId: 'stock-location-list',
        blockId: 'list-table',
        extendListDocument: `
           query {
               stockLocations {
                 items {
                   customFields {
                     zipcode
                     latitude
                     longitude
                   }
                 }
               }
           }
       `,

        displayComponents: [
            {
                column: 'customFields.zipcode',
                component: ({ value, cell, row, table }) => {
                    if (!value) {
                        return <span className="text-muted-foreground text-sm"></span>;
                    }
                    return (
                        <Badge variant="outline" className="font-mono text-xs">
                            📍 {value}
                        </Badge>
                    );
                },
            },
            {
                column: 'zipcode',
                component: ({ value, cell, row, table }) => {
                    if (!value) {
                        return <span className="text-muted-foreground text-sm"></span>;
                    }
                    return (
                        <Badge variant="outline" className="font-mono text-xs">
                            📍 {value}
                        </Badge>
                    );
                },
            }
        ],
    }]
});

Minimal reproduction

  1. Add custom fields to StockLocation (zipcode, latitude, longitude).
  2. Extend the dashboard using defineDashboardExtension.
  3. Extend the list query using extendListDocument.
  4. Add display components for the custom field columns.
  5. Open the Stock Locations list → columns are not shown.

Workaround
Currently the only workaround is building a fully custom list view instead of extending the existing one.

Additional context

  • Custom fields work correctly in database and GraphQL.
  • The Dashboard extension loads correctly.
  • The issue seems specific to adding new columns to an existing table block.
  • Happens consistently.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions