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"
],

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

Attribute	Type	Default
name	string	null
title	string	null
sortable	boolean	true
filter	boolean	true
options	SelectItem[]	null
optionsUrl	string	null
width	number	null
frozen	boolean	false
type	text / password / number / select / radio / checkbox / textarea / date / datetime-local / month / select-popup / select-dropdown	null
validatorFunc	(name: string, value: any) => string[]	null
editable	boolean	false
resizeable	boolean	true
dependsColumn	string	null
cellTemplate	TemplateRef	null
formTemplate	TemplateRef	null
headerCellTemplate	TemplateRef	null
formHidden	boolean	false
tableHidden	boolean	false
cellClass	string / Function	null
headerCellClass	string	null
keyColumn	string	null
multiSelectFilter	boolean	false
minWidth	number	50
maxWidth	number	500
aggregation	sum / average / max / min / count	null
filterValues	(columnName: string) => Promise<SelectItem[]> / SelectItem[] / string	null
dataType	string /number /date	null
formDisableOnEdit	boolean	false
pipe	PipeTransform	null

Settings

Attribute	Type	Default	Description
bodyHeight	number	null
sortable	boolean	true
filter	boolean	true
multipleSort	boolean	false
trackByProp	string	null
groupRowsBy	string[]	null
selectionMultiple	boolean	false
selectionMode	checkbox / radio	null
virtualScroll	boolean	false
rowClass	string / Function	false
headerRowHeight	number	null	px, 0 - hide header
rowHeight	number	30	px
rowNumber	boolean	true
hoverEvents	boolean	false	mouseover/mouseout
contextMenu	boolean	false	event
editMode	editCellOnDblClick / editProgrammatically	editCellOnDblClick
paginator	boolean	true
rowHeightProp	string	null	row.$$height
isEditableCellProp	string	null	row.$$editable

CdtSettings extends Settings

Attribute	Type	Default	Description
crud	boolean	false
initLoad	boolean	true
globalFilter	boolean	false
singleRowView	boolean	true
zIndexModal	number	null
exportAction	boolean	false	csv
columnToggleAction	boolean	false
clearAllFiltersAction	boolean	false
clearAllFiltersIcon	boolean	true

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

Componnent	Description
app-context-menu
app-dropdown-select
app-dynamic-form
app-inline-edit, [inline-edit]
app-notify	with NotifyService
app-modal
app-modal-edit-form
app-modal-select
app-pagination
app-row-view
app-scroller, [scroller]	virtual scroll
app-select-list
dt-toolbar
tree
app-tree-view
app-dual-list-box
[appResizable]
[appDraggable]
[appDroppable]	html5
[appDropdown]

Templates

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

huangwei16800 / ng-crud-table

Angular UI component library

Installation

Styles

Sample crud-table

Sample data-table

Sample tree-table

Features

Custom service

Column

Settings

CdtSettings extends Settings

Sample event subscriptions

Sample translate

Lib

Templates

About

Languages