File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(cdRef: ChangeDetectorRef, resourceService: ResourceService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| cdRef |
ChangeDetectorRef
|
No
|
| resourceService |
ResourceService
|
No
|
|
Methods
|
exportToCsv
|
exportToCsv()
|
|
|
|
|
|
filterChanged
|
filterChanged(data: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
any
|
No
|
|
|
getTableData
|
getTableData()
|
|
|
|
Returns : {}
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
data
|
Type : object
|
Default value : {}
|
|
|
|
lib
|
Type : any
|
Decorators :
@ViewChild('lib', {static: false})
|
|
|
import { Component, Input, AfterViewInit, ChangeDetectorRef, ViewChild } from '@angular/core';
import { ResourceService } from '@sunbird/shared';
@Component({
selector: 'app-sb-table',
templateUrl: './sb-table.component.html',
styleUrls: ['./sb-table.component.scss']
})
export class SbTableComponent implements AfterViewInit {
@Input() rowsData: any;
data = {};
@Input() config;
currentFilters: Array<{}>;
resetFilters:any;
constructor(private cdRef: ChangeDetectorRef, private resourceService: ResourceService) { }
@ViewChild('lib', { static: false }) lib: any;
loadTable() {
this.data = {
values: this.rowsData
};
this.cdRef.detectChanges();
}
ngAfterViewInit() {
this.loadTable();
}
exportToCsv() {
console.log('exportToCsv1');
this.lib.instance.exportAs('csv');
}
reset() {
this.rowsData['selectedFilters'] = {};
this.resetFilters = { data: this.rowsData, reset: true };
this.currentFilters = [];
this.lib.instance.reset();
this.loadTable();
}
getTableData() {
return [{ id: this.config?.id , data: this.rowsData , selectedFilters: this.currentFilters }];
}
filterChanged(data: any): void {
this.currentFilters = data?.filters;
this.rowsData['selectedFilters'] = data?.filters ? data?.filters : {}
delete data?.chartData[0]?.data['selectedFilters']
this.lib.instance.update({data:data?.chartData[0]?.data})
}
}
<div *ngIf="config && data" class="flex-row">
<div class="d-flex flex-ai-center flex-jc-flex-end pr-10 mb-10">
<button type="button" class="sb-btn sb-btn-normal sb-btn-primary export-btn mr-10"
(click)="lib.instance.exportAs('csv',{ 'strict':true })"><i class="download icon"></i>{{resourceService?.frmelmnts?.lbl?.exportCsv}}</button>
<button *ngIf="config && config.filters && config.filters.length >0" type="button" class="sb-btn sb-btn-normal sb-btn-outline-primary action-btn"
(click)="reset()"> {{resourceService?.frmelmnts?.btn?.reset}} {{resourceService?.frmelmnts?.lbl?.filters}} </button>
</div>
<div class="ml-20 mb-20" *ngIf="config.filters && config.filters.length >0"> <label class="filter-label">{{resourceService?.frmelmnts?.lbl?.chooseFilter}} </label> </div>
<sb-dashlet class="dashlet-table" [type]="'table'" [data]="data" [config]="config" #lib>
<ng-template *ngIf="config.hasDependencyFilters" sbTemplateRef="filter">
<app-filter [filterType] ="chart-filter" [filters]="config.filters" [resetFilters]="resetFilters" [selectedFilter]="{}" (filterChanged)="filterChanged($event)" [chartData]="getTableData()">
</app-filter>
</ng-template>
</sb-dashlet>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
::ng-deep{
.sb-filter-g__item {
align-self: flex-start;
}
.selected-item {
margin-bottom: calculateRem(5px);
white-space: nowrap;
}
.dataTable{
margin: 0px !important;
}
.dropdown-btn {
border: none !important;
}
.multiselect-dropdown .dropdown-btn {
padding: calculateRem(7px) calculateRem(18px) !important;
border: none !important;
}
.sb-filter-g__item {
border-radius: calculateRem(24px);
min-width: calculateRem(250px)!important;
min-height: calculateRem(40px)!important;
font-size: calculateRem(15px)!important;
padding: 0px;
margin-right: calculateRem(18px);
border: calculateRem(1px) solid var(--gray-200);
}
.dropdown-list {
border: none !important;
}
li.multiselect-item-checkbox {
margin: calculateRem(10px);
}
.dataTables_wrapper .dataTables_filter input {
background-color: var(--white) !important;
border: calculateRem(1px) solid var(--gray-200) !important;
}
.dropdown-multiselect__caret {
height: calculateRem(40px) !important;
}
.dataTables_wrapper {
padding-top: calculateRem(30px);
border-top: calculateRem(1px) solid var(--gray-200);
padding: calculateRem(20px);
}
table.dataTable {
width: 100% !important;
}
.export-btn {
color: var(--white) !important;
background-color: var(--primary-400);
}
.sb-btn-normal {
font-weight: 500 !important;
font-size: calculateRem(15px) !important;
}
table.dataTable.no-footer {
overflow-x: auto;
width: 100% !important;
display: block;
}
table.dataTable th, table.dataTable td {
min-width: calculateRem(131px) !important;
}
.sb-filter-g {
grid-template-columns :repeat(auto-fill,minmax(300px,1fr)) !important;
margin-left: calculateRem(20px);
margin-right: calculateRem(20px);
margin-bottom: calculateRem(25px) !important;
gap: 0px !important;
}
.dataTables_wrapper .dataTables_filter input {
border-radius: calculateRem(24px) !important;
}
table.dataTable th, table.dataTable td {
text-align: center !important;
}
sb-dashlet.dashlet-table app-filter .sb-form{
margin-left: 1rem !important;
margin-bottom: 1rem !important;
}
}
.filter-label {
font-size: calculateRem(24px);
color: var(--primary-400);
}
Legend
Html element with directive