Table

Last modified: February 13, 2024

1 Introduction

Tables can be used to give structure to a page. They contain rows, columns, and cells. Each cell can contain widgets.

For example, you can create a table with text widgets, a logo, and a data view information as a customer report:

2 Components

A table consist of rows, columns, and cells.

2.1 Rows and Their Properties

A table can contain one or more rows. Each row contains columns and the number of columns can differ per row.

A row has the following properties:

  • Class – allows you to specify one or more cascading style sheet (CSS) classes
  • Style – allows you to specify additional CSS styling
  • Visible – allows you to hide an element from a page

For more information on properties listed above, see Properties Common in the Page Editor.

2.2 Cells and Their Properties

Each section of a table row or column is called a cell. Cells can contain widgets.

A cell has the following properties:

  • Class – allows you to specify one or more cascading style sheet (CSS) classes (for more information on this property, see Properties Common in the Page Editor)

  • Style – allows you to specify additional CSS styling (for more information on this property, see Properties Common in the Page Editor)

  • Cell type – indicates the type of the cell, the following options are possible:

    • Normal – ordinary cell containing data
    • Header – a table header cell

2.3 Performing Actions on Rows

To perform an action on a row , select a row and right-click it. A list of actions will open.

You can perform the following actions:

  • Add column left – creates a column to the left of the selected one
  • Add column right – creates a column to the right of the selected one
  • Move left – moves a column left in the row
  • Move right – moves a column right in the row

2.4 Performing Actions on Columns

To perform an action on a column , select a column and right-click it. A list of actions will open.

You can perform the following actions:

  • Add row above – creates a row above the selected one
  • Add row below – creates a row below the selected one
  • Move up – moves a row up
  • Move down – moves a row down

2.5 Performing Actions on Cells

To perform an action on a cell, select a cell and right-click it. A list of actions will open.

You can perform the following actions:

  • Add widget – opens a list of widgets, adds the selected widget to the cell
  • Add building block – opens a list of building blocks, adds the selected widget to the cell
  • Add row above – creates a row above the selected one
  • Add row below – creates a row below the selected one
  • Add column left – creates a column to the left of the selected one
  • Add column right – creates a column to the right of the selected one
  • Merge left – merges a cell to the left of the selected one, you can only merge an empty cell
  • Merge right – merges a cell to the right of the selected one, you can only merge an empty cell
  • Merge up – merges a cell above the selected one, you can only merge an empty cell
  • Merge down – merges a cell below the selected one, you can only merge an empty cell
  • Unmerge – turns merged cells into separate ones
  • Delete row – deletes the selected row
  • Delete column – deletes the selected column

To merge cells to the right, left, up, or down, you can also click the corresponding icon:

Merge Icons

3 Properties

An example of table properties is represented in the image below:

Table Properties

Table properties consist of the following sections:

3.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

3.2 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

3.3 General Section

3.3.1 Width Unit

The Width Unit defines whether the Column widths property is set in percentage or in pixels.

Value Description
Percentage (default) The Column widths property is specified in percentages. When resizing, columns will become wider/narrower while keeping the same relative widths.
Pixels The Column widths property is specified in pixels. When resizing, the pixel width columns will keep the same size; auto columns will become wider/narrower.

3.3.2 Column Widths

The Column widths property defines the widths of each column as a list of numbers separated by semi-colons. The Width unit (described above) determines if these numbers mean percentages or pixels.

Width Unit and Column Widths

When Width unit is set to Pixels, you can set column width to the following:

  • Auto – columns are evenly divided in the available space of the row
  • Fixed – columns have a specified pixel value

For example, you can you can have three columns of which the first is 200 pixels wide (Fixed width), the second is 100 pixels (Fixed width), and the last one is set to Auto which means that it will take up the rest of the space in the row.

3.4 Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

4 Read More