ng2 super table

A table component with the following features:

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

Demo

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

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

A table component for angular2 projects

Installation

Install through npm:

npm install --save ng2-super-table

Then use it in your app like so:

import {Component} from '@angular/core';
import {SuperTable, ISuperTableColumn} from 'ng2-super-table';

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

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

Usage without a module bundler

<script src="node_modules/ng2-super-table/ng2-super-table.js"></script>
<script>
    // everything is exported ng2SuperTable namespace
</script>

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://andyperlitch.github.io/ng2-super-table/docs/

Development

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

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

TODO

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

License

MIT