Tables

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

Basic Table

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
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

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

Bordered Table

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

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

Striped Table

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

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

Hoverable Table

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

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@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

Variants

Tables can be themed using the variant 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
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

#	First Name	Last Name	Username
1	Alex	Grozav	@alexgrozav
2	John	Doe	@johndoe
3	Alice	Cooper	@alicecooper

Component API

Here you can find a list of the various customization options you can use for the table components as props, as well as available slots.

Sass Variables

Here you can find a list of the Sass variables you can use for the table components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.