feat: table component (#597)

README.md

@@ -78,6 +78,7 @@ Did you decide to start using Unfold but you don't have time to make the switch
   - [Overriding template](#overriding-template)
   - [Custom variables](#custom-variables)
   - [Unfold components](#unfold-components)
+    - [Table component example](#table-component-example)
 - [Unfold development](#unfold-development)
   - [Pre-commit](#pre-commit)
   - [Poetry configuration](#poetry-configuration)
@@ -1256,17 +1257,44 @@ Below you can find a more complex example which is using multiple components and
 
 | Component                         | Description                    | Arguments                        |
 | --------------------------------- | ------------------------------ | -------------------------------- |
+| unfold/components/button.html     | Basic button element           | submit                           |
+| unfold/components/card.html       | Card component                 | class, title, footer, label      |
 | unfold/components/chart/bar.html  | Bar chart implementation       | class, data, height, width       |
 | unfold/components/chart/line.html | Line chart implementation      | class, data, height, width       |
-| unfold/components/card.html       | Card component                 | class, title, footer, label      |
 | unfold/components/container.html  | Wrapper for settings max width | class                            |
 | unfold/components/flex.html       | Flex items                     | class, col                       |
 | unfold/components/navigation.html | List of navigation links       | class, items                     |
 | unfold/components/progress.html   | Percentual progress bar        | class, value, title, description |
 | unfold/components/separator.html  | Separator, horizontal rule     | class                            |
+| unfold/components/table.html      | Table                          | card_included, striped           |
 | unfold/components/text.html       | Paragraph of text              | class                            |
 | unfold/components/title.html      | Basic heading element          | class                            |
-| unfold/components/button.html     | Basic button  element          | submit                           |
+
+
+#### Table component example
+
+```python
+from typing import Dict
+from django.http import HttpRequest
+
+
+def dashboard_callback(self, request: HttpRequest) -> Dict:
+    return {
+        "table_data": {
+            "headers": ["col 1", "col 2"],
+            "rows": [
+                ["a", "b"],
+                ["c", "d"],
+            ]
+        }
+    }
+```
+
+```django-html
+{% component "unfold/components/card" with title="Card title" %}
+    {% component "unfold/components/table.html" table=table_data %}{% encomponent %}
+{% endcomponent %}
+```
 
 ## Unfold development
 

src/unfold/templates/unfold/components/card.html

@@ -1,6 +1,6 @@
 <div class="border flex flex-col flex-grow p-6 rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
     {% if title %}
-        <h2 class="border-b font-medium mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700 dark:text-gray-200 dark:border-gray-800">
+        <h2 class="border-b font-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700 dark:text-gray-200 dark:border-gray-800">
             {{ title }}
         </h2>
     {% endif %}

src/unfold/templates/unfold/components/table.html

@@ -0,0 +1,31 @@
+{% load unfold %}
+
+<div class="{% if card_included == 1 %}-m-6{% else %}lg:border lg:rounded-md lg:shadow-sm{% endif %} overflow-x-auto lg:dark:border-gray-800">
+    <table class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-300 lg:table">
+        {% if table.headers %}
+            <thead>
+                <tr class="bg-gray-50 dark:bg-white/[.02]">
+                    {% for  header in table.headers %}
+                        <th class="align-middle font-medium py-2 text-left text-gray-400 text-sm whitespace-nowrap sortable column-description hidden px-3 lg:table-cell {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}">
+                            {{ header }}
+                        </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+        {% endif %}
+
+        {% if table.rows %}
+            <tbody class="block lg:table-row-group">
+                {% for row in table.rows %}
+                    <tr class="{% if striped == 1 %}{% cycle '' 'bg-gray-50 dark:bg-white/[.02]' %}{% endif %} block {% if not card_included == 1 %}border mb-3 rounded-md shadow-sm{% else %}border-t{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
+                        {% for cell in row %}
+                            <td class="px-3 py-2 align-middle flex border-t border-gray-200 font-normal gap-4 min-w-0 overflow-hidden text-left text-gray-500 text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-300 dark:text-gray-300 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800 {% if card_included == 1 %}px-6 lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
+                                {{ cell }}
+                            </td>
+                        {% endfor %}
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% endif %}
+    </table>
+</div>