ng-mazdik-lib v0.0.16

Angular UI component library

Installation

npm i ng-mazdik-lib --save

Styles

Add global styles in angular.json

"styles": [
  "src/styles.css",
  "node_modules/ng-mazdik-lib/styles/bundled.css",
  "node_modules/ng-mazdik-lib/styles/ie.css" // if need to support IE 11 
],

Demos

Sample crud-table

Feature-rich data table component for Angular with CRUD operations.

import {Component}  from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ColumnBase, CdtSettings, DataSource, DataManager, Validators, NotifyService} from 'ng-mazdik-lib';
import {YiiService} from './samples/services';

@Component({
  selector: 'my-app',
  template: `<app-crud-table [dataManager]="dataManager"></app-crud-table>
  <app-notify></app-notify>`
})

export class PlayersComponent {

    dataManager: DataManager;
    columns: ColumnBase[] = [
        {
            title: 'Id', 
            name: 'id', 
            sortable: false, 
            filter: false, 
            frozen: true,
            resizeable: false,
            formHidden: true,
        },
        {
            title: 'Name', 
            name: 'name', 
            frozen: true, 
            width: 250,
            validatorFunc: Validators.get({required: true, minLength: 2, pattern: '^[a-zA-Z ]+$'}),
            editable: true,
        },
        {
            title: 'Race',
            name: 'race',
            type: 'select',
            options: [
                { id: 'ASMODIANS', name: 'ASMODIANS' },
                { id: 'ELYOS', name: 'ELYOS' },
            ],
            editable: true,
        },
        {
            title: 'Cascading Select',
            name: 'note',
            editable: true,
            type: 'select-dropdown',
            options: [
                { id: 'ASM1', name: 'ASM note 1', parentId: 'ASMODIANS' },
                { id: 'ASM2', name: 'ASM note 2', parentId: 'ASMODIANS' },
                { id: 'ASM3', name: 'ASM note 3', parentId: 'ASMODIANS' },
                { id: 'ASM4', name: 'ASM note 4', parentId: 'ASMODIANS' },
                { id: 'ELY1', name: 'ELY note 1', parentId: 'ELYOS' },
                { id: 'ELY2', name: 'ELY note 2', parentId: 'ELYOS' },
                { id: 'ELY3', name: 'ELY note 3', parentId: 'ELYOS' },
            ],
            dependsColumn: 'race',
            multiSelectFilter: true,
        },
        {
            title: 'Gender',
            name: 'gender',
            type: 'radio',
            options: [
                { id: 'MALE', name: 'MALE' },
                { id: 'FEMALE', name: 'FEMALE' },
            ],
            editable: true,
        },
        {
            title: 'Exp',
            name: 'exp',
            type: 'number',
            validatorFunc: Validators.get({required: true, minLength: 2, maxLength: 10}),
            editable: true,
        },
        {
            title: 'Last online', 
            name: 'last_online', 
            type: 'date',
            editable: true,
        },
        {
          title: 'Account name',
          name: 'account_name',
          editable: true,
          type: 'select-popup',
          optionsUrl: 'assets/accounts.json',
          keyColumn: 'account_id',
        },
        {
          title: 'Account id',
          name: 'account_id',
          formHidden: true,
          tableHidden: true,
        }
    ];
    settings: CdtSettings = new CdtSettings({
        crud: true,
        bodyHeight: 380
    });

    constructor(private http: HttpClient, private notifyService: NotifyService) {
      // YiiService | RestlessService | your custom service
      const service = new YiiService(this.http, this.notifyService);
      service.url = 'http://host3/players';
      service.primaryKeys = ['id'];
      this.dataManager = new DataManager(this.columns, this.settings, service);
    }
}

Sample data-table

import {ColumnBase, Settings, DataTable} from 'ng-mazdik-lib';

@Component({
  selector: 'app-data-table-demo',
  template: `<app-data-table [table]="dataTable"></app-data-table>`
})

export class DataTableDemoComponent {

  dataTable: DataTable;
  columns: ColumnBase[];
  settings: Settings;

  constructor() {
    this.dataTable = new DataTable(this.columns, this.settings);
    this.dataTable.rows = data[];
  }
}

Sample tree-table

import {ColumnBase, Settings, TreeTable} from 'ng-mazdik-lib';
import {TreeDemoService} from './tree-demo.service';

@Component({
  selector: 'app-tree-table-demo',
  template: `<app-tree-table [treeTable]="treeTable"></app-tree-table>`
})

export class TreeTableDemoComponent {

  treeTable: TreeTable;
  settings: Settings;
  columns: ColumnBase[];

  constructor(private treeService: TreeDemoService) {
    this.treeTable = new TreeTable(this.columns, this.settings, this.treeService);
  }
}

Features

• Filtering (column filters and an optional global filter)
• Sorting (multiple columns)
• Pagination
• Modal (draggable and resizable)
• Create/Update/Delete (composite primary keys)
• Single row view (with sortable colums and values)
• Loading indicator
• Row selection (single, multiple, checkbox, radio)
• Scrolling with fixed header horizontally and vertically
• Frozen columns
• Dynamic forms with validation
• Modal select list (with search and pagination)
• Editable
• Localization
• Column resizing
• Cascading select (client/server side dynamic drop-down lists)
• Tree table (flatten/unflatten tree, lazy loading)
• Row Grouping (multiple columns)
• Summary Row (aggregation on a column)
• Live Updates
• Virtual scroll with dynamic row height
• Header and Cell Templates
• Keyboard navigation
• Export Data to CSV
• No external dependencies

Custom service

export class YourService implements DataSource {
}

interface DataSource {
  getItems(requestMeta: RequestMetadata): Promise<PagedResult>;
  getItem(row: any): Promise<any>;
  post(row: any): Promise<any>;
  put(row: any): Promise<any>;
  delete(row: any): Promise<any>;
  getOptions?(url: string, parentId: any): Promise<any>;
}
export interface RequestMetadata {
  pageMeta: PageMetadata;
  sortMeta: SortMetadata[];
  filters: FilterMetadata;
  globalFilterValue?: string;
}
export interface PagedResult {
  items: any[];
  _meta: PageMetadata;
}
export interface PageMetadata {
  currentPage: number;
  perPage: number;
  totalCount?: number;
  pageCount?: number;
  maxRowCount?: number;
}

Column

Settings

CdtSettings extends Settings

export class SelectItem {
  id: any;
  name: string;
  parentId?: any;
}

Sample event subscriptions

import {Subscription} from 'rxjs';

private subscriptions: Subscription[] = [];

  ngOnInit() {
    const subSelection = this.table.events.selectionSource$.subscribe(() => {
      this.table.getSelection();
    });
    this.subscriptions.push(subSelection);
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
  }

Sample translate

import {DtMessages, DtMessagesEn} from 'ng-mazdik-lib';

messages: DtMessages = new DtMessagesEn({
  empty: 'No data to display',
  titleDetailView: 'Item details',
  titleCreate: 'Create a new item'
});
this.dataManager = new DataManager(this.columns, this.settings, this.service, this.messages);

Lib

Templates

<app-data-table[table]="table">
  <ng-template dtHeaderTemplate></ng-template>
  <ng-template dtRowGroupTemplate let-row="row"></ng-template>
</app-data-table>