Tables

Table is a type of page you can create to display a list of data from your database. It has all the features of ng2-smart-table and more.

Configuration

Name	Type	Required	Description
title	string	no	Title displayed in the header of the table
lang	boolean	no	If table has multi-lang content
api	Object	yes	Api configuration
api.endpoint	string	yes	Endpoint to call to retrieve data
api.countEndpoint	string	no	If endpoint to count is different than api.endpoint/count
api.filter	string	no	If enabled, table will call endpoint?filter=filter
drag	Object	no	If enabled, table will support the drag&drop to sort feature
drag.sortField	string	no	Default: 'weight'
drag.endpoint	string	no	If not defined, it will be api.endpoint/sort
drag.method	string	no	Method to use to call drag.endpoint. Default: patch
noDataMessage	string	no	Message to display when the api returns an empty result. Default: 'No data found'
columns	Object	yes	Please see columns
generalActions	Array	no	Please see actions
actions	Object	no	Table actions (edit, create, delete...)
actions.columnTitle	Object	no	Actions column title. Default: 'Actions'
actions.add	Object	no	Please see actions
actions.list	Object	no	Please see actions
selectMode	string	no	'multi' or 'single'. Default 'single'
pager	Object	no	Pagination configuration
pager.perPage	number	no	Items per page. Default: 10

Columns

Columns defines the structure of the table. Each key of the columns object has the following configuration

Name	Type	Required	Description
key	string	no	If column key is different than column name (useful for composed values). Note: this key will be used for API
title	string	yes	Title of the column
type	string	yes	text - boolean - email - url - color - image - icon - date
hidden	boolean	no	If true, column will be not visible
width	string	no	Example: 10% (it may be used for numbers)
sort	boolean	no	If false, table data will not be sortable by column
filter	Object	no	If not set, filter will be based on type. See filters for further information.

Filters

If filter property is not defined, the table will handle it based on the column type. (text input for text, date range picker for dates, checkbox for booleans). If you need a select filter, please see this.

Default value: You can set a default value for your filters, based on the filter set in api.filter or filters that are defined in query string parameters of the current table page. Or simply, you can directly define the default value. Example:

{
  "api": {
    "endpoint": "some/endpoint",
    "filter": "{'where': {'visible': true}}"
  }
}

Column:

{
  "type": "boolean",
  "title": "Is visible",
  "filter": {
    "default": "where.visible"
  }
}

Select filter

Example of a select filter for column. Please note that config.options can be an array or a string which defines the endpoint to call to retrieve that array.

If you want to use the autocomplete function (data is refreshed every time the user types something in the text field), avoid the config.options option and use instead config.search, providing the endpoint to call.

"filter": {
  "type": "select",
  "config": {
    "placeholder": "Select...",
    "options": [
      {"id": 1, "text": "Value 1"},
      {"id": 2, "text": "Value 2"},
    ],
    "options": "endpoint/options",
    "search": {
        "endpoint": "endpoint/search"
    }
  }
}

Actions

Table actions can be generalActions which work on all the table data, and actions which work on a single row. All the actions have the same structure. Please note that generalActions and actions.list are arrays of action Objects, instead, actions.add is a single action object.

Name	Type	Required	Description
name	string	yes	Name of the action
content	string	yes	Content of the action button (can be also HTML)
class	string	no	Defines the color of the button: success
enableOn	string - Object	no	Please see conditional actions
visibleOn	string - Object	no	Please see conditional actions
config	Object	yes	Please see config

Conditional actions

You can easily enable/disable or show/hide an action based on a condition of the row. There are 2 ways to do it:

Setting the property to a boolean value that the data-row has:

{
  "enableOn": "someProp",
  "visibleOn": "!anotherProp",
}

In this case, the action will be enabled only if the current row has the property someProp equal to true and visible only if the current row has the property anotherProp equal to false.

The another way to do this, is by composing a more complex condition:

{
  "enableOn": {
    "property": "someProp",
    "operator": "neq",
    "value": "someValue"
  }
}

In this case, the action will be enabled only if the current row has the property someProp neq (not equal) to value. If the operator is not set, by default, it will be eq (equal).

Config

Name	Type	Required	Description
path	string	no	If action must redirect to a path
titleField	string	no	If path contains ':title', this part will be replaced with the field of the row
endpoint	string	no	If action must call and endpoint
addFilters	boolean	no	If endpoint need to add filters of the table
confirm	boolean	no	If true, a confirmation modal will be opened after action click
method	string	no	If endpoint is defined, this will be the method to use to call endpoint
refreshAfter	boolean	no	If false, will not refresh table data after action (Default: true)
responseType	string	no	Available types: 'file_download'. Check this
params	Object	no	Please see params

Params

TODO: write documentation when completed

Basic action examples

Here are the examples for the basic CRUD operations

Create

{
  "name": "Create new",
  "content": "<i class='fa fa-plus'><\/i>",
  "class": "primary",
  "config": {
    "path": "entity/create"
  }
}

Edit

{
  "name": "Edit",
  "content": "<i class='fa fa-edit'><\/i>",
  "class": "warning",
  "config": {
    "path": "entity/edit/:id/:title",
    "titleField": "nome"
  }
}

Delete

{
  "name": "Delete",
  "content": "<i class='fa fa-trash'><\/i>",
  "class": "danger",
  "config": {
    "endpoint": "entity/:id",
    "method": "delete",
    "confirm": true
  }
}

Download file action example

If you want to make an action that will download a file, you can do this in the following way:

NOTE: if the API server sets the Content-disposition:attachment response header, use the "forceDownload" parameter for direct download. Otherwise, if the server returns the CSV content directly in the response body, configure the "file" parameter for client-side download.

{
  "name": "Export csv",
  "content": "Export CSV <i class='fa fa-download'><\/i> ",
  "class": "success",
  "config": {
    "endpoint": "export/csv",
    "addFilters": true,
    "method": "get",
    "responseType": "file_download",
    "refreshAfter": false,
    "forceDownload": true,
    "file": {
      "name": "downloaded_file_name",
      "extension": "csv"
    }
  }
}

API

The table will make the following HTTP requests

• GET /endpoint/count (to count the data)
• GET /endpoint (to fetch the data)
• PATCH /endpoint/sort (if drag&drop enabled for sorting)

Examples can be found in setup.json