Creating a no-code table

Learn how to create a table using the no-code editor

 

Using the no-code editor, you can easily create a table.

Let's start of by clicking "Design Component"

To add a table block, begin by selecting the "+" button to introduce a new block into the component. A popup will then appear displaying all accessible blocks, with the Table block located within the "Other" tab.

Once added, let's make sure to give this a width of 100%.

Once we exit to our page, we can see our newly created table. However, we still need to provide it with some content.

When we open our component, you'll see various options within this block.

Let's start of with the first 3 options:

  • Empty Placeholder: this is the text that will only be shown when there are no headers or rows
  • Sort Icon (decending & ascending): By default, the table headers can be sorted to ascending or decending (this option will be covered in this section). The icon that will be shown when sorting a header, can be changed using these two fields.

We can then continue by creating our headers, by clicking on Edit Headers. In this next window you can add the amount of headers you need. In a Header block, you can also enable or disable sorting.

Adding rows can be done the same way. However, when adding rows, you can add columns.

💡Note: Ensure that the number of columns matches the number of headers.

 

When done, we can see the end result of our table!


Functionality Panels


The table blocks also comes with functionality. These will enable or disable things like resizable rows, pagination,...