GetTerminus · benjamincharity · Jan 24, 2018 · Jan 15, 2018 · Jan 19, 2018 · Jan 19, 2018
@@ -1,6 +1,3 @@
-<!-- Please attach the appropriate labels! -->
-
-
 <!--
 
 If reporting an issue:
@@ -10,4 +7,3 @@ If reporting an issue:
 3. Include the link here
 
 -->
-
@@ -82,28 +82,29 @@ documentation on all components and styles, visit [GetTerminus.github.io/terminu
 | checkbox         |                                                        | :white_check_mark: |        [Demo][demo-checkbox] |
 | copy             |                                                        | :white_check_mark: |            [Demo][demo-copy] |
 | datavis          |                                                        |                :x: |                              |
-| datatable        |                                                        |           :hammer: |                              |
 | datepicker       |                                                        | :white_check_mark: |      [Demo][demo-datepicker] |
 | date-range       |                                                        | :white_check_mark: |      [Demo][demo-date-range] |
 | dialog           |                                                        |                :x: |                              |
 | divider          |                                                        |                :x: |                              |
 | expansion        |                                                        |                :x: |                              |
 | file-picker      |                                                        |                :x: |                              |
 | input-masking    |                                                        |                :x: |                              |
-| input-messages   |         Used by `input` to display validation messages | :white_check_mark: |                              |
+| input-messages   |         Used by `input` to display validation messages | :white_check_mark: |             (see input demo) |
 | input            |                                                        | :white_check_mark: |           [Demo][demo-input] |
 | link             |                                                        | :white_check_mark: |            [Demo][demo-link] |
 | loading overlay  |                                                        | :white_check_mark: | [Demo][demo-loading-overlay] |
 | login form       |                                                        | :white_check_mark: |     [Demo][demo-log-in-form] |
 | menu             |                                                        | :white_check_mark: |            [Demo][demo-menu] |
 | navigation       |                                                        | :white_check_mark: |      [Demo][demo-navigation] |
-| pagination       |                                                        | :white_check_mark: |      [Demo][demo-pagination] |
+| paginator        |                                                        | :white_check_mark: |       [Demo][demo-paginator] |
 | picklist         |                                                        |                :x: |                              |
 | progress         |                                                        |                :x: |                              |
 | progression      |                                                        |                :x: |                              |
 | radio-group      |                                                        | :white_check_mark: |     [Demo][demo-radio-group] |
 | search           |                                                        | :white_check_mark: |          [Demo][demo-search] |
 | select           |                                                        | :white_check_mark: |          [Demo][demo-select] |
+| sort             |               Used by `table` to manage column sorting | :white_check_mark: |             (see table demo) |
+| table            |                                                        | :white_check_mark: |           [Demo][demo-table] |
 | tabs             |                                                        |                :x: |                              |
 | toggle           |                                                        | :white_check_mark: |          [Demo][demo-toggle] |
 | tooltip          |                                                        | :white_check_mark: |         [Demo][demo-tooltip] |
@@ -132,7 +133,7 @@ documentation on all components and styles, visit [GetTerminus.github.io/terminu
 | Feature          | Notes                                                  | Status             |
 |------------------|--------------------------------------------------------|        :---:       |
 | animation        |                                                        | :white_check_mark: |
-| assets           |                                                        |           :hammer: |
+| assets           |                                                        | :white_check_mark: |
 | breakpoints      |                                                        | :white_check_mark: |
 | colors           |                                                        | :white_check_mark: |
 | cursors          |                                                        | :white_check_mark: |
@@ -148,7 +149,7 @@ documentation on all components and styles, visit [GetTerminus.github.io/terminu
 Install the library and all required dependencies:
 
 ```bash
-$ yarn add @terminus/ui @angular/forms @angular/animations @angular/material angular2-ladda hammerjs --exact
+$ yarn add @terminus/ui @angular/forms @angular/animations @angular/material hammerjs --exact
 ```
 
 
@@ -161,6 +162,14 @@ To use the global styles, import the CSS file into your stylesheets:
 ```
 
 
+## SCSS Helpers
+
+To use the provided SCSS helper methods/variables/mixins, import the helpers file from `@terminus/ui`:
+
+```scss
+@import '~@terminus/ui/helpers'
+```
+
 ## Development Workflow
 
 View the [wiki page][dev-wiki].
@@ -183,63 +192,64 @@ View the [wiki page][dev-wiki].
 
 <!-- LINKS -->
 
-[compodoc-badge]: https://rawgit.com/GetTerminus/terminus-ui/master/docs/typescript/images/coverage-badge.svg
-[docs-url]: https://getterminus.github.io/terminus-ui/
-[license-image]: http://img.shields.io/badge/license-MIT-blue.svg
-[license-url]: https://github.com/GetTerminus/terminus-ui/blob/master/LICENSE
-[npm-url]: https://npmjs.org/package/@terminus/ui
-[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui.svg
 [circle-badge]: https://circleci.com/gh/GetTerminus/terminus-ui/tree/master.svg?style=shield
 [circle-link]: https://circleci.com/gh/GetTerminus/terminus-ui/tree/master
-[greenkeeper-badge]: https://badges.greenkeeper.io/GetTerminus/terminus-ui.svg
-[greenkeeper]: https://greenkeeper.io/
-[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-[semantic-release]: https://github.com/semantic-release/semantic-release
 [codecov-badge]: https://codecov.io/gh/GetTerminus/terminus-ui/branch/master/graph/badge.svg
 [codecov-project]: https://codecov.io/gh/GetTerminus/terminus-ui
-[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui/bundles/ui.umd.min.js?compression=gzip
-[raw-distribution-js]: https://unpkg.com/@terminus/ui/bundles/ui.umd.min.js
+[codecov]: https://codecov.io
+[codecov_browser]: https://docs.codecov.io/docs/browser-extension
+[commitizen-cli]: https://github.com/commitizen/cz-cli
 [commitizen]: https://github.com/commitizen
 [commitizen_vsc]: https://github.com/commitizen
-[saucelab_platforms]: https://saucelabs.com/platforms
+[compodoc-badge]: https://rawgit.com/GetTerminus/terminus-ui/master/docs/typescript/images/coverage-badge.svg
 [compodoc]: https://compodoc.github.io/website/
 [compodoc_comments]: https://compodoc.github.io/website/guides/comments.html
+[component-demo-screenshot]: https://user-images.githubusercontent.com/270193/28672864-f05b73cc-72ae-11e7-8ead-efd1ee008f43.png
+[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog/blob/v0.5.3/conventions/angular.md
+[dev-wiki]: https://github.com/GetTerminus/terminus-ui/wiki/Development-Workflow
+[docs-url]: https://getterminus.github.io/terminus-ui/
+[doctoc]: https://github.com/thlorenz/doctoc
+[file-size-badge]: http://img.badgesize.io/https://unpkg.com/@terminus/ui/bundles/ui.umd.min.js?compression=gzip
+[generator]: https://github.com/GetTerminus/generator-terminus-ui
+[greenkeeper-badge]: https://badges.greenkeeper.io/GetTerminus/terminus-ui.svg
+[greenkeeper]: https://greenkeeper.io/
+[license-image]: http://img.shields.io/badge/license-MIT-blue.svg
+[license-url]: https://github.com/GetTerminus/terminus-ui/blob/master/LICENSE
+[markdown]: https://daringfireball.net/projects/markdown/syntax
+[npm-url]: https://npmjs.org/package/@terminus/ui
+[npm-version-image]: http://img.shields.io/npm/v/@terminus/ui.svg
 [nucleus]: https://github.com/holidaypirates/nucleus/
 [nucleus_annotation]: https://holidaypirates.github.io/nucleus/annotation-reference.html
-[doctoc]: https://github.com/thlorenz/doctoc
-[codecov]: https://codecov.io
-[codecov_browser]: https://docs.codecov.io/docs/browser-extension
+[pkg-json]: https://github.com/GetTerminus/terminus-ui/blob/master/package.json
+[raw-distribution-js]: https://unpkg.com/@terminus/ui/bundles/ui.umd.min.js
+[saucelab_platforms]: https://saucelabs.com/platforms
+[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
 [semantic-release-video]: https://youtu.be/tc2UgG5L7WM
-[markdown]: https://daringfireball.net/projects/markdown/syntax
-[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog/blob/v0.5.3/conventions/angular.md
-[commitizen-cli]: https://github.com/commitizen/cz-cli
-[validate-commit-msg]: https://github.com/kentcdodds/validate-commit-msg
-[ui-npm]: https://www.npmjs.com/package/@terminus/ui
-[ui-github]: https://github.com/GetTerminus/terminus-ui
+[semantic-release]: https://github.com/semantic-release/semantic-release
 [semver]: http://semver.org/
-[generator]: https://github.com/GetTerminus/generator-terminus-ui
-[component-demo-screenshot]: https://user-images.githubusercontent.com/270193/28672864-f05b73cc-72ae-11e7-8ead-efd1ee008f43.png
+[ui-github]: https://github.com/GetTerminus/terminus-ui
+[ui-npm]: https://www.npmjs.com/package/@terminus/ui
 [unpkg-terminus]: https://unpkg.com/@terminus/ui/
-[pkg-json]: https://github.com/GetTerminus/terminus-ui/blob/master/package.json
-[dev-wiki]: https://github.com/GetTerminus/terminus-ui/wiki/Development-Workflow
+[validate-commit-msg]: https://github.com/kentcdodds/validate-commit-msg
 
 <!-- Demos -->
 [demo-button]: https://terminus-ui-demos.stackblitz.io/components/button
-[demo-link]: https://terminus-ui-demos.stackblitz.io/components/link
+[demo-card]: https://terminus-ui-demos.stackblitz.io/components/card
 [demo-checkbox]: https://terminus-ui-demos.stackblitz.io/components/checkbox
 [demo-copy]: https://terminus-ui-demos.stackblitz.io/components/copy
-[demo-datepicker]: https://terminus-ui-demos.stackblitz.io/components/datepicker
 [demo-date-range]: https://terminus-ui-demos.stackblitz.io/components/date-range
+[demo-datepicker]: https://terminus-ui-demos.stackblitz.io/components/datepicker
 [demo-input]: https://terminus-ui-demos.stackblitz.io/components/input
+[demo-link]: https://terminus-ui-demos.stackblitz.io/components/link
+[demo-loading-overlay]: https://terminus-ui-demos.stackblitz.io/components/loading-overlay
 [demo-log-in-form]: https://terminus-ui-demos.stackblitz.io/components/log-in-form
 [demo-menu]: https://terminus-ui-demos.stackblitz.io/components/menu
-[demo-pagination]: https://terminus-ui-demos.stackblitz.io/components/pagination
-[demo-select]: https://terminus-ui-demos.stackblitz.io/components/select
-[demo-toggle]: https://terminus-ui-demos.stackblitz.io/components/toggle
 [demo-navigation]: https://terminus-ui-demos.stackblitz.io/components/navigation
-[demo-loading-overlay]: https://terminus-ui-demos.stackblitz.io/components/loading-overlay
+[demo-paginator]: https://terminus-ui-demos.stackblitz.io/components/paginator
+[demo-radio-group]: https://terminus-ui-demos.stackblitz.io/components/radio
 [demo-search]: https://terminus-ui-demos.stackblitz.io/components/search
-[demo-card]: https://terminus-ui-demos.stackblitz.io/components/card
+[demo-select]: https://terminus-ui-demos.stackblitz.io/components/select
+[demo-table]: https://terminus-ui-demos.stackblitz.io/components/table
+[demo-toggle]: https://terminus-ui-demos.stackblitz.io/components/toggle
 [demo-tooltip]: https://terminus-ui-demos.stackblitz.io/components/tooltip
-[demo-radio-group]: https://terminus-ui-demos.stackblitz.io/components/radio
 
@@ -53,22 +53,22 @@
     "integration:jit": "cd integration && yarn run e2e",
     "integration:aot": "cd integration && yarn run e2e:aot",
     "//=> Section: Linting": "",
-    "lint:ts": "./node_modules/.bin/tslint --fix --project src/lib/tsconfig.json",
+    "lint:ts": "./node_modules/.bin/tslint --fix --project src/lib/tsconfig.lint.json",
     "lint:ts-spec": "./node_modules/.bin/tslint --fix --project src/lib/tsconfig.spec.json",
     "lint:scss": "./node_modules/.bin/stylelint 'src/lib/**/*.scss' --fix",
     "lint": "yarn run lint:ts && yarn run lint:scss",
     "markdown:test-links": "./node_modules/.bin/markdown-link-check ./README.md",
     "//=> Section: Setup": "",
     "setup": "node ./tooling/setup.js",
     "//=> Section: Testing": "",
-    "pretest": "yarn run build-test",
-    "test": "concurrently \"yarn run build-test:watch\" \"karma start karma.conf.js\"",
-    "pretest:ci": "yarn run build-test",
-    "test:ci": "karma start karma.conf.js --single-run --code-coverage --sauceLabs",
-    "test:jest:NOTE": "jest --watch: currently hangs when determining which tests to run. For now we simply run all",
-    "test:jest": "jest --watch",
-    "test:jest:ci": "jest --runInBand --coverage",
-    "test:jest:debug": "jest --debug --runInBand",
+    "pretest:karma": "yarn run build-test",
+    "test:karma": "concurrently \"yarn run build-test:watch\" \"karma start karma.conf.js\"",
+    "pretest:ci:karma": "yarn run build-test",
+    "test:ci:karma": "karma start karma.conf.js --single-run --code-coverage --sauceLabs",
+    "test:NOTE": "jest --watch: currently hangs when determining which tests to run. For now we simply run all",
+    "test": "jest --watch",
+    "test:ci": "jest --runInBand --coverage",
+    "test:debug": "jest --debug --runInBand",
     "//=> Section: Release": "",
     "check:next-release": "cd dist/ && ../node_modules/.bin/semantic-release --dry-run",
     "//=> Section: Tooling": "",
@@ -85,7 +85,7 @@
       "lint:ts-spec",
       "git add"
     ],
-    "src/lib/**/*!(.(spec|mock)).ts": [
+    "src/lib/src/**/!(*.spec|*.mock).ts": [
       "lint:ts",
       "git add"
     ],

@@ -4,12 +4,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import 'hammerjs';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { HttpClientModule } from '@angular/common/http';
 
 import {
   MatButtonModule,
   MatIconModule,
   MatMenuModule,
   MatToolbarModule,
+  MatSortModule,
 } from '@angular/material';
 
 import {
@@ -25,13 +27,15 @@ import {
   TsLoginFormModule,
   TsMenuModule,
   TsNavigationModule,
-  TsPaginationModule,
+  TsPaginatorModule,
   TsRadioGroupModule,
   TsSearchModule,
   TsSelectModule,
+  TsSortModule,
   TsSpacingModule,
   TsToggleModule,
   TsTooltipModule,
+  TsTableModule,
   // INJECT: Add new UI component to demo UI imports
   // NB! The above line is required for our yeoman generator and should not be changed.
 } from '@terminus/ui';
@@ -52,12 +56,13 @@ import { LoadingOverlayComponent } from './components/loading-overlay/loading-ov
 import { LoginFormComponent } from './components/login-form/login-form.component';
 import { MenuComponent } from './components/menu/menu.component';
 import { NavigationComponent } from './components/navigation/navigation.component';
-import { PaginationComponent } from './components/pagination/pagination.component';
+import { PaginatorComponent } from './components/paginator/paginator.component';
 import { RadioComponent } from './components/radio/radio.component';
 import { SearchComponent } from './components/search/search.component';
 import { SelectComponent } from './components/select/select.component';
 import { SpacingComponent } from './components/spacing/spacing.component';
 import { SpacingStylesComponent } from './components/spacing/spacing-styles.component';
+import { TableComponent } from './components/table/table.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
 import { TooltipComponent } from './components/tooltip/tooltip.component';
 import { TypographyComponent } from './components/typography/typography.component';
@@ -74,6 +79,7 @@ import { WindowServiceComponent } from './components/services/window-service.com
     ReactiveFormsModule,
     BrowserAnimationsModule,
     FlexLayoutModule,
+    HttpClientModule,
 
     MatButtonModule,
     MatIconModule,
@@ -92,11 +98,13 @@ import { WindowServiceComponent } from './components/services/window-service.com
     TsLoginFormModule,
     TsMenuModule,
     TsNavigationModule,
-    TsPaginationModule,
+    TsPaginatorModule,
     TsRadioGroupModule,
     TsSearchModule,
     TsSelectModule,
+    TsSortModule,
     TsSpacingModule,
+    TsTableModule,
     TsToggleModule,
     TsTooltipModule,
     // INJECT: Add new UI component to demo module imports array
@@ -118,12 +126,13 @@ import { WindowServiceComponent } from './components/services/window-service.com
     LoginFormComponent,
     MenuComponent,
     NavigationComponent,
-    PaginationComponent,
+    PaginatorComponent,
     RadioComponent,
     SearchComponent,
     SelectComponent,
     SpacingComponent,
     SpacingStylesComponent,
+    TableComponent,
     ToggleComponent,
     TooltipComponent,
     TypographyComponent,

@@ -12,12 +12,13 @@ import { LoadingOverlayComponent } from './loading-overlay/loading-overlay.compo
 import { LoginFormComponent } from './login-form/login-form.component';
 import { MenuComponent } from './menu/menu.component';
 import { NavigationComponent } from './navigation/navigation.component';
-import { PaginationComponent } from './pagination/pagination.component';
+import { PaginatorComponent } from './paginator/paginator.component';
 import { RadioComponent } from './radio/radio.component';
 import { SearchComponent } from './search/search.component';
 import { SelectComponent } from './select/select.component';
 import { SpacingComponent } from './spacing/spacing.component';
 import { SpacingStylesComponent } from './spacing/spacing-styles.component';
+import { TableComponent } from './table/table.component';
 import { ToggleComponent } from './toggle/toggle.component';
 import { TooltipComponent } from './tooltip/tooltip.component';
 import { TypographyComponent } from './typography/typography.component';
@@ -112,10 +113,10 @@ export const componentsList: Routes = [
     },
   },
   {
-    path: 'pagination',
-    component: PaginationComponent,
+    path: 'pagaginator',
+    component: PaginatorComponent,
     data: {
-      name: 'Pagination',
+      name: 'Paginator',
     },
   },
   {
@@ -153,6 +154,13 @@ export const componentsList: Routes = [
       name: 'Spacing SCSS',
     },
   },
+  {
+    path: 'table',
+    component: TableComponent,
+    data: {
+      name: 'Table',
+    },
+  },
   {
     path: 'toggle',
     component: ToggleComponent,