Skip to content

connormakh/ng-smarter-table

Repository files navigation

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