DIA Frontend

Table 

<!-- ### Begin: Element table ### -->
    <div id="c405" class="frame frame-default frame-type-table frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
        <div class="frame-container">
            <div class="frame-inner">

                <header class="frame-header">
                    <h2 class="element-header">
                        Basic
                    </h2>
                </header>
                <div class="table-responsive">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td> Title 1 </td>
                                <td> Title 2 </td>
                                <td> Title 3 </td>
                            </tr>
                            <tr>
                                <td> Row 1 </td>
                                <td> Row 1 </td>
                                <td> Row 1 </td>
                            </tr>
                            <tr>
                                <td> Row 2 </td>
                                <td> Row 2 </td>
                                <td> Row 2 </td>
                            </tr>
                            <tr>
                                <td> Row 3 </td>
                                <td> Row 3 </td>
                                <td> Row 3 </td>
                            </tr>
                            <tr>
                                <td> Row 4 </td>
                                <td> Row 4 </td>
                                <td> Row 4 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element table ### -->

    <!-- ### Begin: Element table ### -->
    <div id="c220" class="frame frame-default frame-type-table frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
        <div class="frame-container">
            <div class="frame-inner">

                <header class="frame-header">
                    <h2 class="element-header">
                        Striped rows
                    </h2>
                </header>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <caption>Caption</caption>
                        <thead>
                            <tr>
                                <th> Title 1 </th>
                                <th> Title 2 </th>
                                <th> Title 3 </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td> Row 1 </td>
                                <td> Row 1 </td>
                                <td> Row 1 </td>
                            </tr>
                            <tr>
                                <td> Row 2 </td>
                                <td> Row 2 </td>
                                <td> Row 2 </td>
                            </tr>
                            <tr>
                                <td> Row 3 </td>
                                <td> Row 3 </td>
                                <td> Row 3 </td>
                            </tr>
                            <tr>
                                <td> Row 4 </td>
                                <td> Row 4 </td>
                                <td> Row 4 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element table ### -->

    <!-- ### Begin: Element table ### -->
    <div id="c312" class="frame frame-default frame-type-table frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
        <div class="frame-container">
            <div class="frame-inner">

                <header class="frame-header">
                    <h2 class="element-header">
                        Bordered
                    </h2>
                </header>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <caption>Vertical header</caption>
                        <tbody>
                            <tr>
                                <th> Title 1 </th>
                                <td> Title 2 </td>
                                <td> Title 3 </td>
                            </tr>
                            <tr>
                                <th> Row 1 </th>
                                <td> Row 1 </td>
                                <td> Row 1 </td>
                            </tr>
                            <tr>
                                <th> Row 2 </th>
                                <td> Row 2 </td>
                                <td> Row 2 </td>
                            </tr>
                            <tr>
                                <th> Row 3 </th>
                                <td> Row 3 </td>
                                <td> Row 3 </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th> Row 4 </th>
                                <td> Row 4 </td>
                                <td> Row 4 </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- ### End: Element table ### -->
 
{% for variant in variants %}
    {% include '@frame-table' with variant %}
{% endfor %}
 
{
  "table_caption": "Caption",
  "table_class": null,
  "table_header_position": null,
  "table_tfoot": null,
  "table": [
    [
      "Title 1",
      "Title 2",
      "Title 3"
    ],
    [
      "Row 1",
      "Row 1",
      "Row 1"
    ],
    [
      "Row 2",
      "Row 2",
      "Row 2"
    ],
    [
      "Row 3",
      "Row 3",
      "Row 3"
    ],
    [
      "Row 4",
      "Row 4",
      "Row 4"
    ]
  ],
  "variants": [
    {
      "header": "Basic",
      "table_caption": null
    },
    {
      "header": "Striped rows",
      "table_class": "striped",
      "table_header_position": 1
    },
    {
      "header": "Bordered",
      "table_caption": "Vertical header",
      "table_class": "bordered",
      "table_header_position": 2,
      "table_tfoot": true
    }
  ]
}

No notes defined.