Table – an overview

What can this template do?

A table chart is one of the most efficient and straightforward formats for comparing and analyzing data, which might be just what you need to tell a story. With our table template, viewers can not only search and filter but also explore mini visualizations like bar and line charts!

How to get started

1

Create a new table with one of our starting points.

2

Upload your data to the template. The Table template only has one column binding, so make sure all your columns are bound to Table values in the datasheet.

3

Under the Table cell styles settings, you can tweak your cell height, cell paddings, and alignments.

4

Set your columns to display at specific widths under Table cell styles and then Column width using the Custom option. Here, you can specify widths in px or % to customize how your columns are sized. 

TIP: You can get deep-dive on how to change the width of your columns here.

5

Choose how your Table will appear on mobile under the Mobile view settings. You can choose between two modes:

• Blocks is the default mode where the rows of data appear as blocks on top of each other (below left)
• Table (scrollbars) is another option that preserves the Table view, with a horizontal scroll if your table doesn't fit within the mobile view (below right)

With both these modes with can choose the number of rows to show per page on mobile. And with the Blocks mode, you can also specify a mobile breakpoint (at what width to switch to this view) and a different text size.

6

If you need to customize Header cell styles, there is a host of options. You can opt for a bold or normal text weight, set text and background colors and underline the sorting header.

Moreover, is it also possible, by opting for Custom table header cells, to control height, padding and alignment.

You can also set a custom header text size and customize the color, thickness and style of the header border.

Creating mini bar and line charts

If you have numerical data, you can visualize it as a chart instead of as values in your table. Simply head over to the Mini bar charts or Mini line charts settings and assign the desired columns you want to visualize.

Your column names need to be identical to how they appear in the datasheet, so it might be worth copying and pasting them to be sure. And you can choose a new column name for your mini bar or line charts in the setting below:

You are also able to color the bar chart using color palettes or color overrides.

It is also possible to enable popups or inline labels.

TIP: You can find out more about creating bar charts with the table template here.

Coloring and formatting your table

You can customize the look of your table by shading cells, adding popups, and formatting text.

In the Cells to color text area, enter the contents you would like to color and with which background and foreground color you would like to shade them.

For example:

#00FF00/#0027FF: Arizona
blue/yellow: Arkansas<br>

You can even use the Cells to color feature to create a categorical heatmap in the Table template.

Customizing your search control

If you've used the Searchable database starting point, you'll already see a search box in your visualization, but if not you can add one under the Search settings by clicking Enabled.

Choose the search mode that's right for you:

• Anywhere searches anywhere in the cells for that search term
• Start only searches for that search term at the beginning of the cells
• Whole will only return exact matches for that search term

For example, using the Anywhere mode and searching for "Kansas" will return the rows for both "Kansas" and "Arkansas". To only return "Kansas" you'll need to use the Whole or Start mode.

There are lots of other settings here to explore.

For example, if the search function is visible before anything is searched when it is published, and which columns it should search.

TIP: Head over here for nifty tricks and tips on how to make search quicker and more efficient.

It is also possible to change the placeholder text of the search box as well as the text that is served if there are no search results.

You might also want to enable the  suggestions dropdown to help the user find what they're looking for.