mat-table-ext 0.0.0 → 0.0.2

package/projects/mat-table-ext-example/src/app/app.component.ts

@@ -1,173 +0,0 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
-import { CustomTableService } from './service/custom-table.service';
-import { MTExColumn } from '../../../mat-table-ext/src/lib/models/tableExtModels';
-export const EXAMPLE_DATA: any[] = [
-  {
-    position: 1,
-    name: 'Boron',
-    weight: 10.811,
-    symbol: 'B',
-    gender: 'male',
-    mobile: '13198765432',
-    tele: '567891234',
-    city: 'Berlin',
-    address: 'Bernauer Str.111,13355',
-    date: '1423456765768',
-    website: 'www.matero.com',
-    company: 'matero',
-    email: 'Boron@gmail.com',
-    status: false,
-    cost: 4,
-  },
-  {
-    position: 2,
-    name: 'Helium',
-    weight: 8.0026,
-    symbol: 'He',
-    gender: 'female',
-    mobile: '13034676675',
-    tele: '80675432',
-    city: 'Shanghai',
-    address: '88 Songshan Road',
-    date: '1423456765768',
-    website: 'www.matero.com',
-    company: 'matero',
-    email: 'Helium@gmail.com',
-    status: true,
-    cost: 5,
-  },
-  {
-    position: 3,
-    name: 'Nitrogen',
-    weight: 14.0067,
-    symbol: 'N',
-    gender: 'male',
-    mobile: '15811112222',
-    tele: '345678912',
-    city: 'Sydney',
-    address: 'Circular Quay, Sydney NSW 2000',
-    date: '1423456765768',
-    website: 'www.matero.com',
-    company: 'matero',
-    email: 'Nitrogen@gmail.com',
-    status: true,
-    cost: 2,
-  },
-];
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-})
-export class AppComponent {
-  title = 'mat-table-ext-example';
-  isLoading: boolean = false;
-  public dataSource: any = new MatTableDataSource(EXAMPLE_DATA);
-  stickyColumn: any = false;
-  columnResizable: any = false;
-  stickyFooter: any = false;
-  stickyHeader: any = false;
-  inlineRowEditing: any = false;
-  popupRowEditing: any = false;
-  inCellEditing: any = false;
-  deleteRow: any = false;
-  stripedRows: any = false;
-  rowSelection: any = false;
-  multiRowSelection: any = false;
-  simpleFilter: any = true;
-  selectionFilter: any = false;
-  toolbarToggle: any = true;
-  toolbarHeight: string = '';
-  showFirstLastButtons: any = false;
-  columnPinnable: any = false;
-  columnHidable: any = false;
-  exportButtonEnable: any = true;
-  @ViewChild('cellTemplate1') cellTemplate1!: TemplateRef<any>;
-  @ViewChild('cellTemplate2') cellTemplate2!: TemplateRef<any>;
-
-  public columns: MTExColumn[] = [
-    { header: 'Position', field: 'position', width: '200px',type:'string' },
-    { header: 'Name', field: 'name', width: '200px', pinned: 'left', type: 'string' },
-    { header: 'Weight', field: 'weight', width: '200px', pinned: 'left', type: 'string' },
-    { header: 'Symbol', field: 'symbol', width: '200px', type: 'string' },
-    { header: 'Gender', field: 'gender', width: '200px', type: 'selection',options:['male','female'] }
-  ];
-  multiSelectRow: any = true;
-  topSearchFilter: any = false;
-  tableHeight: string = '';
-  tableWidth: string = '';
-  isExpandEnable: any = false;
-  dragEnable: any = false;
-  sorting: any = false;
-  infiniteScroll: any = false;
-  scrollbarH: any = false;
-  paginationEnable: any = true;
-  headerTemplateRefCtrl: any = false;
-  cellTemplateRefCtrl: any = false;
-  toolbarTemplateRefCtrl: any = false;
-  popupTemplateRefCtrl: any = false;
-  inlineTemplateRefCtrl: any = false;
-  cellEditingTemplateRefCtrl: any = false;
-  constructor(public service: CustomTableService) {
-    // this.loadPage(10);
-  }
-
-  ngOnInit(): void {}
-
-  showhidecolumn(op: string) {
-    switch (op) {
-      case 'inlineRowEditing': {
-        this.inlineRowEditing = !this.inlineRowEditing;
-        break;
-      }
-      case 'popupRowEditing': {
-        this.popupRowEditing = !this.popupRowEditing;
-        break;
-      }
-      case 'enableDelete': {
-        this.deleteRow = !this.deleteRow;
-        break;
-      }
-      case 'select': {
-        this.multiRowSelection = !this.multiRowSelection;
-        break;
-      }
-    }
-  }
-
-  showData(event: any, property: string) {
-    console.log(property, event);
-  }
-
-  onScroll(event: any) {
-    let pageLimit: number = 10;
-    let scrollHeight = event.target.scrollHeight;
-    let scrollTop = event.target.scrollTop;
-    let clientHeight = event.target.clientHeight;
-    let scrollPosition = scrollHeight - (scrollTop + clientHeight);
-    console.log('scrollPosition', scrollPosition);
-    if (scrollPosition <= 5 && this.infiniteScroll) {
-      this.loadPage(pageLimit);
-    }
-  }
-
-  loadPage(limit: number) {
-    this.isLoading = true;
-    let offset = this.dataSource ? this.dataSource.data.length : 0;
-    this.service.getResults(offset, limit).subscribe((results: any) => {
-      if (this.dataSource) {
-        const rows = [...this.dataSource.data, ...results.data];
-        this.dataSource = new MatTableDataSource(rows);
-      } else {
-        const rows = [...results.data];
-        this.dataSource = new MatTableDataSource(rows);
-      }
-      this.isLoading = false;
-    });
-  }
-
-  onSelectionChange(event: any) {
-    console.log('Selection Change: ', event);
-  }
-}

package/projects/mat-table-ext-example/src/app/app.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import { MatTableExtModule } from 'mat-table-ext';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { MatIconModule } from '@angular/material/icon';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatCardModule } from '@angular/material/card';
-import { MatInputModule } from '@angular/material/input';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientModule } from '@angular/common/http';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatTableExtModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    ReactiveFormsModule,
-    FormsModule,
-    MatSelectModule,
-    HttpClientModule,
-    MatIconModule,
-    MatDividerModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSlideToggleModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}

package/projects/mat-table-ext-example/src/app/service/custom-table.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { CustomTableService } from './custom-table.service';
-
-describe('CustomTableService', () => {
-  let service: CustomTableService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(CustomTableService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/projects/mat-table-ext-example/src/app/service/custom-table.service.ts

@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, delay, map, Observable, of } from 'rxjs';
-import data from '../../assets/data.json';
-const companyData = data as any[];
-@Injectable({
-  providedIn: 'root',
-})
-export class CustomTableService {
-  public selectedRow = new BehaviorSubject<any>(null);
-  public selectedRowIndex = new BehaviorSubject<any>(null);
-  constructor() {}
-  getResults(offset: number, limit: number): Observable<any> {
-    return of(companyData.slice(offset, offset + limit)).pipe(
-      delay(new Date(Date.now() + 250)),
-      map((d) => ({ data: d }))
-    );
-  }
-}