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.
npm install -g @angular/cli
npm install @swimlane/ngx-datatable
[!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 {
}
- 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"
]
}
<ngx-table-nested
[theme]="lightTheme"
[dataTable]="data"
[columns]="columnConfig"
[childrenKey]="'ingredients'"
[childrenColumns]="childrenColumnConfig"
[actionConfig]="actionConfig"
/>
- 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
)
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 |
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 |
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 |
Output |
Default |
Type |
Description |
onRowClick |
|
EventEmitter<TableEventRowClick> |
Callback to invoke when row is clicked on |
enum ContentTypeColumnEnum {
'icon' = 'icon',
'tag' = 'tag',
'text' = 'text',
'image' = 'image'
}
enum ActionTypeEnum {
update = 'update',
delete = 'delete',
create = 'create',
positive = 'positive',
negative = 'negative',
}
enum TableThemeEnum {
'light' = 'light',
'dark' = 'dark'
}
properties |
Default |
Type |
Description |
type |
update |
ActionTypeEnum |
Type defining the action |
row |
any |
T |
Generic type received by the interface |
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 |
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 |
properties |
Default |
Type |
Description |
data |
[] |
TableActionColumnModel[] |
list of actions |
header |
Acciones |
string |
text in header column |
properties |
Default |
Type |
Description |
empty |
undefined |
string |
is displayed when there is no data |
error |
undefined |
string |
is displayed when an error has occurred |
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 |
properties |
Default |
Type |
Description |
field |
undefined |
string |
|
columns |
[] |
TableColumnModel[] |
|
extra |
undefined |
TableExtraConfigModel |
|
limit |
5 |
number |
|
properties |
Default |
Type |
Description |
data |
children |
T |
|
columns |
[] |
TableColumnModel[] |
|
extra |
undefined |
TableExtraConfigModel |
|
children |
5 |
TableChildrenConfigModel |
|
Generate installer file (.tgz) locally
-
Install dependency locally
ng build ngx-table-nested
npm pack ngx-table-nested