Tables

Documentation and examples for opt-in styling of tables with Inkline.

Basic Example

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.

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

HTML

<i-table>
    <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>
</i-table>

If your tables require more features such as sorting, filtering and rendering, you might want to take a look at the Datatable component.

Border Variant

Add the border property for borders on all sides of the table and table cells.

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

HTML

<i-table 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>
</i-table>

Striped Variant

Add the striped property to add zebra-striping to any table row within the table body.

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

HTML

<i-table 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>
</i-table>

Hoverable Variant

Add the hover property to enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

HTML

<i-table 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>
</i-table>

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.

#	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
1	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell
2	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell
3	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell

HTML

<i-table 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>
</i-table>

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.

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

#	First Name	Last Name	Username
#	Alex	Grozav	@alexgrozav
#	John	Doe	@johndoe
#	Alice	Doe	@alicecooper

HTML

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

<i-table 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>
</i-table>

Configuration

Props

Use props to modify the component’s design and behavior.

Property
border
TypeBoolean
Defaultfalse
Description Display the table with borders
Property
condensed
TypeBoolean
Defaultfalse
Description Display the table rows as condensed
Property
striped
TypeBoolean
Defaultfalse
Description Display the table rows as alternating stripes
Property
hover
TypeBoolean
Defaultfalse
Description Set the table rows as hoverable
Property
responsive
TypeBoolean | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
Defaultfalse
Description Set the table to be responsive, enabling horizontal scroll when overflowing the parent container
Property
nowrap
TypeBoolean
Defaultfalse
Description Display the table rows without wrapping white-space
Property
color
Type'primary' | 'success' | 'light' | 'dark' | 'info' | 'success' | 'warning' | 'danger'
Default'light'
Description The color variant of the table

Slots

Use slots to insert custom content into well-defined component locations.

Property
default
Description Slot for default table content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

Property
----background
Valuecolor('white')
Description The background of the table component
Property
----background--hover
Valuecolor('light-30')
Description The background of the table component when hovered
Property
----background--striped
Valuecolor('light-25')
Description The background of the table component when striped
Property
----border-style
Valuevar(--border-style)
Description The border style of the table component
Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the table component
Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the table component
Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the table component
Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the table component
Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the table component
Property
----border-color
Valuecolor('light-25')
Description The border color of the table component
Property
----color
Valuecontrast-color($color-light)
Description The color of the table component
Property
----margin-bottom
Valuevar(--margin-bottom)
Description The bottom margin of the table component
Property
----padding-top
Valuecalc(var(--padding-top) * 3 / 4)
Description The padding top of the table component
Property
----padding-right
Valuecalc(var(--padding-right) * 3 / 4)
Description The padding right of the table component
Property
----padding-bottom
Valuecalc(var(--padding-bottom) * 3 / 4)
Description The padding bottom of the table component
Property
----padding-left
Valuecalc(var(--padding-left) * 3 / 4)
Description The padding left of the table component
Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the table component
Property
----padding-top--condensed
Valuecalc(var(--padding-top) * 1 / 4)
Description The padding top of the table component
Property
----padding-right--condensed
Valuecalc(var(--padding-right) * 1 / 4)
Description The padding right of the table component
Property
----padding-bottom--condensed
Valuecalc(var(--padding-bottom) * 1 / 4)
Description The padding bottom of the table component
Property
----padding-left--condensed
Valuecalc(var(--padding-left) * 1 / 4)
Description The padding left of the table component
Property
----padding--condensed
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the table component