Skip to content

Latest commit

 

History

History
52 lines (30 loc) · 2.26 KB

updating-interactive-tables.md

File metadata and controls

52 lines (30 loc) · 2.26 KB

🧮 Updating interactive tables

A quick walkthrough for creating and publishing interactive tables with Google Sheets + DataWrapper.

If anything below is not clear you can contact me and I'll elaborate (and update this document). 🐼

✨ 1. Create your table in Google Sheets

The first row in the spreadsheet should be the headers of your table.

If you want to include introductory or supplementary details at the top of your table (e.g. suggestions for how people can add) one "hack" is to type this out and then take a screenshot and add as an image to the first row (using "Insert" > "Image" > "Image over cells"), as per the following screenshot of this sheet.

📥 2. Import sheet to Data Wrapper

Sign up to Data Wrapper a tool for creating and embedding charts, maps and tables.

Make sure your Google Sheets URLs is publicly viewable and click "new table" > "upload data" > "import Google spreadsheet".

The spreadsheet should validate and you can click "proceed" and check that everything as it should.

🎛 3. Configure the table

Next click "visualise" and select "table" as chart type.

You can configure the table using the "refine", "annotate" and "layout" tabs.

For example, you can select:

  • how many rows to show at once
  • whether to include a search bar at the top
  • how to sort the table
  • which columns to include/exclude from the published version
  • styling and borders
  • title, description and data source
  • whether you want to include a "data download" button at the bottom

⛩ 4. Publish table

Once you've configured the table, you can click "proceed" and then publish.

To embed on a website you can paste the "embed code" into the website code or content management system.

If you'd like to update the table you can log into Data Wrapper, go to the table, re-import the data from the Google Sheets link and re-publish the chart.

If the embed code is the same this should then update automatically anywhere the table is embedded.