This package has been deprecated

Author message:

This package has been moved to inn-datable

ayo-datatable

Notch Datatable

What is this?

This is a custom data table that aims to solve common data table problems

<a href='https://ayotycoon.github.io/ayo-datatable-example'>live Example</a>

Install

npm i ayo-datatable

Css Dependences

this table requires you have bootstrap css and font awesome installed in your project

import { DatatableModule } from 'ayo-datatable';

Sample usage

app.module.ts

...
import { DatatableModule } from 'ayo-datatable';
 
@NgModule({
  ...,
  imports: [...,
    DatatableModule
  ]
})
 

app.component.html

<ayo-datatable [dataChanged]="dataTable.dataChangedObs" [options]="dataTable.options" [heads]="dataTable.heads"
    (feedback)="dataFeedBackObsListener($event)" [bodyrows]="dataSource">
  </ayo-datatable>

app.component.ts

export class AppComponent implements OnInit {
  title = '';
 
 
  dataTable = {
    dataChangedObs: new BehaviorSubject(null),
    heads: [
      { title: 'checkbox', key: 'checkbox' },
      { title: 'Name', key: 'name' },
      { title: 'Email', key: 'email' },
      { title: 'Body', key: 'body' },
 
     // { title: "Creation date", key: "createdDate", transform: (fieldData, rowData) => new Date(fieldData).toLocaleDateString() },
 
      { title: 'Action', key: 'action' }
    ],
    options: {
      bulkActions: [
        'Email',
        'Sms'
      ],
      singleActions: [
        'Delete',
        'Message'
      ]
 
    }
  };
 
  dataSource: any [];
 
  ngOnInit() {
    fetch('https://jsonplaceholder.typicode.com/comments').then(_ => _.json()).then(data => {
      this.dataSource = data;
      this.dataTable.dataChangedObs.next(true); // must be called each time the data supplied to the data table changes
    });
  }
 
  dataFeedBackObsListener = data => {
    console.log(data);
    switch (data.type) {
      case 'singleaction':
 
        if (data.action === 'View') {
          // this.router.navigate(['/tenants/status/' + data.data.id]);
 
        } else if (data.action === 'View License') {
         // this.router.navigate(['/tenants/license/' + data.data.id]);
 
        } else if (data.action === 'Delete') {
          // @ts-ignore
         // document.querySelector("[data-target='#deleteLicenseModal'").click()
          // this.onModalDelete(data.data.id)
 
        }
        break;
 
      default:
        break;
    }
  }
}
 

Basic usage

Basic usage just need the bodyrows and the heads attribute to work. This is usually used if the data in bodyrows and heads wont change at any point and also when you dont need feedback from the table. This should not be used for async data

app.component.html

 
<app-datatable
 
 
[heads]="heads"
 
[bodyrows]="rows">
 
</app-datatable>
 
 

app.component.ts

heads must be an array of object which contains keys title and key title: contains the text that will show on the table head key: contains the object property that is matched with the associated title in the rows array. Example title can be full name, but the key which is used in the array is just name. in this case, full name will be the title and name will be the key

 
export  class  AppComponent  implements  OnInit {
 
 
heads: [
 
{ title:  "checkbox", key:  "checkbox" }, // insert this if you need checkbox funtionality
{ title:  "ID", key:  "id" },
 
{ title:  "Full Name", key:  "name" },
 
 
 
 
],
 
 
rows: [
{id:1,name: 'ayokunle'},
{id:2,name: 'sam'},
{id:3,name: 'josh'},
{id:4,name: 'ronke'},
{id:5,name: 'ade'},
]
 
}
 
 

Advanced Usage ( More common )

[dataChanged] expects a BehaviorSubject of a true or false value. This is used to notify the table that the either the heads or the bodyrows data chas changed, to the table should change accordingly. [options] Contains extra options [heads] expects an array of object. that contains the head title and key value [bodyrows] expects an array of object. (feedback) expects a callback function. this emits actions back to the parent component

app.component.html

 
   <app-datatable 
    [dataChanged]="dataTable.dataChangedObs"
    [options]="dataTable.options"
    [heads]="dataTable.heads"
    (feedback)="dataFeedBackObsListener($event)"
    [bodyrows]="rows">
    </app-datatable>
 
 

app.component.ts

dataTable.heads must be an array of object which contains keys

dataTable.options.singleActions : actions to display on each body row . must be an array of string or an array of {title: string, showIf?: Function}

dataTable.options.bulkActions : actions to display on alll rows . must be an array of string

dataFeedBackObsListener emits back action events performed on the datatable , so you can the select those actions and act on them accordingly

 
 
 
export  class  AppComponent  implements  OnInit {
 
 
 dataTable = {
    dataChangedObs: new BehaviorSubject(null),
 
    heads: [
     { title:  "checkbox", key:  "checkbox" }, // insert this if you need checkbox funtionality
    { title:  "ID", key:  "id" },
 
    { title:  "Full Name", key:  "name",transform: (fieldText,rowData) => fieldText.replace(',', ' ') },
    // transform property is completely optional. It is used to modify a text.the first argument contains the row value and the second argument contains the entire row data. transform property must return the string you want to show in that row and firld. Example if you want to replace the ',' in name firlds to space
    ],
    options: {
 
      singleActions: [
        "Edit",
        "Delete",
        {title:"Activate", showIf: (fieldText,rowData) => !rowData.activated}, // showIf property is completely optional. It is used to confitionally show an option based on the given row data.the first argument contains the row value and the second argument contains the entire row data. showIf property needs a boolean to show or ide an action
 
        {title:"Deactivate", showIf: (fieldText,rowData) => rowData.activated}
      ],
      bulkActions: [
          'Change',
          'Wipe'
      ]
    }
  };
 
 
rows;
 
}
 constructior(){}
 
 ngOnInit(){
 
// fetch an external api
this.authService.fetchData().subscribe((data: {id: number; name: string}) => {
    this.rows = data
    this.dataTable.dataChangedObs.next(true)
 
})
 
 
 }
   dataFeedBackObsListener = data => {
  
    switch (data.type) {
      case "singleaction":
        // data.data contains the row data the action was performed on
        if (data.action === "Delete") {
          //Perform your action
 
        } else if (data.action === "Edit") {
 
         // perform your action
 
 
        }
        break;
      case "bulkaction":
        // data.data contains array of row data the action was performed on
        if (data.action === "Wipe") {
          //Perform your action
 
        } else if (data.action === "Change") {
 
         // perform your action
 
 
        }
        break;
      default:
        break;
    }
  };
 

Key note

At anypoint if the heads or the bodyrows data changes, you need to call this.dataTable.dataChangedObs.next(true) and the dataTable will reflect those changes and handle all other thins automatically

to enable click actions, make sure you have any of this actions ['View/Edit','View / Edit','View', 'Edit']