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

| Input | Default | Type | Description | |-----------|-----------|--------------------|-------------------------------------| | dataTable | undefined | TableConfigModel | Configuration data for the table | | limit | 5 | number | Number of rows of show in the table | | theme | light | TableThemeEnum | Theme of the table |

• Outputs

| Output | Default | Type | Description | |--------------------|---------|------------------------------------|---------------------------------------------------------------| | onRowClick | | EventEmitter<TableEventRowClick> | Callback to invoke when row is clicked on | | onRowClickChildren | | EventEmitter<TableEventRowClick> | Callback to invoke when the row of the child table is clicked |

TableBasicComponent

• Inputs

| Input | Default | Type | Description | |-----------|-----------|--------------------|-------------------------------------| | dataTable | undefined | TableConfigModel | Configuration data for the table | | limit | 5 | number | Number of rows of show in the table | | theme | light | TableThemeEnum | Theme of the table |

• Outputs

| Output | Default | Type | Description | |------------|---------|------------------------------------|-------------------------------------------| | onRowClick | | EventEmitter<TableEventRowClick> | Callback to invoke when row is clicked on |

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

| properties | Default | Type | Description | |------------|----------|------------------|----------------------------------------| | type | update | ActionTypeEnum | Type defining the action | | row | any | T | Generic type received by the interface |

• TableColumnModel

| properties | Default | Type | Description | |------------|-------------|-------------------------|---------------------------------| | field | undefined | string | property to display in the cell | | header | undefined | string | text in column header | | sort | false | boolean | enable sorting | | resize | false | boolean | enable resize | | grow | 1 | number | column width in fraction | | type | text | ContentTypeColumnEnum | column type |

• TableIconActionColumnModel

| properties | Default | Type | Description | |------------|-------------|----------|-------------| | icon | undefined | string | icon name | | class | undefined | string | icon class |

• TableActionColumnModel

| properties | Default | Type | Description | |------------|-------------|------------------------------|----------------------------------------| | label | undefined | string | text in button | | icon | undefined | TableIconActionColumnModel | icon in button | | type | update | ActionTypeEnum | type of action | | tooltip | undefined | string | tooltip to show | | click | undefined | Function | function that invokes after the click |

• TableActioneConfigModel

| properties | Default | Type | Description | |------------|------------|----------------------------|------------------------| | data | [] | TableActionColumnModel[] | list of actions | | header | Acciones | string | text in header column |

• TableMessageConfigModel

| properties | Default | Type | Description | |------------|-------------|----------|------------------------------------------| | empty | undefined | string | is displayed when there is no data | | error | undefined | string | is displayed when an error has occurred |

• TableExtraConfigModel

| properties | Default | Type | Description | |------------|-------------|----------------------------|---------------------| | actions | undefined | TableActioneConfigModel | actions config | | messages | undefined | TableMessageConfigModel | messages config | | config | undefined | TableCellViewConfigModel | column types config | | selection | undefined | SelectionType | section type | | sortType | single | SortType | sort type | | columnMode | flex | ColumnMode | column mode type |

• TableChildrenConfigModel

| properties | Default | Type | Description | |------------|-------------|-------------------------|-------------| | field | undefined | string | | | columns | [] | TableColumnModel[] | | | extra | undefined | TableExtraConfigModel | | | limit | 5 | number | |

• TableConfigModel

| properties | Default | Type | Description | |------------|-------------|----------------------------|-------------| | data | children | T | | | columns | [] | TableColumnModel[] | | | extra | undefined | TableExtraConfigModel | | | children | 5 | TableChildrenConfigModel | |

🚀 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