node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

@neoprospecta/angular-data-box

Neoprospecta DataBox

Data table with REST implementation.

Parameters

Attribute Type Default function
title string undefined The table title
title-size number undefined The size of the table title h1, h2, h3, h4, h5, h6 or p
columns DataBoxColumn[] [ ] Columns list configuration. See the Columns section.
actions any [ ] Actions to be used in each row. See the Actions section.
data any [ ] The data to be shown in the table. Can be an array of objects or a REST Api address as: myapi.com/articles
stripped boolean true Stripped table
condensed boolean false Turn the lines compact
hover boolean true Hover the line when the mouse is over
searchable boolean true Defines if the table should be searchable or not
selectable boolean true Defines if the rows should be selectable or not
model any undefined The models to be used to add new items
max-rows number undefined The max number of rows in a page. If not defined, pagination wont be done
tips boolean true Defines if the tips button and div should be included
counter boolean true Defines if the counter should be included
auto-save boolean false Defines if the changes should be automaticaly saved
http-service any undefined The service used to send and get data from backend
track-by string index Defines the field to be used in track by function in for loop
insert boolean | Function false Defines if the insert button should be displayed or not. It receives a boolean or a function that returns an Observable.
insert-position string 'start' Defines where a new item should be placed. Options are 'start' | 'end'

Events

Event function
change Event fired when some data change inside the table

Usage

Load the DataBox Module in your module

import { DataBoxModule } from '@neoprospecta/angular-data-box';
...
@NgModule({
  imports: [
    ...
    DataBoxModule,
    ...
  ]
  ...
})
...

Configure the columns of your DataBox in the component that uses it

The column object have many parameters to be configured:

Parameter type Default function
attr string | Function undefined Object attribute to be shown in the column
arrayAttr string | Function undefined Used to define the label of items in a given array.
header string undefined The header of the column
options Array<{id: string, label: string}> [] The options to be used in columns of type 'option'
sort boolean = true undefined If should sort the column
search boolean = true undefined If should include the the column in the search
align string 'left' Where the content should be aligned. Options are: 'left' | 'center' | 'right'
fitText boolean = false undefined If true, the width of the table will be equal que text contained in it
tooltip string undefined Text to be shown when the mouse is over the header
maxLength number undefined Max length of the content in the cell. The rest is shown by a tooltip
editable boolean = false undefined Allow object edition directly in the table
selectable boolean = false undefined Allow object edition directly in the table
type string 'text' The type pf the data that will be displayed. Options are: 'text' | 'number' | 'date' | 'date-time' | 'boolean' | 'array' | 'currency' | 'option' | 'text-icon'
actions array [] Used when type column is 'actions'.
dateFormat string undefined In case of date or date-time tipe, the format should be passed
currencyLocation string 'USD' Used to set the currency location. Some other options 'EUR', 'BRL'...
max number undefined Defines the maximum number value of a number type input
min number undefined Defines the minimum number value of a number type input
fontIcon string | Function undefined Defines the icon used when column is 'text-icon'
colorIcon string | Function 'black' Defines the color of icon when column is 'text-icon'

app.component.ts

// Import the colum model
import { DataBoxColumn } from '@neoprospecta/angular-data-box';
...
export class AppListComponent {
...
    columns = [
        new DataBoxColumn({header: 'Code', attr: 'id', sort: true, align: 'left', tooltip: 'Person code'}),
        new DataBoxColumn({header: 'Name', attr: 'name', sort: true, align: 'left', tooltip: 'Person name'}),
        new DataBoxColumn({header: 'More than 18?', attr: (app) => app.age >= 18 ? true : false, type: 'boolean', editable: true, sort: true, align: 'left', tooltip: 'Detects if person have more than 18 years'}),
    ];
...
}

Configure the actions of your DataBox in the component that uses it (FIXED COLUMN AT THE END)

The action object have 4 parameters to be configured:

Parameter Type Default function
title string undefined Defines the title of the action
action string | function undefined Can be a string that triggers a built-in action like 'delete' or 'add' or a custom function that receives the object as parameter
icon string undefined The icon to be used. Ex: fa-trash
color string undefined The color of the icon. Oprions are primary | accent | warn
hide boolean | function false Defines if action should be hide or not

app.component.ts

 
export class AppComponent {
...
    gotoDetail = () => {
        ...
    }
 
    actions = [
        {title: 'Excluir oportunidade', action: 'delete', icon: 'fa-trash', color: 'warn'},
        {title: 'Abrir', action: this.gotoDetail, icon: 'fa-external-link', color: 'primary'},
    ]
...
Built-in actions
  • delete: removes a reccord from the table
  • add: create a new reccord and add it in the table
New feature: Create a custom actions column

The action object have 5 parameters to be configured:

Parameter Type Default function
title string undefined Defines the title of the action
action string | function undefined Can be a string 'menu' that built a menu or a custom function that receives the object as parameter
options array [] Defines an array of object functions to show inside of menu
icon string undefined The icon to be used. Ex: fa-trash
color string undefined The color of the icon. Oprions are primary | accent | warn

app.component.ts

 
functionMenuOption1 = (obj) => {
    console.log('Teste para abrir functionMenuOption1.');
}
 
functionMenuOption2 = (obj) => {
    console.log('Teste para abrir functionMenuOption2.');
}
 
export class AppComponent {
...
 
    actionsColumn = [
        { title: 'Teste menu', action: 'menu', options: [{name: 'option 1', function: this.functionMenuOption1}, {name: 'option 2', function: this.functionMenuOption2}],  color: 'primary' },
        { title: 'Abrir notificações', action: this.openNotifications,  color: 'primary' },
        { title: 'Abrir mensagens', action: this.openMessages, icon: 'fa-comments', color: 'primary' }
    ];
 
...
 
    columns = [
        new DataBoxColumn({ header: 'Notificações', type: 'actions', actions: this.actionsColumn, align: 'left', tooltip: 'Notificações, alertas, mensagens, etc' }),
        ...
    ];
...

Place the DataBox in your component HTML

app.component.html

<data-box
    [columns]="columns"
    [actions]="actions"
    [http-service]="myService" // REST OPERATIONSSee Add data to your DataBox section
    [data]="myList" // LOCAL DATA - NO HTTP CALLSSee Add data to your DataBox section
    track-by="id"
></data-box>

Add data to your DataBox

You have two ways of adding data to your DataBox. The options are local and remote.

1 - To load LOCAL DATA, use the [data] attribute in your html component tag and pass an array of objects that shuold be displayed in the table.

app.component.ts

export class AppListComponent {
 
    ...
    myList = [
        {id: 1, name: 'Andreas', age: 32},
        {id: 2, label: 'Helio', age: 19},
        {id: 4, label: 'Maria', age: 14},
        {id: 5, label: 'Karl', age: 24},
    ]
    ...
 

app.component.html

<data-box
    ...
    [data]="myList"
    ...
></data-box>

2 - To load REMOTE DATA, use the [http-service] attribute in your html component tag and pass a service that must have the crud operations (filter, get, save, delete) implemented so the DataBox component can interate with each reccord in the table using this service that you have total control and can make any custom configuration.

app.service.ts

export class myService {
    ...
    app: BehaviorSubject<Array<App>>;
 
    filter = (filter: URLSearchParams) => {
        this.http.get('app endpoint', filter).then(app => this.app.next(app));
        return this.app;
    }
 
    delete(app: App) {
        return this.http.delete('app endpoint', app);
    }
 
    save(app: App): Promise<App>  {
        return this.http.post('app endpoint', app);
    }
}
 

app.component.html

<data-box
    ...
    [http-service]="myService"
    ...
></data-box>

Todo

  • Remove edit from table and place it inside a modal to remove unnecessary watchers and a bunch of input components.