Block Table

Table
ID	Name	Email	Status
1	John Smith	[email protected]	Active
2	Mary Johnson	[email protected]	Inactive
3	Charles Brown	[email protected]	Pending

Sales Report 2024
Region	Quarterly Sales
Region	Q1	Q2	Q3	Q4
North	10,500	12,300	11,800	13,200
South	8,900	9,200	9,800	10,100
East	11,200	11,500	12,100	12,800
Total	30,600	33,000	33,700	36,100

Product	Category	Stock	Price
Laptop XPS	Computers	15	$1,299.99
Wireless Mouse	Accessories	45	$29.99
Monitor 27''	Displays	8	$299.99

#	Title	Date	Status
1	Document 1	2024-02-22	Approved
2	Document 2	2024-02-21	Pending
3	Document 3	2024-02-20	Rejected

{# derafu_twig:templates/pages/components/block-table.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}

{# Basic table #}
<twig:block-table
    class="my-4"
    caption="Table"
    :headers="[
        [
            {'text': 'ID', 'scope': 'col', 'align': 'center'},
            {'text': 'Name', 'scope': 'col'},
            {'text': 'Email', 'scope': 'col'},
            {'text': 'Status', 'scope': 'col', 'align': 'center'}
        ]
    ]"
    :rows="[
        ['1', '<a href=\'https://www.example.com/\' target=\'_blank\'>John Smith</a>', '[email protected]', 'Active'],
        ['2', 'Mary Johnson', '[email protected]', 'Inactive'],
        ['3', 'Charles Brown', '[email protected]', 'Pending']
    ]"
    :columns="[
        {'index': 0, 'width': '80px', 'align': 'center'},
        {'index': 3, 'align': 'center', 'class': 'fw-bold'}
    ]"
    :rowClasses="[
        {'col': 3, 'values': {
            'Active': 'table-success',
            'Inactive': 'table-danger',
            'Pending': 'table-warning'
        }}
    ]"
/>

{# Table with complex headers and footer #}
<twig:block-table
    class="my-4"
    caption="Sales Report 2024"
    :headers="[
        [
            {text: 'Region', scope: 'col', rowspan: '2'},
            {text: 'Quarterly Sales', 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="[
        ['North', '10,500', '12,300', '11,800', '13,200'],
        ['South', '8,900', '9,200', '9,800', '10,100'],
        ['East', '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"
/>

{# Table with actions and toggle #}
<twig:block-table
    class="my-4"
    :headers="[
        [
            {text: 'Product', scope: 'col'},
            {text: 'Category', scope: 'col'},
            {text: 'Stock', scope: 'col', align: 'center'},
            {text: 'Price', scope: 'col', align: 'end'}
        ]
    ]"
    :rows="[
        ['Laptop XPS', 'Computers', '15', '$1,299.99'],
        ['Wireless Mouse', 'Accessories', '45', '$29.99'],
        ['Monitor 27\'\'', 'Displays', '8', '$299.99']
    ]"
    :actions="[
        {
            text: 'Export to Excel',
            icon: 'fas fa-file-excel',
            url: '/export/excel'
        },
        {
            text: 'Export to PDF',
            icon: 'fas fa-file-pdf',
            url: '/export/pdf'
        },
        {type: 'divider'},
        {
            text: 'Print',
            icon: 'fas fa-print',
            onclick: 'window.print()'
        }
    ]"
    :toggleable="true"
    :visible="true"
    :maxHeight="300"
    :hover="false"
/>

{# Minimalist responsive table #}
<twig:block-table
    class="my-4"
    :headers="[
        [
            {text: '#', scope: 'col'},
            {text: 'Title', scope: 'col'},
            {text: 'Date', scope: 'col'},
            {text: 'Status', scope: 'col'}
        ]
    ]"
    :rows="[
        ['1', 'Document 1', '2024-02-22', '<span class=\'badge bg-success\'>Approved</span>'],
        ['2', 'Document 2', '2024-02-21', '<span class=\'badge bg-warning\'>Pending</span>'],
        ['3', 'Document 3', '2024-02-20', '<span class=\'badge bg-danger\'>Rejected</span>']
    ]"
    :small="true"
    :striped="false"
    :bordered="false"
    :hover="false"
/>

{% endblock %}