Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andyperlitch/ngx-super-table

A feature-rich table component built with angular.
https://github.com/andyperlitch/ngx-super-table

Last synced: about 1 month ago
JSON representation

A feature-rich table component built with angular.

Host: GitHub
URL: https://github.com/andyperlitch/ngx-super-table
Owner: andyperlitch
License: mit
Created: 2016-07-21T17:40:57.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-11-27T23:46:06.000Z (about 1 year ago)
Last Synced: 2024-04-14T00:45:17.932Z (8 months ago)
Language: TypeScript
Homepage:
Size: 2.12 MB
Stars: 116
Watchers: 9
Forks: 27
Open Issues: 14
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: MIT-LICENSE

Awesome Lists containing this project

awesome-angular - ngx-super-table - A feature-rich table component built with angular. (Uncategorized / Uncategorized)

README

        # ngx super table

[![Gitter.im Chat](https://img.shields.io/badge/gitter-join%20chat-green.svg)](https://gitter.im/ngx-super-table)

[![Build Status](https://travis-ci.org/andyperlitch/ngx-super-table.svg?branch=master)](https://travis-ci.org/andyperlitch/ngx-super-table)

[![npm version](https://badge.fury.io/js/ngx-super-table.svg)](http://badge.fury.io/js/ngx-super-table)

[![devDependency Status](https://david-dm.org/andyperlitch/ngx-super-table/dev-status.svg)](https://david-dm.org/andyperlitch/ngx-super-table#info=devDependencies)

[![GitHub issues](https://img.shields.io/github/issues/andyperlitch/ngx-super-table.svg)](https://github.com/andyperlitch/ngx-super-table/issues)

[![GitHub stars](https://img.shields.io/github/stars/andyperlitch/ngx-super-table.svg)](https://github.com/andyperlitch/ngx-super-table/stargazers)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/andyperlitch/ngx-super-table/master/MIT-LICENSE)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)

A table component built in [angular](https://angular.io) 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](http://i.imgur.com/ERUHmza.png)

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

## Demo

[https://andyperlitch.github.io/ngx-super-table/demo/](https://andyperlitch.github.io/ngx-super-table/demo/)

## Table of contents

- [About](#about)

- [Installation](#installation)

- [Documentation](#documentation)

- [Development](#development)

- [License](#license)

## 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!

```bash

npm install --save ngx-super-table

# yarn add ngx-super-table

```

* Add `SuperTableModule` to `AppModule`

```typescript

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:

```typescript

import { Component } from '@angular/core';

import { SuperTable, SuperTableColumn } from 'ngx-super-table';

@Component({

  selector: 'demo-app',

  template: `

  `

})

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](https://github.com/andyperlitch/ngx-super-table/pull/30/commits/e93f0e3dfd7a8f6f9bd8b29fa75987ce50b59616)

Please view the [demo source](https://github.com/andyperlitch/ngx-super-table/blob/master/src/app/modules/home/demo.component.ts) 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/](https://andyperlitch.github.io/ngx-super-table/doc/)

## Development

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.2.

### Prepare your environment

* Install [Node.js](http://nodejs.org/) 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](https://karma-runner.github.io).

### Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

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](https://github.com/angular/angular-cli/blob/master/README.md).

## Release

* Bump the version in `src/lib/package.json` (once the module hits 1.0 this will become automatic)

```bash

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

  - [ ] formatted string

- [ ] hiding/showing columns

## License

MIT

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

| [
_{Andy Perlitch}](https://github.com/andyperlitch)
[💬](#question-andyperlitch "Answering Questions") [💻](https://github.com/andyperlitch/ngx-super-table/commits?author=andyperlitch "Code") [🎨](#design-andyperlitch "Design") [📖](https://github.com/andyperlitch/ngx-super-table/commits?author=andyperlitch "Documentation") [💡](#example-andyperlitch "Examples") [🤔](#ideas-andyperlitch "Ideas, Planning, & Feedback") [👀](#review-andyperlitch "Reviewed Pull Requests") | [
_{Chris McKnight}](https://github.com/cmckni3)
[💻](https://github.com/andyperlitch/ngx-super-table/commits?author=cmckni3 "Code") [🎨](#design-cmckni3 "Design") [📖](https://github.com/andyperlitch/ngx-super-table/commits?author=cmckni3 "Documentation") [💡](#example-cmckni3 "Examples") [🤔](#ideas-cmckni3 "Ideas, Planning, & Feedback") [🚇](#infra-cmckni3 "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-cmckni3 "Reviewed Pull Requests") [🔧](#tool-cmckni3 "Tools") |

| :---: | :---: |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!