NgSmarterTable

An Angular 5 smart table that handles filtering, sorting, inline editing, deleting, and more!

Installation

For now, this table only supports bootstrap.

NPM

  npm install ng-smarter-table

• Make sure you have the bootstrap css, along with fontawesome installed in your project. If not, add the following css links to your index.html in the root of your project.

  As per the Boostrap Docs:

  As per the FontAwesome Docs:

  <!-- index.html -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
   crossorigin="anonymous">
  <!-- fontawesome -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

• Add SmarterTableModule to your Module file:

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      SmarterTableModule
    ],
    providers: [],
    bootstrap: [AppComponent]

Usage

• Add smarter table to your html component, specifying your rows and columns, at least:

    <smarter-table
          [columns]="columns"
          [rows]="rows">
    </smarter-table>

  Example on columns and rows:

  columns = [
      {type: 'text', visible: true, name: 'First Name', binder: 'fname' },
      {type: 'text', visible: true, name: 'Last Name', binder: 'lname' },
      {type: 'text', visible: true, name: 'Date of birth', binder: 'dob' },
      {type: 'number', name: 'numbers', visible: true, binder: 'nums' },
      {type: 'text', name: 'Gender', visible: true, binder: 'gender' },
    ]
  
  rows = [
    {fname: "Connor", lname: 'Makhlouta', dob: "24/5/1996", nums: 414, gender: "male"},
    {fname: "George", lname: 'Rattel', dob: '14/5/1992', nums: 4414, gender: "male"},
    {fname: "Sabrina", lname: 'Azar', dob: '16/1/1997', nums: 4414, gender: "female"},
  ]

  Column

  Attribute	Values	Description
  type	'text'/'number'	Type of the column to be stored, used in identifying for sort and filter
  name	any	Name to be shown on column
  binder	any	Property name in row for this column to be bound to

  Additional Features

  Smarter Table supports filtering, sorting, pagination, inline editing, and exporting to excel.

  • Sorting: Depending on the type given in the column, the sort will execute, whether a number or string

  • Filtering: Depending on the type given in the column, a filter can be used, whether number or string

  • Pagination: Depending on a page length specified, different page sizes can be given

  • Export to Excel: Speaks for itslef

  • Inline editing: If enabled, user can edit a record inline, while specifying a function in order to be run on save, in case of updating an external source. User is then urged to refresh data source

  • Filtering by column: User can set which columns are to be visible and which are not to be

  Inputs

  Attribute	Type	Default	Description
  filter	Boolean	false	Whether or not to enable filter
  can_delete	Boolean	false	Whether or not to show a delete button
  can_edit	Boolean	false	Whether or not to show a edit button
  inline_edit	Boolean	false	Whether or not a user should be able to inline edit on the table
  inline_edit_group	array	[]	Description of inline edit types to be used. Dropdown/text
  pagination	Boolean	false	Whether or not to enable pagination in the table
  page_size	Number	null	Page size in case pagination is enabled
  can_export	boolean	false	Whether or not data can be exported to excel
  primary_action_name	string	"Edit"	Name of button to be set on primary btn. Note: this button still binds to the (edit) function
  secondary_action_name	string	"Delete"	Name of button to be set on secondary btn. Note: this button still binds to the (delete) function

  Outputs

  Attribute	Type	Default	Description
  edit	Function	null	Function to be executed on edit click
  delete	Function	null	A delete function to be executed when user clicks delete
  save	Function	null	Function be run on when a user clicks save for inline edit
  cancel	Function	null	Function be run on when a user clicks cancel for inline edit
  row_click	Function	null	Function to handle user row clicks

  An example of inline_edit_group can be seen below:

   inline_edit_groups = [
       {
         binder: 'nums',
         type: 'dropdown',
         options: [1,2,3,4,5]
       },
       {
         binder: 'strs',
         type: 'text'
       }
  ]

Dependencies

This project makes use of the ng2-multiselect library created by preetham1290.

Example code

Example code can be found in the Smarter Table Module

Live Demo

TODO