plbls-table

plbls-table is an Angular component library for creating customizable, sortable, and paginated tables with search functionality. This library simplifies the process of displaying tabular data and supports column sorting, pagination, context menus, and applying pipes to data.

Installation

To install the library, run:

npm install plbls-table

Usage

Import the Module

First, import the PlblsTable in your Angular module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PlblsTable } from 'plbls-table';

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

Using the plbls-table Component

In your component's HTML, you can use the plbls-table as follows:

<plbls-table 
  [columns]="columns"
  [data]="data"
  [itemsPerPageOptions]="[10, 25, 50]"
  [showSearch]="true"
  [showPagination]="true"
  [showItemsPerPage]="true">
</plbls-table>

Input Properties

| Property | Type | Description | |----------------------|---------------|----------------------------------------------------------------| | columns | Array | Defines the columns of the table. Each column should have a header and a key. | | data | Array | The data to be displayed in the table, should match the structure defined by the columns. | | itemsPerPageOptions | Array | List of possible options for items per page (e.g., [10, 25, 50]). | | showSearch | boolean | Enables the search input field. | | showPagination | boolean | Displays pagination controls. | | showItemsPerPage | boolean | Allows users to select how many items are shown per page. |

Output Events

| Event | Description | |--------------------|------------------------------------------------------------------------------| | itemClicked | Emits when an item in the table is clicked. The event returns the clicked item. | | sortChanged | Emits when the sort order of the table is changed. |

Example

export class MyComponent {
  columns = [
    { header: 'Name', key: 'name' },
    { header: 'Age', key: 'age' },
    { header: 'Email', key: 'email' }
  ];

  data = [
    { name: 'John Doe', age: 25, email: '[email protected]' },
    { name: 'Jane Doe', age: 28, email: '[email protected]' }
  ];
}

In this example:

• The table will have three columns: Name, Age, and Email.
• The data will be displayed in the table with pagination and sorting enabled.

Advanced Features

Sorting

By clicking on any column header, the table will sort the data based on the column's key. The current sort order is indicated by an arrow (▲ or ▼) next to the header.

Search

If the showSearch property is set to true, a search box will be displayed above the table, allowing users to filter the data.

Pagination

You can enable pagination with the showPagination property. Use the itemsPerPageOptions property to define how many items are shown per page.

Context Menu

A context menu is displayed on right-click, allowing users to copy the cell value.

Custom Pipes

You can apply custom pipes to your data by specifying a pipe and pipeArgs for each column.

columns = [
  { header: 'Price', key: 'price', pipe: 'currency', pipeArgs: ['USD', 'symbol'] }
];

License

MIT