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);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user