NgxTableWithPagination

This library was generated with Angular CLI version 18.1.0.

We are still building this library, stay tuned. For any queries Contact.

Getting started

Use the setup instructions below or go through.

Install dependencies

$ npm install --save ngx-table-with-pagination

Import styles in styles.css

@import '../node_modules/ngx-table-with-pagination/styles.css';

Set the Table's configuration in a parent component (where sorting and filtering is handled by the table component itself)

import { Component } from '@angular/core';
import { ClickEventModel, FilterModel, FilterType, TableComponent } from '@ngx-table-with-pagination';

@Component({
  selector: 'app-static-data',
  standalone: true,
  imports: [TableComponent],
  templateUrl: './static-data.component.html',
})
export class StaticDataComponent {
  title = 'ngx-table-with-pagination-demo';
  dataList!: any;

  filterConfig: FilterModel[] = [
    {
      type: FilterType.TEXT_SEARCH,
      control: 'name',
    },
    {
      type: FilterType.DROPDOWN_SEARCH,
      control: 'club',
    },
    {
      type: FilterType.SORT,
      control: 'age',
    },
    {
      type: FilterType.DROPDOWN_SEARCH,
      control: 'grade',
    },
  ];

  constructor() {
    const res = [
      {
        name: 'Alice',
        age: 18,
        grade: '12th',
        club: 'Science Olympiad',
        action: ['Delete'],
      },
      {
        name: 'Bob',
        age: 17,
        grade: '11th',
        club: 'Debate Team',
      },
      {
        name: 'Charlie',
        age: 19,
        grade: '12th',
        club: 'Art Club',
      },
      {
        name: 'Diana',
        age: 16,
        grade: '10th',
        club: 'Mathletes',
      },
      {
        name: 'Ethan',
        age: 18,
        grade: '12th',
        club: 'Robotics Club',
      },
      {
        name: 'Fiona',
        age: 17,
        grade: '11th',
        club: 'Newspaper Staff',
      },
      {
        name: 'Gabriel',
        age: 19,
        grade: '12th',
        club: 'Chess Club',
      },
      {
        name: 'Hannah',
        age: 16,
        grade: '10th',
        club: 'Student Government',
      },
      {
        name: 'Isaac',
        age: 18,
        grade: '12th',
        club: 'Band',
      },
      {
        name: 'Jessica',
        age: 17,
        grade: '11th',
        club: 'Model UN',
      },
      {
        name: 'Kelvin',
        age: 19,
        grade: '12th',
        club: 'Drama Club',
      },
      {
        name: 'Lily',
        age: 16,
        grade: '10th',
        club: 'Volunteer Club',
      },
      {
        name: 'Michael',
        age: 18,
        grade: '12th',
        club: 'Football Team',
      },
      {
        name: 'Nora',
        age: 17,
        grade: '11th',
        club: 'Yearbook Committee',
      },
      {
        name: 'Olivia',
        age: 19,
        grade: '12th',
        club: 'Environmental Club',
      },
      {
        name: 'Peter',
        age: 16,
        grade: '10th',
        club: 'Coding Club',
      },
      {
        name: 'Quinn',
        age: 18,
        grade: '12th',
        club: 'Track & Field',
      },
      {
        name: 'Ruby',
        age: 17,
        grade: '11th',
        club: 'Cheerleading Squad',
      },
      {
        name: 'Sophia',
        age: 19,
        grade: '12th',
        club: 'National Honor Society',
      },
      {
        name: 'Thomas',
        age: 16,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasa',
        age: 17,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasb',
        age: 18,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasc',
        age: 19,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasd',
        age: 20,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomase',
        age: 21,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasf',
        age: 22,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Thomasg',
        age: 23,
        grade: '10th',
        club: 'History Club',
      },
      {
        name: 'Alice',
        age: 24,
        grade: '10th',
        club: 'History Club',
      },
    ];
    this.dataList = res as any[];
  }

  handleClickEvent({ eventType, row, column }: ClickEventModel): void {
    console.log(eventType, row, column);
  }
}

<ngx-table [filterConfig]="filterConfig" (clickEvent)="handleClickEvent($event)" [dataList]="dataList" />

Set the Table's configuration in a parent component (where sorting and filtering is handled by the parent through the api calls)

import { Component } from '@angular/core';
import {
  ClickEventModel,
  FilterModel,
  FilterType,
  SearchData,
  SortDataModel,
  TableComponent,
  TableComponentModel,
  TableConfig,
} from '@ngx-table-with-pagination';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [TableComponent],
  templateUrl: './home.component.html',
})
export class HomeComponent implements TableComponentModel {
  res = [
    {
      name: 'Alice',
      age: 18,
      grade: '12th',
      club: 'Science Olympiad',
      action: ['Delete'],
    },
    {
      name: 'Bob',
      age: 17,
      grade: '11th',
      club: 'Debate Team',
    },
    {
      name: 'Charlie',
      age: 19,
      grade: '12th',
      club: 'Art Club',
    },
    {
      name: 'Diana',
      age: 16,
      grade: '10th',
      club: 'Mathletes',
    },
    {
      name: 'Ethan',
      age: 18,
      grade: '12th',
      club: 'Robotics Club',
    },
    {
      name: 'Fiona',
      age: 17,
      grade: '11th',
      club: 'Newspaper Staff',
    },
    {
      name: 'Gabriel',
      age: 19,
      grade: '12th',
      club: 'Chess Club',
    },
    {
      name: 'Hannah',
      age: 16,
      grade: '10th',
      club: 'Student Government',
    },
    {
      name: 'Isaac',
      age: 18,
      grade: '12th',
      club: 'Band',
    },
    {
      name: 'Jessica',
      age: 17,
      grade: '11th',
      club: 'Model UN',
    },
    {
      name: 'Kelvin',
      age: 19,
      grade: '12th',
      club: 'Drama Club',
    },
    {
      name: 'Lily',
      age: 16,
      grade: '10th',
      club: 'Volunteer Club',
    },
    {
      name: 'Michael',
      age: 18,
      grade: '12th',
      club: 'Football Team',
    },
    {
      name: 'Nora',
      age: 17,
      grade: '11th',
      club: 'Yearbook Committee',
    },
    {
      name: 'Olivia',
      age: 19,
      grade: '12th',
      club: 'Environmental Club',
    },
    {
      name: 'Peter',
      age: 16,
      grade: '10th',
      club: 'Coding Club',
    },
    {
      name: 'Quinn',
      age: 18,
      grade: '12th',
      club: 'Track & Field',
    },
    {
      name: 'Ruby',
      age: 17,
      grade: '11th',
      club: 'Cheerleading Squad',
    },
    {
      name: 'Sophia',
      age: 19,
      grade: '12th',
      club: 'National Honor Society',
    },
    {
      name: 'Thomas',
      age: 16,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasa',
      age: 17,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasb',
      age: 18,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasc',
      age: 19,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasd',
      age: 20,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomase',
      age: 21,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasf',
      age: 22,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Thomasg',
      age: 23,
      grade: '10th',
      club: 'History Club',
    },
    {
      name: 'Alice',
      age: 24,
      grade: '10th',
      club: 'History Club',
    },
  ];

  filterConfig: FilterModel[] = [
    {
      type: FilterType.TEXT_SEARCH,
      control: 'name',
    },
    {
      type: FilterType.DROPDOWN_SEARCH,
      control: 'club',
    },
    {
      type: FilterType.SORT,
      control: 'grade',
    },
  ];
  handleClickEvent({ eventType, row, column }: ClickEventModel): void {
    console.log('Clicked action', eventType, 'for row:', row, 'and column:', column);
  }

  handleFilterEvent(filterArray: SearchData[]): void {
    console.log('Filter applied:', filterArray);
  }

  handleSortingEvent(sortData: SortDataModel): void {
    console.log('Sorted by:', sortData.column, 'with order:', sortData.order);
  }

  handlePaginationEvent(tableConfig: TableConfig): void {
    console.log('Pagination applied:', tableConfig);
  }
}

<div id="tableComp">
  <p class="">home works!</p>

  <ngx-table
    isWithAPI
    (paginationEvent)="handlePaginationEvent($event)"
    [dataList]="res"
    (clickEvent)="handleClickEvent($event)"
    (sortEvent)="handleSortingEvent($event)"
    (filterEvent)="handleFilterEvent($event)"
    [filterConfig]="filterConfig" />
</div>

Issue Reporting

If you have found a bug, please report it in this repository's issues section.