# table

The markup of every demo on <https://kuiper.oeds.it/table/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## length false

```html
<table data-table="length:false;">
 <caption>length false</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## length and search false

```html
<table data-table="length:false; search:false;">
 <caption>length and search false</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## length, search and info false

```html
<table data-table="length:false; search:false; info:false;">
 <caption>length, search and info false</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## length, search, info and paging false

```html
<table data-table="length:false; search:false; info:false; paging:false;">
 <caption>length, search, info and paging false</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## column-width shrink

```html
<table>
 <caption>column-width shrink</caption>
 <thead>
  <tr>
   <th class="table-shrink" scope="col">shrink</th>
   <th class="table-shrink" scope="col">shrink</th>
   <th class="table-shrink" scope="col">shrink</th>
   <th class="table-expand" scope="col">expand</th>
   <th class="table-shrink" scope="col">shrink</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## column-width expand

```html
<table>
 <caption>column-width expand</caption>
 <thead>
  <tr>
   <th class="table-expand" scope="col">expand</th>
   <th class="table-expand" scope="col">expand</th>
   <th class="table-expand" scope="col">expand</th>
   <th class="table-expand" scope="col">expand</th>
   <th class="table-shrink" scope="col">shrink</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## filter 1,2

```html
<table data-table="filter:1,2;">
 <caption>filter 1,2</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4023</td>
   <td>Carla Neri</td>
   <td>Shipped</td>
   <td>92.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4025</td>
   <td>Elena Conti</td>
   <td>Pending</td>
   <td>340.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4026</td>
   <td>Frank Meyer</td>
   <td>Shipped</td>
   <td>618.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## sorting 1|desc

```html
<table data-table="sorting:1|desc;">
 <caption>sorting 1|desc</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4023</td>
   <td>Carla Neri</td>
   <td>Shipped</td>
   <td>92.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4025</td>
   <td>Elena Conti</td>
   <td>Pending</td>
   <td>340.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4026</td>
   <td>Frank Meyer</td>
   <td>Shipped</td>
   <td>618.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```

## sorting 2|asc,0|desc

```html
<table data-table="sorting:2|asc,0|desc;">
 <caption>sorting 2|asc,0|desc</caption>
 <thead>
  <tr>
   <th scope="col">Reference</th>
   <th scope="col">Customer</th>
   <th scope="col">Status</th>
   <th scope="col">Total</th>
   <th scope="col">Action</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>4021</td>
   <td>Alice Turner</td>
   <td>Shipped</td>
   <td>128.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4022</td>
   <td>Ben Walker</td>
   <td>Pending</td>
   <td>64.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4023</td>
   <td>Carla Neri</td>
   <td>Shipped</td>
   <td>92.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4024</td>
   <td>Daniel Rossi</td>
   <td>Canceled</td>
   <td>41.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4025</td>
   <td>Elena Conti</td>
   <td>Pending</td>
   <td>340.00</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
  <tr>
   <td>4026</td>
   <td>Frank Meyer</td>
   <td>Shipped</td>
   <td>618.50</td>
   <td class="cell-compact"><button class="button-xs">button</button></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Six orders</td>
   <td>Six customers</td>
   <td>Three shipped</td>
   <td>1284.00</td>
   <td></td>
  </tr>
 </tfoot>
</table>
```