angular-tz-datatable-core v0.0.1-n

AngularTzDatatableCore

AngularTzDatatableCore is a powerful and flexible Angular library designed to streamline the creation and management of data tables in your Angular applications. It offers features such as searching, sorting, pagination, and customizable column visibility, making it an essential tool for developers looking to build interactive data-driven applications.

It is a generic, strictly-typed Angular library designed for flexible and type-safe datatable management.

Use AngularTzDatatableCore to build beautiful, customizable Angular datatables effortlessly.

Note that this library will support API data fetching in the future.

Live Demo

Test and interact with the AngularTzDatatableCore library directly in your browser! Try it out on Stackblitz (Demo) for a hands-on demonstration of the library's capabilities.

[

Installation

To install AngularTzDatatableCore, run the following command in your Angular project:

npm install angular-tz-datatable-core

Basic Example

Here’s a simple example of how to use the AngularTzDatatableCore in a component.

1. Sample Columns Configuration

// test-data/datatype.ts

// Type of data to be displayed in the table
export type User = {
    id: number;
    name: string;
    age: number | null;
};

2. Sample Data

// test-data/data.ts
import { Columns } from "angular-tz-datatable-core";
import { User } from './data';

const columns: Columns = {
    id: {
        title: 'ID',
        isSearchableByDefault: false,
        isSortedByDefault: true,
    },
    name: {
        title: 'Name',
    },
    age: {
        title: 'Age',
        isSortableByDefault: false,
        defaultContent: '-',
    },
};

export const data: Array<User> = [
    { id: 2, name: 'Jane Smith', age: 34 },
    { id: 5, name: 'Chris White', age: 30 },
    // ... other user data
]

3. Create datatable instance

import { TzDatatable } from 'angular-tz-datatable-core';
import { data, columns } from '../test-data/data'; // Sample data and columns
import { User } from '../test-data/datatype'; // types of table data

@Component({
    // Your component configuration
})
export class DatatableTestComponent
{
    protected readonly dt: TzDatatable<User> = new TzDatatable();
    
    
    constructor()
    {
        this.dt.initCols(columns); // Must be called before setData
        this.dt.initData(data);
    }
}

4. Use in HTML template

<table>
   <tr>
      <th
         *ngFor="let col of dt.getColsAsArray(); trackBy: col.key"
         *ngIf="col.isVisible"
      >
         {{ col.title }}
      </th>
   </tr>

   <tbody>
      <tr
         *ngFor="let row of dt.getPageDataViewAsAny(); trackBy: row._dataUuid_"
      >
         <td
            *ngFor="let col of dt.getColsAsArray(); trackBy: col.key"
            *ngIf="col.isVisible"
         >
            {{ row[col.key] }}
         </td>
      </tr>
   </tbody>

</table>

API Reference

Suppose T is the type of the data you want to display in the table (here T will be User). In that case, you can use the following methods to interact with the AngularTzDatatableCore service:

import { TzDatatable } from 'angular-tz-datatable-core';

export class YourComponent
{
    protected readonly dt: TzDatatable<User> = new TzDatatable();
}

For the following methods, dt is the instance of the TzDatatable service.

Events

You can listen to the following events using the addEventListener method:

dt.addEventListener("RowClick", (row) =>
{
    console.log(row);
});

Same events can be removed using the removeEventListener method:

dt.removeEventListener("RowClick", callback);

Extended Properties and Methods

Column Configuration

export type Columns = {
    [key: string]: {
        title: string,
        colClasses?: string,
        
        isVisibleByDefault?: boolean,
        isSearchableByDefault?: boolean,
        isSortableByDefault?: boolean,
        isSortedByDefault?: boolean,
        
        render?: (row: TExtended<T>, col: string, element: HTMLElement) => HTMLElement,
        defaultContent?: string,
    };
};

Column Configuration Extended

export type StrictColumn = {
    key: string,
    title: string,
    colClasses: string,
    
    isVisibleByDefault: boolean,
    isSearchableByDefault: boolean,
    isSortableByDefault: boolean,
    isSortedByDefault: boolean,
    
    isVisible: boolean,
    isSearched: boolean,
    isSorted: boolean,
    
    render: (row: TExtended<T>, col: string, meta: element) => HTMLElement,
    defaultContent: string,
};

Data Type Extended

export type TExtended = T & {
    _dataUuid_: number;
    _selected_: boolean;
};

Issues and Feature - Done

• 0.0.1-g - Fixed the issue - on call to setRowsPerPage(), page nb is not automatically updated to be within the new page range.
• 0.0.1-k - Exported the all types and interfaces to be used in the project.
• 0.0.1-l - Add processed search query and chunks to the AfterSearch event callback.
• 0.0.1-n - Fixed the issue - both search and normal view don't have own total rows count.

Upcoming Features

• API data fetching support
• Customizable row actions
• Customizable row selection

Contributors

• TIPUzee: GitHub / LinkedIn