ngx-lighttable

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).

Features

• 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

TODO

• Responsive support
  • Showing/hiding unecessary content
• Sorting multiple columns
• Single events for cell

Installation

All you need to do is to run the following command:

$ npm install ngx-lighttable --save

Usage

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>
    `
})

License

MIT © jcunhafonte

Built with ❤️ by jcunhafonte