Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Table

A responsive table component.

Usage 

A list of your recent invoices.
Invoice Status Method Amount
INV-001 Paid Credit Card $250.00
INV-002 Pending PayPal $150.00
INV-003 Unpaid Bank Transfer $350.00
INV-004 Paid Credit Card $450.00
INV-005 Paid PayPal $550.00
INV-006 Pending Bank Transfer $200.00
INV-007 Unpaid Credit Card $300.00
Total $2,500.00 
<ui:Table caption="A list of your recent invoices.">
  <thead>
    <tr>
      <th>Invoice</th>
      <th class="center">Status</th>
      <th>Method</th>
      <th class="right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>INV-001</td>
      <td class="center"><ui:Badge var="success">Paid</ui:Badge></td>
      <td>Credit Card</td>
      <td class="right">$250.00</td>
    </tr>
    <tr>
      <td>INV-002</td>
      <td class="center"><ui:Badge var="warning">Pending</ui:Badge></td>
      <td>PayPal</td>
      <td class="right">$150.00</td>
    </tr>
    <tr>
      <td>INV-003</td>
      <td class="center"><ui:Badge var="critical">Unpaid</ui:Badge></td>
      <td>Bank Transfer</td>
      <td class="right">$350.00</td>
    </tr>
    <tr>
      <td>INV-004</td>
      <td class="center"><ui:Badge var="success">Paid</ui:Badge></td>
      <td>Credit Card</td>
      <td class="right">$450.00</td>
    </tr>
    <tr>
      <td>INV-005</td>
      <td class="center"><ui:Badge var="success">Paid</ui:Badge></td>
      <td>PayPal</td>
      <td class="right">$550.00</td>
    </tr>
    <tr>
      <td>INV-006</td>
      <td class="center"><ui:Badge var="warning">Pending</ui:Badge></td>
      <td>Bank Transfer</td>
      <td class="right">$200.00</td>
    </tr>
    <tr>
      <td>INV-007</td>
      <td class="center"><ui:Badge var="critical">Unpaid</ui:Badge></td>
      <td>Credit Card</td>
      <td class="right">$300.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td class="right">$2,500.00</td>
    </tr>
  </tfoot>
</ui:Table>

Component arguments 

Table 

ArgumentTypeDescription
caption str Optional. Text to show as a caption at the bottom of the table. You can also ignore this argument and manually insert a caption in the table instead.
border bool Optional. Whether to show the border around the table. Default is false.

Components 

Component
File
Source
Table
table.jinja
table.css