ngd-datatable

This plugin is made to display a data table on Angular Dart platform. Currently it support a simple data table with or without server processing.

Usage

Columns [NgdDataColumn]

This class is used to define a column and how you want to format the data.

Attribute Type Usage
title String This attribute is used to define the column title.
selector String This attribute is used as a key name from the map data. The default value is camel cased title.
sort Enum(none, normal, asc, desc) Define how you want to sort the data. The default value is none and it would not print the sorting icon on the header.
formatter Function(dynamic) If you want to format the data before showing it on the table, you can use this function. The parameter of this function is the selected data it self.

Data

Data is based on json array

Code sample

html

<ngd-datatable 
    [columns]="columns" 
    [data]="data"
    ></ngd-datatable>

dart

List<NgdDataColumn> columns = [
    NgdDataColumn(
        title: 'Employee Name',
        sort: ColumnSort.normal
    ),
    NgdDataColumn(
        title: 'Department',
        sort: ColumnSort.normal
    ),
    NgdDataColumn(
        title: 'Marital Status'
    ),
    NgdDataColumn(
        title: 'Joined Year'
    ),
    NgdDataColumn(
        title: 'Employee Number',
        sort: ColumnSort.normal
    ),
];
List<dynamic> data = [
    {
        "employeeName":"Emerson",
        "department":"Payroll",
        "maritalStatus":"Single",
        "joinedYear":2019,
        "employeeNumber":76123
    },
    {
        "employeeName":"Tamara",
        "department":"Customer Service",
        "maritalStatus":"Married",
        "joinedYear":2015,
        "employeeNumber":93040
    }
];

Attributes

Attribute Type Usage
[columns] List<NgdDataColumn>
[data] List<dynamic>
[count] int
[pageLimit] int default 25
[externalProcessing] bool default false
[loading] bool default false
[(page)] int default 1
(pageClick) Function(int page)
(sortClick) Function(NgdDataColumn column)

Examples

Basic Table

Load all the data at once and let the ngd-datatable handle the pagination and sorting.


Server Side Table

Load page by page data and handle the pagination and sorting externally e.g. by api call.