Docs / Angular child tables, expandable rows and tabs

Angular child tables, expandable rows and tabs

A row of lib-easy-table can expand to reveal a child table, or several child tables in tabs.

One child table

<lib-easy-table
  [config]="countryTable"
  [childConfig]="cityTable"
  (extendRow)="onExpand($event)"
  (childDialogResult)="onCityDialogResult($event)"
  (deleteChildItem)="onCityDelete($event)">
</lib-easy-table>

Set isExpanded: true on the parent configuration to get the expand button. extendRow emits the row that was opened (or null when it is closed): load its children there and build a new configuration for the child table.

async onExpand(country: Country | null) {
  this.cities = country ? await firstValueFrom(this.api.getCities(country.id)) : [];
  this.cityTable = cityTable({ data: this.cities, title: 'Cities' }); // a new configuration refreshes the child table
}

Child tables in tabs

Pass an array to childConfig. Each configuration becomes a tab labelled by tabTitle (translated) with an optional tabIcon.

this.tabs = [
  new EasyTableConfig({ tabTitle: 'TABS.ALL', tabIcon: 'location_city', data: all, displayedColumns: columns }),
  new EasyTableConfig({ tabTitle: 'TABS.TOP', tabIcon: 'trending_up', data: top, displayedColumns: columns })
];

childTabChange tells you which tab is active, so one dialog handler can route results to the right service. childConfig accepts configurations of any row type.

Open the live demo or read the source on GitHub.