Custom Table

Custom tables allow you to display data in a list format based on logic encoded by the user.

How it Works

Custom table widget Custom table widget

Once the logic for data retrieval is entered, the data will be displayed in the table.

What sets the custom table apart is that the data source can be external, internal, both, or even fabricated. Moreover, custom charts can be mixed in, and additional information can be included in the expandable panel.

Custom table expanded row Custom table expanded row

Configuration

General

  • Refresh Frequency: allows configuring the data refresh frequency displayed in the list.

  • Title: widget title. It can be configured to remain fixed in the widget or only be displayed when it receives focus.

  • About: widget description in Markdown format.

  • Pagination type allows you to specify the kind of pagination you want. There may be no pagination, pagination handled by the table component (local), or server-side pagination.

If server-side pagination is chosen, the script will receive parameters like the number of elements and the page, allowing the user to decide.

  • Page elements specifies the number of elements to show per page.
  • Allow data grouping enables the table to group items by elements in a column.
  • Show widget filters instructs the widget to display its filters. These filters will be passed as an additional parameter to the data retrieval function.
  • Compact the size of the table rows will make the table rows more compact to save vertical space.
  • Expandable rows enables an information button for expanded data on each row. The code must fill this information, or an empty space will be displayed.

Custom table general configuration Custom table general configuration

Column Configuration

Custom table column configuration Custom table column configuration

Each column added has a series of required parameters for data display.

At least the column name, the node from which the data should be read within the corresponding JSON, and the type of data expected must be provided.

The table requires at least one field to be marked as a unique key.

Code Tab

This is where you input the necessary code to retrieve the data to be displayed.

Custom table code configuration Custom table code configuration

Depending on the options selected in the general tab, the parameters received by the function will be displayed.

The function must always return an array of JSON objects compatible with the specified configuration for the component to be able to render them.

Each time the code is updated, it must be evaluated where a preview of the result can be seen.

Custom table code preview Custom table code preview