SaeculumDataTable

This library was generated with Angular CLI version 8.1.3.

Code scaffolding

Run ng generate component component-name --project saeculum-data-table to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project saeculum-data-table.

Note: Don't forget to add --project saeculum-data-table or else it will be added to the default project in your angular.json file.

Build

Run ng build saeculum-data-table to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build saeculum-data-table, go to the dist folder cd dist/saeculum-data-table and run npm publish.

Running unit tests

Run ng test saeculum-data-table to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

1. Install @angular/forms and saeculum-data-table packages:

  npm install saeculum-data-table --save

2. Add styles in Style.scss:

@import "../node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css";

FILTER TYPE:

1.) textbox,
2.) list, filteritems : [], // Single select list
3.) date, cellsformat: 'dd/MM/yyyy'
4.) number,
5.) checkedlist, filteritems: [] // Multiple checked list

DEMO COLUMN AND DATA:

COLUMNS  = [{
    text: 'First Name',
    datafield: 'firstname',
    columngroup: 'ProductDetails',
    pinned: true, // For sticky Column
    width: 250,
    filtertype: 'list',
    sortable: false,
    menu: false,
    editable: false,
    filterable: true,
},
{
    text: 'Last Name',
    datafield: 'lastname',
    columngroup: 'ProductDetails',
    width: 250,
    filtertype: 'list',
    sortable: false,
    menu: false,
    editable: false,
    filterable: true,
}]

DATA = [{ id: 1, firstname: 'Andrew', lastname: 'Burke', productname: 'White Chocolate Mocha', quantity: 5, price: 3.8 },
        {id: 2, firstname: 'Andrew', lastname: 'Wilson', productname: 'Espresso con Panna', quantity: 1, price: 5 }]

count = 2;        

ACTION COLUMNS:

[{
    text: 'Action',
    width: '15%',
    columnType: 'none',
    cellsrenderer: null,
    dataField: null,
    editable: false,
    filterable: false,
    sortable: false,
    menu: false,
    buttons: ['View', 'Edit', 'Delete', 'Status', 'switch']
}]

3. Import the SaeculumDataTableModule and UI (pre-defined types/templates):

import {SaeculumDataTableModule} from 'saeculum-data-table';


@NgModule({
  imports: [
    ...,
   SaeculumDataTableModule
  ],
})
export class AppModule {}

4. Define the form config in your component:

@Component({
  selector: 'app',
  template: `
   <saeculum-data-table 
    [data]= "data"
    [columns]="columns"
    [count]="count" 
    [showFilterRow]="true"
    [serverSide]="true" // false
    [selectionMode]="'singlerow'" // singlerow, multiplerows, checkbox, multiplerowsadvanced, multiplerowsextended
    [pagesizeOptions]="[5, 10, 20, 50, 100, 200]"
    [columnGroups]= "null" OR // [{ text: 'Product Details', align: 'center', name: 'ProductDetails' }]
    (onTableActionChange)="onTableActionChange($event)">
  </saeculum-data-table>
  `,
})
export class AppComponent {
  data = DATA;
  columns = COLUMNS;
  count = 100;

  /**
   * Get paging info, sorting info, filter info
   * @param event - objec
   */
  onTableActionChange(event) {
    console.log(event);
  }
}