<!DOCTYPE html>
<html>
    <head>
        <title>test-datatable</title>
        {{ catalog.render_assets() }}
    </head>
    <body>
        {% set columns = [
            {'name':'id', 'data':'id', 'title': 'ID'},
            {'name':'name', 'data':'name', 'title': 'Name'},
            {'name':'email', 'data':'email', 'title': 'Email'},
            {'name':'age', 'data':'age', 'title': 'Age'},
        ]%}
        {% set csv_button = {'text': 'Download Csv', 'extend': 'csv'} %}
        {% set xsl_button = {'text': 'Download Excel', 'extend': 'excel'} %}
        {% set pdf_button = {'text': 'Download PDF', 'extend': 'pdf', 'orientation':'landscape' } %}
        {% set export_button = {'text': 'Export', 'extend': 'collection', 'align':'button-right', 'autoClose':True, 'background': False, 'popoverTitle': 'Export', 'buttons': [ csv_button, xsl_button, pdf_button] } %}
        {% set age_20 = {'text': 'Age 20-29', 'extend': 'filter', 'column': 'age:name', 'search':'2[0-9]', 'regex': True}, %}
        {% set age_30 = {'text': 'Age 30-39', 'extend': 'filter', 'column': 'age:name', 'search':'3[0-9]', 'regex': True}, %}
        {% set age_40 = {'text': 'Age 40-49', 'extend': 'filter', 'column': 'age:name', 'search':'4[0-9]', 'regex': True}, %}
        {% set collection_filter = {'text': 'Age' , 'extend': 'collectionfilter', 'popoverTitle': 'Age', 'buttons': [age_20, age_30, age_40], 'column': 'age:name' } %}
        {% set buttons = [
            collection_filter,
            export_button,
            {'text': "Reset" , 'extend': 'reset'},
        ] %}
        {% set layout = {
            'top': 'buttons',
        } %}
        <cf:Datatable :columns="columns" :buttons="buttons" :layout="layout">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>johndoe@example.com</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Smith</td>
                    <td>janesmith@example.com</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Bob Johnson</td>
                    <td>bobjohnson@example.com</td>
                    <td>45</td>
                </tr>
            </tbody>
        </cf:Datatable>

    </body>
</html>
