Installation

Getting Started Installation

Create a new angular project:

ng new test-ngx-panemu-table
cd test-ngx-panemu-table

Install ngx-panemu-table with this command.

npm i ngx-panemu-table

Open the main style file. Usually src/styles.scss or src/styles.css. Add these lines:

styles.scss

@import '../node_modules/ngx-panemu-table/styles/indigo-pink.css';
@import '../node_modules/ngx-panemu-table/styles/main.css';

If your project uses Angular Material, you don't need to import indigo-pink.css

Check package.json if there is no @angular/animations, install it with this command:

npm i @angular/animations

Ensure provideAnimations() is in app.config.ts provider array. If it's not there, please add it.

app.config.ts

import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideAnimations()
    ...
  ]
};

Delete the content of app.component.ts and paste the following code.

app.component.ts

import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PanemuPaginationComponent, PanemuQueryComponent, PanemuSettingComponent, PanemuTableComponent, PanemuTableController, PanemuTableDataSource, PanemuTableService } from 'ngx-panemu-table';

interface People {
  id: number
  name: string
  email?: string
  gender: string
  enrolled: string
  country: string | null
  amount: number
  last_login: string
  verified: boolean
}

const DATA: People[] = [
  {"id":1,"name":"Abagail Kingscote","email":"[email protected]","gender":"F","enrolled":"2023-04-26","country":"Philippines","amount":9339.72,"last_login":"2024-07-03 09:56:29","verified":true},
  {"id":2,"name":"Nicolina Coit","email":"[email protected]","gender":"M","enrolled":"2023-11-01","country":"Kazakhstan","amount":3744.95,"last_login":"2024-04-29 12:48:59","verified":false},
  {"id":3,"name":"Sarene Greim","email":"[email protected]","gender":"M","enrolled":"2023-01-03","country": null,"amount":4397.68,"last_login":"2024-06-03 13:14:23","verified":true},
  {"id":4,"name":"Blair Millbank","gender":"F","enrolled":"2023-07-01","country":"Philippines","amount":3334.58,"last_login":"2024-06-18 12:06:58","verified":false},
  {"id":5,"name":"Kliment Sprowle","email":"[email protected]","gender":"M","enrolled":"2023-12-25","country":"Indonesia","amount":6459.93,"last_login":"2024-04-24 03:46:26","verified":true}
]

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, PanemuTableComponent, PanemuPaginationComponent, PanemuQueryComponent, PanemuSettingComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
 /**
  * We can instantiate PanemuTableService in constructor 
  * if tsconfig.json `useDefineForClassFields` is set to false
  */
  pts = inject(PanemuTableService);

  columns = this.pts.buildColumns<People>([
    { field: 'id' },
    { field: 'name' },
    { field: 'email' },
    { field: 'gender' },
    { field: 'country' },
    { field: 'amount' },
    { field: 'enrolled' },
    { field: 'last_login' },
    { field: 'verified'}
  ]);

  controller = PanemuTableController.create(this.columns, new PanemuTableDataSource(DATA));
  
  constructor() { }
  
  ngOnInit() {
    this.controller.reloadData();
  }
}

Delete the content of app.component.html replace it with this template:

app.component.html

<div style="height: 90vh; display: flex; flex-direction: column;">
  <div style="display: flex; justify-content: space-between;">
    <panemu-query [controller]="controller" />
    <div style="display: flex; gap: 4px;">
      <panemu-pagination [controller]="controller" />
      <panemu-setting [controller]="controller"/>
    </div>
  </div>
  <div style="flex-grow: 1; margin-top: 8px;">
    <panemu-table [controller]="controller" />
  </div>
</div>

Run the application:

npm start

Go ahead open a browser and access http://localhost:4200.

Please report any problem to our repository .

Thank you for using NgxPanemuTable. We'd appreciate a star in github .