Advanced Data Table by F2
Create professional and responsive data tables directly in your Shopify store using Theme App Blocks.
Add customizable data tables to any Shopify page or section. Easily configure columns, rows, data, and table settings from the Shopify Theme Editor.
Available App Blocks
– Advanced Data Table
Quick Actions
[Open Theme Editor]
[Installation Guide] [Data Table Guide]
How It Works
1. Open the Shopify Theme Editor.
2. Add the Advanced Data Table by F2 app block to your desired page or section.
3. Configure your table columns, rows, and settings.
4. Add your data using the provided table format or JSON configuration.
5. Save your theme and publish the changes.
Everything you need to install, configure, and use the Advanced Data Table is provided below.
Table of Contents
Installation Guideline
Table Builder by F2 – Installation & JSON Data Guide
Thank you for using Table Builder by F2. This app allows you to create Advanced Data Tables, Product Comparison Tables, and Size Chart Tables using JSON data.
1. Install and Add the App Block
Install Table Builder by F2 on your Shopify store.
Go to Online Store → Themes → Customize.
Open the page where you want to display your table.
Click Add block or Apps.
Select the required Table Builder block:
Advanced Data Table
Product Comparison Table
Size Chart Table
Add your data and customize the available settings.
Click Save.
2. Prepare Your Data as JSON
All table blocks use JSON data. You can prepare your JSON in several ways.
Option 1 – CSV to JSON Converter
Our app dashboard includes a CSV to JSON Converter. If your data is currently stored in a CSV file, upload or paste the CSV data into the converter. The tool will generate JSON that you can copy and paste into the required app block.
Option 2 – Data to JSON Converter
The app dashboard also includes a Data to JSON Converter. You can use this tool to convert your existing structured data into JSON.
Option 3 – Use an AI Tool
If needed, you can also use an AI tool such as ChatGPT to convert your CSV or other structured data into JSON. After conversion, always check that the JSON follows the same format as the demo JSON provided inside the app.
3. Important: Do Not Change JSON IDs or Keys
When creating your own JSON, you must keep the required IDs, keys, and field names exactly as shown in the demo template.
For example, if the demo JSON uses:
{
"house": "Modern House"
}
you must continue using:
"house"
Do not change it to:
"home"
even if the words have a similar meaning.
The app reads specific JSON keys to understand and display your data. Changing a required key can prevent the table from displaying correctly.
Demo JSON Testing Code for Advanced Data Table Block
{
"title": "Product Inventory",
"description": "Advanced product inventory data table",
"columns": [
"id",
"product",
"category",
"price",
"stock",
"status",
"rating",
"supplier"
],
"rows": [
{
"id": 1,
"product": "Smart Watch Pro",
"category": "Electronics",
"price": "$199.00",
"stock": 34,
"status": "In Stock",
"rating": 4.8,
"supplier": "Tech World"
},
{
"id": 2,
"product": "Wireless Headphones",
"category": "Electronics",
"price": "$89.00",
"stock": 56,
"status": "In Stock",
"rating": 4.6,
"supplier": "Audio Hub"
},
{
"id": 3,
"product": "Leather Backpack",
"category": "Accessories",
"price": "$129.00",
"stock": 23,
"status": "In Stock",
"rating": 4.7,
"supplier": "Urban Goods"
},
{
"id": 4,
"product": "Running Shoes",
"category": "Footwear",
"price": "$79.00",
"stock": 45,
"status": "In Stock",
"rating": 4.5,
"supplier": "Sport House"
},
{
"id": 5,
"product": "Coffee Maker",
"category": "Home & Kitchen",
"price": "$59.00",
"stock": 12,
"status": "Low Stock",
"rating": 4.4,
"supplier": "Home Plus"
},
{
"id": 6,
"product": "Bluetooth Speaker",
"category": "Electronics",
"price": "$69.00",
"stock": 38,
"status": "In Stock",
"rating": 4.3,
"supplier": "Audio Hub"
},
{
"id": 7,
"product": "Cotton T-Shirt",
"category": "Clothing",
"price": "$24.00",
"stock": 120,
"status": "In Stock",
"rating": 4.6,
"supplier": "Fashion Hub"
},
{
"id": 8,
"product": "Denim Jacket",
"category": "Clothing",
"price": "$89.00",
"stock": 27,
"status": "In Stock",
"rating": 4.5,
"supplier": "Fashion Hub"
},
{
"id": 9,
"product": "Travel Suitcase",
"category": "Travel",
"price": "$149.00",
"stock": 18,
"status": "Low Stock",
"rating": 4.4,
"supplier": "Travel Gear"
},
{
"id": 10,
"product": "Yoga Mat",
"category": "Fitness",
"price": "$35.00",
"stock": 64,
"status": "In Stock",
"rating": 4.7,
"supplier": "Fit Store"
},
{
"id": 11,
"product": "Office Chair",
"category": "Furniture",
"price": "$219.00",
"stock": 9,
"status": "Low Stock",
"rating": 4.2,
"supplier": "Office World"
},
{
"id": 12,
"product": "Standing Desk",
"category": "Furniture",
"price": "$399.00",
"stock": 14,
"status": "In Stock",
"rating": 4.8,
"supplier": "Office World"
},
{
"id": 13,
"product": "LED Desk Lamp",
"category": "Home & Kitchen",
"price": "$39.00",
"stock": 73,
"status": "In Stock",
"rating": 4.5,
"supplier": "Home Plus"
},
{
"id": 14,
"product": "Mechanical Keyboard",
"category": "Electronics",
"price": "$119.00",
"stock": 31,
"status": "In Stock",
"rating": 4.9,
"supplier": "Tech World"
},
{
"id": 15,
"product": "Wireless Mouse",
"category": "Electronics",
"price": "$45.00",
"stock": 82,
"status": "In Stock",
"rating": 4.6,
"supplier": "Tech World"
},
{
"id": 16,
"product": "Ceramic Vase",
"category": "Home Decor",
"price": "$32.00",
"stock": 25,
"status": "In Stock",
"rating": 4.3,
"supplier": "Decor House"
},
{
"id": 17,
"product": "Wall Clock",
"category": "Home Decor",
"price": "$42.00",
"stock": 41,
"status": "In Stock",
"rating": 4.4,
"supplier": "Decor House"
},
{
"id": 18,
"product": "Stainless Water Bottle",
"category": "Fitness",
"price": "$28.00",
"stock": 95,
"status": "In Stock",
"rating": 4.8,
"supplier": "Fit Store"
},
{
"id": 19,
"product": "Fitness Tracker",
"category": "Fitness",
"price": "$79.00",
"stock": 36,
"status": "In Stock",
"rating": 4.5,
"supplier": "Fit Store"
},
{
"id": 20,
"product": "Travel Backpack",
"category": "Travel",
"price": "$99.00",
"stock": 22,
"status": "In Stock",
"rating": 4.6,
"supplier": "Travel Gear"
},
{
"id": 21,
"product": "Polarized Sunglasses",
"category": "Accessories",
"price": "$65.00",
"stock": 48,
"status": "In Stock",
"rating": 4.4,
"supplier": "Urban Goods"
},
{
"id": 22,
"product": "Canvas Shoes",
"category": "Footwear",
"price": "$55.00",
"stock": 61,
"status": "In Stock",
"rating": 4.3,
"supplier": "Sport House"
},
{
"id": 23,
"product": "Hiking Boots",
"category": "Footwear",
"price": "$139.00",
"stock": 16,
"status": "Low Stock",
"rating": 4.7,
"supplier": "Sport House"
},
{
"id": 24,
"product": "Slim Fit Shirt",
"category": "Clothing",
"price": "$49.00",
"stock": 88,
"status": "In Stock",
"rating": 4.5,
"supplier": "Fashion Hub"
},
{
"id": 25,
"product": "Winter Hoodie",
"category": "Clothing",
"price": "$69.00",
"stock": 52,
"status": "In Stock",
"rating": 4.8,
"supplier": "Fashion Hub"
}
]
}
4. Follow the Demo JSON Templates
To make setup easier, we provide demo JSON templates for each block. We strongly recommend that you:
Copy the appropriate demo JSON.
Paste it into the block first.
Confirm that the demo table works correctly.
Replace only the example values with your own data.
Keep the same JSON structure, IDs, keys, brackets, and formatting.
Add additional rows or items by following the same pattern.
You can also use the demo JSON to test the app before adding your own data.
5. JSON Formatting Tips
Before saving your JSON, make sure that:
All keys and text values use quotation marks.
Each item is separated correctly with a comma.
Opening and closing
{ }braces are complete.Opening and closing
[ ]brackets are complete.Required IDs and keys are not renamed.
There is no extra comma after the final item.
Your new rows follow the same structure as the demo rows.
6. Recommended Setup Process
For the easiest setup:
CSV/Data → Convert to JSON → Compare with Demo JSON → Keep Required Keys → Paste into App Block → Save → Test on Storefront
If the table does not display correctly, first compare your JSON with the provided demo template and confirm that all required keys and the overall JSON structure are unchanged.
CSV to JSON Generator
Upload a CSV file and convert every row into clean JSON data. Preview and format the generated JSON directly inside your browser.
The CSV is processed locally in your browser. Its content is not uploaded to an external server or saved in a database.
Upload CSV File
Drag and drop a CSV file or select a file from your computer. Only one CSV file can be selected at a time.
CSV File Information
Review the selected file before converting it into JSON.
Upload a CSV file to view its name, size, type, row count and conversion status.
Converted Data Preview
Preview the first converted rows before reviewing the complete JSON output.
Upload a CSV file and select Convert to JSON to display the converted row preview.
Generated JSON
Use Pretty JSON for a readable result or Minified JSON for a compact output.
Upload and convert a CSV file to generate Pretty or Minified JSON output.
How to Use the Generated JSON
Upload & Convert
Upload a valid CSV file and select Convert to JSON.
Review
Check the converted rows and switch between Pretty and Minified formats.
Copy or Download
Copy the generated JSON or download it as a JSON file for use in your application.
The uploaded CSV file is processed entirely inside the user's browser. CSV content is not uploaded to an external server or stored in the WordPress database.
Data to JSON Generator
Enter simple key and value data and convert it into clean JSON instantly. Numbers, booleans, null values, arrays, JSON objects and normal text are detected automatically.
All conversion happens inside your browser. The entered information is not uploaded to an external server or saved in the WordPress database.
name = Product One
price = 25
available = true
↓
JSON
Input Format
Add one key and value on each line. Use an equal sign or colon between the field name and its value.
Equal Sign Format
name = Product One
Colon Format
price: 25
Array Format
tags = shirt,summer,new
Text, numbers, true, false, null, comma-separated arrays, JSON arrays and JSON objects are recognized automatically.
Enter Your Data
Enter one field per line. Empty lines and lines beginning with the # character are ignored.
Converted Field Preview
Review the detected field names, values and JSON value types before using the generated output.
Enter key and value data, then select Convert to JSON to view the field preview.
| Field | Value | Detected Type |
|---|
JSON Preview
Switch between readable Pretty JSON and compact Minified JSON.
Convert the entered key and value data to generate Pretty or Minified JSON.
How to Use the Generated JSON
Enter Data
Add one key and value on each line using an equal sign or colon.
Convert and Review
Convert the data and check each detected value type before using the result.
Copy or Download
Copy the generated JSON or download the result as a JSON file.
Entered data is converted entirely inside the user's browser. The content is not uploaded to an external server or stored in the WordPress database.
App Features
Create responsive data tables, product comparison tables, and size charts using unlimited JSON data with no coding.
Table Builder by F2 helps merchants create professional tables using simple JSON data without editing theme code. Display advanced data tables, product comparison tables, and size charts with responsive layouts, search, sticky headers, pagination, and mobile-friendly design. Easily manage large datasets, including tables with thousands of rows and multiple columns, while keeping store content organized, fast, and easy for customers to understand.
Features:
Build advanced data tables from unlimited JSON data
Create responsive product comparison tables for any products
Display customizable size charts with category tabs and unit conversion
Handle large datasets with search pagination and sticky table headers
Mobile friendly tables with no coding required for merchants
Apps Demo Screenshots
Support Helpline
If you need Support, please message us on WhatsApp. We will give you a response just in one minute. Or mail to us, Amzadhossen420360@gmail.com Or Contact Our Support Website : https://friends2a-technology.com/fhopify/contact-us/
Whatsapp Number: +8801602438393
Website: https://friends2a-technology.com/