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.
component	ComponentFactory	Sometimes you need to place a component instead of just a string. This attribute is allowing you to do so. It will ignore the formatter function the value is not null.
initComponent	Function(ComponentRef, dynamic)	To initialize the component with some specific parameter, you can use this function.
searchable	bool	Define if the column is searchable. Default value is false.
filter	String	Filter value. Can be use to set default search value and get the current search value
filterOptions	Map<String, String>	The default search column is input text. If you want to turn it into dropdown, you can use this attribute to set the options.

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)	This function would be called when a sortable header clicked and when initialize component with column = null if externalProcessing is false.
(filterChange)	Function(NgdDataColumn column)	This function would be called when a searchable column filter changed and when initialize component with column = null if externalProcessing is false.

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

Basic Table with Column Filter

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