ngx-table-nested v0.0.1-demo-2

Description

The ngx-table-nested angular 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.

🌒 Content

• Requirements
• Usage
• API
• Building
• Stats

📖 Requirements

• Nodejs >= v18.x or

brew install node 

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

npm install -g @angular/cli 

• @swimlane/ngx-datatable >= V20.xx or

npm install @swimlane/ngx-datatable 

🪤 Usage

!IMPORTANT you need to have installed @swimlane/ngx-datatatable

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 {NgxDatatableModule} from '@swimlane/ngx-datatable';
// Import your TableNestedComponent
import {TableNestedComponent} from 'ngx-table-nested';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxDatatableModule,
    // 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';
import {NgxDatatableModule} from '@swimlane/ngx-datatable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [NgxDatatableModule, TableNestedComponent],
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
}

Configure styles

• Now, let's import lib styles, include default nested-table CSS file into your `angular.json file:

  {
    "styles": [
      "node_modules/@nebular/theme/styles/prebuilt/default.css"
    ]
}

In your html

• HTML

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

🛠 Features

• Use simplify
• Nested tables with different (or the same) column configurations
• Light/Dark theme support
• Client side render
• Standalone components standards
• Jasmine test on 83% coverage
• Column template support (images, tags, text, buttons, icons)

🌐 API

Components

TableNestedComponent

• Inputs

• Outputs

TableBasicComponent

• Inputs

• Outputs

Enums

• ContentTypeColumnEnum

enum ContentTypeColumnEnum {
  'icon' = 'icon',
  'tag' = 'tag',
  'text' = 'text',
  'image' = 'image'
}

• ActionTypeEnum

enum ActionTypeEnum {
  update = 'update',
  delete = 'delete',
  create = 'create',
  positive = 'positive',
  negative = 'negative',
}

• TableThemeEnum

enum TableThemeEnum {
  'light' = 'light',
  'dark' = 'dark'
}

Interface

• TableEventRowClick

• TableColumnModel

• TableIconActionColumnModel

• TableActionColumnModel

• TableActioneConfigModel

• TableMessageConfigModel

• TableExtraConfigModel

• TableChildrenConfigModel

• TableConfigModel

🚀 Building

Generate installer file (.tgz) locally

• Install dependency locally

npm install 

• Compile library

ng build ngx-table-nested 

• Generate installer

npm pack ngx-table-nested 

📈 Stats

Most Used Languages