Bamossza Datatable Bootstrap 4

Angular Datatable Bootstrap 4

support angular 6 or above for developer.

Prerequisites

The project should be using bootstrap 4 already.

Installing

Easily a step by step will be:

Datatable Core and Jquery

npm i jquery
npm i datatables.net-bs4       
npm i datatables.net-fixedcolumns-bs4
npm i datatables.net-fixedheader-bs4
npm i datatables.net-rowgroup-bs4

Bmz Lib

npm i bmz-datatable-bs4

In the root project, Open angular.json file.

Look up Styles[] add below.

"styles": [
    "src/styles.scss",
    "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",
    "node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css",
    "node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.css",
    "node_modules/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css"
]

Look up Script[] add below.

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
    "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js",
    "node_modules/datatables.net-fixedcolumns-bs4/js/fixedColumns.bootstrap4.js",
    "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.js",
    "node_modules/datatables.net-fixedheader-bs4/js/fixedHeader.bootstrap4.js",
    "node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.js",
    "node_modules/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.js"
]

How to using

Bmz Lib is an auto create table body, following below.

Attr >> bmzDatatableBs4

const rows = [
{
    order: 1,
    orderName: 'Coffee'
},
{
    order: 2,
    orderName: 'Tea'
}];

-------------------------

const columns = [
{
    data: 'order',
    class: 'text-center'
},
{
    data: 'orderName'
}];

-------------------------

<table bmzDatatableBs4
    [fixedColumn]="true"
    [fixedColumnLeft]="2"
    [rows]="rows"
    [columns]="columns"
    id="table-fixed-columns"
    class="table table-striped table-bordered"
    style="width:100%">
    <thead>
        <tr>
            <th>Order</th>
            <th>Order Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Attribute can used

| Ng Attr | Type | Default | | :--- | :---: | :---: | | id (Required) | string | | | class | string | | | groupColumn | number (Start 1) or string | | | hideColumn | number (Start 1) | | | fixedHeader | boolean | false | | fixedHeaderOffset | number | 0 | | fixedColumn | boolean | false | | fixedColumnLeft | number (Start 1) | 0 | | fixedColumnRight | number (Start 1) | 0 | | searching | boolean | true | | paging | boolean | true | | order | Array<[number, string]> (Start 0) | [[0, 'asc']] | | orderFixed | Array<[number, string]> (Start 0) | false | | scrollX | boolean | false | | scrollY | string | 300px | | scrollCollapse | boolean | false | | rows | Array | [] | | columns | Array<[data: string, class: string]> | [] |

Example

Fixed Header when down ↓ scrollbar

Row Group

Changelog

Learn about the latest improvements.

Authors

• Panusitt Khuenkham

Further information

• Angular docs
• jQuery
• Datatables

Profiles

• Bamossza Website
• Tool for Developer
• Blog Medium
• Stack Overflow