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
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
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
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
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
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
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