Ngx Table Nested

Content

• Description
• Requirements
• Manage this Angular lib

📋 Description

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.

📋 Usage

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 {
}

Or you can import it in your AppComponent (for this example):

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 {
}

Table

TS

const data = [];
const columnConfig = [];
const childrenColumnConfig = [];
const actionConfig = [];
const lightTheme = TableNestedThemeEnum.light;

HTML

<ngx-table-nested *ngIf="data"
    [theme]="lightTheme"
    [dataTable]="data"
    [columns]="columnConfig"
    [childrenKey]="'ingredients'"
    [childrenColumns]="childrenColumnConfig"
    [actionConfig]="actionConfig"
/>

Feature

API

properties ables in Table-nested

Inputs

| 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 |

Interface

📖 Requirements

• Nodejs >= v18.x

brew install node 

• @angular/cli >= V13.2.x

npm install -g @angular/cli 

• @swimlane/ngx-data >= V20.xx

npm install @swimlane/ngx-datatable 

🚀 Building v0.6

Install dependencies

generate installer file (.tgz) locally

npm install 

Compile library

ng build ngx-table-nested 

Generate installer

npm pack ngx-table-nested