cognitable v0.1.4

Cognitable - Angular Datatable

This project was generated with Angular CLI version 18.2.3.

Recommended Platforms to Use

1. Angular >= 18

Install Cognitable using NPM

npm install cognitable

Start using Cognitable

HTML

<cognitable #cognitable
            [tableHeaders]="headers"
            [paginationEnabled]="true"
            (cellContentClicked)="clicked($event)"
></cognitable>

Component Class

Get Reference of the Table

Any further operations will be done using this

@ViewChild('cognitable') cognitable: CognitableComponent | undefined;

Declaring Headers

This can be directly given in the HTML attribute

headers: TableHeader[] = [
    {
        title: 'Supplier Name',
        field: 'supplierName',
        sort: {
            enabled: true
        },
        styles: {
            cellStyles: {
                color: '#1E40AE',
                cursor: 'pointer'
            }
        }
    },
    {
        title: 'Supplier Type',
        field: 'supplierType'
    },
    {
        title: 'Address',
        field: 'address'
    },
    {
        title: 'Status',
        field: 'status',
        renderer: {
            component: StatusDropdownComponent
        }
    }
];

Set Data to the table

this.cognitable?.setTableData(data);

Search over the whole data in the table

this.cognitable?.filter(this.searchText);

Render Custom Component in Cells

Implement CellRenderer in the custom component

export class StatusDropdownComponent implements CellRenderer {
    // Your logic
}

And the in headers

headers: TableHeader[] = [
    // Other Headers (if any)
    {
        title: 'Status',
        field: 'status',
        renderer: {
            component: StatusDropdownComponent
        }
    }
    // Other Headers (if any)
];

REMEMBER

This library is on its birth stage, we will be adding more updates very soon on the go.

You are welcomed to contribute more into it on https://github.com/cognitable/cognitable