Table
A basic table
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 -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9a316">
<div class="c-table" data-uid="680c347e99fd7">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9a047">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a0cf">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a12a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a167">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a19f">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a1d7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a20b">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a23e">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a27b">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a2aa">
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>
</div>
</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']],
],
])
@endtableMultidimensional
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 -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9a607">
<div class="c-table" data-uid="680c347e9a3aa">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9a3d7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a41e">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a457">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a48c">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a4c1">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a4f4">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a527">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a55a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a58c">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a5bf">
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>
</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']],
],
])
@endtableA filterable table
Title
| Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
| The | quick | brown | fox | ? |
| A | dog | jumps | over | 10 |
| Summer | is | coming | back | åäö |
<!-- table.blade.php -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9a96e">
<div class="c-table" js-table-filter="" data-uid="680c347e9a684">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9a6ae">
Title
</h2>
<!-- field.blade.php -->
<div class="c-field u-margin__top--2 c-field--search c-field--icon c-field--md c-field--radius-md" id="680c347e9a714" data-uid="680c347e9a72b">
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9a811">
</span>
<input id="input_680c347e9a714" value="" aria-label="" js-table-filter-input="" placeholder="Search" type="search" name="search" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c347e9a856">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c347e9a88d">
</span>
</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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a8d7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a90a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9a939">
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>
</div>
</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', 'åäö']],
],
])
@endtableSortable columns
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 |
<!-- table.blade.php -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9ad12">
<div class="c-table" js-table-sort="" data-uid="680c347e9a9d5">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9a9ff">
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 -->
<span class="c-icon c-table__sort-button c-icon--swap-vert c-icon--material c-icon--material-swap_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="swap_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9aa36">
</span>
</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 -->
<span class="c-icon c-table__sort-button c-icon--swap-vert c-icon--material c-icon--material-swap_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="swap_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9aa6e">
</span>
</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 -->
<span class="c-icon c-table__sort-button c-icon--swap-vert c-icon--material c-icon--material-swap_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="swap_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9aaa1">
</span>
</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 -->
<span class="c-icon c-table__sort-button c-icon--swap-vert c-icon--material c-icon--material-swap_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="swap_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9aad2">
</span>
</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 -->
<span class="c-icon c-table__sort-button c-icon--swap-vert c-icon--material c-icon--material-swap_vert material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="swap_vert" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9ab0a">
</span>
</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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ab3a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ab82">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9abb5">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9abe8">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ac18">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ac48">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ac78">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9aca9">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9acd8">
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>
</div>
</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']],
],
])
@endtableSum row
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 -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9b00c">
<div class="c-table c-table--summary" table-sum="1" data-uid="680c347e9ad9e">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9adc9">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ae16">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ae4a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ae7a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9aeaf">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9aee8">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9af17">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9af45">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9af74">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9afa3">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9afd2">
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>
</div>
</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']],
],
])
@endtablePagination
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 -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9b8a3">
<div class="c-table" data-uid="680c347e9b088">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9b0c7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b10a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b141">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b174">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b1a6">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b1d8">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b209">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b23a">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b26e">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b29f">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b2db">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b323">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b358">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b38c">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b3c1">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b3f6">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b436">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b468">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b499">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b4ca">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b4fc">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b52d">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b568">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b597">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b5c5">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b5f4">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b623">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b651">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b680">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b6b7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b6e6">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b715">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b744">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b772">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b7a0">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b7d6">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b7ff">
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>
</div>
</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']],
],
])
@endtableFullscreen
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 -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9bb64">
<div class="c-table" data-uid="680c347e9b92a">
<div class="c-table__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-table__title c-typography__variant--h4" data-uid="680c347e9b954">
Title
</h2>
<!-- icon.blade.php -->
<span class="c-icon c-table__fullscreen u-display--none@xs u-display--none@sm c-icon--fullscreen c-icon--material c-icon--material-fullscreen material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-primary c-icon--size-md" data-open="modal-680c347e9b92a" material-symbol="fullscreen" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c347e9b98a">
</span>
</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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b9ce">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9b9ff">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ba2b">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ba56">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9ba89">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bab5">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9badf">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bb09">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bb32">
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>
</div>
</div>
</div>
<!-- modal.blade.php -->
<dialog class="c-modal c-table__modal c-modal--is-panel c-modal--scale-up c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__modal-680c347e9b92a" id="modal-680c347e9b92a" data-uid="680c347e9bdc8">
<div class="c-modal__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-680c347e9b92a" data-uid="680c347e9bdf7">
Title
</h2> <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="680c347e9be47">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c347e9be88">
</span>
</span>
</span> </button> </div>
<section class="c-modal__content" tabindex="2">
<!-- table.blade.php -->
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="680c347e9bd6c">
<div class="c-table" data-uid="680c347e9bbb1">
<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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bbe7">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bc14">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bc3f">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bc69">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bc93">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bcbd">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bce6">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bd10">
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 class="c-link c-table__column-content" id="" target="_top" data-uid="680c347e9bd39">
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>
</div>
</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']],
],
])
@endtableBlade 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. |