@gisgo/dynamic-table NPM

Gisgo Dynamic Table

Gisgo Dynamic Table is a JSON powered library based on Angular that make complex table simpler & maintainability to your application's tables.

Install

Run npm install @gisgo/dynamic-table

Import Module

After installing the library, go to the AppModule or sub-module and run import DynamicFormModule.forChild()

import {DynamicTableModule} from '@gisgo/dynamic-table';

@NgModule({
  declarations: [],
  imports: [
    DynamicTableModule.forChild({})
  ]
})
export class AppModule { }

Use Dynamic Table

To generate your table you need to define your table columns (fields) by creating table config:

tableConfig: DynamicTableConfig = {
  remotePaginator: false,
  fields: [
    {
      attribute: 'first_name',
      component: 'text',
      label: 'First name',
    },
    {
      attribute: 'last_name',
      component: 'text',
      label: 'Last name'
    },
    {
      attribute: 'company.name',
      component: 'text',
      label: 'Company'
    },
    {
      attribute: 'company.address',
      component: 'text',
      label: 'Address'
    }
  ]
};

Interfaces

DynamicTableConfig

Properties

Name	Mandatory	Default	Description
paginator: `boolean`	No	`true`	Enable paginator.
remotePaginator: `boolean`	No	`false`	Set paginator to be manged by external api.
selection: `boolean`	No	`false`	Enable row selection.
selectionColor: `ThemePalette`	No	`primary`	Selection color.
fields: `DynamicTableField[]`	Yes	`[]`	Columns Definition.
fields: `DynamicTableExpandField[]`	No	`[]`	Columns Definition for expandable row.

DynamicTableField

Properties

Name	Mandatory	Default	Description
attribute: `string`	Yes		Unique identifier inside table data row element (can be seperated by `.` to access sub-object)
component: `string`	Yes		Component reference to be loaded inside table cell.
label: `string`	Yes		Header title.
sortable: `boolean`	No	`false`	Define if the column is sortable.
textAlign: `string`	No	`'left'`	CSS text align.
headerClass: `string`	No	`''`	Column header css class.
class: `string`	No	`''`	Column css class.
custom: `{[type: string]: any}`	No	`null`

DynamicTableExpandField

Properties

Name	Mandatory	Default	Description
attribute: `string`	Yes		Unique identifier inside table data row element (can be seperated by `.` to access sub-object)
component: `string`	Yes		Component reference to be loaded inside table cell.
textAlign: `string`	No	`'left'`	CSS text align.
custom: `{[type: string]: any}`	No	`null`

And loading data to be showed in the table (the data can be loaded from api):

tableData: DynamicTableData = {
  data: [
    {
      first_name: 'Bilel',
      last_name: 'Dhaouadi',
      company: {
        name: 'Gisgo',
        address: 'State of web artisan'
      }
    },
    {
      first_name: 'John',
      last_name: 'Doe',
      company: {
        name: 'Gisgo',
        address: 'State of web artisan'
      }
    }
  ],
  meta: {
    current_page: 1,
    per_page: 10,
    size_options: [10, 20, 50],
    total: 2
  }
}

Interfaces

DynamicTableData

Properties

Name	Mandatory	Default	Description
data: `any[]`	No	`[]`	Set paginator to be manged by external api.
meta: `DynamicTableDataMeta`	Yes	`[]`	Columns Definition.

DynamicTableDataMeta

Properties

Name	Mandatory	Description
current_page: `number`	No	Current page.
per_page: `number`	Yes	Total record by page.
size_options: `number[]`	Yes	Size of page can be selected by the user.
total: `number`	Yes	Total count of all records.

in your component html file place gisgo-dynamic-table directive:

<gisgo-dynamic-table [config]="tableConfig"
                     [data]="tableData"
                     (action)="tableAction($event)"
                     (pageChange)="paginatorChange($event)"
                     (sortChange)="sortChange($event)"
                     (selectionChange)="selectionChange($event)">
</gisgo-dynamic-table>

Selectors

gisgo-dynamic-table

Properties

Name	Mandatory	Description
@Input() config: `DynamicTableConfig`	Yes	Table & columns defintion / config.
@Input() data: `DynamicTableData`	Yes	Table Data & paginiation.
@Output() action: `EventEmitter<DynamicTableAction>`	No	Emits row click event.
@Output() pageChange: `EventEmitter<PageEvent>`	No	Emits pagintation changes.
@Output() sortChange: `EventEmitter<Sort>`	No	Emits column sort changes.
@Output() selectionChange: `EventEmitter<SelectionChange<any>>`	No	Emits selection changes.

Interfaces

DynamicTableAction

Properties

Name	Description
event: `string`	Event type by default `row-click`
data: `any`	Row data.

Import Module with custom cell view / fields

import {DynamicTableModule} from '@gisgo/dynamic-table';

@NgModule({
  declarations: [],
  imports: [
    DynamicTableModule.forChild({
      'user': UserCellViewComponent,
      'priority': PriorityCellViewComponent,
      'actions': ActionsCellViewComponent
    })
  ]
})
export class AppModule { }

The custom cell view need to implement the CellView interface

import {CellView} from '@gisgo/dynamic-table';

@Component({
  selector: 'user-cell-view',
  templateUrl: './user-cell-view.component.html',
})
export class UserCellViewComponent implements CellView {
  public data: any;
  public row: any;
  public field: DynamicTableField;
}

Angular dynamic Table Material

tslib

@everything-registry/sub-chunk-363 @infinitebrahmanuniverse/nolb-_gis @zalastax/nolb-_gis

1 year ago

2 years ago

2 years ago

2 years ago