Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Table

Usage notes

Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.

Default

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Quiet variant

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Checkbox selection

Activities Date
Alpha January 28, 2012
Charlie February 15, 2012
Delta May 16, 2012
Alpha January 28, 2012
Beta December 1, 2011
Charlie February 15, 2012
Delta May 16, 2012

ListView selection

Activities Date
Alpha January 28, 2012
Charlie February 15, 2012
Delta May 16, 2012
Alpha January 28, 2012
Beta December 1, 2011
Charlie February 15, 2012
Delta May 16, 2012

Content with centered alignment

There are no saved activities in your account yet.

Get started now.

Column divider

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Cell divider

Activities Numbers Date
Left Label Alpha 23,857 January 28, 2012 Right Label
Left Label Beta 20,398 December 1, 2011 Right Label
Left Label Charlie 3,498 February 15, 2012 Right Label

Sticky head example

Column 1 with loooooooonnnnnng text Column 2 with loooooooonnnnnng text Column 3
Sub Column 1 has a long text also Sub Column 2 Sub Column 3 wants to mimic sub column 1
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Sortable columns

Activities Numbers Date
Beta 20,398 December 1, 2011
Alpha 23,857 January 28, 2012
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Custom sorting

Activities

Sortable + orderable columns

Activities Numbers Date
Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Selectable rows

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Echo 1,331 June 26, 2015
Foxtrot 41,331 July 12, 2014

Selectable cells

Version A Version B Version C

Demo

Demo

Demo
Update Update Update
Publish Publish Publish

Orderable columns + orderable rows

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Orderable columns + orderable rows + sticky head

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Delta 20,398 May 16, 2012
Delta 20,398 May 16, 2012
Delta 20,398 May 16, 2012
Delta 20,398 May 16, 2012

Fixed width columns + sticky head + quiet variant

Activities Numbers Date
Alpha 23,857 January 28
Beta 20,398 December
Charlie 3,498 February
Delta 20,398 May
Delta 20,398 April
Delta 20,398 June
Delta 20,398 December

Orderable rows with handles

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Lockable rows

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Hidden columns example

Toggle activities Toggle numbers Toggle date
Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Additive table

Activities Numbers
Alpha 23,857
Beta 20,398
Charlie 3,498
Delta 20,398

CSS only

Pet Name Type Good/Bad
Squeak Mouse Bad
Spot Dog Bad
Fluffy Velociraptor Good

CSS only with hover state

Pet Name Type Good/Bad
Mongo Chihuahua Bad
Tiny Great Dane Bad
Jaws Pit Bull Good

CSS only with borders

Pet Name Type Good/Bad
Hopper Frog Good
Pokey Porcupine Good
Mr. Snuggles Snake Bad