Ngx-mariem-datatable NPM

ngx-mariem-datatable

Advanced table extension with sorting, filtering, paging and more... for Angular apps

Usage

import { NgxMariemDatatableModule } from 'ngx-mariem-datatable';

@NgModule({
  declarations: [],
  imports: [
     NgxMariemDatatableModule
  ]
})

After importing the DatatableModule in your module:

HTML Code

 <ngx-mariem-datatable
       (onActionClicked)="onActionClicked($event)"
       [Actions]="actions"
       [datatable]="datatable"
       [displayedColomn]="displayedColomn"
 >
 </ngx-mariem-datatable>

Typescript code

A step by step series of examples that tell you how to get a development env running

Say what the step will be

  actions: datatable_action[] = [
    {
      value: "Editer",
      childrens:[
        {
          type: "edit", #the type just to identify the action on click action
          iconClass: "chevron_right"
        }
      ]
    }
  ]

And

 displayedColomn: datatable_displayedColomn[] = [
    {
      data: "id",
      value: "Id",
      type: "text",
      search: true,
      sort: true
    },
    {
      data: "name",
      value: "Nom",
      type: "text",
      search: true,
      sort: true
    },
    {
      data: "description",
      value: "Description",
      type: "text",
      search: true,
      sort: true
    }
  ]

datatable : any[] = [
   {
    id:1,
    name:"user name",
    description : "exemple description"
   },
   {
    id:2,
    name:"user",
    description : "exemple description 2"
   }
]

DOCUMENTATION

Explain how to run the automated tests for this system

Genaral functionalities

Inputs

Input	Type	Description
datatable	array of objects	List should be displayed
displayedColomn	datatable_displayedColomn[]	cols description
Actions	datatable_action[]	List of actions buttons
hideTheader	boolean	use it to hide table header,false by default
searchvalue	string	Value to search in datatable
textalign	'left','right' or 'center'	set text alignment in table,'left' by default
nothingToShowMessage	string	"No results"
checkboxes	boolean	allow to show checkboxes select on the left ,false by default. If true datatable items should contain id & selected columns
checkboxesMultiselect	boolean	allow to select multiples rows ,true by default

Outputs

Output	Description
datatableChange	emit datatable updated
onRowClicked	when row clicked emit row data
onActionClicked	emit action clicked information

Pagination

Input	Type	Description
pagination	boolean	to enable or desable pagination, true by default
itemsPerPage	number	10 by default
maxSize	number	limit number for page links in pager, 5 by default

Groupping rows

Input	Type	Description
regroupby	boolean	to active the regrouping by option , false by default
regroupbylabel	string	column key that will regroup by

datatable_displayedColomn model description

datatable_displayedColomn {
  data: string ;
  template?: TemplateRef<any>;
  value: string;
  type: "text" | "checkbox" | "date" | "icon" | "customTemplate" =
    "text";
  search: boolean = false;
  sort: boolean = false;
  sorted?: boolean;
  extraData?: any;
}

datatable_action model description

datatable_action {
  // attribut to show
  value: any;
  // list of actions in that groupe
  childrens: action[];
}

action model description

action {
  // action description name
  type: string;
  // class name contains icon action
  iconClass: string;
  //to disable click on action
  disabledAttribut?: string;
}