Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ngx-smart-datatable with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxSmartDatatable = require("ngx-smart-datatable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-smart-datatable v1.1.2

A light weight Angular component used as a wrapper for DataTables.net, the smartest datatable.

Build Status Commitizen friendly semantic-release Renovate enabled

NgxSmartDatatable

A light weight Angular component used as a wrapper for DataTables.net, the smartest datatable in the world :fire:.

DataTables.net provides many extensions that you might or might not need for your datatable. Therefore, NgxSmartDatatable is lazily loaded meaning that only the extensions you need will be loaded once in the web page. This technique prevents any of the extension libraries from being bundled in your application.

Demo :movie_camera:

:arrow_down: Installation

npm install ngx-smart-datatable --save

Quick start :rocket:

<ngx-smart-datatable
     ...

    [settings]="settings">
</ngx-smart-datatable>

Zero configuration

...

columns: any = [
    {
        data: 'id',
        title: 'ID'
    },
    {
        data: 'firstName',
        title: 'First Name'
    },
    {
        data: 'lastName',
        title: 'Last Name'
    },
    {
        data: 'email',
        title: 'Email'
    }
];

data = [
    {
        id: 1,
        firstName: "Paul",
        lastName: "Young",
        email: "paul.young@gmail.com"
    },
    {
        id: 2,
        firstName: "John",
        lastName: "Doe",
        email: "john.doe@yahoo.com"
    },

    ...
]

settings = {
    columns: this.columns,
    data: this.data,
    ...

    // these are set to true by default
    paging: false,
    ordering: false,
    info: false,
    searching: false
}

:page_facing_up: NgxSmartDatatable API

AttributesDescription
[settings]The settings applied to the table, which include the columns and data properties (required)
(sortedOrder)A sort event fired when data order is changed (asc or desc). Note: ordering property must be set to true in settings
(selectedRows)A select event fired when a row is selected. Note: select property must be set to true in settings
(deselectedRows)A deselect event fired when a row is deselected
(reorderedRow)A row-reorder event fired when rows are reordered. Note: rowReorder property must be set to true in settings
(reorderedColumn)A column-reorder event fired when columns are reordered. Note: colReorder property must be set to true in settings
(selectedKeyCells)A key event fired when a keyboard key is detected and pressed. Note: keys property must be set to true in settings
(changedPage)A page event fired when table's paging is updated
(autoFilledCells)An autoFill event triggered when an fill action is completed. Note: autoFill property must be set to true in settings
(displayedResponsive)A responsive-display event fired when the display of table is updated. Note: responsive property must be set to true in settings
(loadedTable)An event fired when the table is fully loaded
(loadedjQuery)An event fired when an instance of jQuery is loaded

Note: :bulb:

(emittedEvent): This is used to fire an event(s), which is not mentioned in the above table. The list of all available events can be found here. The name(s) of the event(s) would need to be added to eventNames array in the settings object.

Example of adding responsive-resize and column-reorder events:

<ngx-smart-datatable
     ...

    (emittedEvent)="onEmitEvent($event)">
</ngx-smart-datatable>
settings = {
   ...
   
   eventNames: ['responsive-resize', 'column-reorder']
}
...

onEmitEvent(event: any): void {
   console.log('onEmitEvent: ', event);

   if (event.e.type === 'responsive-resize') {
       // do something
   }

   if (event.e.type === 'column-reorder') {
       // do something
   }
}

Reference :dart:

DataTables.net

Author :books:

Ahmed Alatawi

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free