How to Display Stock Data from Spreadsheets as Responsive DataTables

Using WordPress Plugin – Stylish Google Sheets Reader

Want to showcase dynamic stock market data on your website using a spreadsheet? With the Stylish Google Sheets Reader WordPress plugin, you can convert a Google Sheet into a clean, sortable, searchable, and responsive DataTable — without writing code.

In this post, we'll demonstrate this using a public Google Spreadsheet containing 50+ stock entries.

Example Spreadsheet (Stocks tab):
View Google Sheet

📌 Supported Enhancements with Shortcodes

This plugin supports shortcodes in Google Sheet headers to convert plain text links (such as image URLs or hyperlinks) into rich frontend content like images or formatted values.

⚠️ Note:

• The plugin only processes plain URLs, not embedded hyperlinks or formulas from Google Sheets.
• Shortcodes are visible only in the spreadsheet, not in the frontend table.

Here’s how we applied shortcodes in the sheet headers:

Original Column Name	Modified Header (with Shortcode)
Brand Logo	Brand Logo [sgsr-image w="50"]
Change (%)	Change (%) [sgsr-updown criteria="0"]
Trend	Trend [sgsr-hide]
Trend Logo	Trend Logo [sgsr-image w="50"]

The [sgsr-hide] shortcode hides a column from the frontend output. In the example, the Trend column is hidden, while conditional logic in the Google Sheet is used to generate up/down values, which are shown as icons in the Trend Logo column.

Key shortcode attributes and their functions:

• w – Sets the image width in pixels (used with [sgsr-image]).
• criteria – Defines the threshold for showing up/down indicators in [sgsr-updown]. For example, criteria="0" shows an up arrow if the value is greater than 0 and a down arrow if less.
• total – Defines the maximum rating value (e.g., out of 5 stars in [sgsr-rating]).
• fill – Sets the star fill color for ratings (e.g., #ffcc00 for yellow stars).

Need the full list of shortcodes and usage examples? View All Shortcodes & Guide

💡 If your data is in Excel format (.xlsx or .xls), upload it to Google Drive, right-click the file, and select “Open with → Google Sheets”. Once it opens, go to the menu and choose File → Save as Google Sheets. Then use the URL of the newly created Google Sheet in the plugin configuration.

📌 Google Sheet Configuration Used

• Sheet Name: stocks
• Range: A:H
• Use First Row as Headers: ✅ Yes
• Frontend Output: Searchable, sortable, paginated stock table

📌 Final Output Preview (Frontend Table)

This is how the stock data looks when rendered on your WordPress site using the plugin:

📌 Benefits of Using Stylish Google Sheet Reader

• Keeps original Google Sheets hidden — users only see the rendered table, not your backend data source
• Automatically syncs live stock data from Google Sheets
• Responsive on mobile and desktop
• Supports image rendering, up/down trends, sorting, pagination
• Works with plain Google Sheets, no need for advanced coding

Need Similar DataTable Functionality for Wix, Squarespace, or Shopify?

If you're building on a platform other than WordPress — like Wix, Squarespace, or Shopify — you can still enjoy the same great DataTable features.

Get exclusive access to our cloud-based app that mirrors the exact functionality of the Stylish Google Sheet Reader plugin. Use it to connect your Google Sheets and generate clean, responsive HTML embed codes that work on any website or CMS.

Try the Cloud App