Customizing your table

Refine

In any tab of  step 3: Visualize, you can 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. 

Customize Table

▸ Hide rows after: 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 better at the bottom of an article.

▸  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 on a page.

▸  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 makes 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 has to scan left-to-right for information.

▸  Sort table: 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. Depending on the column type of the one that is selected, the tables will be sorted in numeric or alphabetic order. You can even sort by categories with a few customizations. To learn how to customize sort order, see here. To disable sorting, see here. 

▸  Mobile fallback: The table switches to a "transposed" layout, also known as a card design, on devices smaller than 450px.

▸  Compact layout: In the 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 markdowns 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.

Customize Columns

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 as text, number, sparkline, or bar chart. In order to customize a column, click on the column name, highlighting it in light blue. The customize window will immediately open below. 

▸  Show on: This 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.

▸  Format: This option will only appear if the column is a number column. You can select a number format of your choice, like turning your column into percentages or displaying numbers to a specific decimal point. To learn more, visit this article here. 

▸  Style/Border/Alignment: These settings allow you to customize the font styles and colors as well as alignment. 

▸  Make sortable: By default, all of your columns can be sorted by your readers, by default. This means readers can click on any of the table headers, and the table will sort by that column. But you can also turn it off. To learn more about disabling sorting, see here. To learn how to customize sorting see here. 

▸  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. To learn more, read How to color-code tables using conditional formatting. 

▸  Show as heatmap: This setting colors your cells according to the number in it. Learn about how to do this here.

▸  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 on your table. See this article for answers to the most frequently asked questions. 

▸  Show as bar chart: You can make a numeric column more visually readable by turning them into bar charts. 

▸  Replace country codes with flags: This topic also has its own dedicated article here.

▸  Show selected columns as tiny chart: By highlighting a group of numeric columns, you are able to add tiny columns and lines (called sparklines). There is also a show as a bar chart toggle. Since this is a topic on its own, there is an entire article written about it here.

Customize Rows

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.

▸  Show row on every page: 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 the most important rows or rows displaying a total sticky. 

▸  Move row to: Once you made a row sticky, you can choose to move it either to the top or the bottom of the page. 

Customize Header

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 straightforward one here. Hide the header making it invisible.

Annotate

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.

Layout

In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.

Publish

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. Users of the Free plan can download their table as a PNG while users of Custom and Enterprise plan have the option to download the table in both PNG and PDF format.