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 not just a single data but the entire row data. With this function you can event process a list of non json object as the input of ngd_datatable.

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.

Basic Table with Object Data Type

Load non JSON Object data type without formatting into JSON Object. In this example we are using List<Employee> as the data