Table

Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).

Small

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

Table can leverage the max-width property. Learn more in our visual guidelines.

Medium

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "md" to add padding around each row to increase reading comfortability.

Large

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Use table size "lg" to add padding around each row to maximize reading comfortability.

Sticky Header


React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.

Rails: Pass sticky: true to props.

If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">

Troubleshooting CSS Problems

Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.

Table Header

North John Doe 30 Engineer
South Alice Smith 28 Designer
East Mike Johnson 35 Manager
West Sarah Brown 29 Developer
Central David Wilson 32 Analyst

The table_header subcomponent creates <th> elements and optionally accepts:

  • colspan (number) for setting column span
  • sort_menu accepts sort options as an array of item objects. presence of sort_menu enables the sort link within the header
  • sort_dropdown (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
    • passing a valid colspan will render sort options within a dropdown by default, without requiring sort_dropdown explicitly. Alternatively, the default sort dropdown can be prevented on headers with colspan by setting sort_dropdown: false, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
  • id (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional


Disclaimer

This example uses a custom sort method that may need to be modified or replaced within your project.

Row Alignment

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

This is to be used to shift the whole row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

Column Alignment

Column 1 Column 2 Column 3 Rating Money
Value 1 Value 2 Value 3 3 $57.32
Value 1 Value 2 Value 3 2 $5,657.08
Value 1 Value 2 Value 3 4 $358.77

You can individually align a piece of table data, but a more practical use would be applied to align a column.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

Shift Row

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1a
Value 1a
Value 1a
Value 2a Value 3a Value 4a Value 5a
Value 1b
Value 1b
Value 1b
Value 2b Value 3b Value 4b Value 5b
Value 1c
Value 1c
Value 1c
Value 2c Value 3c Value 4c Value 5c

Shift Column Data

  Price
Total $12
$46
$25
-------
$83

Espresso Drinks Ingredients
Cappuccino Espresso
Steamed Milk
Milk Foam
Macchiato Espresso
Steamed Milk
Mocha Espresso
Hot Chocolate
Steamed Milk

You can individually shift a piece of table data, or shift an entire column.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

Side Highlight

Product Colors Column 2 Column 3 Column 4 Column 5
Product 1 Value 2 Value 3 Value 4 Value 5
Product 2 Value 2 Value 3 Value 4 Value 5
Product 3 Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Status Colors Column 2 Column 3 Column 4 Column 5
Success Value 2 Value 3 Value 4 Value 5
Warning Value 2 Value 3 Value 4 Value 5
Error Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Cateogry Colors Column 2 Column 3 Column 4 Column 5
Category Color 1 Value 2 Value 3 Value 4 Value 5
Category Color 2 Value 2 Value 3 Value 4 Value 5
Category Color 3 Value 2 Value 3 Value 4 Value 5
None Value 2 Value 3 Value 4 Value 5

Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.

Note: Only use category colors for categories. Do not mix it with product or status colors.

Table Container Off

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Disable Hover

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Multi-line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5

Force Single Line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5
Value 1
Value 1
Value 1
Value 2 Value 3
Value 3
Value 4 Value 5

Data Table

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Tighter spacing in first- and last-child cells of each row for data-heavy tables.

Responsive Tables

Not Responsive

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Collapse Mobile

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Collapse Tablet

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Collapse Desktop

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5

Table with 1 Action

Column 1 Column 2 Column 3 Column 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4

If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row

Table with 2 Actions

Column 1 Column 2 Column 3 Column 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4

If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.

Table with 2+ Actions

Column 1 Column 2 Column 3 Column 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4

If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row

Table with Actions in the Middle

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 4 Value 5
Value 1 Value 2 Value 4 Value 5
Value 1 Value 2 Value 4 Value 5

If the button is towards the middle of the table, it should likely use button variant link

Table with Icon Buttons

Column 1 Column 2 Column 3 Column 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4
Value 1 Value 2 Value 3 Value 4

Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon

Table With Background Kit

Column 1 Column 2 Column 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Column 1 Column 2 Column 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3
Value 1 Value 2 Value 3

Vertical Borders

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Striped Table

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Optionally pass the striped (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.


UI Samples using Table Kit

Get the full picture. See how this kit is used in our samples.

Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
xxl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

hover

array

border_radius

array
none
xs
sm
md
lg
xl
rounded

text_align

array
start
end
left
right
center
justify
justify-all
match-parent

overflow

array
visible
hidden
scroll
auto

truncate

array
1
2
3
4
5

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

classname

string

dark

boolean

id

string

data

hashprop

aria

hashprop

children

proc
Props Type Values Default

size

enum
sm
md
lg
md

single_line

boolean
false

disable_hover

boolean
false

data_table

boolean
false

container

boolean
true

responsive

enum
collapse
scroll
none
collapse

collapse

enum
sm
md
lg
sm

text

string

sticky

boolean
false

vertical_border

boolean
false

striped

boolean
false