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.

Header & Toolbar can be fixed

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

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

Component Playground

Component Auto-Docs

Properties of the Table

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

Properties are read-only

Property NameTypeDescription

selectedRow

Object

Provides Data for the Currently Selected Row, Indicating the Row That Triggers a Click Event If the User Clicks a Button/Link on the Row

selectedRows

Array

Useful in Multiple Selection Mode, Same as SelectedRow

selectedIndex

Selected Index in Display Data

selectedIndexes

Array

Selected Index in Display Data

changeSet

Object

An Object Representing Changes to an Editable Table, Only Contains the Changed Cell. Rows Go First and Columns Go Second.

toUpdateRows

Array

An Array of Objects for Rows to Be Updated in Editable Tables.

pageNo

Number

Current Display Page, Starting from 1

pageSize

Number

How Many Rows per Page

sortColumn

The Name of the Currently Selected Sorted Column

sortDesc

Boolean

Whether the Current Row Is in Descending Order

pageOffset

Number

The Current Start of Paging, Used for Paging to Get Data. Example: Select * from Users Limit {{table1.pageSize}} Offset {{table1.pageOffset}}

displayData

Array

Data Displayed in the Current Table

filter

Object

Table Filtering Parameters

data

Array

The JSON Data for the Table

Events

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

Event NameDescription

Save Changes

When a user clicks "Save Changes"

Cancel Changes

When a user decide to skip Changes

Row Select Change

When the selected Row Change

Row Click

When a Row is Clicked

Row Expand

When a Row gets Expanded

Row Shrink

When a expanded Row shrink

Column Edited

When a Column gets Edited

Search

When a user make a global Search

Download

When a user Download Table Data

Filter Change

When a Filter Change

Sort Change

When a Sorting Change

Page Change

When a user changes the displayed Page

Refresh

When a user Refresh the Table View

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

Method NameDescription

setFilter

Set the Value of Property filter

setPage

Set the Value of Property page

setSort

Set the Value of Property sort

resetSelections

Set the Value of Property resetselections

Last updated

Logo

© Lowcoder Software LTD