saeculum-data-table
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.25 • Public • Published

    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'" // singlerowmultiplerowscheckboxmultiplerowsadvancedmultiplerowsextended
        [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);
      }
    }

    Install

    npm i saeculum-data-table

    DownloadsWeekly Downloads

    13

    Version

    0.0.25

    License

    none

    Unpacked Size

    301 kB

    Total Files

    29

    Last publish

    Collaborators

    • jignesh9898