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 NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
<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>

Border Variant

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

#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
<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 NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
<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 NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
<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 HeadingTable HeadingTable HeadingTable HeadingTable HeadingTable Heading
1Table CellTable CellTable CellTable CellTable CellTable Cell
2Table CellTable CellTable CellTable CellTable CellTable Cell
3Table CellTable CellTable CellTable CellTable CellTable Cell
<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 NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
#First NameLast NameUsername
#AlexGrozav@alexgrozav
#JohnDoe@johndoe
#AliceDoe@alicecooper
<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