Customizable Table 2.0 (.liquid)
I’ve updated and optimized all the code. This is a new version that addresses certain issues, such as alignment on non-PC devices. The option to change the table border color in real-time has been added from the customizer.
{% assign table_settings = section.settings %}
{% for row in (1..table_settings.rows) %}
{% for column in (1..table_settings.columns) %}
{% assign cellTextId = "cell_text_" | append: row | append: "_" | append: column %}
{% assign cellText = section.settings[cellTextId] %}
{% assign cellBorderStyle = table_settings.cell_border_style %}
{% case cellBorderStyle %}
{% when 'all_borders' %}
{% assign cellBorderStyleValue = 'border: 1px solid;' %}
{% when 'outer_borders' %}
{% if row == 1 %}
{% assign cellBorderStyleValue = 'border-top: 1px solid;' %}
{% elsif row == table_settings.rows %}
{% assign cellBorderStyleValue = 'border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid;' %}
{% elsif column == table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% endif %}
{% when 'inner_borders' %}
{% if row != 1 and row != table_settings.rows %}
{% assign cellBorderStyleValue = 'border-top: 1px solid; border-bottom: 1px solid;' %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endif %}
{% if column != 1 and column != table_settings.columns %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-left: 1px solid; border-right: 1px solid;' %}
{% endif %}
{% if table_settings.columns == 2 and column == 1 %}
{% assign cellBorderStyleValue = cellBorderStyleValue | append: 'border-right: 1px solid;' %}
{% endif %}
{% else %}
{% assign cellBorderStyleValue = '' %}
{% endcase %}
{% endfor %}
{% endfor %}
| <br> {{ cellText }}<br> |
| - |
{% schema %}
{
"name": "Customizable Table",
"settings": [
{
"type": "range",
"id": "columns",
"label": "Number of Columns",
"min": 1,
"max": 3,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "rows",
"label": "Number of Rows",
"min": 1,
"max": 12,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "max_width",
"label": "Maximum Section Width",
"min": 0,
"max": 2000,
"step": 20,
"default": 960
},
{
"type": "select",
"id": "pc_alignment",
"label": "Alignment on PC devices",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" },
{ "value": "center", "label": "Center" }
],
"default": "center"
},
{
"type": "select",
"id": "mobile_alignment",
"label": "Alignment on non-PC devices",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" },
{ "value": "center", "label": "Center" }
],
"default": "center"
},
{
"type": "radio",
"id": "cell_border_style",
"label": "Cell Border Style",
"options": [
{ "value": "all_borders", "label": "All Borders" },
{ "value": "outer_borders", "label": "Outer Borders" },
{ "value": "inner_borders", "label": "Inner Borders" }
],
"default": "all_borders"
},
{
"type": "color",
"id": "table_border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "text",
"id": "cell_padding",
"label": "Cell Padding (in pixels)",
"default": "10px"
},
{
"type": "text",
"id": "margin_top",
"label": "Margin Top (in pixels)",
"default": "20px"
},
{
"type": "text",
"id": "margin_bottom",
"label": "Margin Bottom (in pixels)",
"default": "20px"
},
{
"type": "select",
"id": "text_weight",
"label": "Text Weight",
"default": "normal",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "bold",
"label": "Bold"
}
]
},
{
"type": "text",
"id": "text_size",
"label": "Text Size",
"default": "14"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "text",
"id": "cell_text_1_1",
"label": "Cell Text (1, 1)",
"default": "Cell 1"
},
{
"type": "text",
"id": "cell_text_1_2",
"label": "Cell Text (1, 2)",
"default": "Cell 2"
},
{
"type": "text",
"id": "cell_text_1_3",
"label": "Cell Text (1, 3)",
"default": "Cell 3"
},
{
"type": "text",
"id": "cell_text_2_1",
"label": "Cell Text (2, 1)",
"default": "Cell 4"
},
{
"type": "text",
"id": "cell_text_2_2",
"label": "Cell Text (2, 2)",
"default": "Cell 5"
},
{
"type": "text",
"id": "cell_text_2_3",
"label": "Cell Text (2, 3)",
"default": "Cell 6"
},
{
"type": "text",
"id": "cell_text_3_1",
"label": "Cell Text (3, 1)",
"default": "Cell 7"
},
{
"type": "text",
"id": "cell_text_3_2",
"label": "Cell Text (3, 2)",
"default": "Cell 8"
},
{
"type": "text",
"id": "cell_text_3_3",
"label": "Cell Text (3, 3)",
"default": "Cell 9"
},
{
"type": "text",
"id": "cell_text_4_1",
"label": "Cell Text (4, 1)",
"default": "Cell 10"
},
{
"type": "text",
"id": "cell_text_4_2",
"label": "Cell Text (4, 2)",
"default": "Cell 11"
},
{
"type": "text",
"id": "cell_text_4_3",
"label": "Cell Text (4, 3)",
"default": "Cell 12"
},
{
"type": "text",
"id": "cell_text_5_1",
"label": "Cell Text (5, 1)",
"default": "Cell 13"
},
{
"type": "text",
"id": "cell_text_5_2",
"label": "Cell Text (5, 2)",
"default": "Cell 14"
},
{
"type": "text",
"id": "cell_text_5_3",
"label": "Cell Text (5, 3)",
"default": "Cell 15"
},
{
"type": "text",
"id": "cell_text_6_1",
"label": "Cell Text (6, 1)",
"default": "Cell 16"
},
{
"type": "text",
"id": "cell_text_6_2",
"label": "Cell Text (6, 2)",
"default": "Cell 17"
},
{
"type": "text",
"id": "cell_text_6_3",
"label": "Cell Text (6, 3)",
"default": "Cell 18"
},
{
"type": "text",
"id": "cell_text_7_1",
"label": "Cell Text (7, 1)",
"default": "Cell 19"
},
{
"type": "text",
"id": "cell_text_7_2",
"label": "Cell Text (7, 2)",
"default": "Cell 20"
},
{
"type": "text",
"id": "cell_text_7_3",
"label": "Cell Text (7, 3)",
"default": "Cell 21"
},
{
"type": "text",
"id": "cell_text_8_1",
"label": "Cell Text (8, 1)",
"default": "Cell 22"
},
{
"type": "text",
"id": "cell_text_8_2",
"label": "Cell Text (8, 2)",
"default": "Cell 23"
},
{
"type": "text",
"id": "cell_text_8_3",
"label": "Cell Text (8, 3)",
"default": "Cell 24"
},
{
"type": "text",
"id": "cell_text_9_1",
"label": "Cell Text (9, 1)",
"default": "Cell 25"
},
{
"type": "text",
"id": "cell_text_9_2",
"label": "Cell Text (9, 2)",
"default": "Cell 26"
},
{
"type": "text",
"id": "cell_text_9_3",
"label": "Cell Text (9, 3)",
"default": "Cell 27"
},
{
"type": "text",
"id": "cell_text_10_1",
"label": "Cell Text (10, 1)",
"default": "Cell 28"
},
{
"type": "text",
"id": "cell_text_10_2",
"label": "Cell Text (10, 2)",
"default": "Cell 29"
},
{
"type": "text",
"id": "cell_text_10_3",
"label": "Cell Text (10, 3)",
"default": "Cell 30"
},
{
"type": "text",
"id": "cell_text_11_1",
"label": "Cell Text (11, 1)",
"default": "Cell 31"
},
{
"type": "text",
"id": "cell_text_11_2",
"label": "Cell Text (11, 2)",
"default": "Cell 32"
},
{
"type": "text",
"id": "cell_text_11_3",
"label": "Cell Text (11, 3)",
"default": "Cell 33"
},
{
"type": "text",
"id": "cell_text_12_1",
"label": "Cell Text (12, 1)",
"default": "Cell 34"
},
{
"type": "text",
"id": "cell_text_12_2",
"label": "Cell Text (12, 2)",
"default": "Cell 35"
},
{
"type": "text",
"id": "cell_text_12_3",
"label": "Cell Text (12, 3)",
"default": "Cell 36"
}
],
"presets": [
{
"name": "Customizable Table",
"category": "Presets"
}
]
}
{% endschema %}
Hope it helps!