Data table component with styling options.
{# derafu_twig:templates/pages/components/block-table.html.twig #}
{% extends 'layouts/default.html.twig' %}
{% block content %}
{# Tabla básica #}
{% for theme, name in themes %}
<twig:block-table
caption="Theme: {{ name }}"
:headers="[
[
{'text': 'ID', 'scope': 'col', 'align': 'center'},
{'text': 'Nombre', 'scope': 'col'},
{'text': 'Email', 'scope': 'col'},
{'text': 'Estado', 'scope': 'col', 'align': 'center'}
]
]"
:rows="[
['1', 'Juan Pérez', '[email protected]', 'Activo'],
['2', 'María López', '[email protected]', 'Inactivo'],
['3', 'Carlos Ruiz', '[email protected]', 'Pendiente']
]"
:columns="[
{'index': 0, 'width': '80px', 'align': 'center'},
{'index': 3, 'align': 'center', 'class': 'fw-bold'}
]"
:rowClasses="[
{'col': 3, 'values': {
'Activo': 'table-success',
'Inactivo': 'table-danger',
'Pendiente': 'table-warning'
}}
]"
/>
<br/>
{% endfor %}
{# Tabla con headers complejos y footer #}
<twig:block-table
caption="Reporte de Ventas 2024"
:headers="[
[
{text: 'Región', scope: 'col', rowspan: '2'},
{text: 'Ventas por Trimestre', scope: 'col', colspan: '4', class: 'text-center'},
],
[
{text: 'Q1', scope: 'col', align: 'end'},
{text: 'Q2', scope: 'col', align: 'end'},
{text: 'Q3', scope: 'col', align: 'end'},
{text: 'Q4', scope: 'col', align: 'end'}
]
]"
:rows="[
['Norte', '10,500', '12,300', '11,800', '13,200'],
['Sur', '8,900', '9,200', '9,800', '10,100'],
['Este', '11,200', '11,500', '12,100', '12,800']
]"
:footer="[
[
{text: 'Total', colspan: '1'},
{text: '30,600', class: 'fw-bold text-end'},
{text: '33,000', class: 'fw-bold text-end'},
{text: '33,700', class: 'fw-bold text-end'},
{text: '36,100', class: 'fw-bold text-end'}
]
]"
:columns="[
{width: '120px'},
{align: 'end'},
{align: 'end'},
{align: 'end'},
{align: 'end'}
]"
:bordered="true"
:striped="true"
:hover="false"
/>
<br/>
{# Tabla con acciones y toggle #}
<twig:block-table
:headers="[
[
{text: 'Producto', scope: 'col'},
{text: 'Categoría', scope: 'col'},
{text: 'Stock', scope: 'col', align: 'center'},
{text: 'Precio', scope: 'col', align: 'end'}
]
]"
:rows="[
['Laptop XPS', 'Computadoras', '15', '$1,299.99'],
['Mouse Wireless', 'Accesorios', '45', '$29.99'],
['Monitor 27\'\'', 'Pantallas', '8', '$299.99']
]"
:actions="[
{
text: 'Exportar a Excel',
icon: 'fas fa-file-excel',
url: '/exportar/excel'
},
{
text: 'Exportar a PDF',
icon: 'fas fa-file-pdf',
url: '/exportar/pdf'
},
{type: 'divider'},
{
text: 'Imprimir',
icon: 'fas fa-print',
onclick: 'window.print()'
}
]"
:toggleable="true"
:visible="true"
:maxHeight="300"
:hover="false"
/>
<br/>
{# Tabla minimalista responsiva #}
<twig:block-table
:headers="[
[
{text: '#', scope: 'col'},
{text: 'Título', scope: 'col'},
{text: 'Fecha', scope: 'col'},
{text: 'Estado', scope: 'col'}
]
]"
:rows="[
['1', 'Documento 1', '2024-02-22', '<span class=\'badge bg-success\'>Aprobado</span>'],
['2', 'Documento 2', '2024-02-21', '<span class=\'badge bg-warning\'>Pendiente</span>'],
['3', 'Documento 3', '2024-02-20', '<span class=\'badge bg-danger\'>Rechazado</span>']
]"
:small="true"
:striped="false"
:bordered="false"
:hover="false"
/>
{% endblock %}