Table

A basic table

Table in it's simplest form.

Title

Heading Heading Heading Heading Heading
Value 1 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
<!-- table.blade.php -->
    <div id="62bedd387ec3b" class="c-table c-paper" data-uid="62bedd387ec32">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd387f799" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd387f795">
    Title
</h2>            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387f882" class="c-link c-table__column-content" data-uid="62bedd387f87e">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387f902" class="c-link c-table__column-content" data-uid="62bedd387f8ff">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387f945" class="c-link c-table__column-content" data-uid="62bedd387f943">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387f98d" class="c-link c-table__column-content" data-uid="62bedd387f98b">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387f9cb" class="c-link c-table__column-content" data-uid="62bedd387f9c9">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387fa07" class="c-link c-table__column-content" data-uid="62bedd387fa05">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387fa4a" class="c-link c-table__column-content" data-uid="62bedd387fa47">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387fa85" class="c-link c-table__column-content" data-uid="62bedd387fa83">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd387fac6" class="c-link c-table__column-content" data-uid="62bedd387fac4">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],    
    'list'          => [
        ['columns' => ['Value', '1', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],

    ],
])
@endtable

Multidimensional

A table with two dimensions, locked first column when scrolling and an indicator showing the user where they are horizontally. This also makes the first column is also collapsible.

Title

Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1 Dim 1
Another dimension 2 1 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
Another dimension 2 10 svejsan urlis urlis urlis urlis urlis urlis urlis urlis
<!-- table.blade.php -->
    <div id="62bedd387fe80" class="c-table c-paper" data-uid="62bedd387fe7c">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd387ffcb" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd387ffc7">
    Title
</h2>            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-5" js-table-sort--btn="5">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-6" js-table-sort--btn="6">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-7" js-table-sort--btn="7">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-8" js-table-sort--btn="8">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-9" js-table-sort--btn="9">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-10" js-table-sort--btn="10">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Dim 1
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388002d" class="c-link c-table__column-content" data-uid="62bedd388002b">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388007c" class="c-link c-table__column-content" data-uid="62bedd388007a">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38800c5" class="c-link c-table__column-content" data-uid="62bedd38800c2">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880122" class="c-link c-table__column-content" data-uid="62bedd3880120">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388016a" class="c-link c-table__column-content" data-uid="62bedd3880168">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38801cf" class="c-link c-table__column-content" data-uid="62bedd38801cd">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880217" class="c-link c-table__column-content" data-uid="62bedd3880214">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880268" class="c-link c-table__column-content" data-uid="62bedd3880266">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38802b5" class="c-link c-table__column-content" data-uid="62bedd38802b3">    
        Another dimension 2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-5" js-table-sort-data="5" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-6" js-table-sort-data="6" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-7" js-table-sort-data="7" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-8" js-table-sort-data="8" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-9" js-table-sort-data="9" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-10" js-table-sort-data="10" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> * This is a table, it looks good, yes. </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'headings'      => ['Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1', 'Dim 1'],    
    'isMultidimensional' => false,
    'pagination' => 2,
    'caption' => '* This is a table, it looks good, yes.',
    'list'          => [
        ['columns' => ['Another dimension 2', '1', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],
        ['columns' => ['Another dimension 2', '10', 'svejsan', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis', 'urlis']],

    ],
])
@endtable

A filterable table

Renders a searchbar above the table for realtime filtering.

Title

search error_outline
Heading Heading Heading Heading Heading
The quick brown fox ?
A dog jumps over 10
Summer is coming back åäö
<!-- table.blade.php -->
    <div id="62bedd388055c" class="c-table c-paper" js-table-filter="" data-uid="62bedd3880556">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd38806b4" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd38806ae">
    Title
</h2>            
            
                            <!-- field.blade.php -->
<div class="c-field u-margin__top--2 c-field--text c-field--icon c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bedd38808ab">
        
    <div class="c-field__inner c-field__inner--text">
                                    <!-- icon.blade.php -->
    <i id="62bedd38809c6" class="c-icon c-field__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd38809bf">
                    search
            </i>
                        
            <input id="input_62bedd38808ab"
                type="text"
                value=""
                type="search" name="search" js-table-filter-input="" aria-label="" data-uid="62bedd38808d9"
                                placeholder="Search"
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880a5c" class="c-link c-table__column-content" data-uid="62bedd3880a59">    
        The
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            quick
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            brown
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            fox
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            ?
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880aa3" class="c-link c-table__column-content" data-uid="62bedd3880aa1">    
        A
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            dog
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            jumps
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            over
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3880ae1" class="c-link c-table__column-content" data-uid="62bedd3880adf">    
        Summer
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            is
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            coming
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            back
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            åäö
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'filterable'    => true,
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],    
    'list'          => [
        ['columns' => ['The', 'quick', 'brown', 'fox', '?']],
        ['columns' => ['A', 'dog', 'jumps', 'over', '10']],
        ['columns' => ['Summer', 'is', 'coming', 'back', 'åäö']],
    ],
])
@endtable

Sortable columns

Makes it possible to sort each column by clicking the headers.

Title

Heading swap_vert Heading swap_vert Heading swap_vert Heading swap_vert Heading swap_vert
1 1 3 G22 H4
3 10 33 a H2o
100 10 22 b 1
50 10 33 d 3
Value 10 A g 100p
Value 10 B 50 22
B10 10 Z 60
A50 10 22 H 1066
Value 10 42 N 25
<!-- table.blade.php -->
    <div id="62bedd3880e38" class="c-table c-paper" js-table-sort="" data-uid="62bedd3880e33">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd3880f9b" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd3880f96">
    Title
</h2>            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                                                                                                            
                                                <!-- icon.blade.php -->
    <i id="62bedd388101b" class="c-icon c-table__sort-button c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd3881015">
                    swap_vert
            </i>
                                                                                    
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                                                                                                            
                                                <!-- icon.blade.php -->
    <i id="62bedd388107a" class="c-icon c-table__sort-button c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd3881075">
                    swap_vert
            </i>
                                                                                    
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                                                                                                            
                                                <!-- icon.blade.php -->
    <i id="62bedd38810b8" class="c-icon c-table__sort-button c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd38810b5">
                    swap_vert
            </i>
                                                                                    
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                                                                                                            
                                                <!-- icon.blade.php -->
    <i id="62bedd38810ed" class="c-icon c-table__sort-button c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd38810eb">
                    swap_vert
            </i>
                                                                                    
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                                                                                                            
                                                <!-- icon.blade.php -->
    <i id="62bedd3881121" class="c-icon c-table__sort-button c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bedd388111e">
                    swap_vert
            </i>
                                                                                    
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388115b" class="c-link c-table__column-content" data-uid="62bedd3881159">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            G22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H4
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38811a4" class="c-link c-table__column-content" data-uid="62bedd38811a2">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            a
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H2o
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38811e3" class="c-link c-table__column-content" data-uid="62bedd38811e1">    
        100
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            b
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388121e" class="c-link c-table__column-content" data-uid="62bedd388121c">    
        50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            d
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388126d" class="c-link c-table__column-content" data-uid="62bedd3881268">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            A
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            g
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100p
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38812c8" class="c-link c-table__column-content" data-uid="62bedd38812c5">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            B
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            50
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881306" class="c-link c-table__column-content" data-uid="62bedd3881304">    
        B10
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            Z
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            60
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388134b" class="c-link c-table__column-content" data-uid="62bedd3881348">    
        A50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881389" class="c-link c-table__column-content" data-uid="62bedd3881387">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            42
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            N
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],    
    'sortable'      => true,
    'list'          => [
        ['columns' => ['1', '1', '3', 'G22', 'H4']],
        ['columns' => ['3', '10', '33', 'a', 'H2o']],
        ['columns' => ['100', '10', '22', 'b', '1']],
        ['columns' => ['50', '10', '33', 'd', '3']],
        ['columns' => ['Value', '10', 'A', 'g', '100p']],
        ['columns' => ['Value', '10', 'B', '50', '22']],
        ['columns' => ['B10', '10', '', 'Z', '60']],
        ['columns' => ['A50', '10', '22', 'H', '1066']],
        ['columns' => ['Value', '10', '42', 'N', '25']],

    ],
])
@endtable

Sum row

Renders a row at the bottom of the table showing the sum of each cell in corresponding column.

Title

Heading Heading Heading Heading Heading
1 10 3 1 1
2 10 33 1 2
3 40 22 3 1
4 10 33 4 3
5 10 2 4 100
6 12 5 5 200
7 10 7 1 1000
8 10 1 2 1066
9 31 2 3 25
Sum 143 108 24 2398
<!-- table.blade.php -->
    <div id="62bedd38816f8" class="c-table c-paper c-table--summary" table-sum="1" data-uid="62bedd38816f2">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd388187d" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd3881878">
    Title
</h2>            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38818f9" class="c-link c-table__column-content" data-uid="62bedd38818f5">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881968" class="c-link c-table__column-content" data-uid="62bedd3881963">    
        2
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            2
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38819c9" class="c-link c-table__column-content" data-uid="62bedd38819c7">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            40
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881a0b" class="c-link c-table__column-content" data-uid="62bedd3881a09">    
        4
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            4
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881a48" class="c-link c-table__column-content" data-uid="62bedd3881a46">    
        5
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            2
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            4
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881a84" class="c-link c-table__column-content" data-uid="62bedd3881a82">    
        6
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            12
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            5
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            5
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            200
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881abf" class="c-link c-table__column-content" data-uid="62bedd3881abd">    
        7
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            7
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1000
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881b24" class="c-link c-table__column-content" data-uid="62bedd3881b21">    
        8
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            2
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881b67" class="c-link c-table__column-content" data-uid="62bedd3881b64">    
        9
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            31
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            2
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-9" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3881be1" class="c-link c-table__column-content" data-uid="62bedd3881bdd">    
        Sum
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            143
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            108
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            24
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            2398
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],    
    'showSum'      => true,
    'list'          => [
        ['columns' => ['1', '10', '3', '1', '1']],
        ['columns' => ['2', '10', '33', '1', '2']],
        ['columns' => ['3', '40', '22', '3', '1']],
        ['columns' => ['4', '10', '33', '4', '3']],
        ['columns' => ['5', '10', '2', '4', '100']],
        ['columns' => ['6', '12', '5', '5', '200']],
        ['columns' => ['7', '10', '7', '1', '1000']],
        ['columns' => ['8', '10', '1', '2', '1066']],
        ['columns' => ['9', '31', '2', '3', '25']],

    ],
])
@endtable

Pagination

Renders pagination buttons below the table. Set the value to the max rows per page.

Title

Heading Heading Heading Heading Heading
1 1 3 G22 H4
3 10 33 a H2o
100 10 22 b 1
50 10 33 d 3
Value 10 A g 100p
Value 10 B 50 22
B10 10 Z 60
A50 10 22 H 1066
Value 10 42 N 25
1 1 3 G22 H4
3 10 33 a H2o
100 10 22 b 1
50 10 33 d 3
Value 10 A g 100p
Value 10 B 50 22
B10 10 Z 60
A50 10 22 H 1066
Value 10 42 N 25
1 1 3 G22 H4
3 10 33 a H2o
100 10 22 b 1
50 10 33 d 3
Value 10 A g 100p
Value 10 B 50 22
B10 10 Z 60
A50 10 22 H 1066
Value 10 42 N 25
1 1 3 G22 H4
3 10 33 a H2o
100 10 22 b 1
50 10 33 d 3
Value 10 A g 100p
Value 10 B 50 22
B10 10 Z 60
A50 10 22 H 1066
Value 10 42 N 25
<!-- table.blade.php -->
    <div id="62bedd3882119" class="c-table c-paper" data-uid="62bedd3882115">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd388222a" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd3882227">
    Title
</h2>            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388227e" class="c-link c-table__column-content" data-uid="62bedd388227b">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            G22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H4
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38822d2" class="c-link c-table__column-content" data-uid="62bedd38822cf">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            a
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H2o
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882319" class="c-link c-table__column-content" data-uid="62bedd3882317">    
        100
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            b
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882356" class="c-link c-table__column-content" data-uid="62bedd3882354">    
        50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            d
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388239d" class="c-link c-table__column-content" data-uid="62bedd388239a">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            A
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            g
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100p
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38823de" class="c-link c-table__column-content" data-uid="62bedd38823db">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            B
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            50
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882419" class="c-link c-table__column-content" data-uid="62bedd3882417">    
        B10
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            Z
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            60
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882455" class="c-link c-table__column-content" data-uid="62bedd3882453">    
        A50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882491" class="c-link c-table__column-content" data-uid="62bedd388248e">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            42
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            N
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-9" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38824cc" class="c-link c-table__column-content" data-uid="62bedd38824c9">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            G22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H4
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-10" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388250f" class="c-link c-table__column-content" data-uid="62bedd388250b">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            a
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H2o
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-11" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882566" class="c-link c-table__column-content" data-uid="62bedd3882563">    
        100
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            b
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-12" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38825d6" class="c-link c-table__column-content" data-uid="62bedd38825d3">    
        50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            d
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-13" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882615" class="c-link c-table__column-content" data-uid="62bedd3882613">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            A
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            g
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100p
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-14" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882659" class="c-link c-table__column-content" data-uid="62bedd3882657">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            B
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            50
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-15" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38826b1" class="c-link c-table__column-content" data-uid="62bedd38826ae">    
        B10
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            Z
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            60
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-16" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882701" class="c-link c-table__column-content" data-uid="62bedd38826ff">    
        A50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-17" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882747" class="c-link c-table__column-content" data-uid="62bedd3882745">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            42
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            N
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-18" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882783" class="c-link c-table__column-content" data-uid="62bedd3882781">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            G22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H4
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-19" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38827c5" class="c-link c-table__column-content" data-uid="62bedd38827c3">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            a
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H2o
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-20" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388281d" class="c-link c-table__column-content" data-uid="62bedd388281b">    
        100
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            b
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-21" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388285d" class="c-link c-table__column-content" data-uid="62bedd388285b">    
        50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            d
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-22" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388289f" class="c-link c-table__column-content" data-uid="62bedd388289d">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            A
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            g
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100p
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-23" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38828db" class="c-link c-table__column-content" data-uid="62bedd38828d9">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            B
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            50
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-24" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388291f" class="c-link c-table__column-content" data-uid="62bedd388291c">    
        B10
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            Z
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            60
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-25" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882961" class="c-link c-table__column-content" data-uid="62bedd388295f">    
        A50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-26" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388299c" class="c-link c-table__column-content" data-uid="62bedd388299a">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            42
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            N
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-27" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882a02" class="c-link c-table__column-content" data-uid="62bedd38829fe">    
        1
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            G22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H4
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-28" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882a61" class="c-link c-table__column-content" data-uid="62bedd3882a5c">    
        3
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            a
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H2o
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-29" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882ad6" class="c-link c-table__column-content" data-uid="62bedd3882ad2">    
        100
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            b
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-30" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882b21" class="c-link c-table__column-content" data-uid="62bedd3882b1f">    
        50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            33
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            d
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            3
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-31" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882b5f" class="c-link c-table__column-content" data-uid="62bedd3882b5d">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            A
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            g
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            100p
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-32" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882ba1" class="c-link c-table__column-content" data-uid="62bedd3882b9f">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            B
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            50
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-33" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882bdd" class="c-link c-table__column-content" data-uid="62bedd3882bdb">    
        B10
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            Z
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            60
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-34" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882c21" class="c-link c-table__column-content" data-uid="62bedd3882c1f">    
        A50
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            22
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            H
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1066
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-35" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3882c63" class="c-link c-table__column-content" data-uid="62bedd3882c5d">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            42
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            N
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            25
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>
@table([
    'title'         => "Title",
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],    
    'pagination'      => 10,
    'list'          => [
        ['columns' => ['1', '1', '3', 'G22', 'H4']],
        ['columns' => ['3', '10', '33', 'a', 'H2o']],
        ['columns' => ['100', '10', '22', 'b', '1']],
        ['columns' => ['50', '10', '33', 'd', '3']],
        ['columns' => ['Value', '10', 'A', 'g', '100p']],
        ['columns' => ['Value', '10', 'B', '50', '22']],
        ['columns' => ['B10', '10', '', 'Z', '60']],
        ['columns' => ['A50', '10', '22', 'H', '1066']],
        ['columns' => ['Value', '10', '42', 'N', '25']],
        ['columns' => ['1', '1', '3', 'G22', 'H4']],
        ['columns' => ['3', '10', '33', 'a', 'H2o']],
        ['columns' => ['100', '10', '22', 'b', '1']],
        ['columns' => ['50', '10', '33', 'd', '3']],
        ['columns' => ['Value', '10', 'A', 'g', '100p']],
        ['columns' => ['Value', '10', 'B', '50', '22']],
        ['columns' => ['B10', '10', '', 'Z', '60']],
        ['columns' => ['A50', '10', '22', 'H', '1066']],
        ['columns' => ['Value', '10', '42', 'N', '25']],
        ['columns' => ['1', '1', '3', 'G22', 'H4']],
        ['columns' => ['3', '10', '33', 'a', 'H2o']],
        ['columns' => ['100', '10', '22', 'b', '1']],
        ['columns' => ['50', '10', '33', 'd', '3']],
        ['columns' => ['Value', '10', 'A', 'g', '100p']],
        ['columns' => ['Value', '10', 'B', '50', '22']],
        ['columns' => ['B10', '10', '', 'Z', '60']],
        ['columns' => ['A50', '10', '22', 'H', '1066']],
        ['columns' => ['Value', '10', '42', 'N', '25']],
        ['columns' => ['1', '1', '3', 'G22', 'H4']],
        ['columns' => ['3', '10', '33', 'a', 'H2o']],
        ['columns' => ['100', '10', '22', 'b', '1']],
        ['columns' => ['50', '10', '33', 'd', '3']],
        ['columns' => ['Value', '10', 'A', 'g', '100p']],
        ['columns' => ['Value', '10', 'B', '50', '22']],
        ['columns' => ['B10', '10', '', 'Z', '60']],
        ['columns' => ['A50', '10', '22', 'H', '1066']],
        ['columns' => ['Value', '10', '42', 'N', '25']],
    ],
])
@endtable

Fullscreen

Renders an icon in the top right corner, that when clicked opens up the table in fullscreen.

Title

fullscreen
Heading Heading Heading Heading Heading
Value 1 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Heading Heading Heading Heading Heading
Value 1 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
Value 10 svejsan urlis urlis
<!-- table.blade.php -->
    <div id="62bedd388315e" class="c-table c-paper" data-uid="62bedd3883159">
        <div class="c-table__header">
            
                            <!-- typography.blade.php  -->
<h2 id="62bedd38832c1" class="c-typography c-table__title c-typography__variant--h2" data-uid="62bedd38832bb">
    Title
</h2>            
                            <!-- icon.blade.php -->
    <i id="62bedd3883326" class="c-icon c-table__fullscreen u-display--none@xs u-display--none@sm c-icon--color-primary c-icon--size-md material-icons" data-open="modal-62bedd388315e" translate="no" role="img" alt="" data-uid="62bedd3883322">
                    fullscreen
            </i>
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388337b" class="c-link c-table__column-content" data-uid="62bedd3883379">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38833bd" class="c-link c-table__column-content" data-uid="62bedd38833bb">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38833fb" class="c-link c-table__column-content" data-uid="62bedd38833f9">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883441" class="c-link c-table__column-content" data-uid="62bedd388343e">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883497" class="c-link c-table__column-content" data-uid="62bedd3883494">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38834d6" class="c-link c-table__column-content" data-uid="62bedd38834d4">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd388354b" class="c-link c-table__column-content" data-uid="62bedd3883548">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883596" class="c-link c-table__column-content" data-uid="62bedd3883593">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd38835d2" class="c-link c-table__column-content" data-uid="62bedd38835d0">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>

    <!-- modal.blade.php -->
<dialog id="modal-62bedd388315e" class="c-modal c-table__modal c-modal--is-panel c-modal--padding-3 c-modal--overlay-dark" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-62bedd388315e" data-uid="62bedd3883ecf">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-62bedd388315e" class="c-typography c-typography__variant--h2" data-uid="62bedd3883f57">
    Title
</h2>        
        <button id="62bedd3884022" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bedd388401c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bedd3884097" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bedd3884092">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        <!-- table.blade.php -->
    <div id="62bedd3883a20" class="c-table" data-uid="62bedd3883a1c">
        <div class="c-table__header">
            
            
            
            
        </div>

        <div class="c-table__inner">
            <table class="c-table__table">
                
                                    <thead class="c-table__head">                                                
                        <tr class="c-table__line">
                                                            <th scope="col" class="c-table__column c-table__column-0" js-table-sort--btn="0">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-1" js-table-sort--btn="1">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-2" js-table-sort--btn="2">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-3" js-table-sort--btn="3">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                            <th scope="col" class="c-table__column c-table__column-4" js-table-sort--btn="4">
                                    
                                    <span class="c-table__column-content">

                                        <!-- Heading label -->
                                        <span class="c-table__heading">
                                            Heading
                                        </span>

                                        <!-- Collapse button -->
                                        
                                        <!-- Sort button -->
                                        
                                    </span>

                                </th>
                                                    </tr>
                    </thead>
                
                <tbody class="c-table__body" js-sort-data-container js-table-data-container>
                     
                        <tr class="c-table__line c-table__line-0" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883b49" class="c-link c-table__column-content" data-uid="62bedd3883b46">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            1
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-1" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883b91" class="c-link c-table__column-content" data-uid="62bedd3883b8f">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-2" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883bcf" class="c-link c-table__column-content" data-uid="62bedd3883bcd">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-3" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883c19" class="c-link c-table__column-content" data-uid="62bedd3883c16">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-4" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883c74" class="c-link c-table__column-content" data-uid="62bedd3883c71">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-5" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883cc6" class="c-link c-table__column-content" data-uid="62bedd3883cc4">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-6" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883d05" class="c-link c-table__column-content" data-uid="62bedd3883d03">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-7" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883d48" class="c-link c-table__column-content" data-uid="62bedd3883d46">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                     
                        <tr class="c-table__line c-table__line-8" js-table-sort--sortable js-table-filter-item>
                             
                                                                    <th scope="row" class="c-table__column c-table__column-0" js-table-sort-data="0" js-table-filter-data>
                                        <span id="62bedd3883dbe" class="c-link c-table__column-content" data-uid="62bedd3883dba">    
        Value
    </span>
  
                                    </th>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-1" js-table-sort-data="1" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            10
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-2" js-table-sort-data="2" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            svejsan
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-3" js-table-sort-data="3" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                             
                                                                    <td scope="row" class="c-table__column c-table__column-4" js-table-sort-data="4" js-table-filter-data>
                                        <span class="c-table__column-content">
                                            urlis
                                        </span>
                                    </td>
                                                                                    </tr>
                                    </tbody>                
            </table>
        </div>
        
        <div class="c-table__footer">
            <div class="c-table__scroll-indicator-wrapper u-display--none">
                <div class="c-table__scroll-indicator u-display--none">
                </div>
            </div>
            <p class="c-table__caption"> <br />
<b>Notice</b>:  Undefined variable: caption in <b>/tmp/blade-engine-cache/bcb9fe36592c4c2057bdbabef2b52cb8a07c2f47.php</b> on line <b>124</b><br />
 </p>
        </div>

    </div>

        
            </section>

    
    </dialog>
@table([
    'title'         => "Title",
    'headings'      => ['Heading', 'Heading', 'Heading', 'Heading', 'Heading'],   
    'fullscreen'    => true, 
    'list'          => [
        ['columns' => ['Value', '1', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],
        ['columns' => ['Value', '10', 'svejsan', 'urlis', 'urlis']],

    ],
])
@endtable

Blade component parameters

Key Default value Type Available values Description
list [] array - Array of items
headings [] array - Array of items
showHeader true boolean - If header should be printed
showCaption false boolean - -
filterable false boolean - Renders a field for real time filtering
sortable false boolean - Makes each th a button that sorts corresponding cells in column
showSum false boolean - Shows the sum of each column at the bottom of the table
fullscreen false boolean - Renders a button, that when clicked, makes the table fullscreen
isMultidimensional false boolean - Makes the first column a second dimension of headers and locks in it place when scrolling. Also allows the user to collapse the first column.
title string - A title at above the table
includePaper true boolean - -
labels {"searchPlaceholder":"Search"} array - Label strings - replace for translation etc
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Table/table.json