Skip to main content

Grid

info
  • HTML tag name: <builderius-grid>
  • Implements 3rd-party script: grid.js
  • Allowed children modules: none
  • Available since: 0.9.7 PRO

Description​

This module allows rendering of JSON or CSV data in a table format. Optionally, search and pagination can be enabled for the table.

How it works​

The module creates <builderius-grid> custom HTML tag. It is a modular self contained instance of grid.js script.

tip

Since <builderius-grid> is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display CSS property.

If we want to display a JSON array data, then we use data-content attribute. The value of this attribute must be a stringified JSON array or a data variable with the similar value. An example of such data:

[
    {"Color": "red", "Price": 12},
    {"Color": "blue", "Price": 15}
]

Based on this example, the table will have two columns with title "Color" and "Price", and rows equal to values of each key in each object.

Also, we can use data-source-url attribute and provide an URL to JSON file. However, it could be also an URL to the file with CSV data. The format - JSON/CSV - will be autodetected and parsed. CSV data must have header row. The values of such row will be used for column names. Delimiter may be , or ;, it will be automatically detected while parsing the file.

Attribute data-settings expects a stringified JSON object, the all possible keys are given below. Values are just examples:

{
    sort: true,
    pagination: {
        enabled: true,
        limit: 2,
        summary: false
    },
    language: {
      'search': {
        'placeholder': 'Search...'
      },
      'pagination': {
        'showing': 'Displaying'
      }
    }
}

We use https://gridjs.io/docs/config/ as reference.

API​

Attributes​

data-content (required)​

This attribute expects a stringified JSON array data

data-source-url (required)​

This attribute expects an URL to JSON array data or CSV data. Important: CSV data must contain a header row with the names of columns!

data-settings​

This attribute expects a stringified JSON object that is compatible with grid.js API (ref https://gridjs.io/docs/config/). It is not possible to use all configuration keys though, only: pagination, sort and language.

Events​

ready (scope: element)​

builderius-grid-ready (scope: window)​

This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:

{ el }

Where el is the reference to the HTML element.

Methods​

reInit​

This method resets and initiates the component.

Demo​

Demo page