create purchase list without paging

games/templates/components/button_group_button_sm.html

@@ -0,0 +1,20 @@
+{% var color=color|default:"gray" %}
+<a href="{{ href }}"
+   class="[&:first-of-type_button]:rounded-s-lg [&:last-of-type_button]:rounded-e-lg">
+    {% if color == "gray" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% elif color == "red" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-red-500 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-red-700 dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% elif color == "green" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-green-500 hover:border-green-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-green-700 dark:hover:bg-green-600 dark:focus:ring-green-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% endif %}
+</a>

games/templates/components/button_group_sm.html

@@ -0,0 +1,5 @@
+<div class="inline-flex rounded-md shadow-sm" role="group">
+    {% for button in buttons %}
+        {% button_group_button_sm href=button.href text=button.text color=button.color %}
+    {% endfor %}
+</div>

games/templates/components/simple_table.html

@@ -0,0 +1,14 @@
+<div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in rows %}
+                {% table_row data=row %}
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

games/templates/components/table.html

@@ -0,0 +1,12 @@
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {{ children }}
+        </tbody>
+    </table>
+</div>

games/templates/components/table_row.html

@@ -0,0 +1,15 @@
+{% fragment as default_content %}
+{% for td in data %}
+    {% if forloop.first %}
+        <th scope="row"
+            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ td }}</th>
+    {% else %}
+        {% #table_td %}
+        {{ td }}
+        {% /table_td %}
+    {% endif %}
+{% endfor %}
+{% endfragment %}
+<tr class="[&_td:first-of-type]:px-6 [&_td:first-of-type]:py-4 [&_td:first-of-type]:font-medium [&_td:first-of-type]:text-gray-900 [&_td:first-of-type]:whitespace-nowrap [&_td:first-of-type]:dark:text-white odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border-b">
+    {{ children|default:default_content }}
+</tr>

games/templates/components/table_td.html

@@ -0,0 +1 @@
+<td class="px-6 py-4">{{ children }}</td>