@foureyez/ng-data-table v0.0.8

ng-data-table

This angular library provides sorting, filtering..(adding more) capabilities to normal table. Built using Angular 7 and Bootstrap 4.

Github Repo

• The demo files are located in /src/app folder.
• Data-Table library source is located in projects/data-table.

Usage

To use this library in your project just install the dependency by running

npm i @foureyez/ng-data-table.

Install all dependencies :

• npm i bootstrap
• npm i @fortawesome/angular-fontawesome
• npm i @fortawesome/fontawesome-svg-core
• npm i @fortawesome/free-solid-svg-icons

Also add this import to your global styles css file (styles.css) for bootstrap if you haven't already.

@import "~bootstrap/dist/css/bootstrap.css";

Basic Table

• In app.module.ts

import { DataTableModule } from '@foureyez/ng-data-table';
...
...
...
@NgModule({
  ...
  imports: [
    ...
    DataTableModule,
    ...
  ],
})

• In .html file

<data-table [columns]="columns" [rows]="rows"></data-table>

Defining rows and columns in component

• rows can be any valid JSON array.
• columns can be defined inside the component.
• data-table takes columns as a array of Column type.

• E.g.

  import { Column } from '@foureyez/ng-data-table';
  ...
  ...
  columns: Column[];
  rows = [{
      id: '1',
      name: 'Abhijeet',
      age: '23',
      address: 'Hyderabad'
  }, {
      id: '2',
      name: 'Anmol',
      age: '43',
      address: 'Hyderabad'
  },
  ...
  ...
  ...];
  
  constructor() {
      this.columns = new Array<Column>();
                          //id, title, sortable, filterable;
      this.columns.push(new Column('id', 'ID', false, false));
      this.columns.push(new Column('name', 'Name', true, true));
      this.columns.push(new Column('age', 'Age', true, true));
      this.columns.push(new Column('address', 'Address', true, true));
  }

Column Attributes

• Will be adding more attributes to Column.

Table Attributes

rows and columns objects can be defined in the angular component. E.g. here

Contribute

Development server

To run this project locally :

• Go to root of the project.
• Install angular-cli globally npm install -g @angular/cli
• Run npm install to install all dependencies.
• Run ng build @foureyez/ng-data-table to build the library locally in your machine. dist folder will be generated at the root of the project.
• Run ng serve to build the demo app and launch it in a dev server. Navigate to http://localhost:4200/ to access the demo.