Creating your first table with Google Sheets using the Stylish Google Sheet Reader plugin is simple and quick.
Begin by connecting your Google Sheet to the plugin through an easy-to-use interface. Customize the appearance and functionality of your table, including sorting, filtering, and responsive design options. Once configured, you can instantly embed the table into your WordPress pages or posts, bringing your data to life with just a few clicks.
The [sgsr-hide] shortcode is designed to hide specific columns in your data table when added to the header of a column in your Google Sheets. By including this shortcode, the designated column will not be displayed on the front end, ensuring that sensitive or unnecessary information remains hidden from view.
| Attribute | Description | Accepted Values | Example |
|---|---|---|---|
[sgsr-hide] | Hides the column in which it is added from the front-end display. | Shortcode added in column header. | [sgsr-hide] |
The [sgsr-hyperlink label="Click to view"] shortcode allows you to create a customizable hyperlink within your content. By specifying the label attribute, you can define the text that will appear as the clickable link.
| Attribute | Description | Accepted Values | Example |
|---|---|---|---|
| label="Click to view" | Defines the text that will be displayed as the hyperlink. | Any text string. | label="More details" |
The [sgsr-image w="50" round="1"] shortcode allows you to display images. Use w and round attributes to control image size and shape.
| Attribute | Description | Accepted Values | Example |
|---|---|---|---|
| w="50" | Width in pixels | Positive integer | w="50" |
| h="50" | height in pixels (optional) | Positive integer | h="50" |
| round="1" | Round or square | 1 = round, 0 = square | round="1" |
The [sgsr-rating display="star" total="5" fill="#ffcc00"] shortcode displays ratings visually.
| Attribute | Description | Accepted Values | Example |
|---|---|---|---|
| display | Visual style | "star" | "star" |
| total | Max rating value | Any integer | 5, 100 |
| fill | Color | CSS color | #ffcc00 |
The [sgsr-updown criteria="0"] shortcode adds up/down arrows based on values.
| Attribute | Description | Accepted Values | Example |
|---|---|---|---|
| criteria | Threshold for arrow direction | Numeric | criteria="0" |
You can also use [sgsr-image] conditionally to display arrows based on value.
Search and filter large tables easily, even across paginated data. Sorting and searching work globally, not just on visible rows.
- Search and Filter: Find data fast.
- Pagination-aware: Operates across the full dataset.
Keep data live with auto-refresh intervals (5s to 10min). Great for real-time dashboards.
- Enable Auto Refresh: Keeps data updated.
- Flexible Timing: Set interval as needed.
Boost performance by caching data for several minutes to 24 hrs. Reduces API hits and speeds up load time.
- Activate Booster: Saves API calls.
- Set Duration: Choose how often to refresh.
The following shortcodes allow you to add interactive form elements inside your datatables. By default, input fields take the value written in the cell, and dropdowns will have the first option selected.
| Shortcode | Description | Attributes | Example |
|---|---|---|---|
[sgsr-checkbox] |
Creates a checkbox. If the cell value is 1 or true, it is checked by default. |
— | [sgsr-checkbox] |
[sgsr-short-input-field] |
Creates a single-line input field. |
type = "text" | "number" placeholder = Any default placeholder text |
[sgsr-short-input-field type="number" placeholder="Enter"]
[sgsr-short-input-field type="text" placeholder="Enter"]
|
[sgsr-long-input-field] |
Creates a multi-line textarea input. | placeholder = Any default placeholder text | [sgsr-long-input-field placeholder="Your Comments"] |
[sgsr-dropdown] |
Creates a dropdown select menu. |
use delimiter = Character to separate options (default: ",") |
[sgsr-dropdown delimiter=","]
[sgsr-dropdown]
|
