aps-table

ApsTable Overview

ApsTable is a component library designed for Angular, delivering a flexible table component capable of showcasing data in a structured table layout.

Getting Started

ApsTable is compatible with Angular Material and Tailwind CSS.

Installation Process

To begin, install the component using either npm or yarn:

With npm:

npm install --save aps-table
npm install --save aps-fullname
npm install --save aps-datepicker

Or with yarn:

yarn add aps-table
yarn add aps-fullname
yarn add aps-datepicker

How to Set Up

Initially, incorporate the library into your project:

import { ApsTableModule } from 'aps-table';
import { ApsFullnameModule } from 'aps-fullname';
import { ApsDatepickerModule } from 'aps-datepicker';

@NgModule({
  imports: [
    // other imports
    
    BrowserAnimationsModule,
    ApsTableModule,
    ApsFullnameModule,
    ApsDatepickerModule
    // other imports
  ],
})

Subsequently, configure the settings in your TypeScript file:

settings = {
    mode: "inline",
    selectMode: "single",
    useTransition: true,
    isAllDataFetch: false,
    sortDefault: null,
    actions: {
        columnTitle: "Actions",
        add: true,
        edit: true,
        delete: true,
        custom: [],
        addButton: {},
        editButton: {},
        deleteButton: {}
    },
    attr: {
        class: "my-table"
    },
    noDataMessage: "No data available",
    primaryKey: "id",
    columns: [],
    displayedColumns: ["column1", "column2", "column3"],
    pager: {
        display: true,
        pageIndex: 0,
        itemsPerPage: 10,
        pageSizeOptions: [10, 20, 50, 100],
    }
};

Lastly, include the component in your template:

// ...

@Component({
  template: `
    <aps-table [source]="datasources" [totalItems]="totalItems" [settings]="settings" (edit)="onEdit($event)" (add)="onAdd()"
      (delete)="onDelete($event)" (loadData)="onLoadAll()" #aps_table>
    </aps-table>
  `
})

// ...

@ViewChild('aps_table') aps_table: ApsTableComponent = {} as ApsTableComponent;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    setTimeout(() => this.onLoadAll());
  }

  // Function implementations...

   datasources = [
    {
      "message": "Hello World",
      "creationDate": "2023-01-01",
      "lastName": "Smith",
      "firstName": "John"
    },
    {
      "message": "Good Morning",
      "creationDate": "2023-02-12",
      "lastName": "Doe",
      "firstName": "Jane"
    },
    {
      "message": "Happy Coding",
      "creationDate": "2023-03-23",
      "lastName": "Johnson",
      "firstName": "Alice"
    },
    {
      "message": "Have a nice day",
      "creationDate": "2023-04-04",
      "lastName": "Brown",
      "firstName": "Bob"
    },
    {
      "message": "Stay Safe",
      "creationDate": "2023-05-15",
      "lastName": "Williams",
      "firstName": "Charlie"
    },
    {
      "message": "Keep Going",
      "creationDate": "2023-06-26",
      "lastName": "Miller",
      "firstName": "David"
    },
    {
      "message": "You're doing great",
      "creationDate": "2023-07-07",
      "lastName": "Davis",
      "firstName": "Emily"
    },
    {
      "message": "Believe in yourself",
      "creationDate": "2023-08-18",
      "lastName": "Garcia",
      "firstName": "Frank"
    },
    {
      "message": "Make it happen",
      "creationDate": "2023-09-29",
      "lastName": "Martinez",
      "firstName": "Grace"
    },
    {
      "message": "You're capable",
      "creationDate": "2023-10-10",
      "lastName": "Rodriguez",
      "firstName": "Harry"
    },
    {
      "message": "Stay Focused",
      "creationDate": "2023-11-21",
      "lastName": "Wilson",
      "firstName": "Irene"
    },
    {
      "message": "Just Breathe",
      "creationDate": "2023-12-02",
      "lastName": "Taylor",
      "firstName": "Jack"
    },
    {
      "message": "You are strong",
      "creationDate": "2024-01-13",
      "lastName": "Moore",
      "firstName": "Kathy"
    },
    {
      "message": "Keep pushing",
      "creationDate": "2024-02-24",
      "lastName": "Anderson",
      "firstName": "Larry"
    },
    {
      "message": "Never give up",
      "creationDate": "2024-03-06",
      "lastName": "Thomas",
      "firstName": "Molly"
    },
    {
      "message": "You can do it",
      "creationDate": "2024-04-17",
      "lastName": "Jackson",
      "firstName": "Nathan"
    },
    {
      "message": "Stay Positive",
      "creationDate": "2024-05-28",
      "lastName": "White",
      "firstName": "Olivia"
    },
    {
      "message": "Believe in your dreams",
      "creationDate": "2024-07-09",
      "lastName": "Harris",
      "firstName": "Peter"
    },
    {
      "message": "You are capable",
      "creationDate": "2024-08-20",
      "lastName": "Martin",
      "firstName": "Quincy"
    },
    {
      "message": "Keep going",
      "creationDate": "2024-09-01",
      "lastName": "Thompson",
      "firstName": "Rachel"
    }
  ];

With these steps completed, your Angular application is ready to display data using the ApsTable component.