August 10, 2022

Angular UI Crud Table Component Library | ng-mazdik

ng-mazdik is a simple CRUD table component for Angular 2 using REST backend and Bootstrap 3 CSS. Yii2 supports RESTful API, ORDS (Oracle REST Data Services), and Flask-Restless.

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 columns 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

How to make use of it:

Install

npm i ng-mazdik-lib --save

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

import {Component}  from '@angular/core';
import {ColumnBase, CdtSettings, DataSource, DataManager, Validators} from 'ng-mazdik-lib';
import {DemoService} 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 demoService: DemoService) {
      const service = this.demoService; // your custom service
      this.dataManager = new DataManager(this.columns, this.settings, service);
    }
}

CdtSettings extends Settings

AttributeTypeDefaultDescription
crudbooleanfalse 
initLoadbooleantrue 
globalFilterbooleanfalse 
singleRowViewbooleantrue 
exportActionbooleanfalsecsv
columnToggleActionbooleanfalse 
clearAllFiltersActionbooleanfalse 
clearAllFiltersIconbooleantrue

Lib

ComponnentDescription
app-context-menu 
app-dropdown-select 
app-dynamic-form 
app-inline-edit, [inline-edit] 
app-notifywith 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]

angular 2 crud table using rest backend, ng-mazdik Plugin/Github


See Demo And Download

Official Website(mazdik): Click Here

This superior jQuery/javascript plugin is developed by mazdik. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.