@ukmjkim/aid-data-table v0.0.2

Shared Modules

Data Table

This is the upgraded version of Angular Material data table. This module is built with Angular 5 and works with Angular 6.

Contributors: Calvin Rempel, Huy Hoang Example: src/app/sandbox/components/data-table-sandbox

Features

• Multi-Column Sorting (if enabled in the table, hold 'ctrl' while clicking the sort icon)
• Column Filters. Available types: Picklist, Text, Number Range
• Expandable Sub-Rows
• Selection Column
• Column Selection and Reordering (columns can be excluded by giving them the 'hideable: false' property)
• Vertical and Horizontal scrolling
• Pagination
• Fixed column widths (definable in any css size unit, eg. 'px', '%')

Usage

Import the DataTableModule into your Angular module.

DataTable

HTML Element: aid-data-table Description: The component that renders the data table Inputs:

• dataSource: {DataTableDataSource} The source to use to provide data to the table
• displayedColumns: {string[]} the column names of those columns to show in the table. If a aid-column-selector is used, then the user can modify this array.
• enableSelection: {boolean} - default is false: whether to show the selection column
• showExpandToggle: {boolean} - default is false: whether to show the expandable column. In order to use this feature, your data source needs to extend DataTableDataSource and implement isRowExpandable.
• id: {string} a unique html id, used to prefix additional id in child elements
• maxHeightPx: {number} the maximum height for the table before introducing a vertical scrollbar (may be undefined to never scroll)
• minWidthPx: {number} the minimum width for the table before introducing a horizontal scrollbar (may be undefined to never scroll)
• multisort: {boolean} whether to allow the user to sort on multiple columns
• pageSize: {number} the default number of rows to show per page
• pageSizeOptions: {number[]} the options that a user can select for the number of rows to show per page

Methods:

• addFilter: add a pre-selected filter
• clearAllFiltersAndSort: clear all existing filters and sort

Children

Directive: *aidColDef Description: A directive that defines a column template Attributes:

• *aidColDef: {string} the column identifier
• header: {string} the text to show in the column header
• hideable: {boolean: default=true} whether to be included in the column selector. (If initially included in the tables displayed columns, then the column will be shown but not deselectable)
• headerType: {ColHeaderTypeEnum} ColHeaderTypeEnum.SIMPLE, ColHeaderTypeEnum.SORTABLE, ColHeaderTypeEnum.FILTERABLE, ColHeaderTypeEnum.SORTABLE_AND_FILTERABLE
• filterType: {FilterTypeEnum} FilterTypeEnum.PICKLIST, FilterTypeEnum.TEXT, FilterTypeEnum.NUMBER_RANGE
• width: {string} a css size (eg: '200px', '20%'). May be undefined to unconstrain.
• tooltip (optional): {string} a tooltip for a column header

• selectedFilter (optional): {Filter} allows indicating a column having an active filter (highlighted with blue color). This is used when we need to load the data table with pre-defined filter option on one of the Picklist columns.

  @Depracated: use addFilter method instead

Template Variables:

• row: {any} the row data Template: used as the table cell content

Directive: *aidExpandedRowDef Description: A directive that defines a sub-row template Attributes: {none} Template Variables:

• row: {any} the row data Template: used as full width content in the sub row.

Column Selector

HTML Element: aid-data-table-column-selector Description: A component that provides column hiding/reordering Inputs:

• dataTable: {DataTableComponent} The data table to link the selector to.

Row Expansion Control

HTML Element: aid-row-expansion-control Description: A component that provides controls for expaning/collapsing all data table rows Inputs:

• dataTable: {DataTableComponent} The data table to link the controls to.

DataTableDataSource

DataTableDataSource is an abstract class that should be implemented to provide data.

Concepts

When a parameter (sort, filter, page) changes, getData is called to retrieve the correct data.

Filters are processed with a FilterHandler, which takes in a user defined FilterHandlerDto. Each active filter is handled in the order that it is set, using the FilterHandler. The same Dto is passed each time, and is ultimately passed to getData. It is expected that the Dto will ultimately contain the information necessary to retrieve the correctly filtered data. The Dto is created by implementing the getNewFilterDto method in the DataSource.

Filters are configured each time the filter dialog is opened, and are configured using a FilterConfigurator provided to the DataSource. A FilterConfiguratorDto is passed to the configurator every time to provided relevant context. This Dto is created by implementing the getNewFilterConfigDto method.

The sort passed to getData is an array containing the sort information. The first element is the primary sort, the second element is the secondary sort, and so on. If multisort is not enabled on the table, then this array should contain only a single element, or nothing. The sort can also be intercepted before being applied by overriding the `interceptSort' method and returning a different array of sorts.

The page event contains the pageNumber (0-index) and the pageSize.

The DataSource also provides all relevent data as observables:

• filterConfig(columnName): {any} the filter configuration for a given column
• filters(): {Filter[]} the active filters
• sort(): {Sort[]} the active sorts (in the order of precedence).
• page(): {PageEvent} the current page
• rowCount(): {number} the current total row count
• data(): {any[]} the currently loaded data set
• selection(): {any[]} the currently selected rows

Abstract Methods

• abstract getNewFilterDto(): K;: get the FilterHandlerDto to pass through the filter chain
• abstract getNewFilterConfigDto(): L;: get the FilterConfigDto to pass when configuring filters
• abstract getData(filterDto: K, sort: Sort[], page: PageEvent): Observable<T[]>;: get the data currently requested by the table
• abstract getRowCount(): Observable<number>;: Get the total row count (should take into account currently applied filters)
• abstract isRowExpandable(data: T, idx: number): boolean;: Return true to add an expandable sub-row for the row
• abstract identify(data: T): any;: Return a unique value to uniquely identify the row

LocalDataTableDataSource

For data stored locally in memory, the LocalDataTableDataSource can be used. It provides (multi)sorting, filtering (all filter types), and pagination. Set the data using the setData method.

The constructor takes an array of column definition objects with the following properties:

• field: {string} the column id
• sortPredicate: {SortPredicate} a SortPredicate function to use to sort the column
• additionalSorts: {Sort[]} an array of additional sorts to apply when this column is sorted (for default secondary sorts, for example)
• getFilterValue: {(T) => any} a function returning the value on which to filter (eg, to alias for text search)
• computedValue: {(T) => any} a function returning a dynamically computed value

Prerequisites

We use ng-packagr to package this module

Reference: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

Installation

Navigate to the project folder

cd c:/git/aid/angular-apps/common-module/aid-module

Install ng-packagr

npm install ng-packagr --save-dev

Make sure there is no package-lock.json in your

Install libraries

npm install

Package the module

npm run package

If the build is successful, you should see the file named aid-data-table-0.0.0.tgz in /angular-apps/common-module/aid-module/releases.

How to use

Reference this module in your project's package.json.

"aid-data-table": "file:../common-modules/aid-data-table/releases/aid-data-table-0.0.0.tgz"

Link to the Google Material Icons font in your index.html:

• <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Include the following css files in your global stylesheet:

• @import "~@angular/material/prebuilt-themes/indigo-pink.css";
• @import"~dragula/dist/dragula.min.css";
• @import "~nouislider/distribute/nouislider.min.css";

If using Angular 6, add the following entry to the "paths" array in angular.json "compiletOptions": "dragula": [ "../node_modules/dragula/dist/dragula.min.js" ]