Table Widget

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. 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.

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.

Related Articles

Join Now