Skip to main content

Column

You can customize each table column separately by accessing properties through the gear icon ⚙️ in the table's properties pane. This includes editing existing column properties, adding new custom columns, rearranging columns, and hiding columns.

Display images on table row selection

Computed value

In the Table widget, computed value is a column property that allows you to display and manipulate the table data using JavaScript expressions. To make use of this feature, you can use the currentRow property within the column settings.

The currentRow property is automatically generated by default in the Table widget when you add data to the table. For instance, the computed value of a column named dob that displays the date of birth for each row would be {{currentRow['dob']}}. Additionally, you can also create custom expressions that compute new values based on the data in the current row.


Example: suppose you have a table with a name column and a gender column. If you want to add a prefix of Mr. or Mrs. to the names in the name column based on the data in the gender column, you can use a computed value.

  1. Fetch data from the sample users database using a SELECT query fetchData to retrieve the data:
SELECT * FROM users ORDER BY id LIMIT 10;
  1. In the Table's Table Data property, display the data using:
{{fetchData.data}}
  1. Select the name column from the list of columns, and add following code in the Computed Value property:
{{currentRow.gender === "male" ? "Mr " + currentRow.name : "Mrs " + currentRow.name}}

The code uses a ternary operator to add a prefix of Mr. or Mrs. to the name column based on the value of the gender column in the current row.

Display images on table row selection
Formatting Column

Cell styling

You can style each column type from style property pane. However, if you need more advanced customization, you can use the currentRow and currentIndex references to create custom style expressions. These expressions allow you to dynamically change the style of individual cells based on their content, rather than simply applying a static style to an entire column.

For example, lets say you have a column named status that reflects approved and pending values. You can set the color for these values using the following expression in the Cell Background property:

{{currentRow.status === "approved" ? "#22c55e" : "#facc15"}}

If you want to keep the same background color for an entire row, you can use the same custom style expression in each column Cell Background property.

Display images on table row selection
Color Formatting

Properties

These common properties allow you to edit the column, and customize the user actions.

PropertyData typeDescription
Column typeStringSets the type of cell to use in this column. There are a variety of different types that have different behaviors, such as buttons, switches, and more.
Computed ValueStringIt allows you to manipulate the value using JS expressions.
VisibleBooleanControls the column's visibility on the page. When turned off, the column won't be visible.
DisabledBooleanIt disables input to the column type. The column type remains visible to the user, but user input is not allowed.
Column FreezeBooleanControls whether to unfreeze or freeze the column to the left or right.
EditableBooleanA property that determines whether the user can modify a field or cell. Learn more about Inline editing.
RequiredBooleanMakes input to the column type mandatory.
Cell WrappingBooleanAllow content of cell to be wrapped.
TextStringSets the label of the column type.
Date FormatStringThe Date Format property specifies the date format of the incoming data specified in the Computed Value property. For example, if the incoming date is in the format YYYY-MM-DD HH:mm and the option selected in the Date Format property is DD/MM/YYYY, then it cannot parse the date and displays 'Invalid date' in the column.
Display FormatStringThe Display Format property specifies how the date information should be displayed to the user. For example, if the incoming date is in the format YYYY-MM-DD but the Display Format property is set to DD/MM/YYYY, the date information would be displayed to the user in the desired format of DD/MM/YYYY.
IconStringSets the icon to be used for the icon column type.
Menu Items SourceStringSets source for menu column type.
Menu ItemsListDisplay list of menu items.
Source DataArrayThis property is used to specify the data source for a dynamic menu.
Configure Menu ItemsFunctionYou define the styles for the menu items.
Add a New Menu ItemFunctionThis button adds a new item to the menu.
CompactBooleanThis property decides if the column type is in compact mode.
OptionsArrayOptions to be shown on the select dropdown.
PlaceholderStringSets the placeholder text within the input box.
FilterableBooleanIt makes the dropdown list filterable.
Reset filter text on closeBooleanReset the filter text when the dropdown is closed.
Server Side FilteringBooleanEnables Server Side Filtering of the data.
Display TextStringThe text to be displayed in the column.

Column types

This property allows you to select the type of cell to use in the column. Currently, the following column types are available:

Column typeDescription
ButtonThe button column type is a cell that can be clicked by the user, which triggers an onClick event and the triggeredRow reference property retrieves the data of the corresponding row.
CheckboxThe checkbox column type denotes a binary value, with the checked and unchecked states represented by True and False, respectively. This column type can be made editable by enabling the Editable property in the column settings.
Icon ButtonThe Icon button column type is a clickable button with an icon instead of text. It triggers an onClick event and the triggeredRow reference property retrieves the data of the corresponding row.
ImageThe image column type displays an image by interpreting the cell value as an image source URL or base64 data. It shows Invalid Image if the data is not valid.
Menu ButtonThe menu button column type is a group of buttons that can be expanded into a menu. Menu items can be added dynamically using the Menu Items Source as Dynamic and the {{currentRow}} referencing inside the Source Data property. However, for configuring the menu items, only the {{currentItem}} and {{currentIndex}} can be used.
NumberThe number column type is used for numeric data and supports inline editing. It can be made editable by enabling the Editable property in the column settings.
Plain TextThe plain text column type represents data with readable characters and supports inline editing. It can be made editable by enabling the Editable property in the column settings.
SwitchThe Switch column type allows users to toggle a single item on or off, using binary values. It supports inline editing and can be made editable by enabling the Editable property in the column settings.
URLThe URL column type interprets the cell value as a hyperlink, allowing users to click on the cell and open the corresponding URL in a new browser tab. It requires including the domain and suffix of the URL, such as example.com.
VideoWith the video column type, you can display videos within a table. To add a video to a cell, simply provide a source file path or URL from platforms such as YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, or DailyMotion as the cell value.
DateThe Date column type allows you to set up custom formatting options for date and time information. You can format and display the date using the Date Format and Display Format properties. It supports inline editing.
SelectThe Select column type allows users to select an option from a predefined list of choices. The Options property should be an array of objects, with each object containing a label and a value property, [{ "label": "ABC", "value": "abc"}] . The select column type can only be displayed or edited when the Editable property is enabled in the column settings.

Style properties

Style properties allow you to change the look and feel of the column type.

PropertyData TypeDescription
Text SizeStringSets the size of the text in the column.
EmphasisStringToggles bold or italic emphasis on the text.
Text AlignStringSets the horizontal alignment of the text.
Border RadiusStringAllows you to define curved corners.
Box ShadowStringApplies a shadow effect to the cells in the column.
Button VariantStringSets the visual style for buttons in the column.
Button ColorStringSets the background color for buttons in the column.
Cell BackgroundStringSets the background color for the cells in the column.
Horizontal AlignmentStringSets the horizontal alignment of content within cells.
Vertical AlignmentStringSets the vertical alignment of content within cells.
Text ColorStringSets the color for the text in the column.
Image SizeOptionsAllows you to resize an image for Image column type.
PositionOptionsSets the position of the cell.
IconStringDisplays an icon within the cell.