outputs table in liquid
Fri Mar 14 2025 22:35:21 GMT+0000 (Coordinated Universal Time)
Saved by @procodefinder
{% comment %} basic table html {% endcomment %}
<table style="border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000;">
<thead>
<tr style="background-color: #333; color: white;">
<th style="border: 1px solid #000; padding: 8px;">Column 1</th>
<th style="border: 1px solid #000; padding: 8px;">Column 2</th>
<th style="border: 1px solid #000; padding: 8px;">Column 3</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #f2f2f2;">
<td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 1</td>
<td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 2</td>
<td style="border: 1px solid #000; padding: 8px;">Row 1, Cell 3</td>
</tr>
<tr style="background-color: #ffffff;">
<td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 1</td>
<td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 2</td>
<td style="border: 1px solid #000; padding: 8px;">Row 2, Cell 3</td>
</tr>
</tbody>
</table>
___________________________________________________________________________________________________
{% for block in section.blocks %}
{% if block.type == 'csv_file' %}
{% assign csv_url = block.settings.csv_file_url %}
{% assign csv_data = csv_url | file_url | parse_csv %}
<table style="border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000;">
<thead>
<tr style="background-color: #333; color: white;">
{% for column in csv_data.first %}
<th style="border: 1px solid #000; padding: 8px;">{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in csv_data offset:1 %}
<tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
{% for cell in row %}
<td style="border: 1px solid #000; padding: 8px;">{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Dynamic CSV Table",
"blocks": [
{
"type": "csv_file",
"name": "CSV File",
"settings": [
{
"type": "url",
"id": "csv_file_url",
"label": "CSV File URL"
}
]
}
],
"presets": [
{
"name": "Dynamic CSV Table",
"blocks": [
{
"type": "csv_file"
}
]
}
]
}
{% endschema %}
___________________________________________________________________________________________________
{% schema %}
{
"name": "Tabs Section",
"blocks": [
{
"type": "applications_table",
"name": "Applications Table",
"settings": [
{
"type": "text",
"id": "csv_url",
"label": "CSV File URL",
"default": "https://cdn.shopify.com/s/files/your-file-url.csv"
}
]
}
]
}
{% endschema %}
{% for block in section.blocks %}
{% if block.type == "applications_table" %}
<table style="border-collapse: collapse; width: 100%; text-align: left;">
<thead>
<tr style="background-color: #333; color: white;">
<th style="border: 1px solid #000; padding: 8px;">Make</th>
<th style="border: 1px solid #000; padding: 8px;">Model</th>
<th style="border: 1px solid #000; padding: 8px;">Year</th>
<th style="border: 1px solid #000; padding: 8px;">Part Number</th>
</tr>
</thead>
<tbody>
{% for row in block.settings.csv_url | split: '\n' %}
{% assign cols = row | split: ',' %}
{% if forloop.index > 1 %}
<tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
<td style="border: 1px solid #000; padding: 8px;">{{ cols[0] }}</td>
<td style="border: 1px solid #000; padding: 8px;">{{ cols[1] }}</td>
<td style="border: 1px solid #000; padding: 8px;">{{ cols[2] }}</td>
<td style="border: 1px solid #000; padding: 8px;">
{% if cols[4] != blank %}
<a href="{{ cols[4] }}" style="color: blue; text-decoration: underline;">{{ cols[3] }}</a>
{% else %}
{{ cols[3] }}
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
___________________________________________________________________________________________________
{% schema %}
{
"name": "Applications Table",
"settings": [
{
"type": "text",
"id": "csv_url",
"label": "CSV File URL",
"default": "https://cdn.shopify.com/s/files/your-file-url.csv"
}
],
"presets": [
{
"name": "Applications Table",
"category": "Custom"
}
]
}
{% endschema %}
<table style="border-collapse: collapse; width: 100%; text-align: left;">
<thead>
<tr style="background-color: #333; color: white;">
<th style="border: 1px solid #000; padding: 8px;">Make</th>
<th style="border: 1px solid #000; padding: 8px;">Model</th>
<th style="border: 1px solid #000; padding: 8px;">Year</th>
<th style="border: 1px solid #000; padding: 8px;">Part Number</th>
</tr>
</thead>
<tbody>
{% for row in section.settings.csv_url | split: '\n' %}
{% assign cols = row | split: ',' %}
{% if forloop.index > 1 %} {%- comment -%} Skip header row {%- endcomment -%}
<tr style="background-color: {% cycle '#f2f2f2', '#ffffff' %};">
<td style="border: 1px solid #000; padding: 8px;">{{ cols[0] }}</td>
<td style="border: 1px solid #000; padding: 8px;">{{ cols[1] }}</td>
<td style="border: 1px solid #000; padding: 8px;">{{ cols[2] }}</td>
<td style="border: 1px solid #000; padding: 8px;">
{% if cols[4] != blank %}
<a href="{{ cols[4] }}" style="color: blue; text-decoration: underline;">{{ cols[3] }}</a>
{% else %}
{{ cols[3] }}
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
___________________________________________________________________________________________________{% schema %}
{
"name": "Dynamic Table Block",
"target": "section",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "textarea",
"id": "csv_data",
"label": "CSV Data (comma-separated)",
"info": "Enter rows with values separated by commas, new rows on a new line."
}
],
"presets": [
{
"name": "Dynamic Table Block"
}
]
}
{% endschema %}
<div class="table-container">
{% if section.settings.table_title != blank %}
<h2>{{ section.settings.table_title }}</h2>
{% endif %}
<input type="search" id="table-search" placeholder="Search by Model">
<table class="dynamic-table">
<thead>
<tr>
<th>Model</th>
<th>Years</th>
<th>Ford Nine Inch H.D. Housings</th>
<th>Ford 9″ Ultra Fab Housing</th>
<th>Alloy Axles</th>
<th>Pro Race Axles</th>
</tr>
</thead>
<tbody>
{% assign rows = section.settings.csv_data | split: "\n" %}
{% for row in rows %}
{% assign columns = row | split: "," %}
<tr>
{% for column in columns %}
<td>{{ column | strip }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<style>
.dynamic-table {
width: 100%;
border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.dynamic-table th {
background-color: rgb(194, 0, 0);
color: white;
}
.dynamic-table tr:nth-child(even) {
background-color: #f9f9f9;
}
#table-search {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
</style>
<script>
document.getElementById('table-search').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('.dynamic-table tbody tr');
rows.forEach(row => {
let text = row.innerText.toLowerCase();
row.style.display = text.includes(searchValue) ? '' : 'none';
});
});
</script>
____________________________________________________________________________________________________{% schema %}
{
"name": "Dynamic Table Block",
"target": "section",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "textarea",
"id": "table_headers",
"label": "Table Headers (comma-separated)",
"info": "Enter column headers separated by commas."
},
{
"type": "textarea",
"id": "csv_data",
"label": "CSV Data (comma-separated)",
"info": "Enter rows with values separated by commas, new rows on a new line."
}
],
"presets": [
{
"name": "Dynamic Table Block"
}
]
}
{% endschema %}
<div class="table-container">
{% if section.settings.table_title != blank %}
<h2>{{ section.settings.table_title }}</h2>
{% endif %}
<input type="search" id="table-search" placeholder="Search by Model">
<table class="dynamic-table">
<thead>
<tr>
{% assign headers = section.settings.table_headers | split: "," %}
{% for header in headers %}
<th>{{ header | strip }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% assign rows = section.settings.csv_data | split: "\n" %}
{% for row in rows %}
{% assign columns = row | split: "," %}
<tr>
{% for column in columns %}
<td>{{ column | strip }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<style>
.dynamic-table {
width: 100%;
border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.dynamic-table th {
background-color: rgb(194, 0, 0);
color: white;
}
.dynamic-table tr:nth-child(even) {
background-color: #f9f9f9;
}
#table-search {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
</style>
<script>
document.getElementById('table-search').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('.dynamic-table tbody tr');
rows.forEach(row => {
let text = row.innerText.toLowerCase();
row.style.display = text.includes(searchValue) ? '' : 'none';
});
});
</script>
____________________________________________________________________________________________________
{% schema %}
{
"name": "Dynamic Table Block",
"target": "section",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "textarea",
"id": "table_headers",
"label": "Table Headers (comma-separated)",
"info": "Enter column headers separated by commas."
},
{
"type": "url",
"id": "csv_file",
"label": "CSV File URL",
"info": "Upload a CSV file to Shopify's Files section and paste the URL here."
}
],
"presets": [
{
"name": "Dynamic Table Block"
}
]
}
{% endschema %}
<div class="table-container">
{% if section.settings.table_title != blank %}
<h2>{{ section.settings.table_title }}</h2>
{% endif %}
<input type="search" id="table-search" placeholder="Search by Model">
<table class="dynamic-table">
<thead>
<tr id="table-header-row"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<style>
.dynamic-table {
width: 100%;
border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.dynamic-table th {
background-color: rgb(194, 0, 0);
color: white;
}
.dynamic-table tr:nth-child(even) {
background-color: #f9f9f9;
}
#table-search {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
</style>
<script>
document.getElementById('table-search').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('.dynamic-table tbody tr');
rows.forEach(row => {
let text = row.innerText.toLowerCase();
row.style.display = text.includes(searchValue) ? '' : 'none';
});
});
function loadCSVData(csvUrl) {
fetch(csvUrl)
.then(response => response.text())
.then(data => {
let rows = data.split('\n').map(row => row.split(','));
let tableHeaderRow = document.getElementById('table-header-row');
let tableBody = document.getElementById('table-body');
tableHeaderRow.innerHTML = '';
tableBody.innerHTML = '';
if (rows.length > 0) {
rows[0].forEach(header => {
let th = document.createElement('th');
th.textContent = header.trim();
tableHeaderRow.appendChild(th);
});
}
rows.slice(1).forEach(row => {
let tr = document.createElement('tr');
row.forEach(cell => {
let td = document.createElement('td');
td.textContent = cell.trim();
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
})
.catch(error => console.error('Error loading CSV:', error));
}
let csvFileUrl = {{ section.settings.csv_file | json }};
if (csvFileUrl) {
loadCSVData(csvFileUrl);
}
</script>
____________________________________________________________________________________________________
{% schema %}
{
"name": "Dynamic Table Block",
"target": "section",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "url",
"id": "csv_file",
"label": "CSV File URL",
"info": "Upload a CSV file to Shopify's Files section and paste the URL here."
}
],
"presets": [
{
"name": "Dynamic Table Block"
}
]
}
{% endschema %}
<div class="table-container">
{% if section.settings.table_title != blank %}
<h2>{{ section.settings.table_title }}</h2>
{% endif %}
<input type="search" id="table-search" placeholder="Search by Model">
<table class="dynamic-table">
<thead>
<tr id="table-header-row"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<style>
.dynamic-table {
width: 100%;
border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.dynamic-table th {
background-color: rgb(194, 0, 0);
color: white;
}
.dynamic-table tr:nth-child(even) {
background-color: #f9f9f9;
}
#table-search {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
</style>
<script>
document.getElementById('table-search').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('.dynamic-table tbody tr');
rows.forEach(row => {
let text = row.innerText.toLowerCase();
row.style.display = text.includes(searchValue) ? '' : 'none';
});
});
function loadCSVData(csvUrl) {
fetch(csvUrl)
.then(response => response.text())
.then(data => {
let rows = data.split('\n').map(row => row.split(','));
let tableHeaderRow = document.getElementById('table-header-row');
let tableBody = document.getElementById('table-body');
tableHeaderRow.innerHTML = '';
tableBody.innerHTML = '';
if (rows.length > 0) {
rows[0].forEach(header => {
let th = document.createElement('th');
th.textContent = header.trim();
tableHeaderRow.appendChild(th);
});
}
rows.slice(1).forEach(row => {
let tr = document.createElement('tr');
row.forEach(cell => {
let td = document.createElement('td');
td.textContent = cell.trim();
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
})
.catch(error => console.error('Error loading CSV:', error));
}
let csvFileUrl = {{ section.settings.csv_file | json }};
if (csvFileUrl) {
loadCSVData(csvFileUrl);
}
</script>
____________________________________________________________________________________________________
{% schema %}
{
"name": "Dynamic Table Block",
"target": "section",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "textarea",
"id": "table_headers",
"label": "Table Headers (comma-separated)",
"info": "Enter column headers separated by commas."
},
{
"type": "url",
"id": "csv_file",
"label": "CSV File URL",
"info": "Upload a CSV file to Shopify's Files section and paste the URL here."
}
],
"presets": [
{
"name": "Dynamic Table Block"
}
]
}
{% endschema %}
<div class="table-container">
{% if section.settings.table_title != blank %}
<h2>{{ section.settings.table_title }}</h2>
{% endif %}
<input type="search" id="table-search" placeholder="Search by Model">
<table class="dynamic-table">
<thead>
<tr id="table-header-row"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<style>
.dynamic-table {
width: 100%;
border-collapse: collapse;
}
.dynamic-table th, .dynamic-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
white-space: nowrap; /* Prevent text from breaking into multiple lines */
}
.dynamic-table th {
background-color: rgb(194, 0, 0);
color: white;
}
.dynamic-table tr:nth-child(even) {
background-color: #f9f9f9;
}
#table-search {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
</style>
<script>
document.getElementById('table-search').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('.dynamic-table tbody tr');
rows.forEach(row => {
let text = row.innerText.toLowerCase();
row.style.display = text.includes(searchValue) ? '' : 'none';
});
});
function loadCSVData(csvUrl) {
fetch(csvUrl)
.then(response => response.text())
.then(data => {
let rows = data.split('\n').map(row => row.split(','));
let tableHeaderRow = document.getElementById('table-header-row');
let tableBody = document.getElementById('table-body');
tableHeaderRow.innerHTML = '';
tableBody.innerHTML = '';
if (rows.length > 0) {
rows[0].forEach(header => {
let th = document.createElement('th');
th.textContent = header.trim();
tableHeaderRow.appendChild(th);
});
}
rows.slice(1).forEach(row => {
let tr = document.createElement('tr');
row.forEach(cell => {
let td = document.createElement('td');
td.textContent = cell.trim();
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
})
.catch(error => console.error('Error loading CSV:', error));
}
let csvFileUrl = {{ section.settings.csv_file | json }};
if (csvFileUrl) {
loadCSVData(csvFileUrl);
}
</script>
____________________________________________________________________________________________________
// for tabs.liquid
{% for block in section.blocks %}
{% if block.type == 'dynamic_table' %}
{% render 'dynamic-table', block: block %}
{% endif %}
{% endfor %}
// make sure schema includes table block
{% schema %}
{
"name": "Tab Section",
"settings": [],
"blocks": [
{
"type": "dynamic_table",
"name": "Dynamic Table",
"settings": [
{
"type": "text",
"id": "table_title",
"label": "Table Title"
},
{
"type": "textarea",
"id": "table_headers",
"label": "Table Headers (comma-separated)"
},
{
"type": "url",
"id": "csv_file",
"label": "CSV File URL"
}
]
}
],
"presets": [
{
"name": "Tab Section",
"blocks": [
{
"type": "dynamic_table"
}
]
}
]
}
{% endschema %}
Comments