Angular Datatable Bootstrap 4
npm install bmz-datatable-bs4
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"
]
`
$3
`
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'
}];
-------------------------
[fixedColumn]="true"
[fixedColumnLeft]="2"
[rows]="rows"
[columns]="columns"
id="table-fixed-columns"
class="table table-striped table-bordered"
style="width:100%">
Order
Order Name
``