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.
<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 tablesPick 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.
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
: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.