\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by adding container around your content with `white-space: normal`.\n\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n \nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by adding container around your content with `white-space: normal`.\n\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n \nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [Styles to be added](#styles-to-be-added)\n - [Links to be added](#links-to-be-added)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n * @angular/cdk\n * @angular/common\n * @angular/core\n * @angular/flex-layout\n * @angular/forms\n * @angular/material\n * @angular/platform-browser\n * @terminus/design-tokens\n * @terminus/ngx-tools\n * @terminus/ui-button\n * @terminus/ui-chip\n * @terminus/ui-checkbox\n * @terminus/ui-form-field\n * @terminus/ui-icon\n * @terminus/ui-input\n * @terminus/ui-menu\n * @terminus/ui-option\n * @terminus/ui-paginator\n * @terminus/ui-pipes\n * @terminus/ui-selection-list\n * @terminus/ui-sort\n * @terminus/ui-spacing\n * @terminus/ui-styles\n * @terminus/ui-table\n * @terminus/ui-tooltip\n * @terminus/ui-validation-messages\n * @terminus/ui-validators\n * @terminus/ui-utilities\n * text-mask-addons\n * text-mask-core\n * date-fns\n\nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n ng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n * TsTableModule\n * TsIconModule\n * DragDropModule\n * FlexLayoutModule\n * FormsModule\n * ReactiveFormsModule\n * TsPaginatorModule\n \n\n### Styles to be added\n\n At top level `styles.scss`, add these styles:\n\n```html\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```\n\n### Links to be added\n\nIn order to have material icons shown up correctly, add this to the top level html\n\n```html\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by adding container around your content with `white-space: normal`.\n\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n \nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[gh-release-badge]: https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]: https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n \n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by adding container around your content with `white-space: normal`.\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n \nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n**Table of Contents**\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n \n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table'; \n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table'; \n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by adding container around your content with `white-space: normal`.\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n \nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [Packages that need to be installed](#packages-that-need-to-be-installed)\n - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-checkbox`\n- `@terminus/ui-chip`\n- `@terminus/ui-form-field`\n- `@terminus/ui-icon`\n- `@terminus/ui-input`\n- `@terminus/ui-menu`\n- `@terminus/ui-option`\n- `@terminus/ui-paginator`\n- `@terminus/ui-pipes`\n- `@terminus/ui-selection-list`\n- `@terminus/ui-sort`\n- `@terminus/ui-spacing`\n- `@terminus/ui-styles`\n- `@terminus/ui-table`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `@terminus/ui-validators`\n- `date-fns`\n- `text-mask-addons`\n- `text-mask-core`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### Modules that need to be in NgModule\n\n- `TsTableModule`\n- `TsIconModule`\n- `DragDropModule`\n- `FlexLayoutModule`\n- `FormsModule`\n- `ReactiveFormsModule`\n- `TsPaginatorModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Change indicator](#change-indicator)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Change indicator\n\nA component to easily show the sentiment for a change. This is most often used in a footer summary row.\n\n```html\n\n42%\n3 per week\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Change indicator](#change-indicator)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Change indicator\n\nA component to easily show the sentiment for a change. This is most often used in a footer summary row.\n\n```html\n\n42%\n3 per week\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Change indicator](#change-indicator)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Change indicator\n\nA component to easily show the sentiment for a change. This is most often used in a footer summary row.\n\n```html\n\n42%\n3 per week\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Change indicator](#change-indicator)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Change indicator\n\nA component to easily show the sentiment for a change. This is most often used in a footer summary row.\n\n```html\n\n42%\n3 per week\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"
\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url] \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\n\n\n## Table of Contents\n\n- [Installation](#installation)\n - [CSS imports](#css-imports)\n - [CSS resources](#css-resources)\n- [Usage](#usage)\n - [Basic](#basic)\n - [1. Define the columns HTML](#1-define-the-columns-html)\n - [2. Define the displayed columns](#2-define-the-displayed-columns)\n - [3. Define the table's rows](#3-define-the-tables-rows)\n - [4. Provide data](#4-provide-data)\n - [Full HTML example](#full-html-example)\n - [Dynamically update table data](#dynamically-update-table-data)\n - [Dynamic columns](#dynamic-columns)\n - [Sorting by column](#sorting-by-column)\n - [Row selection](#row-selection)\n - [Content wrapping](#content-wrapping)\n - [Cell alignment](#cell-alignment)\n - [Sticky header](#sticky-header)\n - [Footer](#footer)\n - [Sticky column](#sticky-column)\n - [Sticky column at end](#sticky-column-at-end)\n - [Re-orderable columns](#re-orderable-columns)\n - [Density](#density)\n - [Outer border](#outer-border)\n - [Scrolling](#scrolling)\n - [Events](#events)\n - [Table](#table)\n - [Cell](#cell)\n - [Full example with pagination, sorting, and dynamic columns](#full-example-with-pagination-sorting-and-dynamic-columns)\n- [Change indicator](#change-indicator)\n- [Test Helpers](#test-helpers)\n\n\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-table\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n``` \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `` of your application:\n\n```css\n\n```\n\n## Usage\n\n### Basic\n\n#### 1. Define the columns HTML\n\nDefine the table's columns. Each column definition should be given a unique name and contain the content for its header and row cells.\n\nHere's a simple column definition with the name `userName`. The header cell contains the text `Username` and the row cell will render the\nname property of each row's data.\n\n```html\n\n
\n Username\n
\n\n
\n \n {{ item.username }}\n
\n\n```\n\n> NOTE: `ts-header-cell` & `ts-cell` can both be used as a component selector or an attribute selector. We _highly_ encourage the attribute\n> usage as it is more accessible and has better support for items such as multiple sticky headers etc.\n\n#### 2. Define the displayed columns\n\nThe table expects an array of `TsColumn` definitions to manage the displayed columns and the initial column width.\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\n```\n\n#### 3. Define the table's rows\n\nAfter defining your columns, provide the header and data row templates that will be rendered out by the table. Each row needs to be given a\nlist of the columns that it should contain. The order of the names will define the order of the cells rendered.\n\nNOTE: It is not required to provide a list of all the _defined_ column names, but only the ones that you want to have\nrendered.\n\n```html\n
\n\n\n
\n```\n\n> NOTE: `ts-header-row` & `ts-row` can both be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged \n> as it is more accessible and has better support for items such as multiple sticky headers etc.\n\nThe table component provides an array of column names built from the array of `TsColumn` definitions passed to the table. You can use this \n reference for the rows rather than defining two separate arrays:\n\n```html\n\n\n
\n\n \n
\n\n```\n\n> NOTE: `ts-table` can be used as a component selector or an attribute selector. Attribute usage is _highly_ encouraged as it is more \n> accessible and has better support for items such as multiple sticky headers etc.\n\nMapping the array of names manually is also fairly simple:\n\n```typescript\nimport { TsColumn } from '@terminus/ui-table';\n\nconst columns: TsColumn = [\n {name: 'title', width: 200},\n {name: 'body', width: 400},\n];\nconst columnName = this.columns.map(c => c.name);\n```\n\n#### 4. Provide data\n\nThe column and row definitions capture how data will render - all that's left is to provide the data itself.\n\nCreate an instance of `TsTableDataSource` and set the items to be displayed to the `data` property.\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource();\nthis.myDataSource.data = dataToRender;\n```\n\n```html\n
\n ...\n
\n```\n\nThe `DataSource` can be seeded with initial data:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\nAn interface for your table data can be passed to `TsTableDataSource` for stricter typing:\n\n```typescript\nimport { TsTableDataSource } from '@terminus/ui-table';\n\nexport interface MyTableItem {\n name: string;\n id: number;\n}\n\nthis.myDataSource = new TsTableDataSource(INITIAL_DATA);\n```\n\n#### Full HTML example\n\n```html\n\n
\n \n \n
\n Username\n
\n\n
\n {{ item.username }}\n
\n \n\n \n \n
\n Age\n
\n\n
\n {{ item.age }}\n
\n \n\n \n
\n\n \n
\n
\n```\n\n### Dynamically update table data\n\nYour data source was created during the bootstraping of your component:\n\n```typescript\nthis.myDataSource = new TsTableDataSource();\n```\n\nSimply assign the new data to `myDataSource.data`. The table will flush the old data and display the new data:\n\n```typescript\nthis.myDataSource.data = dataToRender;\n```\n\n### Dynamic columns\n\nColumns can be dynamically added and removed with any control. The selected control should affect the array of columns passed to the table\n(`myColumns` in the example below).\n\n```html\n\n
\n \n\n
\n
\n
\n```\n\n### Sorting by column\n\nTo add sorting behavior to the table, add the `tsSort` directive to the `` and add `ts-sort-header` to each column header cell\nthat should trigger sorting. Provide the `TsSortDirective` directive to the `TsTableDataSource` and it will automatically listen for sorting\nchanges and change the order of data rendered by the table.\n\nBy default, the `TsTableDataSource` sorts with the assumption that the sorted column's name matches the data property name that the column\ndisplays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row\ncell.\n\n```html\n\n
\n \n \n
\n Position\n
\n\n
\n {{ element.position }}\n
\n \n
\n```\n\nIn your class, get a reference to the `TsSortDirective` using `@ViewChild`:\n\n```typescript\nimport { AfterViewInit, ViewChild } from '@angular/core';\nimport { TsSortDirective } from '@terminus/ui-sort';\n\nexport class TableComponent implements AfterViewInit {\n // Get a reference to the TsSortDirective instance\n @ViewChild(TsSortDirective, {static: false})\n sort: TsSortDirective;\n\n public ngAfterViewInit(): void {\n // Subscribe to the sortChange event to reset pagination, fetch new data, etc\n this.sort.sortChange.subscribe(sortState => {\n // Table was sorted - go get new data!\n console.log('Table sort changed! ', sortState);\n });\n }\n}\n```\n\n### Row selection\n\nThis can be implemented at the consumer level by adding a column that contains a checkbox.\n\n### Content wrapping\n\nBy default, cell contents do not wrap. This can be overridden by setting the column `noWrap` property:\n\n```html\n\n ...\n\n```\n\n### Cell alignment\n\nDefining an alignment style for a cell will set the horizontal alignment of text inside the cell. Set the directive `alignment` and pass it\nany valid TsTableColumnAlignment value (`left`, `center` or `right`).\n\n```html\n\n\n
\n Created\n
\n
\n {{ item.created_at | date:shortDate }}\n
\n\n```\n\n### Sticky header\n\nDefining the header as sticky will ensure it is always visible as the table scrolls. Set `sticky: true` in the `ts-header-row`'s\n`tsHeaderRowDef` directive.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n\n\n
\n```\n\n> NOTE: Multiple sticky headers can be defined.\n\n### Footer\n\nA footer row can be defined to be output at the bottom of the table. It supports the same 'sticky' setting that the\nheader row does.\n\n```html\n\n
Created
\n
{{ item.created_at }}
\n
Custom footer cell content
\n\n
\n```\n\n### Sticky column\n\nDefining a sticky column will pin it to the left side as the table scrolls horizontally. Add the sticky data attribute to the column\ndefinition. This can be applied to more than one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `sticky` columns can be defined.\n\n#### Sticky column at end\n\nAdding the data attribute `stickyEnd` will pin the column to the end of the table as it scrolls horizontally. This can be applied to more\nthan one column.\n\n```html\n\n \n Updated\n \n \n {{ item.updated_at | date:\"shortDate\" }}\n \n\n```\n\n> NOTE: Multiple `stickyEnd` columns can be defined.\n\n### Re-orderable columns\n\nColumn reordering is not built into the table itself, but it is supported with the help of the Angular CDK.\n\nThe example below shows how to allow users to adjust column visibility *and* column order via a menu.\n\n> NOTE: Use the custom icon `table_large_plus` to indicate a table settings menu.\n\n```html\n\n\n \n Edit Columns\n\n\n\n\n \n \n \n \n \n \n \n {{ column.display }}\n \n\n \n \n drag_indicator\n\n \n \n \n \n \n\n\n\n\n \n\n```\n\n```typescript\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TsColumn } from '@terminus/ui-table';\n\n/**\n * Extend the TsColumn interface with properties our component needs.\n *\n * This allows us to add a control we can use to determine which columns should be shown\n */\nexport interface CustomColumn extends TsColumn {\n // The UI text for the column dropdown\n display: string;\n // The associated FormControl\n control: FormControl;\n}\n\n@Component({...})\nexport class TableComponent {\n // Define the original column source with all columns defaulted to visible\n private readonly columnsSource: CustomColumn[] = [\n {\n display: 'Title',\n name: 'title',\n width: 300,\n control: new FormControl(true),\n },\n {\n display: 'Number',\n name: 'number',\n control: new FormControl(true),\n width: 100,\n },\n // ...etc\n ];\n\n // Define the mutable version of your columns (must be mutable as we will be changing the order)\n public allPossibleColumns: CustomColumn[] = this.columnsSource.slice();\n\n // Define a getter that filters our columns whose control is currently `false`.\n // This is what will get passed to the table's `columns` input.\n public get visibleColumns(): CustomColumn[] {\n return this.allPossibleColumns.filter(c => c.control && c.control.value);\n }\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n // Define a method to handle the drop event. When an item is dropped in the UI, the underlying data has not been changed yet.\n public columnDropped(event: CdkDragDrop): void {\n // `moveItemInArray` mutates the original array, so first we clone the array\n const columns = this.allPossibleColumns.slice();\n // Then update the positions (this function is provided by the CDK)\n moveItemInArray(columns, event.previousIndex, event.currentIndex);\n // Update the original columns array\n this.allPossibleColumns = columns;\n // Fire the change detector so that the table will update all columns. (Without this, the column widths aren't re-set until\n // closing the menu.\n this.changeDetectorRef.detectChanges();\n }\n}\n```\n\n### Density\n\nThe table supports two density settings: `comfy` (default) & `compact`.\n\n```html\n
\n ...\n
\n```\n\n### Outer border\n\nSince the scrolling container around the table is now a consumer responsibility, adding a border around the table also\nmust be done by the consumer:\n\n```scss\n.my-table-container {\n border: 1px solid color(utility, light);\n}\n```\n\n### Scrolling\n\nScrolling is controlled by the containing element that is placed around the table. If persistent scrollbars are desired,\nthe scrollbars mixin can be used:\n\n```scss\n.my-table-container {\n @include visible-scrollbars;\n}\n```\n\n### Events\n\n#### Table\n\n| Event | Description | Payload |\n|:----------------|:---------------------------------|:----------------------------|\n| `columnsChange` | Fired when any column is changed | `TsTableColumnsChangeEvent` |\n\n> NOTE: This event is not throttled or debounced and may be called repeatedly.\n\n```html\n
\n ...\n
\n```\n\nThe `TsTableColumnsChangeEvent` structure:\n\n```typescript\nclass TsTableColumnsChangeEvent {\n constructor(\n // The table instance that originated the event\n public table: TsTableComponent,\n // The updated array of columns\n public columns: TsColumn[],\n ) {}\n}\n```\n\n#### Cell\n\n| Event | Description | Payload |\n|:----------|:--------------------------------------|:--------------------------|\n| `resized` | Fired when the header cell is resized | `TsHeaderCellResizeEvent` |\n\n```html\n\n
\n Title\n
\n
\n {{ item.title }}\n
\n\n```\n\n```typescript\nclass TsHeaderCellResizeEvent {\n constructor(\n // The header cell instance that originated the event\n public instance: TsHeaderCellDirective,\n // The new width\n public width: string,\n ) {}\n}\n```\n\n### Full example with pagination, sorting, and dynamic columns\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { merge, Observable, of } from 'rxjs';\nimport { startWith } from 'rxjs/operators/startWith';\nimport { map } from 'rxjs/operators/map';\nimport { switchMap } from 'rxjs/operators/switchMap';\nimport { catchError } from 'rxjs/operators/catchError';\nimport { TsSortDirective } from '@terminus/ui-sort';\nimport { TsTableDataSource, TsColumn } from '@terminus/ui-table';\nimport { TsPaginatorComponent } from '@terminus/ui-paginator';\n\n@Component({\n selector: 'my-component',\n template: `\n \n
\n \n
\n\n \n \n
Created
\n
{{ item.created_at | date:shortDate }}
\n
Footer A
\n \n\n \n
Number
\n
{{ item.number }}
\n
Footer B
\n \n\n \n
Title
\n
{{ item.title }}
\n
Footer C
\n \n\n
\n
\n
\n \n\n \n
\n \n
\n `,\n})\nexport class TableComponent implements AfterViewInit {\n allColumns: TsColumn[] = [\n {\n name: 'Created',\n value: 'created',\n width: 100,\n },\n {\n name: 'Title',\n value: 'title',\n width: 100,\n },\n {\n name: 'Comments',\n value: 'comments',\n width: 200,\n },\n {\n name: 'State',\n value: 'state',\n width: 100,\n },\n {\n name: 'Number',\n value: 'number',\n width: 100,\n },\n ];\n // Default to all columns visible\n displayedColumns: TsColumn[] = this.allColumns.slice();\n exampleDatabase: ExampleHttpDao | null;\n dataSource = new TsTableDataSource();\n resultsLength = 0;\n\n @ViewChild(TsSortDirective, {static: true})\n sort: TsSortDirective;\n\n @ViewChild(TsPaginatorComponent, {static: true})\n paginator: TsPaginatorComponent;\n\n constructor(\n private http: HttpClient,\n ) {}\n\n public ngAfterViewInit(): void {\n this.exampleDatabase = new ExampleHttpDao(this.http);\n\n // If the user changes the sort order, reset back to the first page.\n this.sort.sortChange.subscribe(() => this.paginator.currentPageIndex = 0);\n\n // Fetch new data anytime the sort is changed, the page is changed, or the records shown per page is changed\n merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)\n .pipe(\n startWith({}),\n switchMap(() => {\n return this.exampleDatabase.getRepoIssues(\n this.sort.active,\n this.sort.direction,\n this.paginator.currentPageIndex,\n this.paginator.recordsPerPage,\n );\n }),\n map(data => {\n console.log('Demo: fetched data: ', data)\n this.resultsLength = data.total_count;\n return data.items;\n }),\n catchError(() => {\n // Catch if the GitHub API has reached its rate limit. Return empty data.\n console.warn('GitHub API rate limit has been reached!')\n return of([]);\n })\n ).subscribe(data => {\n this.dataSource.data = data;\n });\n }\n}\n\nexport interface GithubApi {\n items: GithubIssue[];\n total_count: number;\n}\n\nexport interface GithubIssue {\n created_at: string;\n number: string;\n state: string;\n title: string;\n}\n\n/**\n * An example database that this example uses to retrieve data for the table.\n */\nexport class ExampleHttpDao {\n constructor(private http: HttpClient) {}\n\n public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable {\n const href = `https://api.github.com/search/issues`;\n const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;\n const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;\n return this.http.get(`${requestUrl}${requestParams}`);\n }\n}\n```\n\n## Change indicator\n\nA component to easily show the sentiment for a change. This is most often used in a footer summary row.\n\n```html\n\n42%\n3 per week\n```\n\n## Test Helpers\n\nSome helpers are exposed to assist with testing. These are imported from `@terminus/ui-table/testing`;\n\n[[source]][test-helpers-src]\n\n| Function |\n|-----------------------------|\n| `getElements` |\n| `getHeaderRow` |\n| `getRows` |\n| `getCells` |\n| `getHeaderCells` |\n| `expectTableToMatchContent` |\n\n\n[test-helpers-src]: testing/src/test-helpers.ts\n[license-url]: https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]: https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui-table.svg\n[npm-package]: https://www.npmjs.com/package/@terminus/ui-table\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]: https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-table/bundles/terminus-ui-table.umd.js\n","readmeFilename":"README.md","description":"