Skyfall-factory NPM

Ngx Table Nested

Content

📋 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