The ngx-table-nested library provides a powerful nested table built on top of @swimlane/ngx-datatable with the ability to collapse rows to display a second table with a different column configuration than the parent. It allows you to create flexible and organised user interfaces to display hierarchical and structured data.
Once you have installed ngx-table-nested, you can import it in your AppModule:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxDatatableModule} from '@swimlane/ngx-datatable';
import {AppComponent} from './app.component';
// Import your TableNestedComponent
import {TableNestedComponent} from 'ngx-table-nested';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Specify TableNestedComponent as an import
TableNestedComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import {Component, inject} from '@angular/core';
import {NgxDatatableModule} from '@swimlane/ngx-datatable';
import {TableNestedComponent} from '@ngx-table-nested';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [TableNestedComponent],
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}const data = [];
const columnConfig = [];
const childrenColumnConfig = [];
const actionConfig = [];
const lightTheme = TableNestedThemeEnum.light;<ngx-table-nested *ngIf="data"
[theme]="lightTheme"
[dataTable]="data"
[columns]="columnConfig"
[childrenKey]="'ingredients'"
[childrenColumns]="childrenColumnConfig"
[actionConfig]="actionConfig"
/>
properties ables in Table-nested
| Input | Default | Type | Description |
|---|---|---|---|
| dataTable | Empty | T | Generic type recived from the component |
| columns | Content Cell | Content Cell | List of columns to show in table |
| limit | 10 | Content Cell | Number of rows of show in the table |
| childrenColumns | Empty | Content Cell | List of columns to show in childtable |
| childrenLimit | 3 | Content Cell | Number of rows of show in the childrentable |
| childrenKey | Empty | Content Cell | |
| actionConfig | Empty | Content Cell | |
| theme | light | Content Cell | Theme of the aplication |
brew install node npm install -g @angular/cli npm install @swimlane/ngx-datatable generate installer file (.tgz) locally
npm install ng build ngx-table-nested npm pack ngx-table-nested