React

Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers. Related design guidelines: Lists and tables

ExamplesPropsCSS Variables

Note: Table lives in its own package at @patternfly/react-table!

Examples

Basic

RepositoriesBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
one - 2
four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)

Row Click Handler

Row Click Handler Table
RepositoriesBranchesPull requestsWorkspaces
Repositories oneBranches onePull requests oneWorkspaces one
Repositories twoBranches twoPull requests twoWorkspaces two
Repositories threeBranches threePull requests threeWorkspaces three

Custom Row Wrapper

Table with custom row wrapper that styles odd rows
RepositoriesBranchesPull requestsWorkspaces
Repositories oneBranches onePull requests oneWorkspaces one
Repositories twoBranches twoPull requests twoWorkspaces two
Repositories threeBranches threePull requests threeWorkspaces three

Sortable

BranchesWorkspacesLast Commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Selectable

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Simple actions

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

Actions

RepositoriesBranchesPull requestsWorkspacesLast Commit
one
twoafourfive
a
twokfourfive
p
twobfourfive
5
2bfourfive

First cell as header

Header cellBranchesPull requestsWorkspacesLast Commit
one
twothreefourfive

Compact

Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour

Compact borderless rows

Header cellBranchesPull requests
onetwothreefour
onetwothreefour
onetwothreefour

Compact expandable

Header cellBranchesPull requests
onetwothreefour
parent - 1twothreefour
child - 1
parent - 2twothreefour
parent - 3twothreefour

With width modifiers

Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive

Breakpoint modifiers

RepositoriesBranchesPull requestsWorkspacesLast Commit
Visible only on md breakpoint10Hidden only on md breakpoint5Hidden on xs breakpoint
Repository 2102552 days ago
Repository 3102552 days ago
Repository 4102552 days ago

Collapsible

Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
parent - 1twothreefourfive
child - 1
parent - 2twothreefourfive
parent - 3twothreefourfive

Compound exandable

RepositoriesBranchesPull requestsWorkspacesLast Commit
siemur/test-space