In this tutorial, we will automatically read data from a table with just a click.

This can be useful to quickly export data to a CSV file or to manipulate the content of the data parsed from the table.

1. Open the Page Editor

Let’s navigate to this Wikipedia page with a table of information, then open the PixieBrix Page Editor.

2. Add Context Menu brick

The first step after opening the Page editor is to add the Context Menu brick.

Click the +Add button from the top left corner of the page editor and select the Context Menu, as shown below.

Wondering what a context menu is? It’s what appears when you right-click on a webpage!

Rename this mod to something that makes sense, like Export Table to CSV.

Next, set the Title to something like Export Data. This is the text that will appear in the context menu.

Leave the other fields as they are. This is what the brick configuration should look like.

3. Add the Table Reader brick

Time to read the table! Add a new brick by selecting the + button below the Context Menu brick you added.

In the modal that appears, search for Table Reader. This brick allows us to Read data from an HTML table.

Select the + Add button to add this brick to your mod.

📢

When using this brick, we expect this table to have been coded using the table elements such as <table><tr><td>etc. If you’re trying to read a table and not getting data, use the Elements tab in the Inspector to confirm if they table is created with these elements. 👉 Read more about HTML tables

Pick a selector for this brick by clicking inside the selector field, and then clicking the arrow button to visually select the selector...or go the manual way and inspect the page by hand.

✍️

Notice: When using the blue arrow button to visually select the table on the page I want, it highlights it in Pixiebrix purple!

I choose the latter and I figured out that if I use table:nth-child(15)

I can select the full table on the page.

Final brick Configuration

At this point, using the selector mentioned above, your brick should be configured to look like below

📢

The:nth-child() pseudo-class finds and returns elements based on their group position.

4. Add the Export as CSV brick

In this last step, we will export the data we automatically scraped in the previous step to a .csv file.

Let’s go ahead and add the brick named Export as CSV by clicking the Add a brick button from the mod overview panel

In this brick, we will provide a filename and the data we want to use to create our CSV file.

For filename, I am going to leave the default name of exported, but for data, I want to provide the data that I have scraped earlier and which was stored in the variable called @table, specifically @table.records

Once you’ve changed this parameter, it should look like the screenshot below.

This is it. We’re done! Now let’s go ahead and test this mod...

1) Navigate to https://en.wikipedia.org/wiki/Table_(information)

2) Right-click anywhere on the page

3) Select the context menu action we created earlier, “Read Data from Wiki”

4) A file should be downloaded to your drive containing the data from the table you selected

Conclusion

This tutorial covered how to scrape data automatically from a page, specifically tabular data.

This allows you to download or manipulate data automatically, then copy it to your clipboard and much more.