1.0.11 • Published 6 years ago

bmz-datatable-bs4 v1.0.11

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

Bamossza Datatable Bootstrap 4

Angular Datatable Bootstrap 4

alt bmz-logo

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 AttrTypeDefault
id (Required)string
classstring
groupColumnnumber (Start 1) or string
hideColumnnumber (Start 1)
fixedHeaderbooleanfalse
fixedHeaderOffsetnumber0
fixedColumnbooleanfalse
fixedColumnLeftnumber (Start 1)0
fixedColumnRightnumber (Start 1)0
searchingbooleantrue
pagingbooleantrue
orderArray<number, string> (Start 0)[0, 'asc']
orderFixedArray<number, string> (Start 0)false
scrollXbooleanfalse
scrollYstring300px
scrollCollapsebooleanfalse
rowsArray[]
columnsArray<data: string, class: string>[]

Example

Fixed Header when down ↓ scrollbar

alt bmz-logo

Row Group

alt bmz-logo

Changelog

Learn about the latest improvements.

Authors

Further information

Profiles

1.0.11

6 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.3-cd

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago