first commit
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
|
||||
:host ::ng-deep .table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
:host ::ng-deep .table-hover tbody tr:hover, .table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: rgba(245,247,250,.5) !important;
|
||||
}
|
||||
:host ::ng-deep .px-1 {
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
@@ -0,0 +1,516 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-sm-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Tables start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Using the most basic table markup, here’s how <code>.table</code>-based tables
|
||||
look in Bootstrap. You can use any example of below table for your table and it can be use with
|
||||
any type of ng-bootstrap tables. </p>
|
||||
|
||||
<p><span class="text-bold-600">Example 1:</span> Table with outer spacing</p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class ="px-1"><span class="text-bold-600">Example 2:</span> Minimal Table with no outer spacing.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------Basic table end--->
|
||||
<!-----inverse table start-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'inverseTable'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Inverse table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can also invert the colors—with light text on dark backgrounds—with
|
||||
<code>.table-inverse.</code></p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Inverse table with info background</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can also invert the colors—with light text on dark backgrounds—with <code>.bg-info </code>,
|
||||
<code> .bg-success </code>, <code>.bg-warning</code> and <code>.bg-danger</code> classes.
|
||||
|
||||
<br><br>To set the light background color use<code> .bg-[color] </code>class where [color] is the value of your
|
||||
selected color from modern color palette. So for teal color background class will be .bg-teal. Refer
|
||||
HTML markup line no 1. Background color class is a optional if you don't it will take white background
|
||||
default.
|
||||
|
||||
<br><br>To set the selected background color lighten use <code>.bg-lighten-[*]</code> class where [*] is the value
|
||||
between '1-5' of your selected lighten color from modern color palette. So for color lighten 4
|
||||
background class will be <code>.bg-lighten-4.</code> Refer HTML markup line no 1. Background lighten color class is a
|
||||
optional if you don't it will take white background default.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped bg-info mb-0 white ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table head options start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table head options</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Similar to default and inverse tables, use one of two modifier classes <code
|
||||
class="highlighter-rouge">.thead-default</code>
|
||||
or <code class="highlighter-rouge">.thead-inverse</code> to make <code
|
||||
class="highlighter-rouge"><thead></code>s
|
||||
appear light or dark gray.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead class= "thead-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table head options end -->
|
||||
|
||||
<!-- Table head options with primary background start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table head options with primary background</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use background classes <code class="highlighter-rouge">bg-*</code> to make custom
|
||||
<code class="highlighter-rouge">thead</code>
|
||||
background. You can also use Modern Admin color palette classes for background.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead class="bg-primary white">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="lighten-4">
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead class="bg-teal bg-lighten-4">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table head options with primary background end -->
|
||||
|
||||
<!-- Striped rows start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Striped rows</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Use <code class="highlighter-rouge">.table-striped</code> to add
|
||||
zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.
|
||||
This styling doesn't work in IE8 and below as <code>:nth-child</code> CSS selector
|
||||
isn't
|
||||
supported.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Striped rows end -->
|
||||
|
||||
<!-- Striped rows with inverse table start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card table-bottom-space">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Striped rows with inverse table</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Use <code>.table-inverse</code> with <code>.table-striped</code> to
|
||||
add
|
||||
zebra-striping to any inverse table row within the <code><tbody></code>. This
|
||||
styling
|
||||
doesn't work in IE8 and below as <code>:nth-child</code> CSS selector isn't
|
||||
supported.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse table-striped mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bordered table start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card table-bottom-space">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bordered table</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Add<code>.table-bordered</code> for borders on all sides of the table and cells.
|
||||
</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bordered striped table start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card table-bottom-space">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bordered striped</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Use <code>.table-striped</code> with <code>.table-bordered</code> to add
|
||||
zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bordered Table Inverse table start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card table-bottom-space">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bordered Table Inverse</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Use <code>.table-inverse</code> with <code>.table-bordered</code> to add
|
||||
zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-inverse mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hoverable rows table start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card table-bottom-space">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Hoverable rows</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows
|
||||
within a <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual classes start -->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BasictableComponent } from './basictable.component';
|
||||
|
||||
describe('BasictableComponent', () => {
|
||||
let component: BasictableComponent;
|
||||
let fixture: ComponentFixture<BasictableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BasictableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BasictableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basictable',
|
||||
templateUrl: './basictable.component.html',
|
||||
styleUrls: ['./basictable.component.css']
|
||||
})
|
||||
export class BasictableComponent implements OnInit {
|
||||
BasictableData: any;
|
||||
countries: any;
|
||||
// public COUNTRIES = this.BasictableData.rows;
|
||||
// countries = this.COUNTRIES;
|
||||
@BlockUI('basicTables') blockUIBasicTables: NgBlockUI;
|
||||
@BlockUI('inverseTable') blockUIInverseTable: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
loadingIndicator: true;
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: 'Basic Tables',
|
||||
links: [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Basic Tables',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getBasicTableData().subscribe(Response => {
|
||||
this.BasictableData = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.countries = this.BasictableData.rows;
|
||||
}
|
||||
reloadBasicTables() {
|
||||
this.blockUIBasicTables.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicTables.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadInverseTable() {
|
||||
this.blockUIInverseTable.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIInverseTable.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { BoostraptablesModule } from './boostraptables.module';
|
||||
|
||||
describe('BoostraptablesModule', () => {
|
||||
let boostraptablesModule: BoostraptablesModule;
|
||||
|
||||
beforeEach(() => {
|
||||
boostraptablesModule = new BoostraptablesModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(boostraptablesModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BasictableComponent } from './basictable/basictable.component';
|
||||
import { TableborderComponent } from './tableborder/tableborder.component';
|
||||
import { TablesizingComponent } from './tablesizing/tablesizing.component';
|
||||
import { TablestylingComponent } from './tablestyling/tablestyling.component';
|
||||
import { TablecomponentsComponent } from './tablecomponents/tablecomponents.component';
|
||||
import { NgxboostraptablesComponent, NgbSortable} from './ngxboostraptables/ngxboostraptables.component';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
|
||||
import { FormsModule , ReactiveFormsModule } from '@angular/forms';
|
||||
import { UiSwitchModule } from 'ngx-ui-switch';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { NgbdSortableHeader } from '../../../_directives/sortable.directive';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
NgxDatatableModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
CommonModule,
|
||||
UiSwitchModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
NgMultiSelectDropDownModule.forRoot(),
|
||||
NgbModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'basictable',
|
||||
component: BasictableComponent
|
||||
},
|
||||
{
|
||||
path: 'tableborder',
|
||||
component: TableborderComponent
|
||||
},
|
||||
{
|
||||
path: 'tablesizing',
|
||||
component: TablesizingComponent
|
||||
},
|
||||
{
|
||||
path: 'tablestyling',
|
||||
component: TablestylingComponent
|
||||
},
|
||||
{
|
||||
path: 'tablecomponents',
|
||||
component: TablecomponentsComponent
|
||||
},
|
||||
{
|
||||
path: 'ngxboostraptables',
|
||||
component: NgxboostraptablesComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
declarations: [BasictableComponent, TableborderComponent, TablesizingComponent, TablestylingComponent, TablecomponentsComponent,
|
||||
NgxboostraptablesComponent, NgbSortable, NgbdSortableHeader],
|
||||
})
|
||||
|
||||
export class BoostraptablesModule { }
|
||||
@@ -0,0 +1,68 @@
|
||||
export interface Country {
|
||||
id: number;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
username: string;
|
||||
}
|
||||
export const COUNTRIES: Country[] = [
|
||||
{
|
||||
'id': 1,
|
||||
'firstname': 'Mark',
|
||||
'lastname': 'Otto',
|
||||
'username': '@mdo'
|
||||
},
|
||||
{
|
||||
'id': 2,
|
||||
'firstname': 'Jacob',
|
||||
'lastname': 'Thornton',
|
||||
'username': '@fat'
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'firstname': 'Larry',
|
||||
'lastname': 'the Bird',
|
||||
'username': '@twitter'
|
||||
},
|
||||
{
|
||||
'id': 4,
|
||||
'firstname': 'Fensy',
|
||||
'lastname': 'loir',
|
||||
'username': '@kort'
|
||||
},
|
||||
{
|
||||
'id': 5,
|
||||
'firstname': 'Piter',
|
||||
'lastname': 'Pan',
|
||||
'username': '@google'
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'firstname': 'July',
|
||||
'lastname': 'Dooley',
|
||||
'username': '@bat'
|
||||
},
|
||||
{
|
||||
'id': 7,
|
||||
'firstname': 'Jon',
|
||||
'lastname': 'Snow',
|
||||
'username': '@hest'
|
||||
},
|
||||
{
|
||||
'id': 8,
|
||||
'firstname': 'Alexandra',
|
||||
'lastname': 'Blake',
|
||||
'username': '@foe'
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'firstname': 'Alonso',
|
||||
'lastname': 'Lanier',
|
||||
'username': '@phe'
|
||||
},
|
||||
{
|
||||
'id': 10,
|
||||
'firstname': 'Claire',
|
||||
'lastname': 'Burgess',
|
||||
'username': '@yaker'
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,19 @@
|
||||
th[sortable].asc:before {
|
||||
content: '\2191';
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
float: left;
|
||||
margin-left: -22px;
|
||||
}
|
||||
th[sortable].desc:before {
|
||||
content: '\2193';
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
float: left;
|
||||
margin-left: -22px;
|
||||
}
|
||||
.table {
|
||||
--bs-table-striped-bg: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-sm-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Tables start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Using the most basic table markup, here’s how <code>.table</code>-based tables
|
||||
look in Bootstrap. You can use any example of below table for your table and it can be use with
|
||||
any type of ng-bootstrap tables. </p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of PERSON; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ element.firstname }}</td>
|
||||
<td>{{ element.lastname }}</td>
|
||||
<td>{{ element.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic Tables start -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Pagination table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Using the most basic table markup, here’s how <code>.table</code>-based tables
|
||||
look in Bootstrap. You can bind our <code>NgbPagination</code> component with slicing the data list.</p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of PaginationData">
|
||||
<th scope="row">{{ element.id }}</th>
|
||||
<td>{{ element.firstname }}</td>
|
||||
<td>{{ element.lastname}}</td>
|
||||
<td>{{ element.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="d-flex justify-content-between p-2">
|
||||
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
|
||||
</ngb-pagination>
|
||||
|
||||
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize">
|
||||
<option [ngValue]="2">2 items per page</option>
|
||||
<option [ngValue]="4">4 items per page</option>
|
||||
<option [ngValue]="6">6 items per page</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Serch and Filtering table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can do filter table data, in this case with observables and our
|
||||
<code>NgbHighlight</code> component used in Typeahead. </p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<form>
|
||||
<div class="form-group form-inline">
|
||||
Full text search: <input class="form-control ml-2" type="text" [formControl]="filter" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of employeeSearch | async; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.firstname" [term]="filter.value"></ngb-highlight>
|
||||
</td>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.lastname " [term]="filter.value"></ngb-highlight>
|
||||
</td>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.username " [term]="filter.value"></ngb-highlight>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Sortable table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">You can introduce custom directives for table headers to sort columns.</p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col" sortable="firstname" (sort)="onSort$($event)">Firstname</th>
|
||||
<th scope="col" sortable="lastname" (sort)="onSort$($event)">Lastname</th>
|
||||
<th scope="col" sortable="username" (sort)="onSort$($event)">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of employeeSortable">
|
||||
<th scope="row">{{ element.id }}</th>
|
||||
<td>{{ element.firstname }}</td>
|
||||
<td>{{ element.lastname }}</td>
|
||||
<td>{{ element.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Complate table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Table example with sorting,pagination and filtering.</p>
|
||||
</div>
|
||||
<div class="table-responsive card-body">
|
||||
<form>
|
||||
<div class="form-group form-inline">
|
||||
Full text search: <input class="form-control ml-2" type="text" name="searchTerm"
|
||||
[(ngModel)]="service.searchTerm" />
|
||||
<span class="ml-3" *ngIf="service.loading$ | async">Loading...</span>
|
||||
</div>
|
||||
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col" sortable="firstname" (sort)="onSort($event)">Firstname</th>
|
||||
<th scope="col" sortable="lastname" (sort)="onSort($event)">lastname</th>
|
||||
<th scope="col" sortable="username" (sort)="onSort($event)">username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of countries$ | async">
|
||||
<th scope="row">{{ element.id }}</th>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.firstname" [term]="service.searchTerm"></ngb-highlight>
|
||||
</td>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.lastname " [term]="service.searchTerm"></ngb-highlight>
|
||||
</td>
|
||||
<td>
|
||||
<ngb-highlight [result]="element.username" [term]="service.searchTerm">
|
||||
</ngb-highlight>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="d-flex justify-content-between p-2">
|
||||
<ngb-pagination [collectionSize]="total$ | async" [(page)]="service.page"
|
||||
[pageSize]="service.pageSize">
|
||||
</ngb-pagination>
|
||||
|
||||
<select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
|
||||
<option [ngValue]="2">2 items per page</option>
|
||||
<option [ngValue]="4">4 items per page</option>
|
||||
<option [ngValue]="6">6 items per page</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!------Basic table end--->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { NgxboostraptablesComponent } from './ngxboostraptables.component';
|
||||
|
||||
describe('NgxboostraptablesComponent', () => {
|
||||
let component: NgxboostraptablesComponent;
|
||||
let fixture: ComponentFixture<NgxboostraptablesComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NgxboostraptablesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NgxboostraptablesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,176 @@
|
||||
import { Component, OnInit, PipeTransform, Input, Output, Directive, EventEmitter, ViewChildren, QueryList} from '@angular/core';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { TableApiService } from '../../../../_services/table-api.service';
|
||||
import { Observable } from 'rxjs';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { map, startWith } from 'rxjs/operators';
|
||||
import { Country } from './countries';
|
||||
import { CountryService } from '../../../../_services/country.service';
|
||||
import { NgbdSortableHeader, SortEvent } from '../../../../_directives/sortable.directive';
|
||||
|
||||
interface Employee {
|
||||
id: number;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export type SortDirection = 'asc' | 'desc' | '';
|
||||
const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };
|
||||
export const compare = (v1, v2) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
|
||||
/* eslint-disable @angular-eslint/no-host-metadata-property */
|
||||
/* eslint-disable @angular-eslint/directive-selector */
|
||||
/* eslint-disable @angular-eslint/directive-class-suffix */
|
||||
@Directive({
|
||||
selector: 'th[sortable]',
|
||||
host: {
|
||||
'[class.asc]': 'direction === "asc"',
|
||||
'[class.desc]': 'direction === "desc"',
|
||||
'(click)': 'rotate()'
|
||||
}
|
||||
})
|
||||
export class NgbSortable {
|
||||
|
||||
@Input() sortable: string;
|
||||
@Input() direction: SortDirection = '';
|
||||
@Output() sort = new EventEmitter<SortEvent>();
|
||||
|
||||
rotate() {
|
||||
this.direction = rotate[this.direction];
|
||||
this.sort.emit({column: this.sortable, direction: this.direction});
|
||||
}
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-ngxboostraptables',
|
||||
templateUrl: './ngxboostraptables.component.html',
|
||||
styleUrls: ['./ngxboostraptables.component.css'],
|
||||
providers: [DecimalPipe, CountryService],
|
||||
})
|
||||
export class NgxboostraptablesComponent implements OnInit {
|
||||
breadcrumb: any;
|
||||
PERSON: any;
|
||||
TableData: any;
|
||||
pipe: any;
|
||||
page = 1;
|
||||
pageSize = 4;
|
||||
collectionSize: any;
|
||||
column: any;
|
||||
employeeSearch: Observable<Employee[]>;
|
||||
filter = new FormControl('');
|
||||
employeeSortable: any;
|
||||
countries$: Observable<Country[]>;
|
||||
total$: Observable<number>;
|
||||
@ViewChildren(NgbdSortableHeader) headers1: QueryList<NgbdSortableHeader>;
|
||||
@ViewChildren(NgbSortable) headers: QueryList<NgbSortable>;
|
||||
|
||||
constructor(private tableApiservice: TableApiService,
|
||||
public service: CountryService,
|
||||
pipe: DecimalPipe) {
|
||||
this.countries$ = service.countries$,
|
||||
this.total$ = service.total$;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Ngxboostraptable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Ngxboostraptable',
|
||||
'isLink': false,
|
||||
'link': '#'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableNgxData().subscribe(Response => {
|
||||
this.TableData = Response;
|
||||
this.getTabledata();
|
||||
this.searchData(this.pipe);
|
||||
this.employeeSortable = this.PERSON;
|
||||
});
|
||||
}
|
||||
|
||||
getTabledata() {
|
||||
this.PERSON = this.TableData['EmployeeDetail'];
|
||||
this.collectionSize = this.PERSON.length;
|
||||
}
|
||||
/**
|
||||
* Pagination table
|
||||
*/
|
||||
get PaginationData() {
|
||||
if (this.PERSON) {
|
||||
return this.PERSON.map((person, i) => ({ id: i + 1, ...person }))
|
||||
.slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Search table
|
||||
* '@param' text
|
||||
* '@param' pipe
|
||||
*/
|
||||
search(text: string, pipe: PipeTransform) {
|
||||
return this.PERSON.filter(response => {
|
||||
const term = text.toLowerCase();
|
||||
return response.firstname.toLowerCase().includes(term)
|
||||
|| response.lastname.toLowerCase().includes(term)
|
||||
|| response.username.toLowerCase().includes(term);
|
||||
});
|
||||
}
|
||||
/**
|
||||
*
|
||||
* '@param' pipe
|
||||
*/
|
||||
searchData(pipe: DecimalPipe) {
|
||||
this.employeeSearch = this.filter.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map(text => this.search(text, pipe))
|
||||
);
|
||||
}
|
||||
/**
|
||||
*Sortable Table
|
||||
* '@param' param0
|
||||
*/
|
||||
onSort$({column, direction}: SortEvent) {
|
||||
|
||||
// resetting other headers
|
||||
this.headers.forEach(header => {
|
||||
if (header.sortable !== column) {
|
||||
header.direction = '';
|
||||
}
|
||||
});
|
||||
|
||||
// sorting employeeSortable
|
||||
if (direction === '') {
|
||||
this.employeeSortable = this.PERSON;
|
||||
} else {
|
||||
this.employeeSortable = [...this.PERSON].sort((a, b) => {
|
||||
const res = compare(a[column], b[column]);
|
||||
return direction === 'asc' ? res : -res;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onSort({ column, direction }: SortEvent) {
|
||||
// resetting other headers
|
||||
this.headers.forEach(header => {
|
||||
if (header.sortable !== column) {
|
||||
header.direction = '';
|
||||
}
|
||||
});
|
||||
|
||||
this.service.sortColumn = column;
|
||||
this.service.sortDirection = direction;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
|
||||
:host ::ng-deep .bouble-border{
|
||||
border-bottom-style: double;
|
||||
border-bottom-color: #e3ebf3;
|
||||
}
|
||||
:host ::ng-deep .table-striped tbody tr:nth-of-type(odd) {
|
||||
border-bottom-color:red !important;
|
||||
}
|
||||
:host ::ng-deep .border-solid {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #e3ebf3;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'tableRowBorders'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table Row borders</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of table row borders. This is a default table border style by bootstrap and attached to <code>.table class </code>.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row borders end -->
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'tableRowBorders'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table column borders</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of vertical table borders. This custom table border layout displays vertical borders only. However border between table head and table body is also visible for better visual separation. To use this layout add <code>.table-columned </code>class to the table with <code>.table class </code>.</p>
|
||||
<p>Example of table column borders. Add <code>.table-column</code> class with <code>.table </code> for table with column border.</p>
|
||||
</div>
|
||||
<div class="table table-bordered mb-0 back_ground">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'borderlessTable'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Both borders</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of table having both column & row borders. Add <code>.table-bordered </code> class with <code> .table </code>for both borders table.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--borderless table start-->
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'borderlessTable'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Borderless Table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of borderless table, all border are hidden, except border <code>.thead </code>and <code>.tfoot</code>. Add .table-borderless class with .table for borderless table.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Borderless table end -->
|
||||
|
||||
<!-- Default borders end-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default borders</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of a default border table. This is bootstrap default table having only
|
||||
<code>.table</code> class.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0 back_ground default_borders">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Default borders end -->
|
||||
|
||||
<!-- Solid border end-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Solid border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of a solid bordered table row. This border inherits all styling options
|
||||
from the default border style, the only difference is it has 2px width. Add <code>.border-solid</code>
|
||||
to the table body row. This border style works only with row borders.</p>
|
||||
</div>
|
||||
<div class="table-responsive ">
|
||||
<table class="table mb-0">
|
||||
<thead class ="border-solid">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Solid border end -->
|
||||
|
||||
<!-- Double border end-->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Double border</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of double bordered table row. This has 4px width and double style. Add
|
||||
<code>.border-double</code> to the table body row. This border style works only with row borders.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="bouble-border">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Double border end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TableborderComponent } from './tableborder.component';
|
||||
|
||||
describe('TableborderComponent', () => {
|
||||
let component: TableborderComponent;
|
||||
let fixture: ComponentFixture<TableborderComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TableborderComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TableborderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tableborder',
|
||||
templateUrl: './tableborder.component.html',
|
||||
styleUrls: ['./tableborder.component.css']
|
||||
})
|
||||
export class TableborderComponent implements OnInit {
|
||||
TableborderData: any;
|
||||
countries: any;
|
||||
@BlockUI('tableRowBorders') blockUITableRowBorders: NgBlockUI;
|
||||
@BlockUI('borderlessTable') blockUIBorderlessTable: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
loadingIndicator: true;
|
||||
timeout: any;
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) {}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Table border',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Table border',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableBorderData().subscribe(Response => {
|
||||
this.TableborderData = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.countries = this.TableborderData.rows;
|
||||
}
|
||||
onPage(event) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
console.log('paged!', event);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
reloadTableRowBorders() {
|
||||
this.blockUITableRowBorders.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITableRowBorders.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadBorderlessTable() {
|
||||
this.blockUIBorderlessTable.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBorderlessTable.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #666EE8 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pills .nav .nav-item .nav-link {
|
||||
border-radius: 10rem;
|
||||
display: inline-block;
|
||||
padding: 0.35em 0.4em;
|
||||
font-size: 95%;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .justify-content-start {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pillsbackground .nav-pills .nav-link.active,
|
||||
.nav-pills .show>.nav-link {
|
||||
color: #FFFFFF;
|
||||
background-color: #ff9149;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pillsborder .nav-pills .nav-link.active,
|
||||
.nav-pills .show>.nav-link {
|
||||
color: #28d094;
|
||||
border: 2px solid #28D094 !important;
|
||||
background-color: #FFFFFF;
|
||||
font: #28d094;
|
||||
}
|
||||
|
||||
:host ::ng-deep .notifications .nav-pills .nav-link.active {
|
||||
color: #7c7f90;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
:host ::ng-deep .table-responsive {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
:host ::ng-deep .text .dropdown-list .item2 {
|
||||
max-height: 87px !important;
|
||||
}
|
||||
:host ::ng-deep .nav-badge {
|
||||
border-radius: 10rem;
|
||||
display: inline-block;
|
||||
padding: 0.35em 0.4em;
|
||||
font-size: 95%;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .nav-badge-pillsborder {
|
||||
color: #28d094;
|
||||
border: 2px solid #28D094 !important;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
@@ -0,0 +1,862 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- UI components start -->
|
||||
<div class="row" id="ui">
|
||||
<div class="col-12" *blockUI="'components'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadComponents($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
UI components
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Button</td>
|
||||
<td class="width-350">
|
||||
<button type="button" class="btn btn-success mr-1 mb-1">Default
|
||||
Buttons</button>
|
||||
</td>
|
||||
<td>Bootstrap includes six predefined button styles, each serving its own
|
||||
semantic
|
||||
purpose.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Round Buttons</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-danger btn-round mr-1 mb-1">Default
|
||||
Buttons</button>
|
||||
</td>
|
||||
<td>Use <code>.btn-round</code> class to button for Round Buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Button dropdowns</td>
|
||||
<td>
|
||||
<div class="btn-group mr-1 mb-1">
|
||||
<div ngbDropdown class="d-inline-block">
|
||||
<button class="btn btn-info btn-min-width dropdown-toggle" id="dropdownBasic1"
|
||||
ngbDropdownToggle>Info</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is
|
||||
here</button>
|
||||
<li class="dropdown-divider"></li>
|
||||
<button class="dropdown-item">Separated link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Basic Button group</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>Group a series of buttons together on a single line with the button
|
||||
group. Wrap a
|
||||
series of buttons with <code>.btn</code> in <code>.btn-group.</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Buttons with Icon</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-info mr-1 mb-1"><i class="feather ft-info"></i>
|
||||
Info</button>
|
||||
</td>
|
||||
<td>Bootstrap includes six predefined button styles, each serving its own
|
||||
semantic
|
||||
purpose.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Icon Button</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-icon btn-success mr-1"><i
|
||||
class="feather ft-camera"></i></button>
|
||||
</td>
|
||||
<td>Simple Icon Button</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Floating Buttons</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-float btn-info"><i
|
||||
class="feather ft-search"></i><span>search</span></button>
|
||||
</td>
|
||||
<td>Floating action buttons are used for a special type of promoted action.
|
||||
They are
|
||||
distinguished by a circled icon floating above the UI and have special
|
||||
motion
|
||||
behaviors related to morphing, launching, and the transferring anchor
|
||||
point.
|
||||
<p>
|
||||
Use the class <code>.btn</code> along with class
|
||||
<code>.btn-floating</code>
|
||||
</p>
|
||||
.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loading Buttons</td>
|
||||
<td>
|
||||
<button class="btn btn-primary mr-1 mb-1 ladda-button" data-style="expand-up"><span
|
||||
class="ladda-label">Expand
|
||||
UP</span></button>
|
||||
</td>
|
||||
<td>Expand Animation Buttons</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- UI components end -->
|
||||
<!-- Alerts start -->
|
||||
<div class="row" id="alerts">
|
||||
<div class="col-12" *blockUI="'alerts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadAlerts($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Alerts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Basic Alert</td>
|
||||
<td class="width-350">
|
||||
<ngb-alert [dismissible]="false" [type]="'primary'" role="alert">
|
||||
<strong>Good Morning!</strong> Start your day with some alerts.
|
||||
</ngb-alert>
|
||||
</td>
|
||||
<td>Alerts are available for any length of text, as well as an optional dismiss
|
||||
button.
|
||||
Add <code>.alert.alert-COLOR</code> classes for alert with all theme colors.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alerts with Links</td>
|
||||
<td>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed1" [type]="'primary'" [dismissible]="false" role="alert">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a>
|
||||
with some alerts.
|
||||
</ngb-alert>
|
||||
</td>
|
||||
<td>Add <code>.alert-link</code> class to add links to alerts.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dismissible Alerts</td>
|
||||
<td>
|
||||
<!-- <div class="alert alert-primary alert-dismissible mb-2" role="alert"> -->
|
||||
<ngb-alert *ngIf="!isPrimaryClosed2" [dismissible]="true" [type]="'primary'"
|
||||
(close)="isPrimaryClosed2=true" role="alert">
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a>
|
||||
with some alerts.
|
||||
</ngb-alert>
|
||||
<!-- </div> -->
|
||||
</td>
|
||||
<td>
|
||||
Add a dismiss button and the <code>.alert-dismissible</code> class, which
|
||||
adds
|
||||
extra padding to the right of the alert and positions the
|
||||
<code>.close</code>
|
||||
button. On the dismiss button, add the <code>data-dismiss="alert"</code>
|
||||
attribute,
|
||||
which triggers the JavaScript functionality. Be sure to use the
|
||||
<code><button></code>
|
||||
element with it for proper behavior across all devices. To animate alerts
|
||||
when
|
||||
dismissing them, be sure to add the <code>.fade</code> and <code>.in</code>
|
||||
classes.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alerts with icons</td>
|
||||
<td>
|
||||
<ngb-alert *ngIf="!isPrimaryClosed3" class="alert-icon-left" [dismissible]="true"
|
||||
[type]="'primary'" (close)="isPrimaryClosed3=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-heart"></i></span>
|
||||
<strong>Good Morning!</strong> Start <a [routerLink]="" class="alert-link">your day</a>
|
||||
with some
|
||||
alerts.
|
||||
</ngb-alert>
|
||||
</td>
|
||||
<td>
|
||||
To add left/right icons to the alert, use class
|
||||
<code>.alert-icon-left</code> or
|
||||
<code>alert-icon-right</code> as required.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alerts end -->
|
||||
<!-- Callouts start -->
|
||||
<div class="row" id="callouts">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Callouts</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200"> Basic Callout</td>
|
||||
<td class="width-350">
|
||||
<div class="bs-callout-info callout-border-left p-1">
|
||||
<strong>Great Job!</strong>
|
||||
<p>Biscuit macaroon tootsie roll croissant. Dessert candy canes
|
||||
halvah cookie
|
||||
liquorice.</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>.bs-callout-COLOR</code> for color callout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Right Bordered Callouts</td>
|
||||
<td>
|
||||
<div class="bs-callout-danger callout-bordered callout-border-right p-1">
|
||||
<strong>Not Bad!</strong>
|
||||
<p>Croissant carrot cake sesame snaps dessert wafer dessert wafer
|
||||
icing jelly.</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>.callout-border-right</code> for right bordered callout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Callout with transparent Background</td>
|
||||
<td>
|
||||
<div class="bs-callout-pink callout-transparent callout-border-left p-1">
|
||||
<h4 class="pink">Super cool!</h4>
|
||||
<p>Cupcake macaroon chupa chups fruitcake. Candy canes cotton candy
|
||||
dessert.</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>.callout-transparent</code> for callout with white background.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Callout With Icon</td>
|
||||
<td>
|
||||
<div class="bs-callout-success mt-1">
|
||||
<div class="media align-items-stretch">
|
||||
<div class="media-left media-middle bg-success p-2 pt-3">
|
||||
<i class="feather ft-eye white"></i>
|
||||
</div>
|
||||
<div class="media-body p-1">
|
||||
<strong>Congratulations!</strong>
|
||||
<p>Cake chupa chups tootsie roll brownie pastry marzipan
|
||||
lollipop
|
||||
sweet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use class <code>.callout-icon</code> to use icon with callout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Round Callout</td>
|
||||
<td>
|
||||
<div class="bs-callout-danger callout-round callout-bordered callout-transparent p-1 px-2">
|
||||
<strong>Not Bad!</strong>
|
||||
<p>Croissant carrot cake sesame snaps dessert wafer dessert wafer
|
||||
icing jelly.</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use class <code>.callout-round</code> for round callout.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Callouts end -->
|
||||
<!-- Progress start -->
|
||||
<div class="row" id="progress">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Progress</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Default Progress</td>
|
||||
<td class="width-350">
|
||||
<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div>
|
||||
<ngb-progressbar height="18px" width="100px" type="primary" [value]="25">
|
||||
</ngb-progressbar>
|
||||
</td>
|
||||
<td>To caption a progress bar, simply add a <code><div></code> with
|
||||
your caption
|
||||
text, align the text using a utility class, and associate the caption
|
||||
with the
|
||||
progress element using the aria-describedby attribute.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Striped Progress</td>
|
||||
<td>
|
||||
<ngb-progressbar height="18px" width="100px" [striped]="true" type="danger" [value]="60">
|
||||
</ngb-progressbar>
|
||||
</td>
|
||||
<td>Uses a gradient to create a striped effect.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Progress Sizes</td>
|
||||
<td>
|
||||
<ngb-progressbar height="18px" width="100px" type="primary" [value]="25">
|
||||
</ngb-progressbar>
|
||||
</td>
|
||||
<td>Different sized progress. For Default progress, No size class needed.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress end -->
|
||||
<!-- Checkboxes start -->
|
||||
<div class="row" id="checkbox">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Checkboxes</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Basic Checkbox</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<fieldset class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked> I am checked
|
||||
Checkbox
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</td>
|
||||
<td>Basic Checkbox</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="width-200">Custom Checkbox</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<span class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheckbox"
|
||||
id="customCheckbox1" checked>
|
||||
<label class="custom-control-label" for="customCheckbox1">Checkbox Checked</label>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>Custom Checkbox</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checkboxes end -->
|
||||
<!-- Radio Buttons start -->
|
||||
<div class="row" id="radio">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Radio Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Basic Radio Buttons</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<fieldset class="radio">
|
||||
<label>
|
||||
<input type="radio" name="radio" value="" checked> I am
|
||||
checked Radio
|
||||
Button
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</td>
|
||||
<td>Basic Radio Buttons</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="width-200">Basic Radio Buttons</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<span class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1"
|
||||
checked>
|
||||
<label class="custom-control-label" for="customRadio1">Checkbox Checked</label>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>Custom Radio Buttons</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Radio Buttons end -->
|
||||
<!-- Select start -->
|
||||
<div class="row" id="select">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Select</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Single Select</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<ng-multiselect-dropdown class="text" name="city" [data]="singleCities"
|
||||
[(ngModel)]="basicSelectedItem" [settings]="singleDropdownSettings"
|
||||
(onSelect)="onItemSelect($event)">
|
||||
</ng-multiselect-dropdown>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>ng-multiselect-dropdown</code> for basic select control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Disabled Mode</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<ng-multiselect-dropdown name="city" [data]="singleCities" [(ngModel)]="disableSelectedItem"
|
||||
[settings]="singleDropdownSettings" (onSelect)="onItemSelect($event)" [disabled]="true">
|
||||
</ng-multiselect-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Select will respond to the <code>disabled</code> attribute on
|
||||
<code><select></code>
|
||||
elements. You can also initialize Select with
|
||||
<code>disabled: true</code> to get
|
||||
the same effect.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Select end -->
|
||||
<!-- Input start -->
|
||||
<div class="row" id="input">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Input</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Default Input text</td>
|
||||
<td class="width-350">
|
||||
<div class="card-body">
|
||||
<input type="text" class="form-control" id="basicInput">
|
||||
</div>
|
||||
</td>
|
||||
<td>Standard form controls supported in all example form elements. Form
|
||||
controls
|
||||
automatically receives global styling. The .form-group class is the
|
||||
easiest way to
|
||||
add some structure to form elements like <code> <input>, <textarea>,
|
||||
</code>and<code><select></code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input Font Color</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<input type="text" class="form-control primary" id="textColor" value="Primary colored Text">
|
||||
</div>
|
||||
</td>
|
||||
<td>Input Primary colored Font</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input Border Color</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<input type="text" class="form-control border-success" id="textColor1"
|
||||
placeholder="Success bordered Input">
|
||||
</div>
|
||||
</td>
|
||||
<td>Input Success Border Color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input Background Color</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<input type="text" class="form-control bg-warning" id="textColor2"
|
||||
value="Background color Input">
|
||||
</div>
|
||||
</td>
|
||||
<td>Background Warning Color Input</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Default Input with Left Icon</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<fieldset class="form-group position-relative has-icon-left">
|
||||
<input type="text" class="form-control" id="iconLeft"
|
||||
placeholder="Icon Left, Default Input">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-phone-call primary"></i>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</td>
|
||||
<td>Left Icon Default Input</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Default Input group</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Addon to Left"
|
||||
aria-describedby="basic-addon1">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Add span with <code>.input-group-prepend</code> class before
|
||||
<code><input></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input group with Switchery</td>
|
||||
<td>
|
||||
<div class="card-body">
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend" id="radio-addon1">
|
||||
<span class="input-group-text">
|
||||
<ui-switch class="switchery" size="small" switchColor="white" color="rgb(55, 188, 155)"
|
||||
checked></ui-switch>
|
||||
</span>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Input with Left switchery"
|
||||
aria-describedby="radio-addon1" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Add span with <code>.input-group-prepend</code> class before
|
||||
<code><input></code>
|
||||
text and Add switchery inside.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Input end -->
|
||||
<!-- Badges start -->
|
||||
<div class="row" id="badges">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Badges</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0 pills">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Basic Pills</td>
|
||||
<td class="text-center width-350">
|
||||
<ul class="justify-content-start nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<span class="badge badge-pill badge-primary nav-badge">59</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</td>
|
||||
<td>Use the <code>.badge </code>class, followed by <code>.badge-pill</code>
|
||||
with <code>.badge-secondary</code>
|
||||
class within element to create default pill.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pills With Glow effect</td>
|
||||
<td class="text-center pillsbackground">
|
||||
<ul class="justify-content-start nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<span class="badge badge-pill badge-warning nav-badge">68</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>Use the <code>.badge</code> class, followed by .badge-pill with
|
||||
<code>.badge-glow</code>
|
||||
class within element to create <code>glow</code> styled pill.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pills with Icons</td>
|
||||
<td class="text-center">
|
||||
<ul class="justify-content-start nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<span class="badge badge-pill badge-primary nav-badge"><i
|
||||
class="font-medium-2 icon-line-height feather ft-droplet"></i></span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>I dont have text to put hear</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bordered Badges (Pills)</td>
|
||||
<td class="text-center pillsborder">
|
||||
<ul class="justify-content-start nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<span class="badge badge-pill badge-primary nav-badge nav-badge-pillsborder">25</span>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>Use the <code>.badge</code> class, followed by<code>.badge-border</code>
|
||||
with <code>.badge-success</code>
|
||||
class within element to create success pill.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Badges end -->
|
||||
<!-- Tooltip Triggers start -->
|
||||
<div class="row" id="tooltip">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tooltip Triggers</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Hover</td>
|
||||
<td class="width-350">
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-info" triggers="hover:click:hover" [autoClose]="'inside'"
|
||||
ngbTooltip="Hover Triggered">
|
||||
On Hover Trigger
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>triggers="hover"</code> for hover trigger. This is a
|
||||
default trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Click</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-success" triggers="click" [autoClose]="'inside'"
|
||||
ngbTooltip="Click Triggered">
|
||||
On Click Trigger
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>triggers="click"</code> for click trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Focus</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-warning" triggers="click" [autoClose]="'false'"
|
||||
ngbTooltip="Focus Triggered">
|
||||
On Focus Trigger
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>triggers="focus"</code> for focus trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Manual</td>
|
||||
<td>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-danger" ngbTooltip="Manual Tooltip" triggers="manual"
|
||||
#t="ngbTooltip" [autoClose]="'outside'" (click)="t.open()">
|
||||
On Manual Trigger
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use <code>triggers="manual"</code> for manual trigger. You can do
|
||||
show/hide
|
||||
using js</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tooltip Triggers end -->
|
||||
<!-- Tags start -->
|
||||
<div class="row" id="tags">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Tags</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="width-200">Info Label</td>
|
||||
<td class="text-center width-350">
|
||||
<div class="badge badge-info">Info Label</div>
|
||||
</td>
|
||||
<td>Use the <code>.badge</code> class, followed by<code>.badge-info</code>
|
||||
class within
|
||||
element to create info label.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tags with Icons</td>
|
||||
<td class="text-center">
|
||||
<div class="badge badge-primary label-square">
|
||||
<i class="la la-paperclip font-medium-2"></i>
|
||||
<span>Primary Label</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use the .badge class, followed by<code>.badge-square</code> class for
|
||||
square
|
||||
bordered label.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tags with Only Icons</td>
|
||||
<td class="text-center">
|
||||
<div class="badge badge-success round">
|
||||
<i class="font-medium-2 icon-line-height feather ft-upload"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td>Use the <code>.badge</code> class, followed by<code>.round</code> class
|
||||
for round
|
||||
warning label.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bordered Tags</td>
|
||||
<td class="text-center">
|
||||
<div class="badge border-danger danger badge-border">Danger Label</div>
|
||||
</td>
|
||||
<td>Use the <code>.badge-bordered</code> with class <code>.badge</code>.
|
||||
Also use <code>.border-COLOR</code>
|
||||
class to add border and use <code>.COLOR</code> for text color</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tags end -->
|
||||
<!-- Switch start -->
|
||||
<div class="row" id="switch">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Switch</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive ">
|
||||
<table class="table table-bordered mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Basic Switchery Toggle</td>
|
||||
<td class="text-center">
|
||||
<div class="card-body">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked>
|
||||
</ui-switch>
|
||||
<label for="switcheryColor4" class="card-title ml-1"></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>To set Switchery toggle, add <code>.switchery</code> class to checkbox.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small Switchery</td>
|
||||
<td class="text-center">
|
||||
<div class="card-body">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" size="small"
|
||||
checked></ui-switch>
|
||||
<label for="switcherySize2" class="font-medium-2 text-bold-600 ml-1"></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>To set Small Switchery toggle, add <code>.switchery-sm</code> class to
|
||||
checkbox.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Color Switchery (Danger Switchery)</td>
|
||||
<td class="text-center">
|
||||
<div class="card-body">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(218, 68, 83)" checked></ui-switch>
|
||||
<label for="switcheryColor3" class="card-title ml-1"></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>To get Danger Switchery, add <code>.switchery-danger</code> class to
|
||||
checkbox.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TablecomponentsComponent } from './tablecomponents.component';
|
||||
|
||||
describe('TablecomponentsComponent', () => {
|
||||
let component: TablecomponentsComponent;
|
||||
let fixture: ComponentFixture<TablecomponentsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TablecomponentsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TablecomponentsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,229 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
declare var require: any;
|
||||
const data: any = require('../../../../../assets/data/datatables/tablecomponent/tablecomponent.json');
|
||||
|
||||
@Component({
|
||||
selector: 'app-tablecomponents',
|
||||
templateUrl: './tablecomponents.component.html',
|
||||
styleUrls: ['./tablecomponents.component.css']
|
||||
})
|
||||
export class TablecomponentsComponent implements OnInit {
|
||||
|
||||
@BlockUI('components') blockUIComponents: NgBlockUI;
|
||||
@BlockUI('alerts') blockUIAlerts: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
disabled = false;
|
||||
singleCities = [];
|
||||
basicSelectedItem = [];
|
||||
singleDropdownSettings: any = {};
|
||||
hideSearchBoxdropdownSettings: any = {};
|
||||
closeDropdownSelection = false;
|
||||
isPrimaryClosed1 = false;
|
||||
isPrimaryClosed2 = false;
|
||||
isPrimaryClosed3 = false;
|
||||
singleSelectedItem = [];
|
||||
responsiveSelectedItem = [];
|
||||
singlePlaceholderSelectedItem = [];
|
||||
disableSelectedItem = [];
|
||||
hideSearchBox = [];
|
||||
ShowFilter = false;
|
||||
limitSelection = false;
|
||||
multipleCities = [];
|
||||
multipleSelectedItems = [];
|
||||
multipleDropdownSettings: any = {};
|
||||
multipleLimitDropdownSettings: any = {};
|
||||
basicMultiSelect = [];
|
||||
singleProgrammaticCities = [];
|
||||
singleProgrammaticSelectedItem = [];
|
||||
singleProgrammaticDropdownSettings: any = {};
|
||||
|
||||
multipleProgrammaticSelectedItem = [];
|
||||
multipleProgrammaticDropdownSettings: any = {};
|
||||
|
||||
singleCitiesEvents = [];
|
||||
singleEventsSelectedItem = [];
|
||||
singleEventsDropdownSettings: any = {};
|
||||
|
||||
multipleCitiesEvents = [];
|
||||
multipleEventsSelectedItem = [];
|
||||
multipleEventsDropdownSettings: any = {};
|
||||
|
||||
loadingArray = [];
|
||||
loadingArraySelectedItem = [];
|
||||
loadingArrayDropdownSettings: any = {};
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Table components',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Table components',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.singleCities = data ['Cities'];
|
||||
this.singleDropdownSettings = {
|
||||
singleSelection: true,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
allowSearchFilter: true,
|
||||
closeDropDownOnSelection: true
|
||||
};
|
||||
this.hideSearchBoxdropdownSettings = {
|
||||
singleSelection: true,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
allowSearchFilter: false,
|
||||
closeDropDownOnSelection: true
|
||||
};
|
||||
this.multipleCities = data['Cities'];
|
||||
this.basicMultiSelect = data['Select'];
|
||||
this.multipleDropdownSettings = {
|
||||
singleSelection: false,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
itemsShowLimit: 3,
|
||||
allowSearchFilter: true
|
||||
};
|
||||
this.multipleLimitDropdownSettings = {
|
||||
singleSelection: false,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
itemsShowLimit: 3,
|
||||
limitSelection: 2,
|
||||
allowSearchFilter: true
|
||||
};
|
||||
|
||||
this.singleProgrammaticCities = data['Cities'];
|
||||
|
||||
this.singleProgrammaticSelectedItem = [{ item_id: 1, item_text: 'Alaska' }];
|
||||
|
||||
this.singleProgrammaticDropdownSettings = {
|
||||
singleSelection: true,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
itemsShowLimit: 3,
|
||||
allowSearchFilter: true
|
||||
};
|
||||
|
||||
this.multipleProgrammaticDropdownSettings = {
|
||||
singleSelection: false,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
itemsShowLimit: 3,
|
||||
allowSearchFilter: true,
|
||||
clearSearchFilter: true
|
||||
};
|
||||
|
||||
this.singleCitiesEvents = data['Cities'];
|
||||
|
||||
this.singleEventsSelectedItem = [{ item_id: 2, item_text: 'California' }];
|
||||
|
||||
this.singleEventsDropdownSettings = {
|
||||
singleSelection: true,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
allowSearchFilter: true,
|
||||
closeDropDownOnSelection: true,
|
||||
};
|
||||
|
||||
this.multipleCitiesEvents = data['Cities'];
|
||||
this.multipleEventsSelectedItem = [{ item_id: 2, item_text: 'California' }, { item_id: 3, item_text: 'Colorado' }];
|
||||
|
||||
this.multipleEventsDropdownSettings = {
|
||||
singleSelection: false,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
allowSearchFilter: true,
|
||||
};
|
||||
|
||||
this.loadingArray = data['Select'];
|
||||
this.loadingArraySelectedItem = this.loadingArray;
|
||||
|
||||
this.loadingArrayDropdownSettings = {
|
||||
singleSelection: true,
|
||||
idField: 'item_id',
|
||||
textField: 'item_text',
|
||||
selectAllText: 'Select All',
|
||||
unSelectAllText: 'UnSelect All',
|
||||
itemsShowLimit: 3,
|
||||
allowSearchFilter: true,
|
||||
closeDropDownOnSelection: true
|
||||
};
|
||||
}
|
||||
|
||||
onItemSelect(item: any) {
|
||||
console.log('onItemSelect', item);
|
||||
}
|
||||
onSelectAll(items: any) {
|
||||
console.log('onSelectAll', items);
|
||||
}
|
||||
onSingleEventsItemSelect(item: any) {
|
||||
console.log('onSingleEventsItemSelect', item);
|
||||
window.alert('Select Event fired.');
|
||||
window.alert('Change Event fired.');
|
||||
}
|
||||
onSingleEventsItemsClose() {
|
||||
console.log('onSingleEventsItemClose');
|
||||
window.alert('Close Event fired.');
|
||||
}
|
||||
onMultipleEventsItemsClose() {
|
||||
console.log('onMultipleEventsItemsClose');
|
||||
window.alert('Close Event fired.');
|
||||
}
|
||||
|
||||
reloadComponents() {
|
||||
this.blockUIComponents.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIComponents.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadAlerts() {
|
||||
this.blockUIAlerts.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIAlerts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Extra large table start -->
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'extraLargeTable'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Extra Large table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of Extra large table, Add <code>.table-xl</code> class to the
|
||||
<code>.table</code> to create a table with extra large spacing. Extra larger table all rows have
|
||||
<code>1.25rem</code> height.</p>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-xl mb-0">
|
||||
<thead class="bouble-border">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Extra large table end -->
|
||||
|
||||
<!-- Large table start -->
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'largeTable'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Large table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of large table, Add <code>.table-lg</code> class to the <code>.table</code>
|
||||
to create a table with large spacing. Larger table all rows have <code>0.9rem</code> height.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-lg mb-0">
|
||||
<thead class="bouble-border">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Large table end -->
|
||||
<!-- Default table start -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of large table, Add <code>.table-lg</code> class to the <code>.table</code>
|
||||
to create a table with large spacing. Larger table all rows have <code>0.9rem</code> height.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-de mb-0">
|
||||
<thead class="bouble-border">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Default table end -->
|
||||
<!-- Small table start -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Small table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of small table, Add <code>.table-sm</code> class to the <code>.table</code>
|
||||
to create a table with small spacing. Small table all rows have <code>0.6rem</code> height.</p>
|
||||
</div>
|
||||
|
||||
<div class="table table-sm mb-0 back_ground">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Small table end -->
|
||||
|
||||
<!-- Extra Small table start -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Extra Small table</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of extra small table, Add <code>.table-xs</code> class to the
|
||||
<code>.table</code> to create a table with extra small spacing. Extra small table all rows have
|
||||
<code>0.4rem</code> height.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-xs">
|
||||
<thead >
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.username }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TablesizingComponent } from './tablesizing.component';
|
||||
|
||||
describe('TablesizingComponent', () => {
|
||||
let component: TablesizingComponent;
|
||||
let fixture: ComponentFixture<TablesizingComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TablesizingComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TablesizingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tablesizing',
|
||||
templateUrl: './tablesizing.component.html',
|
||||
styleUrls: ['./tablesizing.component.css']
|
||||
})
|
||||
export class TablesizingComponent implements OnInit {
|
||||
TablesizingData: any;
|
||||
countries: any;
|
||||
@BlockUI('extraLargeTable') blockUIExtraLargeTable: NgBlockUI;
|
||||
@BlockUI('largeTable') blockUILargeTable: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
loadingIndicator: true;
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) {
|
||||
}
|
||||
timeout: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Tables Sizing',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Tables Sizing',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableBorderData().subscribe(Response => {
|
||||
this.TablesizingData = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.countries = this.TablesizingData.rows;
|
||||
}
|
||||
|
||||
onPage(event) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
console.log('paged!', event);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
reloadExtraLargeTable() {
|
||||
this.blockUIExtraLargeTable.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIExtraLargeTable.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadLargeTable() {
|
||||
this.blockUILargeTable.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILargeTable.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Default styling start -->
|
||||
<div class="row" id="default">
|
||||
<div class="col-12" *blockUI="'defaultStyling'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default styling</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard ">
|
||||
<p class="card-text">Example of a table with bootstrap default styling. By default any
|
||||
table with
|
||||
<code>.table</code> class has <em>transparent</em> background color.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="bouble-border">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Default styling end -->
|
||||
<!-- Table header styling start -->
|
||||
<div class="row" id="header-styling">
|
||||
<div class="col-12" *blockUI="'tableHeaderStyling'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table header styling</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of a custom table <em>header</em> styling. Table header
|
||||
supports default contextual and custom background colors change to use bootstrap class.
|
||||
Add <code>.bg-*</code> class to the header row. All border and text colors
|
||||
will be
|
||||
automatically adjusted.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-success white">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-body card-dashboard">
|
||||
<p>Apart form bootstrap color options you can also use Modern Admin color palette
|
||||
options, To set
|
||||
the selected bg color lighten use <code>.bg-*</code> where <code>*</code> is the
|
||||
value of your
|
||||
selected color from palette, and with that use <code>.bg-lighten-*</code> or
|
||||
<code>.bg-darken-*</code>
|
||||
class where <code>*</code> is the value between '1-5' of your selected
|
||||
lighten/darken color
|
||||
from modern color palette. So for color lighten 4 bg class will be
|
||||
<code>.bg-lighten-4</code>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-yellow bg-lighten-4">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table header styling start -->
|
||||
<div class="row" id="header-styling">
|
||||
<div class="col-12" *blockUI="'tableHeaderStyling'; message: 'Loading'">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table footer styling</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of a custom table <em>footer</em> styling. Table footer
|
||||
supports
|
||||
default contextual and custom background colors to use bootstrap class .
|
||||
Add <code>.bg-*</code> class to the header row. All border and text colors
|
||||
will be automatically adjusted.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="bg-success white">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-body card-dashboard">
|
||||
<p>Apart form bootstrap color options you can also use Modern Admin color palette
|
||||
options, To set
|
||||
the selected bg color lighten use <code>.bg-*</code> where <code>*</code> is the
|
||||
value of your
|
||||
selected color from palette, and with that use <code>.bg-lighten-*</code> or
|
||||
<code>.bg-darken-*</code>
|
||||
class where <code>*</code> is the value between '1-5' of your selected
|
||||
lighten/darken color
|
||||
from modern color palette. So for color lighten 4 bg class will be
|
||||
<code>.bg-lighten-4</code>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table mb-0">
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="bg-yellow bg-lighten-4">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="table-formatting">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom table formatting</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Example of a table with custom <em>formatting</em> color.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse bg-primary">
|
||||
<thead class="">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{country.password}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-bold-600 px-1">Header and footer formatting</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse bg-primary">
|
||||
<thead class="">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table table-inverse bg-primary">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-body card-dashboard">
|
||||
<p>Modern Admin color palette options can be use also for the custom table formatting,
|
||||
To set the
|
||||
selected bg color lighten
|
||||
use <code>.bg-*</code> where <code>*</code> is the value
|
||||
of your
|
||||
selected color from palette, and with that use <code>.bg-lighten-*</code> or
|
||||
<code>.bg-darken-*</code>
|
||||
class where <code>*</code> is the value between '1-5' of your selected
|
||||
lighten/darken color
|
||||
from modern color palette. So for color lighten 4 bg class will be
|
||||
<code>.bg-lighten-4</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse bg-purple bg-lighten-2">
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-bold-600 px-1">Header and footer formatting</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-inverse bg-purple bg-lighten-2">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="table table-inverse bg-purple bg-lighten-2">
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="table-formatting">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Table formatting options</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">Table with custom formatting color supports all default table layouts and options.
|
||||
In this example our table displays all possible borders, striped rows and changes background color on
|
||||
row hover.
|
||||
</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table bg-warning table-bordered table-striped table-hover white">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-body card-dashboard">
|
||||
<p>Modern Admin color palette options can be use also for the custom table formatting,
|
||||
To set the
|
||||
selected bg color lighten
|
||||
use <code>.bg-*</code> where <code>*</code> is the value
|
||||
of your
|
||||
selected color from palette, and with that use <code>.bg-lighten-*</code> or
|
||||
<code>.bg-darken-*</code>
|
||||
class where <code>*</code> is the value between '1-5' of your selected
|
||||
lighten/darken color
|
||||
from modern color palette. So for color lighten 4 bg class will be
|
||||
<code>.bg-lighten-4</code>.</p>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table bg-red bg-lighten-1 table-inverse table-bordered table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Firstname</th>
|
||||
<th scope="col">Lastname</th>
|
||||
<th scope="col">Email</th>
|
||||
<th scope="col">Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let country of countries; index as i">
|
||||
<td>{{ country.firstname }} </td>
|
||||
<td>{{ country.lastname }}</td>
|
||||
<td>{{ country.email }}</td>
|
||||
<td>{{ country.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { TablestylingComponent } from './tablestyling.component';
|
||||
|
||||
describe('TablestylingComponent', () => {
|
||||
let component: TablestylingComponent;
|
||||
let fixture: ComponentFixture<TablestylingComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TablestylingComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TablestylingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tablestyling',
|
||||
templateUrl: './tablestyling.component.html',
|
||||
styleUrls: ['./tablestyling.component.css']
|
||||
})
|
||||
export class TablestylingComponent implements OnInit {
|
||||
TableStylingData: any;
|
||||
countries: any;
|
||||
@ViewChild('myTable', { static: true }) table: any;
|
||||
@BlockUI('defaultStyling') blockUIDefaultStyling: NgBlockUI;
|
||||
@BlockUI('tableHeaderStyling') blockUITableHeaderStyling: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
loadingIndicator: true;
|
||||
timeout: any;
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) {
|
||||
}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Tables styling',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Tables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Tables styling',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableStylingData().subscribe(Response => {
|
||||
this.TableStylingData = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.countries = this.TableStylingData.rows;
|
||||
}
|
||||
|
||||
onPage(event) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
console.log('paged!', event);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
toggleExpandRow(row) {
|
||||
console.log('Toggled Expand Row!', row);
|
||||
this.table.rowDetail.toggleExpandRow(row);
|
||||
}
|
||||
|
||||
onDetailToggle(event) {
|
||||
console.log('Detail Toggled', event);
|
||||
}
|
||||
|
||||
reloadDefaultStyling() {
|
||||
this.blockUIDefaultStyling.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDefaultStyling.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadTableHeaderStyling() {
|
||||
this.blockUITableHeaderStyling.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITableHeaderStyling.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
190
src/app/content/table/datatables/api/api.component.css
Normal file
190
src/app/content/table/datatables/api/api.component.css
Normal file
@@ -0,0 +1,190 @@
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
|
||||
position: relative;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
content: "\2039";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
content: "\00AB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
content: "\203A";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
content: "\00BB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #727e8e;
|
||||
color: #ededed;
|
||||
margin-top: -1px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
264
src/app/content/table/datatables/api/api.component.html
Normal file
264
src/app/content/table/datatables/api/api.component.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Add rows table -->
|
||||
<section id="add-row">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'addRows'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadAddRows($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Add rows
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p class="card-text">New rows can be added to a DataTable very easily using the
|
||||
(addFieldValue()) function.
|
||||
</p>
|
||||
<button id="addRow" class="btn btn-secondary my-1 mb-2" (click)="addFieldValue()"><i class="feather ft-plus"></i>
|
||||
Add new row</button>
|
||||
<div class="table table-striped table-bordered add-rows">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [limit]="7"
|
||||
[footerHeight]="40" [rowHeight]="40" [rows]="rows" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<ngx-datatable-column name="ID" [flexGrow]="1" [minWidth]="20">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
|
||||
<b>{{element.id}}</b>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="70">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
|
||||
<span>
|
||||
{{element.name}}
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" *ngfor let element
|
||||
of rows>
|
||||
<span>
|
||||
{{element.position}}
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.office}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.age}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.salary}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.startdate}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="selection-n-deletion">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'rowSelection'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadRowSelection($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Row selection and deletion (single row)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p class="card-text">This example shows a modification of the multiple row selection
|
||||
example, where just a single can now be selected. This is done simply by checking to
|
||||
see if the row already has a selected class or not, and if so removing it, if not
|
||||
then the class is removed from any other row in the table which does have it and
|
||||
applied to the row to be selected.
|
||||
</p>
|
||||
<br />
|
||||
<button type="button" class="btn btn-secondary my-1 delete-all" (click)=" deleteCheckedRow()">Delete
|
||||
All</button>
|
||||
<div class="table table-striped table-bordered add-rows">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [limit]="7"
|
||||
[footerHeight]="40" [rowHeight]="40" [rows]="rows" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" [selected]="selected"
|
||||
[selectionType]="'checkbox'"
|
||||
(select)='onSelect($event)' fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column [flexGrow]="1" [maxWidth]="140">
|
||||
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
|
||||
let-selectFn="selectFn">
|
||||
<span class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="selectAll" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
|
||||
<label class="custom-control-label" for="selectAll"></label>
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-rowIndex="rowIndex"
|
||||
let-onCheckboxChangeFn="onCheckboxChangeFn" let-isSelected="isSelected">
|
||||
<span class="custom-control custom-checkbox" >
|
||||
<input type="checkbox" class="custom-control-input" id="select{{rowIndex}}" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
|
||||
<label class="custom-control-label" for="select{{rowIndex}}"></label>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="ID" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
|
||||
<b>{{element.id}}</b>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
|
||||
<span>
|
||||
{{element.name}}
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" *ngfor let element
|
||||
of rows>
|
||||
<span>
|
||||
{{element.position}}
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.office}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.age}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.salary}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template *ngfor let element of rows>
|
||||
{{element.startdate}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="selection-n-deletion">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Row Editing Content </h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Double click on any content to edit that section.</p>
|
||||
<br />
|
||||
<div class="table table-striped table-bordered selection-deletion-row">
|
||||
|
||||
<ngx-datatable class="bootstrap" [headerHeight]="50" [limit]="7" [columnMode]="'force'"
|
||||
[footerHeight]="50" [rowHeight]="40" [rows]="row" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
|
||||
let-row="row">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true"
|
||||
*ngIf="!editing[rowIndex + '-name']">
|
||||
{{value}}
|
||||
</span>
|
||||
<input autofocus (blur)="updateValue($event, 'name', rowIndex)"
|
||||
*ngIf="editing[rowIndex+ '-name']" type="text" [value]="value" />
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
|
||||
let-row="row">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-position'] = true"
|
||||
*ngIf="!editing[rowIndex + '-position']">
|
||||
{{value}}
|
||||
</span>
|
||||
<input autofocus (blur)="updateValue($event, 'position', rowIndex)"
|
||||
*ngIf="editing[rowIndex+ '-position']" type="text" [value]="value" />
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
|
||||
let-row="row">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-office'] = true"
|
||||
*ngIf="!editing[rowIndex + '-office']">
|
||||
{{value}}
|
||||
</span>
|
||||
<input autofocus (blur)="updateValue($event, 'office', rowIndex)"
|
||||
*ngIf="editing[rowIndex+ '-office']" type="text" [value]="value" />
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
|
||||
let-row="row">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-age'] = true"
|
||||
*ngIf="!editing[rowIndex + '-age']">
|
||||
{{value}}
|
||||
</span>
|
||||
<input autofocus (blur)="updateValue($event, 'age', rowIndex)"
|
||||
*ngIf="editing[rowIndex+ '-age']" type="text" [value]="value" />
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
|
||||
let-row="row">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-salary'] = true"
|
||||
*ngIf="!editing[rowIndex + '-salary']">
|
||||
{{value}}
|
||||
</span>
|
||||
<input autofocus (blur)="updateValue($event, 'salary', rowIndex)"
|
||||
*ngIf="editing[rowIndex+ '-salary']" type="text" [value]="value" />
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Gender" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row"
|
||||
let-value="value">
|
||||
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true"
|
||||
*ngIf="!editing[rowIndex + '-gender']">
|
||||
{{value}}
|
||||
</span>
|
||||
<select *ngIf="editing[rowIndex + '-gender']"
|
||||
(change)="updateValue($event, 'gender', rowIndex)" [value]="value">
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
25
src/app/content/table/datatables/api/api.component.spec.ts
Normal file
25
src/app/content/table/datatables/api/api.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ApiComponent } from './api.component';
|
||||
|
||||
describe('ApiComponent', () => {
|
||||
let component: ApiComponent;
|
||||
let fixture: ComponentFixture<ApiComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ApiComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ApiComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
208
src/app/content/table/datatables/api/api.component.ts
Normal file
208
src/app/content/table/datatables/api/api.component.ts
Normal file
@@ -0,0 +1,208 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-api',
|
||||
templateUrl: './api.component.html',
|
||||
styleUrls: ['./api.component.css']
|
||||
})
|
||||
export class ApiComponent implements OnInit {
|
||||
data: any;
|
||||
|
||||
@BlockUI('addRows') blockUIAddRows: NgBlockUI;
|
||||
@BlockUI('rowSelection') blockUIRowSelection: NgBlockUI;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
temp = [];
|
||||
selected = [];
|
||||
id: number;
|
||||
loadingIndicator: true;
|
||||
rows: any;
|
||||
editing = {};
|
||||
row: any;
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'API DataTable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'API DataTable',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableApiData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
this.row = this.data.row;
|
||||
}
|
||||
updateFiltername(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
updateFilterposition(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.position.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
updateFilteroffice(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.office.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
|
||||
updateFilterage(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.age.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
updateFiltersalary(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.salary.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
updateFilterstartdate(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.startdate.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
|
||||
|
||||
this.rows = temp;
|
||||
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||
private newAttribute = { 'id': 15, name: 'Mark', position: 'Otto', office: '@mdo', age: '31', salary: '12000', startdate: '16/05/2017' };
|
||||
|
||||
addFieldValue() {
|
||||
this.rows.push(this.newAttribute);
|
||||
this.rows = [...this.rows];
|
||||
}
|
||||
deleteFieldValue(index) {
|
||||
this.rows.splice(index, 1);
|
||||
}
|
||||
deleteRow(id) {
|
||||
let i = 0;
|
||||
for (const row of this.rows) {
|
||||
if (row.id === id) {
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
const temp = [...this.rows];
|
||||
temp.splice(i, 1);
|
||||
this.rows = temp;
|
||||
}
|
||||
updateValue(event, cell, rowIndex) {
|
||||
|
||||
this.editing[rowIndex + '-' + cell] = false;
|
||||
this.row[rowIndex][cell] = event.target.value;
|
||||
const temp = [...this.row];
|
||||
this.row = temp;
|
||||
}
|
||||
|
||||
reloadAddRows() {
|
||||
this.blockUIAddRows.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIAddRows.stop();
|
||||
}, 2500);
|
||||
}
|
||||
onSelect({ selected }) {
|
||||
this.selected.splice(0, this.selected.length);
|
||||
this.selected.push(...selected);
|
||||
}
|
||||
reloadRowSelection() {
|
||||
this.blockUIRowSelection.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIRowSelection.stop();
|
||||
}, 2500);
|
||||
}
|
||||
deleteCheckedRow() {
|
||||
let index = 0;
|
||||
const removedIndex = [];
|
||||
const temp = [...this.rows];
|
||||
for (const row of temp) {
|
||||
for (const selectedRow of this.selected) {
|
||||
if (row.id === selectedRow.id) {
|
||||
removedIndex.push(index);
|
||||
}
|
||||
}
|
||||
index++;
|
||||
}
|
||||
|
||||
for (let i = removedIndex.length - 1; i >= 0; i--) {
|
||||
temp.splice(removedIndex[i], 1);
|
||||
}
|
||||
this.rows = temp;
|
||||
this.selected = [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .table-bordered {
|
||||
border: 2px solid #e3ebf3;
|
||||
}
|
||||
|
||||
:host ::ng-deep .filter {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
content: "\2039";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
content: "\00AB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
content: "\203A";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
content: "\00BB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #727e8e;
|
||||
color: #ededed;
|
||||
margin-top: -1px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-down:after {
|
||||
content: "\2193";
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .span .sort-btn .sort-desc .datatable-icon-down:before {
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:host ::ng-deep .span .sort-btn .sort-asc .datatable-icon-up:before {
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:host ::ng-deep .row {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap {
|
||||
box-shadow: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit
|
||||
}
|
||||
|
||||
|
||||
/* :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
|
||||
margin: 0px !important;
|
||||
} */
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
.datatable-scroll {
|
||||
width: 100% !important;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
:host ::ng-deep .empty-row {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Zero configuration table -->
|
||||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'zeroConfiguration'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadZeroConfiguration($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Zero configuration
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-dashboard">
|
||||
<p class="card-text">DataTables has sorting and most features enabled by default.</p>
|
||||
<ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="rows" [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Zero configuration table -->
|
||||
<!-- Default ordering table -->
|
||||
<section id="ordering">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'defaultOrdering'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDefaultOrdering($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Default ordering
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-dashboard">
|
||||
<p class="card-text">Lets say you want to sort column descending and
|
||||
ascending order. You want to search by the name column. </p>
|
||||
<div class="row">
|
||||
<div class=" col-sm-12 col-md-12">
|
||||
<div class="dataTables_filter">
|
||||
<h5>Search:<input type='text'
|
||||
style='padding:4px;margin:0px auto; margin-left: 8px; width:200px;border-radius: .22rem; border: 1px solid #BABFC7;'
|
||||
placeholder='Type to filter the name column...' (keyup)='updatedefaultFilter($event)' />
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-bordered default-ordering">
|
||||
<ngx-datatable class="bootstrap" [limit]="7" [rows]="defaultrows" [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DOM positioning table -->
|
||||
<section id="positioning">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">DOM positioning</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard">
|
||||
<p class="card-text">When customizing DataTables for your own usage, you might find
|
||||
that the default position of the feature elements (filter input etc) is not
|
||||
quite to your liking. To address this issue DataTables takes inspiration from
|
||||
the CSS 3 Advanced Layout Module and provides the dom initialization parameter
|
||||
which can be set to indicate where you wish particular features to appear in the
|
||||
DOM. You can also specify div wrapping containers (with an id and / or class) to
|
||||
provide complete layout flexibility.</p>
|
||||
|
||||
<div class="dom-positioning">
|
||||
<ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="DOMrows" [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
</div>
|
||||
<div class=" col-sm-12 col-md-6 dataTables_filter">
|
||||
<h5>Search:<input type='text'
|
||||
style='padding:4px;margin:0px auto; margin-left: 8px; width:200px;border-radius: .22rem; border: 1px solid #BABFC7;'
|
||||
placeholder='Type to filter the name column...' (keyup)='updateDOMFilter($event)' /></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="horizontal">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Scroll - horizontal and vertical</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard ">
|
||||
<p class="card-text">Scroll - horizontal and vertical DataTables has the ability to
|
||||
show tables with horizontal scrolling, which is very useful for when you have a
|
||||
wide table, but want to constrain it to a limited horizontal display area. </p>
|
||||
|
||||
<div class="table-striped table-bordered">
|
||||
<ngx-datatable class="bootstrap" style="height: 300px;" [rows]="Scrollrows" columnMode="force"
|
||||
[headerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="configScroll">
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
{{value}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scroll - horizontal and vertical table -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BasicinitialisationComponent } from './basicinitialisation.component';
|
||||
|
||||
describe('BasicinitialisationComponent', () => {
|
||||
let component: BasicinitialisationComponent;
|
||||
let fixture: ComponentFixture<BasicinitialisationComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BasicinitialisationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BasicinitialisationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,135 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { DatatableComponent } from '@swimlane/ngx-datatable';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basicinitialisation',
|
||||
templateUrl: './basicinitialisation.component.html',
|
||||
styleUrls: ['./basicinitialisation.component.css']
|
||||
})
|
||||
export class BasicinitialisationComponent implements OnInit {
|
||||
|
||||
@BlockUI('zeroConfiguration') blockUIZeroConfiguration: NgBlockUI;
|
||||
@BlockUI('defaultOrdering') blockUIDefaultOrdering: NgBlockUI;
|
||||
|
||||
public configScroll: PerfectScrollbarConfigInterface = { suppressScrollY : false, wheelPropagation: false };
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY : true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
temp = [];
|
||||
@ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
|
||||
constructor(private tableApiservice: TableApiService) {
|
||||
|
||||
}
|
||||
data: any;
|
||||
rows: any = [];
|
||||
defaultrows: any;
|
||||
DOMrows: any;
|
||||
Scrollrows: any;
|
||||
public breadcrumb: any;
|
||||
temp2 = this.rows;
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Basic DataTables',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Basic DataTables',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableInitialisationData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
this.defaultrows = this.data.defaultrows;
|
||||
this.DOMrows = this.data.DOMrows;
|
||||
this.Scrollrows = this.data.Scrollrows;
|
||||
}
|
||||
|
||||
updateFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.rows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.rows];
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.rows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
|
||||
updatedefaultFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.defaultrows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.defaultrows];
|
||||
// filter our data
|
||||
const temp = this.defaultrows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.defaultrows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
|
||||
updateDOMFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.DOMrows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.DOMrows];
|
||||
// filter our data
|
||||
const temp = this.DOMrows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.DOMrows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
|
||||
reloadZeroConfiguration() {
|
||||
this.blockUIZeroConfiguration.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIZeroConfiguration.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadDefaultOrdering() {
|
||||
this.blockUIDefaultOrdering.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIDefaultOrdering.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
13
src/app/content/table/datatables/datatables.module.spec.ts
Normal file
13
src/app/content/table/datatables/datatables.module.spec.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { DatatablesModule } from './datatables.module';
|
||||
|
||||
describe('DatatablesModule', () => {
|
||||
let datatablesModule: DatatablesModule;
|
||||
|
||||
beforeEach(() => {
|
||||
datatablesModule = new DatatablesModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(datatablesModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
50
src/app/content/table/datatables/datatables.module.ts
Normal file
50
src/app/content/table/datatables/datatables.module.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { BasicinitialisationComponent } from './basicinitialisation/basicinitialisation.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { StylingComponent } from './styling/styling.component';
|
||||
import { ApiComponent } from './api/api.component';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ClipboardModule } from 'ngx-clipboard';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
NgSelectModule,
|
||||
FormsModule,
|
||||
ClipboardModule,
|
||||
PerfectScrollbarModule,
|
||||
NgxDatatableModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'basicinitialisation',
|
||||
component: BasicinitialisationComponent
|
||||
},
|
||||
{
|
||||
path: 'styling',
|
||||
component: StylingComponent
|
||||
},
|
||||
|
||||
{
|
||||
path: 'api',
|
||||
component: ApiComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
declarations: [BasicinitialisationComponent, StylingComponent, ApiComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DatatablesModule { }
|
||||
251
src/app/content/table/datatables/styling/styling.component.css
Normal file
251
src/app/content/table/datatables/styling/styling.component.css
Normal file
@@ -0,0 +1,251 @@
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .table-bordered {
|
||||
border: 2px solid #e3ebf3;
|
||||
}
|
||||
|
||||
:host ::ng-deep .no-style {
|
||||
border-top: 2px solid #e3ebf3;
|
||||
}
|
||||
:host ::ng-deep .filter {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-header {
|
||||
display: block;
|
||||
overflow: inherit;
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
content: "\203A";
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
content: "\00BB";
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
content: "\2039";
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
content: "\00AB";
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-icon-left:before {
|
||||
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-icon-prev:before {
|
||||
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-icon-right:before {
|
||||
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-icon-skip:before {
|
||||
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #727e8e;
|
||||
color: #ededed;
|
||||
margin-top: -1px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager .pager li a {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 80%;
|
||||
flex: 1 1 97%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-down:after {
|
||||
content: "\2193";
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
:host ::ng-deep .ngx-datatable.no-style .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
:host ::ng-deep .empty-row {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
170
src/app/content/table/datatables/styling/styling.component.html
Normal file
170
src/app/content/table/datatables/styling/styling.component.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Base style table -->
|
||||
<section id="base-style">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'baseStyle'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBaseStyle($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Base style
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-dashboard">
|
||||
<p class="card-text">The DataTables default style file has a number of features which can be enabled
|
||||
based on the
|
||||
class name of the table.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12">
|
||||
<div class="dataTables_filter">
|
||||
<h5>Search:<input type='text'
|
||||
style='padding:4px;margin:0px auto; margin-left:8px; width:200px;border-radius: .22rem; border: 1px solid #BABFC7;'
|
||||
placeholder='Type to filter the name column...' (keyup)='updateFilter($event)' /></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table table-striped table-bordered base-style">
|
||||
<ngx-datatable class="bootstrap ps" [limit]="6" [rows]="rows" [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template let-row="row" ngx-datatable-cell-template>
|
||||
{{row.name}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Base style table -->
|
||||
|
||||
<!-- No styling classes -->
|
||||
<section id="no-style">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'noStylingClasses'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadNoStylingClasses($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
No styling classes
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p class="card-text">This example shows the base DataTables style file being used, with none of the
|
||||
additional
|
||||
feature style classes being used.</p>
|
||||
<div class="row">
|
||||
<div class=" col-sm-12 col-md-12">
|
||||
<div class="dataTables_filter">
|
||||
<h5>Search:<input type='text'
|
||||
style='padding:4px;margin:0px auto; margin-left:8px; width:200px;border-radius: .22rem; border: 1px solid #BABFC7;'
|
||||
placeholder='Type to filter the name column...' (keyup)='updatedefaultFilter($event)' /></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-style-no no-style">
|
||||
<ngx-datatable [rows]="stylerows" [columnMode]="'force'" fxFlex="auto" [perfectScrollbar]="config" >
|
||||
<ngx-datatable-column name="Name">
|
||||
<ng-template let-row="row" ngx-datatable-cell-template>
|
||||
{{row.name}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Office">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Age">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Salary">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Startdate">
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- No styling classes -->
|
||||
|
||||
<!-- Base style - compact table -->
|
||||
<section id="compact-style">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Base style - compact
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>The material class is used to reduce the amount of white-space the default styling for the
|
||||
DataTable uses,
|
||||
increasing the information density on screen, as shown below.</p>
|
||||
<div class="row">
|
||||
<div class=" col-sm-12 col-md-12">
|
||||
<div class="dataTables_filter">
|
||||
<h5>Search : <input type='text'
|
||||
style='padding:4px;margin:0px auto; margin-left:8px; width:200px;border-radius: .22rem; border: 1px solid #BABFC7;'
|
||||
placeholder='Type to filter the name column...' (keyup)='updatecompactFilter($event)' /></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table table-striped table-bordered compact">
|
||||
<ngx-datatable class="material" [limit]="10" [rows]="baserows" [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template let-row="row" ngx-datatable-cell-template>
|
||||
{{row.name}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Base style - compact table -->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { StylingComponent } from './styling.component';
|
||||
|
||||
describe('StylingComponent', () => {
|
||||
let component: StylingComponent;
|
||||
let fixture: ComponentFixture<StylingComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StylingComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StylingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
127
src/app/content/table/datatables/styling/styling.component.ts
Normal file
127
src/app/content/table/datatables/styling/styling.component.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { DatatableComponent } from '@swimlane/ngx-datatable';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-styling',
|
||||
templateUrl: './styling.component.html',
|
||||
styleUrls: ['./styling.component.css']
|
||||
})
|
||||
export class StylingComponent implements OnInit {
|
||||
|
||||
@BlockUI('baseStyle') blockUIBaseStyle: NgBlockUI;
|
||||
@BlockUI('noStylingClasses') blockUINoStylingClasses: NgBlockUI;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY : true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
temp = [];
|
||||
|
||||
@ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) { }
|
||||
public breadcrumb: any;
|
||||
data: any;
|
||||
rows: any = [];
|
||||
stylerows: any;
|
||||
baserows: any;
|
||||
temp2 = this.rows;
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Styling DataTable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Styling DataTable',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getStylingData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
this.stylerows = this.data.stylerows;
|
||||
this.baserows = this.data.baserows;
|
||||
}
|
||||
updateFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.rows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.rows];
|
||||
// filter our data
|
||||
const temp = this.rows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.rows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
updatedefaultFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.stylerows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.stylerows];
|
||||
// filter our data
|
||||
const temp = this.stylerows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.stylerows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
updatecompactFilter(event) {
|
||||
const val = event.target.value.toLowerCase();
|
||||
this.baserows = [...this.temp2]; // and here you have to initialize it with your data
|
||||
this.temp = [...this.baserows];
|
||||
// filter our data
|
||||
const temp = this.baserows.filter(function (d) {
|
||||
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
|
||||
});
|
||||
// update the rows
|
||||
this.baserows = temp;
|
||||
// Whenever the filter changes, always go back to the first page
|
||||
this.table.offset = 0;
|
||||
|
||||
}
|
||||
|
||||
reloadBaseStyle() {
|
||||
this.blockUIBaseStyle.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBaseStyle.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadNoStylingClasses() {
|
||||
this.blockUINoStylingClasses.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUINoStylingClasses.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
:host ::ng-deep input[type='checkbox'] {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .table-space {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
content: "\2039";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
content: "\00AB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
content: "\203A";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
content: "\00BB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #727e8e;
|
||||
color: #ededed;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .orange {
|
||||
color: orange !important;
|
||||
}
|
||||
:host ::ng-deep .Green {
|
||||
color: green !important;
|
||||
}
|
||||
:host ::ng-deep .red {
|
||||
color: red !important;
|
||||
}
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: -webkit-box;
|
||||
}
|
||||
:host ::ng-deep .empty-row {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic initialization table -->
|
||||
<section id="initialization">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'basicInitialization'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicInitialization($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic initialization
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-dashboard dataTables_wrapper dt-bootstrap">
|
||||
<p class="card-text">Buttons can be initialised very easily though the buttons object which can be
|
||||
given as an
|
||||
array of the buttons that you wish to display.
|
||||
</p>
|
||||
<div class="table table-striped table-bordered data-basic-initialization">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
|
||||
[rowHeight]="'auto'" [rows]="rows" [columnMode]="'force'" [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Basic initialization table -->
|
||||
|
||||
|
||||
<!--/ Basic initialization table -->
|
||||
<!-- Custom button table -->
|
||||
<section id="custom-button">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'customButton'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadCustomButton($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Custom button
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-dashboard dataTables_wrapper dt-bootstrap">
|
||||
<p class="card-text">Fundamentally, each button is described by an object - this object
|
||||
is read by
|
||||
Buttons and
|
||||
displayed as appropriate. There are a number of parameters that Buttons will
|
||||
automatically look for
|
||||
in the
|
||||
button description object such as buttons.buttons.text and buttons.buttons.action
|
||||
which are the two
|
||||
fundamental
|
||||
parameters (button text and the action to take when activated).
|
||||
</p>
|
||||
<button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">My button</button>
|
||||
<div class="table table-striped table-bordered data-custom-button">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
</div>
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
|
||||
[rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Custom button table -->
|
||||
|
||||
<!-- Class names table -->
|
||||
<section id="class-names">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Class names</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard dataTables_wrapper dt-bootstrap">
|
||||
<p class="card-text">This example also shows button definition objects being used to
|
||||
describe buttons.
|
||||
In this
|
||||
case we use the buttons.buttons.className option to specify a custom class name for
|
||||
the button. A
|
||||
little bit of
|
||||
CSS is used to style the buttons - the class names and CSS can of course be adjusted
|
||||
to suit
|
||||
whatever styling
|
||||
requirements you have.
|
||||
RedOrangeGreen
|
||||
</p>
|
||||
<button type="button" class="btn btn-secondary red my-1" (click)="onSingleEvents()">Red</button>
|
||||
<button type="button" class="btn btn-secondary orange my-1" (click)="onSingleEvents()">Orange</button>
|
||||
<button type="button" class="btn btn-secondary Green my-1" (click)="onSingleEvents()">Green</button>
|
||||
<div class="table table-striped table-bordered data-class-names">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
|
||||
[rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!--/ Class names table -->
|
||||
<!-- Multiple button groups table -->
|
||||
<section id="multiple">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Multiple button groups</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body card-dashboard dataTables_wrapper dt-bootstrap">
|
||||
<p class="card-text">Buttons' ability to have new instances constructed arbitrarily
|
||||
gives it the
|
||||
ability to have
|
||||
multiple button instances created for a single DataTable. This can be useful if you
|
||||
wish to display
|
||||
button
|
||||
groups with different functionality (file export, editing, etc).</p>
|
||||
|
||||
<button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">My button1</button>
|
||||
<div class="table table-striped table-bordered data-keyboard-activation">
|
||||
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
|
||||
[rowHeight]="'auto'" [limit]='10' [rows]="rows" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">Button2</button>
|
||||
<button type="button" class="btn btn-secondary my-1" (click)="onSingleEvents()">Button3</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ Multiple button groups table -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
|
||||
describe('ButtonsComponent', () => {
|
||||
let component: ButtonsComponent;
|
||||
let fixture: ComponentFixture<ButtonsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ButtonsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ButtonsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-buttons',
|
||||
templateUrl: './buttons.component.html',
|
||||
styleUrls: ['./buttons.component.css']
|
||||
})
|
||||
export class ButtonsComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicInitialization') blockUIBasicInitialization: NgBlockUI;
|
||||
@BlockUI('customButton') blockUICustomButton: NgBlockUI;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY : true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
loadingIndicator: true;
|
||||
data: any;
|
||||
rows: any;
|
||||
|
||||
constructor(private tableApiservice: TableApiService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Button Basic DataTable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTables',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Button',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableButtonData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
}
|
||||
onSingleEvents() {
|
||||
window.alert('Button actived');
|
||||
|
||||
}
|
||||
onSingleEventsitem() {
|
||||
window.alert('Button2 actived');
|
||||
|
||||
}
|
||||
onSingleEventsitems() {
|
||||
window.alert('Button3 actived');
|
||||
}
|
||||
|
||||
reloadBasicInitialization() {
|
||||
this.blockUIBasicInitialization.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicInitialization.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadCustomButton() {
|
||||
this.blockUICustomButton.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUICustomButton.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { DatatablesextModule } from './datatablesext.module';
|
||||
|
||||
describe('DatatablesextModule', () => {
|
||||
let datatablesextModule: DatatablesextModule;
|
||||
|
||||
beforeEach(() => {
|
||||
datatablesextModule = new DatatablesextModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(datatablesextModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
48
src/app/content/table/datatablesext/datatablesext.module.ts
Normal file
48
src/app/content/table/datatablesext/datatablesext.module.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
|
||||
import { Html5dataexportComponent } from './html5dataexport/html5dataexport.component';
|
||||
import { ClipboardModule } from 'ngx-clipboard';
|
||||
import { HiddentableComponent } from './hiddentable/hiddentable.component';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
NgxDatatableModule,
|
||||
FormsModule,
|
||||
BreadcrumbModule,
|
||||
ReactiveFormsModule,
|
||||
ClipboardModule,
|
||||
NgbModule,
|
||||
PerfectScrollbarModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent
|
||||
},
|
||||
{
|
||||
path: 'html5dataexport',
|
||||
component: Html5dataexportComponent
|
||||
},
|
||||
{
|
||||
path: 'hiddentable',
|
||||
component: HiddentableComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
declarations: [ButtonsComponent, Html5dataexportComponent, HiddentableComponent]
|
||||
})
|
||||
export class DatatablesextModule { }
|
||||
@@ -0,0 +1,213 @@
|
||||
:host ::ng-deep .ngx-datatable .datatable-header {
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
content: "\2039";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
content: "\00AB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
content: "\203A";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
content: "\00BB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-body .datatable-body-row>div {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.botstrap .datatable-footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: black;
|
||||
border-bottom: 1px solid #E3EBF3;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: black;
|
||||
border-bottom: 1px solid #E3EBF3;
|
||||
background: #727e8e;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .page-count {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 20%;
|
||||
flex: 1 1 20%;
|
||||
color: #ededed;
|
||||
font: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit;
|
||||
border-top: 1px solid #E3EBF3;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- HTML5 export buttons table -->
|
||||
<section id="html5">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'hiddenByDefalut'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadHiddenByDefalut($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Hidden By Default
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div>
|
||||
<button type="button" (click)="tab1=true;tab2=false;">Hidden</button>
|
||||
<button type="button" (click)="tab2=true;tab1=false;">Shown</button>
|
||||
</div>
|
||||
<div [hidden]="!tab1">
|
||||
<p>Click a button to toggle table visibilities</p>
|
||||
</div>
|
||||
<div [hidden]="!tab2">
|
||||
<h4>hidden Table</h4>
|
||||
<ngx-datatable class='bootstrap' style="height : 500px;" [rows]='rows' [columnMode]="'force'"
|
||||
[headerHeight]="50" [footerHeight]="40" [rowHeight]="50" [limit]='10' fxFlex="auto"
|
||||
[perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--/ HTML5 export buttons table -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { HiddentableComponent } from './hiddentable.component';
|
||||
|
||||
describe('HiddentableComponent', () => {
|
||||
let component: HiddentableComponent;
|
||||
let fixture: ComponentFixture<HiddentableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HiddentableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HiddentableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hiddentable',
|
||||
templateUrl: './hiddentable.component.html',
|
||||
styleUrls: ['./hiddentable.component.css']
|
||||
})
|
||||
export class HiddentableComponent implements OnInit {
|
||||
|
||||
@BlockUI('hiddenByDefalut') blockUIHiddenByDefalut: NgBlockUI;
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY : true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
expanded: any = {};
|
||||
timeout: any;
|
||||
public breadcrumb: any;
|
||||
constructor(private tableApiservice: TableApiService) { }
|
||||
tab1 = true;
|
||||
tab2 = false;
|
||||
data: any;
|
||||
rows: any;
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Hidden On Load',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTable',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Hidden On Load',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableHiddenData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
}
|
||||
|
||||
reloadHiddenByDefalut() {
|
||||
this.blockUIHiddenByDefalut.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIHiddenByDefalut.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #6B6F82;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
font-family: 'icofont';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-left:before {
|
||||
content: "\2039";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-prev:before {
|
||||
content: "\00AB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-right:before {
|
||||
content: "\203A";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-icon-skip:before {
|
||||
content: "\00BB";
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #d4d2e7;
|
||||
}
|
||||
|
||||
:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
|
||||
background-color: #d4d2e7;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
|
||||
height: 32px;
|
||||
min-width: 34px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding-top: 3px;
|
||||
text-decoration: none;
|
||||
vertical-align: bottom;
|
||||
color: #7c8091;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 14px;
|
||||
line-height: 9px;
|
||||
padding: 0px 08px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
|
||||
.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
|
||||
font-size: 0px;
|
||||
line-height: 22px;
|
||||
padding: 0px 09px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
|
||||
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
|
||||
background-color: #545454;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #727e8e;
|
||||
color: #ededed;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable {
|
||||
display: -webkit-box;
|
||||
}
|
||||
:host ::ng-deep .empty-row {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- HTML5 export buttons table -->
|
||||
<section id="html5">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'exportButtons'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadExportButtons($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
HTML5 export buttons
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="collapse show">
|
||||
<div class=" card-dashboard">
|
||||
<p class="card-text">The HTML5 export buttons plug-in for Buttons provides three export buttons:</p>
|
||||
<p>CopyHtml5 - Copy to clipboard</p>
|
||||
<p>ExcelHtml5 - Save to XLSX file</p>
|
||||
<p>PdfHtml5 - Save to PDF file </p>
|
||||
<div class=" justify-content">
|
||||
<button class="btn btn-secondary buttons-excel buttons-html5"
|
||||
(click)="callServiceToCopy()">Copy</button>
|
||||
<button class="btn btn-secondary buttons-excel buttons-html5"
|
||||
(click)="getExcelData()">Excel</button>
|
||||
<button class="btn btn-secondary buttons-excel buttons-html5" (click)="getPdfData()">Pdf</button>
|
||||
</div>
|
||||
<div class="table table-striped table-bordered dataex-html5-export">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="50"
|
||||
[rowHeight]="'auto'" [rows]="row" [limit]="7" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="html5">
|
||||
<div class="row " id="printMe">
|
||||
<div class="col-12 printMe" *blockUI="'printButtons'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadPrintButtons($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
HTML5 print buttons
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
|
||||
<div class="collapse show">
|
||||
<div class="card-dashboard">
|
||||
<p class="card-text">The HTML5 print buttons plug-in for Buttons provides print button:</p>
|
||||
<p>This simple example shows Buttons configured with the print button type only. The print button
|
||||
will open a new window in the end user's browser and, by default, automatically trigger the print
|
||||
function allowing the end user to print the table. The window will be closed once the print is
|
||||
complete, or has been cancelled.</p>
|
||||
|
||||
<div class="justify-content">
|
||||
<button class="btn btn-secondary buttons-excel buttons-html5" (click)="getPrint('printMe')">Print</button>
|
||||
</div>
|
||||
<div class="table table-striped table-bordered dataex-html5-export">
|
||||
<ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="40"
|
||||
[rowHeight]="'auto'" [rows]="row" [limit]="7" [columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
|
||||
|
||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.name}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.position}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.office}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.age}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.salary}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-cell-template let-row="row">
|
||||
<span>{{row.startdate}}</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--/ HTML5 export buttons table -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { Html5dataexportComponent } from './html5dataexport.component';
|
||||
|
||||
describe('Html5dataexportComponent', () => {
|
||||
let component: Html5dataexportComponent;
|
||||
let fixture: ComponentFixture<Html5dataexportComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ Html5dataexportComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(Html5dataexportComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,123 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ElementRef, ViewChild } from '@angular/core';
|
||||
import { ClipboardService } from 'ngx-clipboard';
|
||||
import { TableexcelService } from '../../../../_services/tableexcel.service';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||
const { jsPDF } = require("jspdf");
|
||||
require('jspdf-autotable');
|
||||
|
||||
@Component({
|
||||
selector: 'app-html5dataexport',
|
||||
templateUrl: './html5dataexport.component.html',
|
||||
styleUrls: ['./html5dataexport.component.css']
|
||||
})
|
||||
export class Html5dataexportComponent implements OnInit {
|
||||
|
||||
@BlockUI('exportButtons') blockUIExportButtons: NgBlockUI;
|
||||
@BlockUI('printButtons') blockUIPrintButtons: NgBlockUI;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { suppressScrollY : true };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
data: any;
|
||||
row: any;
|
||||
text1: string;
|
||||
textModal: string;
|
||||
isCopied1: boolean;
|
||||
isCopied2: boolean;
|
||||
isCopied3: boolean;
|
||||
basic = false;
|
||||
constructor(private _clipboardService: ClipboardService,
|
||||
private tableApiservice: TableApiService,
|
||||
private tableexcelService: TableexcelService) { }
|
||||
|
||||
@ViewChild('reportContent') reportContent: ElementRef;
|
||||
loadingIndicator: true;
|
||||
public breadcrumb: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'HTML 5 Data Export',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'DataTable',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'HTML 5 Data Export',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
this.tableApiservice.getTableButtonData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
});
|
||||
}
|
||||
getTabledata() {
|
||||
this.row = this.data.rows;
|
||||
}
|
||||
callServiceToCopy() {
|
||||
this._clipboardService.copyFromContent(JSON.stringify(this.row));
|
||||
}
|
||||
|
||||
onCopyFailure() {
|
||||
alert('copy fail!');
|
||||
}
|
||||
getExcelData(): void {
|
||||
this.tableexcelService.exportAsExcelFile(this.row, 'Modern Admin - Clean Angular8+ Dashboard HTML Template');
|
||||
}
|
||||
|
||||
getPdfData() {
|
||||
|
||||
const doc = new jsPDF();
|
||||
const col = ['Name', 'Position', 'office', 'age', 'salary', 'startdate'];
|
||||
const rows = [];
|
||||
|
||||
this.row.forEach(element => {
|
||||
const temp = [element.name, element.position, element.office, element.age, element.salary, element.startdate
|
||||
];
|
||||
rows.push(temp);
|
||||
});
|
||||
doc.autoTable(col, rows);
|
||||
doc.save('Test.pdf');
|
||||
}
|
||||
getPrint(printME) {
|
||||
const printContents = document.getElementById(printME).innerHTML;
|
||||
const originalContents = document.body.innerHTML;
|
||||
document.body.innerHTML = printContents;
|
||||
window.print();
|
||||
document.body.innerHTML = originalContents;
|
||||
}
|
||||
|
||||
reloadExportButtons() {
|
||||
this.blockUIExportButtons.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIExportButtons.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadPrintButtons() {
|
||||
this.blockUIPrintButtons.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIPrintButtons.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user