Wix Table in Lists & Grids

Updated: Sep 14, 2020

About Wix Table

In General

The Table element can be used to display data connected directly to a dataset or data set manually by writing code. This is not an element where you can manually type in data (like the Wix TableMaster widget allows you to do). Overall, you are able to design the look and feel, but it has limitations and results that are less than intuitive. You can add a Table element to:

  • dynamic pages

  • regular pages

  • inside of repeaters

Desktop version

Like mostly all the other Wix elements found in the editor, you will find you have more customization tools via the Desktop version of the Table element. You are able to customize the text, colors and general look and feel of the entire table as a whole. You cannot customize an individual column title. For example, you cannot have column 1 title to be a different color than the rest of the column titles. You also cannot have the background of column 1 to be different than the rest of the column backgrounds. (More about layout settings later.)

Mobile version

While the desktop version of a Table element allows you the flexibility to use the entire space between the grid lines, the mobile version is a bit more restricting. It is not very mobile friendly, as you cannot edit the text size, color or other design settings on the mobile version. You can only change the column width. Ultimately, this means you will end up with scroll bars and possibly disproportionate text size, header and row heights.


Good to Know #1

How to install and connect a Table

To begin using the Table element, you can add it from the Wix editor under 'Lists & Grids'.

(Note: Wix regularly and randomly decides to reorganize their elements so try to use the 'search function' at the top of the blue menu that you see in the image below if you cannot find the Table element. If you do not have this search function yet --- it is coming soon to an editor near you.)

You can select whichever pre-designed table you like the best. Either way, you can update the design as desired.

You can easily connect a table using a dataset. Or if you are more advanced, you can connect a table by writing some code. See Corvid Reference.

Connecting Table to a Dataset

As soon as you connect the Table element to the dataset of your choice, you will notice that the table automatically refreshes to display different columns. These columns represent a field in your database collection. Some fields may not be compatible, therefore they will not be displayed on the Table. Other fields do not automatically appear.

You can add columns as needed by clicking on the 'add column' button located in the 'connect table' panel.

From here, you will see a list of fields that have & have not been used in your Table element. Please be aware that the list may appear in a very small window --- you will have scroll VERY SLOWLY in order to view each of your options. It is easier to use the arrow keys on your keyboard to browse through the list because your mouse might cause the list to move too fast. (Typing on the keyboard does not work for 'searching' through this list.)

Within this list, you will only be able to select compatible fields. For example, you cannot select a Tags field (see image above) because it is not compatible for a Table element. You CAN, however, connect most Reference fields!

You can also delete columns as needed. Click on 'manage table' then hover over the column that you no longer want to display, and click 'delete' under the three dots.

Under the 'manage table' section you can also:

  • rename the column label that appears on the connected Table element

  • rearrange the order of the columns by dragging and dropping them

If you are wondering what the 'manage connections' button does. It just takes you back to the 'connections' panel so you can add more columns, if needed. So you add columns:

  • using the 'manage connections' button

  • using the database icon

Connecting Table Cell to a URL link

If you would like for users to click on a Cell to be redirected somewhere else, you must configure several things on your Table element.

The first is to link the specific cell by:

  • opening the connection panel

  • then clicking the link icon next to the cell you would like to link

  • then scroll down to view the 'new option' right under that column setting

  • (you must remember to scroll down, because something it will not scroll for you)

  • then click on the 'not connected' dropdown to select a compatible field

You cannot connect to a 'general' link. You cannot select a page, anchor or another native link from here. The link you select must be an actual field within your database collection. You can also link to other URL fields within reference fields.


Good to Know #2

Table Layout vs Dataset Settings

It is important to understand all the possible combinations there are for the Table layout and the dataset settings. After all, the only way to display data on a Table element is by connecting via a dataset or manually coding the values so they are 'injected' into the Table, so we need to make sure the data appears as intended or as expected.

Column Width & Row Height

You can define the row height and column width via the Table Layout settings icon. If you are manually setting a row's data via code, then you can also set the column width via code but not the row height because it will automatically adjust according to the data you assigned it.

See Corvid Reference.

Automatic Table Height vs Manual Table Height

Regardless of which setting you select, the Table settings will always disregard the Dataset settings you have selected and the Layout settings are less than intuitive. For example, check out these scenarios:

Scenario A

  • Dataset Limit set to 2

  • Table Layout set to Manual

  • Pagination turned on with 4 rows per page