Table Widget

Our new Table Widget is perfect for displaying data or information in a tidy grid format. Simply load your text directly into the widget options panel (or by using a CSV upload), and customize the headers, rows and mobile layouts with ease.

This table widget offers a streamlined alternative to our existing Table Connect widget, which uses Google Sheets as a data source.

Demo: https://demo.wocode.com/table-widget

Tutorial Video

Setup

WIDGET PLACEMENT

  • Place the widget where you would like the table to appear. You may place it in a new or existing row.
  • You may use the blue grab handle on the bottom right to resize the widget.
  • If you prefer to have the table full width, set the row to full bleed width and increase the size of the widget to extend to the edge of the browser.

WIDGET OPTIONS (CONTENT)

  • As soon as you drop the widget into the editor, the widget options will open and you will see that there is a table that is pre-populated.
  • The table can be seen and edited directly in the widget options.
  • You may edit the existing cells, or clear all cells by clicking “clear all” in the upper left corner.
  • Continue to edit table content as needed. You may add table columns or rows by simply clicking on empty cells or headers.
  • Upload CSV: If you already have a table full of content, you may use the Upload CSV button to fill in your table in one step. Most spreadsheet apps (Excel, Google Sheets, Numbers, etc.) will allow you to export spreadsheets as a .CSV file.

WIDGET OPTIONS (DESIGN)

In the Design tab of the widget options, you will find numerous styling options. You may style fonts, backgrounds, borders, and more within the table headers and rows. These settings are self-explanatory and will not be covered here in detail, as each setting is labeled with its exact function. However, there are a few unique settings that will be explained in detail below:

  • First Column: There are a group of styling options that can be applied to the first column. Begin by clicking the toggle for this setting. When you turn on “First Column”, you may set background color and font settings. These settings apply only to the first column of course.
  • Even Column width: As the title implies, this setting applies even width to all columns. Otherwise, column widths will be set by the longest text within a column and will be variable across the table.
  • Mobile Layouts: When accessing the widget options in the mobile layout of the editor, you will find layout options in the Design tab (this option will not be seen in the desktop and tablet layouts). These give you options for displaying content on mobile devices since screen space is limited. Choose from Scroll, Squish or Collapse.

CONNECT TO DATA

To connect the table to a collection you will first create a collection. You can create the collection using the left sidebar in the builder, and selecting Content > Collections > + New Collection.

  • With the collection created, place the Table widget on the page, open the widgets option panel and click the gear icon.
  • Select Connect To Data.

From the new window, you can connect the table to your collection, and after connecting you can use the FIELDS TO DISPLAY dropdown section to select which fields from that collection you want to have displayed in the table.

CONNECT TO DYNAMIC PAGE

To connect the table to a dynamic page:

  • First, create the collection and connect the table widget to that collection (as described above).
  • Next, you will create a dynamic page and connect it to the collection that the Table widget is also connected to. You can learn more about creating and setting up dynamic pages on our doc here.

TIPS

  • Avoid extensive column counts: The entire column count is always contained within the width of the table (without scrolling). So as you add more columns, the width of the columns will narrow. With extensive column counts, it will become increasingly difficult to read the text inside the columns, as the text will wrap vertically in extreme cases.
  • Consider multiple tables: If you have a huge table you need to display, you may want to consider displaying this information in multiple tables. Large tables with dozens of columns will simply not display well, as this table is not designed to display large tables or scroll horizontally.
  • Mobile mode: Since large tables have no chance of displaying on mobile devices in a standard format, choose a layout option that best suits your table on a mobile device. The Scroll and Collapse layouts provide great options for large tables on small screens.