Table

The Standard Table is a highly functional and feature-rich component. It is recommended for Server-Side paging and filtering when data display for tables needs many individual settings.

The Lowcoder Table supports auto-size as a component as well as fixed size, where the Header and Toolbar can be fixed when the Table-Body is scrollable.

The Borders of Tables can be set individually for the whole table till down to the individual cell.

Also, the Text Styles can be individualised for every column.

Component Playground

Component Auto-Docs

Properties of the Table

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Events

Events give you the ability to trigger further actions (with Event-Handlers)

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setPage() :

table1.setPage() method sets the table's page property to be displayed on Table component. e.g. following code will set the 2nd page on the Table component :

table1.setPage(2);

setFilter() :

table1.setFilter() method sets single or multiple Filter conditions on the Table's data, and in return Table shows the filtered data as per the conditions set in the setFilter() method. Here's how it works :

// Single Filter condition
table1.setFilter({
  stackType: 'and',
  filters: [
  {
    columnKey: 'name',
    filterValue: 'Mano',
    operator: 'contain'
  }
  ]
})

In the above code, "stackType" sets the condition of "AND" or "OR" among different Filters. "filters" array include the columnKey, filterValue and the operator.

// Multiple Filter conditions
table1.setFilter({
  stackType: 'and',
  filters: [
    {
    columnKey: 'name',
    filterValue: 'a',
    operator: 'contain'
  },
  {
    columnKey: 'id',
    filterValue: '1',
    operator: 'contain'
  }
]
})

In the above code, we have applied multiple filters on the Table.

setSort() :

table1.setSort() method sorts an individual column on a Table in ascending or descending order. It takes two arguments :

1. ColumnKey

2. Descending order

// Descending order set to True
table1.setSort("id", true);

The above code sorts the "ID" column in descending order. If descending order is set to 'false', then it will sort the "ID" column in ascending order.

setMultiSort() :

table1.setMultiSort() method sorts the Table in ascending or descending order, based on multiple columns. It sorts first based on 1st column , and then based on the 2nd column :

// MultiSort
table1.setMultiSort([
  {
    "column": "name",
    "desc": true
  },
  {
    "column": "id",
    "desc": false
  }])

resetSelections() :

table1.resetSelections() method resets the selected Row or Rows to the default ones. By default, 1st Row is selected in the Table in case of Single Row Select. If you click on let say 5th Row of the Table, it will get selected and if you run following code, then the table's 1st Row will be selected.

In case of multiple row selected, following code will deselect all the selected rows.

table1.resetSelections();

cancelChanges() :

table1.cancelChanges() method cancels the Updated + Inserted changes on an Editable table. Updated changes are those which you make to the existing Table data/rows. Inserted changes are the new Rows that you insert on the Table

table1.cancelChanges();

cancelInsertChanges() :

table1.cancelInsertChanges() method only cancels the inserted changes on an Editable table.

table1.cancelInsertChanges();