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 ColumnSort - 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.
alignment CellAlignment - Enum(left, center, right, justify) Set the cell alignment
headerAlignment CellAlignment - Enum(left, center, right, justify) Set the header cell alignment
width int Column width can be set by px. e.g. 50
flexWidth int Column width can be set relatively using flex. The default value for each column is 1. If flexWidth used with width, the flexWidth would be ignored.
cellClass String Additional class(es) that you can attach to cell
headerClass String Additional class(es) that you can attach to header cell

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.