Skip to main content

Table

The table widget displays data in rows and columns. You can display data from an API in a table, trigger an action when a user selects a row, and even work with sizable paginated data sets.

How to use Table Widget?
info

If you already know the basics and want to learn how to display data and handle pagination inside a table, Read this guide.

Properties​

Properties allow you to edit the table, connect it with other widgets and customize the user actions. Let's look into different types of properties.

Widget Properties​

These properties allow you to edit the table itself. All these properties are present in the property pane of the widget. Given below is a table of widget properties.

Widget PropertyDescription
Table DataIt lets you edit the data in the table, either by writing an array of objects to display as table rows or binding data from an API/Database using the mustache syntax.
ColumnsAuto populated from the Table data. This lets you edit the label, show/hide each column (the eye icon), and also customize the column settings.
Server Side PaginationEnables you to implement pagination by limiting the number of results fetched per API / Query request. Use this property when your table data is bound to an API / Query.
VisibleIt controls the widget's visibility on the page. When turned off, the widget will not be visible when the app is published.
SortableIt enables or disables sorting. If turned off, the user will not be able to sort the data when the app is published.
Default Search TextSets the default search text of the table.
Default Selected RowSets the default selected row of the table. It takes the index no. of the row as an input.
Default Row HeightSets the height of the row in the table - Default, short or tall.
Enable multi-row selectionAllows multiple rows of a table to be selected. The rows are populated in the selectedRows field.
Total Record CountIt stores the total number of rows returned by a query or API, which helps in calculating the total number of pages on the table when using server-side pagination.
Allow adding a rowToggles a button in the table which allows users to submit new rows of data. Only columns marked as Editable can accept user input. Use the onSave event to update the source of the table's data and reflect the user's changes.

Let's understand the widget properties in detail.

Table Data​

The Table Data in the property pane allows a user to edit data in the table. You can write an array of objects to display it as table rows.

Property pane showing the Table data

You can also bind your data from a database / API using the mustache syntax ( {{}} ).

Let's bind the data from a mock database into a table widget.

  1. Create an App and click on Datasources under the explorer panel.
  2. Go to +Create new and select the users database from the Sample Databases. The user database will now appear under the Active window.
  3. From the "Active" window, click on New Query+ for the Users database and create a "select" query to fetch the data.
  4. Go back to the canvas and drag the table widget onto it.
  5. Open the property pane, clear the Table data window and enter the following snippet:
{{<query_name>.data}}

Where <query_name> is the query's name created in Step 2.

That's it! The table widget will get populated with the data coming from the query.

Columns​

This property shows all the columns in the table, and it gets auto populated from the Table Data. You can edit the column's name, hide/show a column, and customize more from the column settings.

Server-Side Pagination​

The data fetched from the Query/ API is sometimes too large to be displayed on one table page. Server-Side Pagination lets you implement pagination by limiting the number of results fetched per API / Query request. For more information on how to paginate your data, click here.

Inline editing​

Inline editing allows you to edit a cell contents in the table columns, and can be enabled for the whole column or at the cell level based on a condition. You can also allow users to add new rows of data to the Table. Read more about Inline editing here.

Total Record Count​

Total record count stores the total number of rows in the table. It's useful in pagination as it helps in determining the number of pages, thus enabling/disabling the next/previous page control in the table. It's only visible when you enable server-side pagination.

Using Total Records Count in th Table Widget

To get the Total record count of your data, follow the steps below:

  1. Create a new query get_count for the data source connected to the table.
  2. In the query window, enter a count query for the data.
    #Postgres
    SELECT COUNT(*) FROM <table_name>;
  3. Click on Run and you can see the output in the response tab below.

Once the get_count query is successfully created, enter the following code to bind the query's output in the total records count:

#Postgres
{{get_count.data[0].count}}

Binding Properties​

These properties allow you to bind your table widget with any other widget in queries or JS objects.

Binding PropertyDescriptionSnippet
selectedRowIt contains the data of the row selected by the user. It will be an empty object if no row is selected{{<table_name>.selectedRow}}
selectedRowsIt contains an array of rows selected by the user when multi-select is enabled. It will be [null] if no row is selected.{{<table_name>.selectedRows}}
triggeredRowWhen a user interacts with an actionable item (like button) in a row, triggerdRow fetches the data of that column.{{<table_name>.triggeredRow}}
isVisibleThis property indicates whether the widget is visible or not.{{<table_name>.isVisible}}
sortOrderThis property helps you sort values.{{<table_name>.sortOrder}}
tableDataThis property gets all the table data in JSON format.{{<table_name>.tableData}}
selectedRowIndexIt gives the index of the row selected by the user. Not applicable when multiple rows are selected.{{<table_name>.selectedRowIndex}}
selectedRowIndicesIt gives you an array of the index of the rows selected by the user. Not applicable when multi-row selection is disabled.{{<table_name>.selectedRowIndices}}
filteredTableDataIt contains the data of the rows that is the resultant of the filters applied, sorting or the data searched{{<table_name>.filteredTableData}}
pageNoContains the current page number that the user is on. APIs can use it for pagination{{<table_name>.pageNo}}
pageSizeContains the number of rows that can fit inside a page of the table. Changes along with the height & row height of the table{{<table_name>.pageSize}}
searchTextContains the search text entered by the user in the Table{{<table_name>.searchText}}

Let's understand the binding properties in detail. Consider a table Table_1 with the table data given below:

[
  {
    "step": "#1",
    "task": "Drop a table",
    "status": "✅",
    "action": ""
  },
  {
    "step": "#2",
    "task": "Create a query fetch_users with the Mock DB",
    "status": "--",
    "action": ""
  },
  {
    "step": "#3",
    "task": "Bind the query using => fetch_users.data",
    "status": "--",
    "action": ""
  }
]

And this is how the data looks in the table widget:

selectedRow

A table you have created might contain a large amount of data. But when you want to get the data of a single row of the table, the selectedRow property comes into play.\ selectedRow is an internal property that fetches the row's data selected by the user in the table. You can easily bind different widgets to each table row using this property.

As you already know by now, you can write JS code anywhere in Appsmith inside {{}}., To bind the selected row of the table to another widget, open the property pane of it, and add the code snippet given below:

{{<table_name>.selectedRow}}

Where <table_name> is the name of your table.

Drag a text widget onto the canvas, and let's bind it to a selected table row of Table_1.\ Open the property pane of the text widget and add the following snippet to its label:

{{Table_1.selectedRow}}
selectedRow

The Text widget will then display the data of the row selected on the table. If no row is selected, selectedRow shows the column names with no data.

Displaying column value using selectedRow

If you want to fetch the data from a column in the row selected on the table, add the column's name after the selected row. You can refer to the code snippet below:

{{<table_name>.selectedRow.<column_name>}}

It will result in the data at <columnname> of the row selected. Using this snippet in Table_1, suppose you want to bind the task of the selected row to the text widget. You will need to open the property pane of the text widget and add the following to its label:

{{Table_1.selectedRow.task}}
Displaying column value using selectedRow

selectedRows​

selectedRows allows you to fetch the data from the table when the user selects multiple rows. To use this property, enable the "multi-row selection" option from the property pane of the table widget.

To bind a widget to the multiple rows of the table, enter the snippet given below:

{{<table_name>.selectedRows}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using selectedRows.

selectedRows

A null array '[]' is returned If no row is selected in the table.

triggeredRow​

If your table has actionable items (like buttons) and a user interacts with it, triggeredRow fetches row's data where that action has been performed.

To bind a widget using this property, enter the code snippet given below:

{{<table_name>.triggeredRow}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using triggeredRow.

triggeredRow

selectedRowIndex​

selectedRowIndex gives you the index number of the selected row in the table. It is only applicable when one row is selected. If you have multiple rows selected, it returns "-1".

To bind a widget using this property, enter the code snippet given below:

{{<table_name>.selectedRowIndex}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using seledRowIndex.

selectedRowIndex

selectedRowIndices​

selectedRowIndices gives you an array of the index numbers of the multiple rows selected in the table. It is only applicable when multiple rows are selected. You have to enable the "multi-row selection" from the property pane to use this property.

To bind widget using this property, enter the code snippet given below:

{{<table_name>.selectedRowIndices}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using seledRowIndices.

selectedRowIndices

filteredTableData​

filteredTableData contains the data of the rows that is the resultant of the filters applied, sorting, or the data searched.

To use this property in a widget, enter the code snippet given below:

{{<table_name>.filteredTableData}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using filteredTableData.

filteredTableData

pageNo​

pageNo gets the page no. of the table that the user is currently viewing. This property can be used by APIs for pagination.\ \ To use this property in a widget, enter the code snippet given below:

{{<table_name>.pageNo}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using pageNo.

pageNo

pageSize​

pageSize shows the size of the current page of the table, i.e., the total number of rows displayed on a page. pageSize can change on resizing the table. To bind a widget using this property, enter the code snippet given below:

{{<table_name>.pageSize}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using pageSize.

pageSize

searchText​

searchText fetches the text entered in the search bar by the user.

To bind widget using this property, enter the code snippet given below:

{{<table_name>.searchText}}

Where <table_name> is the name of your table.

Let's bind a text widget to Table_1 using searchText.

searchText

Events​

They are a set of actions that you can perform on the widget. The following table lists the actions:

ActionDescription
onRowSelectedSets the action to run when the user selects a row. See a list of supported actions.
onPageChangeSets the action to run when the table's page changes. See a list of supported actions.
onPageSizeChangeSets the action to run when the table's height is changed. The property is not available on the app but can only be used by developers when building apps. For example, It can be used to set a Limit in your query dynamically. See a list of supported actions.
onSearchTextChangeSets the action to run when the user enters a search text. See a list of supported actions.
onSortSets the action to run when the user sorts the data. See a list of supported actions.

Header Options​

These are the options that you can add to the table header. Currently, the following features are available to add or remove from the table header -

  • Search
  • Filters
  • Download
  • Pagination

Styles​

Style properties allow you to change the look and feel of the table. It has several options such as -

  • Changing the style and size of the font;
  • Text alignment;
  • Playing around with the color of the text or cell background.
StyleDescription
Cell Background ColorAllows you to set background color for the cells.
Text ColorAllows you to set text color.
Text SizeAllows you to set the size of the text.
Font StyleAllows you to choose a font style, i.e., bold or italic.
Text AlignSets the label alignment of the text.
Vertical AlignmentSets the alignment of the widget.
Cell BordersAllows you to choose the border style for the table's cells. Default (all borders), horizontal borders only, or no borders.
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.

Guides​

Automatically Refresh Data on Tables​

If you want to update data on Table without re-running the API / or using a refresh button, you can use the setInterval function.

In this example, we’ll be using the switch widget (Switch1) to control this function and a table widget that uses the getData query.

  • Drag and Drop Switch Wiget into the canvas.

  • Next, go to onChange event and toggle the JS option.

  • Now on Switch widget’s onChange property, paste the following code after making the necessary changes:

    {{
    (() => {
        if (Switch1.isSwitchedOn) {
            setInterval(() => getData.run(), 2000, "autoupdate");
        } else {
            clearInterval("autoupdate");
        }
    })()
    }}

Here, the setInterval function calls the getData query every 2 seconds when the switch widget is turned on, else, it removes the autoupdate (id) interval.

Auto-update table data

A search input is available on the table to filter out records being displayed on the table. Using the onSearchTextChange event, it is possible to perform a search on the server-side (API server or database) and have the results displayed on the table. A video guide on how to do this is shown below:

How To Setup Server-Side Search For The Table Widget