Install @swimlane/ngx-datatable using npm

@swimlane/ngx-datatable

npm install @swimlane/ngx-datatable --save

No Dependencies for this module.

Add NgxDatatableModuleinto your DataTablesModule class. data-tables.module.ts would look like this

import { NgModule } from '@angular/core';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DTBasicComponent } from "./basic/dt-basic.component";

@NgModule({
imports: [NgxDatatableModule],
declarations: [DTBasicComponent],
providers: [ ]
})
export class DataTablesModule { }
            

dt-basic.component.html would look like this

<ngx-datatable class="material" [rows]="rows" [loadingIndicator]="loadingIndicator" [columns]="columns" [columnMode]="'force'"
    [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [reorderable]="reorderable">
</ngx-datatable>
                    

Import company.json data file in DTBasicComponent class. dt-basic.component.ts would look like this

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

declare var require: any;
const data: any = require('../../shared/data/company.json');

@Component({
    selector: 'app-dt-basic',
    templateUrl: './dt-basic.component.html'
})

export class DTBasicComponent {
    rows = [];
    loadingIndicator: boolean = true;
    reorderable: boolean = true;

    columns = [
        { prop: 'name' },
        { name: 'Gender' },
        { name: 'Company' }
    ];

    constructor() {

        this.rows = data;
        setTimeout(() => { this.loadingIndicator = false; }, 1500);
    }
}
                

[
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' }
];