Ngx Table Nested

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