ngx-lighttable
is an Angular component built with TypeScript, CSS3, HTML5 and Angular >= 4. It is an Angular component for presenting complex data in a light package with no external dependencies. The table just consume your data and doesn't make any assumptions about your datastructure or how you handle it (filtering, sorting or pagination).
- Handle large data sets (Virtual DOM)
- Expressive header with sorting
- Unordered cells
- Easy configuration and manipulation
- HTML templating for cells
- Light codebase / No external dependencies
- Easy selectors for testing purposes
- AoT compilation support
- Responsive support
- Showing/hiding unecessary content
- Sorting multiple columns
- Single events for cell
All you need to do is to run the following command:
$ npm install ngx-lighttable --save
Import ngx-lighttable directives into your component:
import {NgModule} from '@angular/core';
...
import {NgXLightTableModule} from 'ngx-lighttable';
Register it by adding to the list of directives of your module:
@NgModule({
imports: [
...
NgXLightTableModule
],
...
})
export class AppModule {
}
Configure the table and add it into the template by registering settings property.
import {NgXLightTableSettings} from 'ngx-lighttable/types/ngx-lighttable-settings.type';
import {NgXLightTableSortableDirectionEnum} from 'ngx-lighttable';
settings: NgXLightTableSettings = { // exported type
headers:
[
{
title: '#',
field: 'tag',
sortable: {
enabled: false,
direction: NgXLightTableSortableDirectionEnum.neutral // exported enum
}
},
{
title: 'Name',
field: 'name',
sortable: {
enabled: true,
direction: NgXLightTableSortableDirectionEnum.asc
}
},
{
title: 'Position',
field: 'position',
sortable: {
enabled: true,
direction: NgXLightTableSortableDirectionEnum.neutral
}
},
{
title: 'Since',
field: 'since',
sortable: {
enabled: false,
direction: NgXLightTableSortableDirectionEnum.neutral
}
},
{
title: 'Salary',
field: 'salary',
sortable: {
enabled: false,
direction: NgXLightTableSortableDirectionEnum.neutral
}
},
{
title: 'Actions',
field: 'actions',
sortable: {
enabled: true,
direction: NgXLightTableSortableDirectionEnum.neutral
}
}
],
messages: {
empty: 'No records found', // Optional
loading: 'Loading records...' // Optional
},
allowMultipleSort: false, // Optional
allowNeutralSort: true // Optional
};
Add ngx-lighttable component inside to the template:
// ...
@Component({
template: `<ngx-lighttable [settings]="settings"></ngx-lighttable>`
})
// ...
Now you need records in your table. Create an array property with a list of objects in the component.
records: any[] = [
{
tag: 1,
name: 'Paul',
position: 'iOS Developer',
since: 2011,
salary: '405k',
actions: 'Delete'
},
{
tag: 2,
name: 'John',
position: 'DevOps',
since: 2006,
salary: '205k',
actions: 'Delete'
},
{
tag: 3,
name: 'Mike',
position: 'Android Developer',
since: 2014,
salary: '305k',
actions: 'Delete'
},
{
tag: 4,
name: 'Andrew',
position: 'Android Developer',
since: 2011,
salary: '105k',
actions: 'Delete'
},
{
tag: 5,
name: 'Doe',
position: 'Backend Developer',
since: 2009,
salary: '505k',
actions: 'Delete'
},
{
tag: 6,
name: 'Alice',
position: 'UX/UI Designer',
since: 2012,
salary: '370k',
actions: 'Delete'
},
{
tag: 7,
name: 'Dickens',
position: 'Communication',
since: 2008,
salary: '205k',
actions: 'Delete'
},
{
tag: 8,
name: 'Dani',
position: 'Full-stack Developer',
since: 2013,
salary: '605k',
actions: 'Delete'
}
];
Add it to your table component as records and configure every cell. Note that some of them are templates. You can have have how many templates as you wish.
...
@Component({
template: `
<ngx-lighttable [settings]="settings" [records]="records">
<ngx-lighttable-cell [field]="'tag'"></ngx-lighttable-cell>
<ngx-lighttable-cell [field]="'name'"></ngx-lighttable-cell>
<ngx-lighttable-cell [field]="'position'"></ngx-lighttable-cell>
<ngx-lighttable-cell [field]="'since'"></ngx-lighttable-cell>
<ngx-lighttable-cell [field]="'salary'">
<ng-template let-salary>
<strong>{{salary}}</strong>
</ng-template>
</ngx-lighttable-cell>
<ngx-lighttable-cell [field]="'actions'">
<ng-template let-actions>
<button>{{actions}}</button>
</ng-template>
</ngx-lighttable-cell>
</ngx-lighttable>
`
})
...
Now you have some data in the table.
The events available with this component are:
- onSort
- onClickRow
- onClickCell
Add them as outputs to listen the events.
@Component({
template: `
<ngx-lighttable
[settings]="settings"
[records]="records"
(onSort)="onSortTable($event)"
(onClickRow)="...($event)"
(onClickCell)="...($event)">
...
</ngx-lighttable>
`
})
MIT © jcunhafonte
Built with ❤️ by jcunhafonte