Customizing your table
Once you've uploaded the data into your table, it's time for the fun part - customization! This tutorial will run through all of the customization options available to you when creating a table. There is a separate article if you are specifically curious about adding sparklines and bar charts to your table. Numbers 1-3 of this tutorial are on the 3 Visualize tab and number 4 is on the 4 Publish & Embed tab. This tutorial will explain each feature and give examples of when they are useful.
In any tab of step 3 Visualize, you can normally click, hold, and drag the arrow in the lower right corner to scale the chart window or manually determine the dimension of the chart by entering values in the boxes below the chart ("Resize to"). However, if you do this with a table, it may end up reverting back depending on how many rows per page you'd like to show. So this step is not as important as other chart types.
Rows per page: This is a fundamental design decision when it comes to tables, since you can only allocate so many rows to a page, between 5 and 100 to be specific. After that, the user will have to flip through pages to look at the remainder of the data (or the user can conduct a search to bring the data to the first page). Considering using fewer rows when the table is in the middle of an article so that the reader doesn't have to scroll past dozens of rows. A longer table may work at the bottom of an article instead.
Show pagination: Once you have more than one page of data in your table, you have the option to show which page number a user is on. It appears on the top right corner of the table with arrows that allow the user to go forward or backward a page.
Make sortable: Making your table sortable allows a user to click on any of the table headers, and the table will sort by that column. On first click, it will sort by lowest number or first alphabetically. On second click, it will reverse and sort by highest number or last alphabetically.
Make searchable: Making your table searchable adds a search bar to the table, allowing a user to search for specific information. The search entry must be an exact match or it will not return anything. This is useful if you have more than one page.
Show ranks: Showing rank will add a column on the left hand side ranking the table starting with 1. The ranks do not ever move, even if a user sorts a table in a different way.
Stripe table: Striping a table make every other row on the table light gray. Alternating between white and light gray makes it easier for the eyes to see what is within the same row. It is especially helpful if you have a very wide table and the user must scan left to right.
Sort table: Not to be confused with the "make sortable" checkbox, the "Sort table" slider button allows you to set an initial sorting based on a column of your choosing and ascending or descending direction. If this option is not selected, the table will default to how you entered the data.
Mobile fallback: The table switches to a "transposed" layout, also known as a card design, on devices smaller than 450px.
Compact layout: In compact layout, your rows will have less height and therefore less whitespace. A good option if you display a lot of rows.
Parse markdown: "Parse markdown" shows markdown formatting in your table, if you wrote markdown in your data. Learn how to write markdown to add images, links, bold or italic text, code snippets, etc. in this academy article.
Merge with empty cells: Combine a text cell and the empty cells to its right to one big cell. If you want to center the text in your merged cells, add
~~~ around it (like
~~~ header ~~~.) Learn more about how to create a double row header here.
Each column in your table can be customized differently, giving you a lot of flexibility with your table design. On the left-hand side, a symbol will show the data type of the column, such text, number, sparkline, or bar chart. In order to customize a column, click on the column name, highlighting it light blue. The customize window will immediately open below. I'll omit explaining style, border, and alignment since that is the same as any other text editor.
Show on: The show on check box allows you to choose if the column is visible on either a desktop, a mobile device, both, or neither. If neither box is checked, the column is considered hidden and will not appear anywhere, in which case it will have the gray crossed out eye to the right of the name. You may want to consider having fewer columns on mobile devices as there is less space on the screen to display information.
Color cells based on categories: This defines the background or text color in the cells of your selected column based on categories defined in the same or another column. For example, color the cells with state names in the color of the party that won the election in these states.
Fixed column width: This is an important toggle as it allows you to control the width of a column. If the toggle is off, the column will adjust to the largest word or number in it. When turned on, words will wrap to the next line. It is especially useful when you have sparklines in your table.
Bar chart and sparklines: By highlighting a group of numeric columns, you are able to add sparklines. There is also a show as bar chart toggle. Since this is a topic unto its own, there is an entire article written about it here.
Replace country codes with flags: This topic also has its own article here.
Customizing a row gives you the ability to highlight a specific line-item when it stands out. You can change the background and text color, and you can control the bottom and top border of the row separately for specific highlighting. You can style as many rows as you would like, each differently or using the copy style button, you can duplicate row style settings.
Make row sticky: A sticky row is always visible in a table, even if readers paginate or scroll through the rest of the data. It's a great feature to let readers compare all table rows to one certain row, so make rows sticky that are most important or display a total.
The header is the name at the top of each column (not to be confused with the title of the table). You may want to style it differently than the rest of the table for emphasis. Like rows, you can control the bottom and top borders separately.
Add first row to header: Creates a header with two rows. Make sure to add useful information in the first row below the header (in step 1 or step 2) before turning on this feature. Learn more in this article.
Hide header: Pretty straight-forward one here. Hide the header making it not visible.
Annotate your chart
If you've created a Datawrapper chart or map before, you already know this feature. Here we can give your chart a title, a description, add notes and a source:
- We recommend using the title to tell your readers what's interesting about this chart – the one key statement that you want to show on this chart, e.g. "Unemployment highest in the south"
- The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
- Think of notes as footnotes, where we want to specify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
- The source name will give our readers the information about how trustworthy our data is. Does it come from a government institution or another trustworthy organization? The source URL lets our reader dig even deeper and have a look at the underlying data themselves. Both, source name and source URL, should be filled out on every map or chart to increase transparency.
In this last step, you can select a preset layout and enable social sharing functions to spread your work.
- Users of the free plan or Single users have two options: One layout with and one without the "Get the data" link.
- Users of Datawrapper Team are able to select a custom layout here.
Congratulations, you finished your table! In this last step, you can publish your work and decide how to share it with the world. The best way to use a Datawrapper chart is by embedding it directly on your website. To do that, click the big blue button that says "Publish Chart". Then, copy & paste the embed code snippet into your website or CMS. You can also download your chart as a PNG or PDF by upgrading to a paid Single or Team account.