Ng-smarter-table NPM

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'
     }
]