ngx-datatable
  • Introduction
    • Features
    • Architecture
    • Installing
    • Themeing
    • Getting Started
    • Change Detection
  • API
    • Table
      • Inputs
      • Outputs
      • Methods
      • Internals
    • Column
      • Inputs
      • Modes
      • Internals
    • Row Detail
      • Inputs
      • Outputs
    • Row
      • Custom row wrapper
  • Demos
    • Online
    • Source Code
  • Contributing
    • Building
    • Guidelines
    • Community
    • Credits
  • Changelog
Powered by GitBook
On this page
  1. Introduction

Getting Started

PreviousThemeingNextChange Detection

Last updated 5 years ago

After , include NgxDatatableModule in your application module like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxDatatableModule, BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

then in your app.component.ts you define a table like:

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

@Component({
  selector: 'app',
  template: `
    <div>
      <ngx-datatable [rows]="rows" [columns]="columns"> </ngx-datatable>
    </div>
  `
})
export class AppComponent {
  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' }
  ];
  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
}

and you're off to the races!

For more examples, visit the directory in the source code!

Installing
demos