Tables
Documentation and examples for opt-in styling of tables with Inkline.
Using the most basic table markup, here’s how tables look in Inkline. All table styles are inherited in Inkline, meaning any nested tables will be styled in the same manner as the parent.
Preview
Component.vue
<template>
<ITable>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
</template>Border Variant
Add the border property for borders on all sides of the table and table cells.
Preview
Component.vue
<template>
<ITable border>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
</template>Striped Variant
Add the striped property to add zebra-striping to any table row within the table body.
Preview
Component.vue
<template>
<ITable striped>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
</template>Hoverable Variant
Add the hover property to enable a hover state on table rows within a <tbody>.
Preview
Component.vue
<template>
<ITable hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
</template>Responsive Table
Enable responsiveness by adding the responsive property. Responsive tables scroll horizontally on small devices. When viewing on anything larger, you will not see any difference in these tables.
You can target specific responsive breakpoints by setting a value to the responsive property: responsive="<breakpoint>", where breakpoint is one of xs, sm, md, lg or xl.
Preview
Component.vue
<template>
<ITable responsive>
<thead>
<tr>
<th>#</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</ITable>
</template>Color Variants
Tables can be themed using the color property. You can use colors such as light, dark, primary, secondary, info, success, warning, and danger. You can set a variant for the table as a whole or individual table elements. By default, tables have the light variant. You can use a variation of any of the above classes to create the table design you need.
Preview
Component.vue
<template>
<ITable color="light">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="primary">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="secondary">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="info">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="success">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="warning">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
<ITable color="danger">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>Alex</td>
<td>Grozav</td>
<td>@alexgrozav</td>
</tr>
<tr>
<th scope="row">#</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Alice</td>
<td>Doe</td>
<td>@alicecooper</td>
</tr>
</tbody>
</ITable>
</template>