Skip to main content

Relation Table Tabs

Resource detail pages can show relation fields as table tabs below the main detail card.

Use relation table tabs when the related records are important enough to browse, attach or manage from the parent detail page.

Field Requirement​

Relation table tabs come from fields that implement FieldWithTable and are configured to display as a table.

BelongsToManyField::make('users', __('common.users'))
    ->setRelatedResource(qore()->getResourceOrFail('users'))
    ->setIsDisplayedAsTable();

The exact relation field methods depend on the relation type, but the detail page logic is the same: fields shown as tables are removed from the normal detail table and added as tabs.

How The Detail Page Builds Tabs​

ResourceHasDetailPage::addRelationTables() loops over getFieldsForDetail($model). For each table field it adds a TabItem with:

  • the field label as the tab label;
  • a SubNode pointing to getFieldTableEndpoint($model->getKey(), $field->name);
  • the relation count from getTableCount($model).

That means relation tables load independently from the parent detail page.

Why SubNodes Are Used​

Relation tables can have their own pagination, sorting, filtering, attach forms and reloads. Loading them as SubNodes keeps that state separate from the parent detail page and avoids rebuilding the entire page for every table interaction.

Custom Detail Layouts​

If you override detailLayout(), relation table tabs are still added after your detail layout by the default detail page response.

public function detailLayout(Model $model): Node
{
    return (new CardNode(__('common.overview')))
        ->addChild(new TextNode($this->modelTitle($model)));
}

Only override getDetailPageResponse() when you need to replace the whole detail-page shell, including breadcrumbs, actions, alerts and relation tabs.

Attach Workflows​

Relation fields with table support can use resource endpoints for attach forms:

resources/{resourceName}/{modelId}/attach-form/{fieldName}/{relatedResourceName}
resources/{resourceName}/{modelId}/attach/{fieldName}/{relatedResourceName}

The attach form is another backend FormNode, so it can use resource fields, validation and form success reloads.

When Not To Use A Table Tab​

Keep a relation field in the normal detail card when it is small and mostly descriptive, such as an owner, category or status relation.

Use a tab when the relation is a list the user will scan, filter or manage.