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: biz-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 biz-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 extendDataTableDataSource
and implementisRowExpandable
. -
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: *bizColDef
Description: A directive that defines a column template
Attributes:
-
*bizColDef
: {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: *bizExpandedRowDef
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: biz-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: biz-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
Installation
Navigate to the project folder
cd c:/git/biz/angular-apps/common-module/biz-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 biz-data-table-0.0.0.tgz
in /angular-apps/common-module/biz-module/releases
.
How to use
Reference this module in your project's package.json
.
"biz-data-table": "file:../common-modules/biz-data-table/releases/biz-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" ]