A feature-rich table component built with angular.
Clone or download
Permalink
Failed to load latest commit information.
e2e chore(dependencies): Fix dependencies for tests to work (#22) Aug 8, 2017
libraries/super-table build(library): Move build process to ng-packagr Feb 24, 2018
src build(library): Move build process to ng-packagr Feb 24, 2018
.all-contributorsrc chore(contributors): Add contributors to README Sep 11, 2017
.angular-cli.json build(library): Move build process to ng-packagr Feb 24, 2018
.editorconfig feat(angular): Update to Angular 2.4 Jul 9, 2017
.gitignore build(library): Move build process to ng-packagr Feb 24, 2018
.nojekyll chore(build): Add strictNullChecks and fix code Oct 24, 2017
.travis.yml ci(bundlesize): Fix bundlesize path Mar 1, 2018
CHANGELOG.md chore(changelog): Remove duplicate changelog Aug 8, 2017
CONTRIBUTING.md Create CONTRIBUTING.md Jul 12, 2017
MIT-LICENSE chore: Rename license file Jul 10, 2017
README.md Update README.md Apr 18, 2018
karma.conf.js build(library): Move build process to ng-packagr Feb 24, 2018
package.json ci(bundlesize): Fix bundlesize path Mar 1, 2018
protractor-ci.conf.js build(library): Move build process to ng-packagr Feb 24, 2018
protractor.conf.js chore(dependencies): Fix dependencies for tests to work (#22) Aug 8, 2017
tsconfig.json build(library): Move build process to ng-packagr Feb 24, 2018
tsconfig.packaged.json build(library): Move build process to ng-packagr Feb 24, 2018
tslint.json build(library): Move build process to ng-packagr Feb 24, 2018
typedoc.json chore(typedoc): added initial typedoc config file Jul 12, 2017
yarn.lock build(library): Move build process to ng-packagr Feb 24, 2018

README.md

ngx super table

Gitter.im Chat Build Status npm version devDependency Status GitHub issues GitHub stars GitHub license All Contributors

A table component built in angular with the following features:

  • row virtualization
  • row sorting (stackable)
  • cell formatting (text)
  • custom cell component
  • column resizing
  • column-based filtering
    • string
    • number
    • enum
    • custom

ngx super table screenshot

Note: This project was formerly named ng2-super-table.

Demo

https://andyperlitch.github.io/ngx-super-table/demo/

Table of contents

About

A table component for Angular projects

Installation

  • Install using npm or yarn

NB: Please, keep in mind that the master branch may contain code not published to npmjs.org yet!

npm install --save ngx-super-table
# yarn add ngx-super-table
  • Add SuperTableModule to AppModule
import { SuperTableModule } from 'ngx-super-table';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, SuperTableModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Then use it in your app like so:
import { Component } from '@angular/core';
import { SuperTable, SuperTableColumn } from 'ngx-super-table';

@Component({
  selector: 'demo-app',
  template: `<super-table
    [rows]="rows"
    [columns]="columns"
    [options]="options">
  </super-table>`
})
export class DemoApp {
  rows = [
    { name: 'thing1', age: 7 },
    { name: 'thingx', age: 7 },
    { name: 'cat', age: 10 },
    { name: 'fish', age: 1 },
  ];
  columns: SuperTableColumn[] = [
    {
      id: 'name',
      key: 'name',
      label: 'Name'
    },
    {
      id: 'age',
      key: 'age',
      label: 'Age'
    }
  ];
  options = {};
}

Note: The I prefix was removed from interfaces

Please view the demo source for a much more feature-complete example.

Usage without a module bundler

Use node_modules/ngx-super-table/index.umd.js

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here:

https://andyperlitch.github.io/ngx-super-table/doc/

Development

This project was generated with Angular CLI version 1.0.0-rc.2.

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

To build the ngx-super-table package run yarn build:lib To compile the test app with the built version of ngx-super-table run: yarn start --app 1

Then navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. You will have to run yarn build:lib anytime you make changes to the library in order to see those changes in the test app.

Code scaffolding

Run ng g c component-name --app 2 to generate a new component for ngx-super-table.

You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Release

  • Bump the version in src/lib/package.json (once the module hits 1.0 this will become automatic)
npm run release

TODO

  • row virtualization
  • column resizing
  • row sorting (stacked, via columns)
  • cell formatting (text)
  • custom cell component
  • column-based filtering
    • string
    • number
    • enum
    • custom
    • formatted string
  • hiding/showing columns

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):


Andy Perlitch

πŸ’¬ πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸ‘€

Chris McKnight

πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸš‡ πŸ‘€ πŸ”§

This project follows the all-contributors specification. Contributions of any kind welcome!