product-grid.liquid

<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>

{% assign products = product.metafields.global.grid-products | split: "," %}
{% assign variants = '' | split: '' %}
{% assign colors = '' | split: '' %}
{% assign headers  = '' | split: '' %}


{% for item in products %}
	{% assign variants = variants | concat: all_products[item].variants %}

	{% for obj in all_products[item].variants %}
		{% assign temp = all_products[item].title | append: ' - ' | append: obj.option1 | split: ',' %}
		{% assign headers = headers | concat : temp %}
	{% endfor %}
{% endfor %}

{% assign headers = headers | uniq %}
{% assign cols = headers | size %}
{% assign colors = variants | map: 'option2' | uniq %}


<table>
	<th></th>
	{% for col in headers %}
		<th>{{ col }}</th>
	{% endfor %}
	{% for color in colors %}
		{{color | json }}
		{% assign list = variants | where: 'option2', color %}
		<tr>
			<td>{{ color }}</td>
			{% for item in list %}
				<td id="{{item.id}}">
					<input type="tel" style="width:80px;"> 
					<span>{{ item.inventory_quantity }}</span>
					{% comment %}{{ item.title }}{% endcomment %}
				</td>
			{% endfor %}
		</tr>
	{% endfor %}
</table>

MVP Demo
Preview: https://b2b-kassatex.myshopify.com/products/paloma-bedding-by-kassatex

The case: The client needed to associate multiple variants from multiple products on one page so B2B customers can buy in bulk.
The problem: In Shopify, you can not associate multiple product variants in one product or page
The approach: I created a product that doesn't track inventory and assigned products by handled using Shopify metafields.
Limitations: It may have an impact on performance when assigning a large number of products. (May need to test)