Table
Tabla semántica con cabeceras (.ok-th--sortable) y celdas tipadas (.ok-td--num, .ok-td--mono, .ok-td--right, .ok-td--muted). Compón thead/tbody dentro.
Pedido
Cliente
Estado
Total
Fecha
#PED-1042
Marina Ribó
Pagado €124,50
Hoy · 14:22
#PED-1041
Joaquín Gómez
Procesando €86,00
Hoy · 13:48
#PED-1040
Eva Linares
Reembolso −€42,00
Ayer · 18:02
#PED-1039
Roberto Pinto
Pagado €312,80
Ayer · 12:30
Copy
<table class="table">
<thead>
<tr>
<th class="th sortable" aria-sort="ascending">Pedido</th>
<th class="th sortable">Cliente</th>
<th class="th sortable">Estado</th>
<th class="th sortable td right">Total</th>
<th class="th sortable">Fecha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td mono">#PED-1042</td>
<td>Marina Ribó</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€124,50</td>
<td class="td muted">Hoy · 14:22</td>
</tr>
<tr aria-selected="true">
<td class="td mono">#PED-1041</td>
<td>Joaquín Gómez</td>
<td><span class="badge warning">Procesando</span></td>
<td class="td num">€86,00</td>
<td class="td muted">Hoy · 13:48</td>
</tr>
<tr>
<td class="td mono">#PED-1040</td>
<td>Eva Linares</td>
<td><span class="badge danger">Reembolso</span></td>
<td class="td num">−€42,00</td>
<td class="td muted">Ayer · 18:02</td>
</tr>
<tr>
<td class="td mono">#PED-1039</td>
<td>Roberto Pinto</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€312,80</td>
<td class="td muted">Ayer · 12:30</td>
</tr>
</tbody>
</table>
Copy
{% from "table.jinja" import table %}
{% call table() %}
<thead>
<tr>
<th class="th sortable" aria-sort="ascending">Pedido</th>
<th class="th sortable">Cliente</th>
<th class="th sortable">Estado</th>
<th class="th sortable td right">Total</th>
<th class="th sortable">Fecha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td mono">#PED-1042</td>
<td>Marina Ribó</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€124,50</td>
<td class="td muted">Hoy · 14:22</td>
</tr>
<tr aria-selected="true">
<td class="td mono">#PED-1041</td>
<td>Joaquín Gómez</td>
<td><span class="badge warning">Procesando</span></td>
<td class="td num">€86,00</td>
<td class="td muted">Hoy · 13:48</td>
</tr>
<tr>
<td class="td mono">#PED-1040</td>
<td>Eva Linares</td>
<td><span class="badge danger">Reembolso</span></td>
<td class="td num">−€42,00</td>
<td class="td muted">Ayer · 18:02</td>
</tr>
<tr>
<td class="td mono">#PED-1039</td>
<td>Roberto Pinto</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€312,80</td>
<td class="td muted">Ayer · 12:30</td>
</tr>
</tbody>
{% endcall %}
Copy
<Table>
<thead>
<tr>
<th class="th sortable" aria-sort="ascending">Pedido</th>
<th class="th sortable">Cliente</th>
<th class="th sortable">Estado</th>
<th class="th sortable td right">Total</th>
<th class="th sortable">Fecha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td mono">#PED-1042</td>
<td>Marina Ribó</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€124,50</td>
<td class="td muted">Hoy · 14:22</td>
</tr>
<tr aria-selected="true">
<td class="td mono">#PED-1041</td>
<td>Joaquín Gómez</td>
<td><span class="badge warning">Procesando</span></td>
<td class="td num">€86,00</td>
<td class="td muted">Hoy · 13:48</td>
</tr>
<tr>
<td class="td mono">#PED-1040</td>
<td>Eva Linares</td>
<td><span class="badge danger">Reembolso</span></td>
<td class="td num">−€42,00</td>
<td class="td muted">Ayer · 18:02</td>
</tr>
<tr>
<td class="td mono">#PED-1039</td>
<td>Roberto Pinto</td>
<td><span class="badge success">Pagado</span></td>
<td class="td num">€312,80</td>
<td class="td muted">Ayer · 12:30</td>
</tr>
</tbody>
</Table>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
SKU
Producto
Stock
Reservado
Disponible
CAF-001 Café espresso 1kg 142 8 134 CAF-002 Café descafeinado 1kg 36 2 34 LEC-010 Leche entera 1L 8 0 8 LEC-020 Leche desnatada 1L 2 1 1 AZU-001 Azúcar blanco 5kg 28 0 28
Copy
<table class="table compact zebra">
<thead>
<tr>
<th>SKU</th>
<th>Producto</th>
<th class="td right">Stock</th>
<th class="td right">Reservado</th>
<th class="td right">Disponible</th>
</tr>
</thead>
<tbody>
<tr><td class="td mono">CAF-001</td><td>Café espresso 1kg</td><td class="td num">142</td><td class="td num">8</td><td class="td num">134</td></tr>
<tr><td class="td mono">CAF-002</td><td>Café descafeinado 1kg</td><td class="td num">36</td><td class="td num">2</td><td class="td num">34</td></tr>
<tr><td class="td mono">LEC-010</td><td>Leche entera 1L</td><td class="td num">8</td><td class="td num">0</td><td class="td num">8</td></tr>
<tr><td class="td mono">LEC-020</td><td>Leche desnatada 1L</td><td class="td num">2</td><td class="td num">1</td><td class="td num">1</td></tr>
<tr><td class="td mono">AZU-001</td><td>Azúcar blanco 5kg</td><td class="td num">28</td><td class="td num">0</td><td class="td num">28</td></tr>
</tbody>
</table>
Copy
{% from "table.jinja" import table %}
{% call table(compact=True, zebra=True) %}
<thead>
<tr>
<th>SKU</th>
<th>Producto</th>
<th class="td right">Stock</th>
<th class="td right">Reservado</th>
<th class="td right">Disponible</th>
</tr>
</thead>
<tbody>
<tr><td class="td mono">CAF-001</td><td>Café espresso 1kg</td><td class="td num">142</td><td class="td num">8</td><td class="td num">134</td></tr>
<tr><td class="td mono">CAF-002</td><td>Café descafeinado 1kg</td><td class="td num">36</td><td class="td num">2</td><td class="td num">34</td></tr>
<tr><td class="td mono">LEC-010</td><td>Leche entera 1L</td><td class="td num">8</td><td class="td num">0</td><td class="td num">8</td></tr>
<tr><td class="td mono">LEC-020</td><td>Leche desnatada 1L</td><td class="td num">2</td><td class="td num">1</td><td class="td num">1</td></tr>
<tr><td class="td mono">AZU-001</td><td>Azúcar blanco 5kg</td><td class="td num">28</td><td class="td num">0</td><td class="td num">28</td></tr>
</tbody>
{% endcall %}
Copy
<Table compact zebra>
<thead>
<tr>
<th>SKU</th>
<th>Producto</th>
<th class="td right">Stock</th>
<th class="td right">Reservado</th>
<th class="td right">Disponible</th>
</tr>
</thead>
<tbody>
<tr><td class="td mono">CAF-001</td><td>Café espresso 1kg</td><td class="td num">142</td><td class="td num">8</td><td class="td num">134</td></tr>
<tr><td class="td mono">CAF-002</td><td>Café descafeinado 1kg</td><td class="td num">36</td><td class="td num">2</td><td class="td num">34</td></tr>
<tr><td class="td mono">LEC-010</td><td>Leche entera 1L</td><td class="td num">8</td><td class="td num">0</td><td class="td num">8</td></tr>
<tr><td class="td mono">LEC-020</td><td>Leche desnatada 1L</td><td class="td num">2</td><td class="td num">1</td><td class="td num">1</td></tr>
<tr><td class="td mono">AZU-001</td><td>Azúcar blanco 5kg</td><td class="td num">28</td><td class="td num">0</td><td class="td num">28</td></tr>
</tbody>
</Table>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
API
Prop Tipo Default Descripción
compactbool false Densidad reducida. zebrabool false Filas alternadas. attrsdict {} Atributos HTML extra. (slot) — — thead + tbody compuestos por el consumidor.