ngx-auto-table

A simple to use data table for Angular. (Wrapper around the Material Table)

Demo

Features include

• Default filtering and sorting of all data
• Uses RXJS observables
• Uses angular material theme and icons under the hood
• Row and Bulk actions, easily configurable
• Typed Data passed into the configuration
• Custom ng-templates for each column
• All configuration options can be found here.

Install

yarn add ngx-auto-table

Then add to your imports

import { AutoTableModule } from 'ngx-auto-table';

imports: [
  ...
  AutoTableModule,
  ...
]

Then add this to your tsconfig:

  "compilerOptions": {
    ...
    "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }

Usage

• Add the table to the HTML template

<ngx-auto-table 
  [config]="config" 
  [columnDefinitions]="{
    name: {},
    age: {}
  }"
>
</ngx-auto-table>

• Add config object to the typescript

config: AutoTableConfig<User>;

ngOnInit() {
  this.config = {
    data$: people$
  };
}

Sorting/Ordering

this.config = {
  data$: people$,
  // Initially sort by the "name" column
  initialSort: 'name';
  // Initially sort in Descending order
  initialSortDir: "desc";
};

Row Operations

this.config = {
  data$: people$,
  actions: [
    {
      label: 'Delete',
      icon: 'delete', // material icon set
      onClick: (p: User) => {
        // Do stuff
      }
    }
  ]
};

Bulk Row Operations

this.config = {
  data$: people$,
  actionsBulk: [
    {
      label: 'Delete',
      icon: 'delete', // material icon set
      onClick: (p: User) => {
        // Do stuff
      }
    }
  ]
};

Custom Templates

<ngx-auto-table 
  [config]="config" 
  [columnDefinitions]="{
    name: {},
    age: {},
    email: {template: emailTemplate}
  }"
>
  <ng-template #emailTemplate let-row>
    <a [href]="'mailto:'+row.email">{{ row.email }} </a>
  </ng-template>
</ngx-auto-table>

Basic Example Component

To use the table in a component, simply add it to the template and feed it an obseravble in the Typescript file.

import { Component, OnInit } from '@angular/core';
import { AutoTableConfig } from 'ngx-auto-table/dist/public_api';
import { of, Observable } from 'rxjs';

interface User {
  name: string;
  age: number;
}

const sampleUsers: User[] = [
  { name: 'Frank', age: 22 },
  { name: 'Albert', age: 34 },
  { name: 'Jasper', age: 29 },
  { name: 'Hugo', age: 23 }
];

@Component({
  selector: 'app-auto-table-test',
  template: `
    <div>
      <ngx-auto-table [config]="config" [columnDefinitions]="{
        name: {},
        age: {}
      }">
      </ngx-auto-table>
    </div>
  `
})
export class AutoTableTestComponent implements OnInit {
  config: AutoTableConfig<User>;

  ngOnInit() {
    const people$: Observable<User[]> = of(sampleUsers);
    this.config = {
      data$: people$
    };
  }
}