Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Table

A table is a specific pattern for comparing datasets in a very direct and analytical way.

installyarn add @clayui/table
version3.56.0
  • Examples
  • Markup
  • API

Stable3.56.0View in LexiconCHANGELOGstorybook demos

  • Table
  • Table.Body
  • Table.Cell
  • Table.Head
  • Table.Row

Table

PropertyDescription
bodyVerticalAlignment
'bottom' | 'middle' | 'top'
This property vertically align the contents inside the table body according a given position.
borderedColumns
boolean
Applies a Bordered style on Table's columns.
borderless
boolean
Removes the default border and rounded corners from table.
headingNoWrap
boolean
This property keeps all the headings on one line.
headVerticalAlignment
'bottom' | 'middle' | 'top'
This property vertically align the contents inside the table header according a given position.
hover
boolean
Applies a Hover style on Table.

The default value is true
noWrap
boolean
This property enables keeping everything on one line.
responsive
boolean
Turns the table responsive.

The default value is true
responsiveSize
'lg' | 'md' | 'sm' | 'xl'
Defines the responsive sizing.
striped
boolean
Applies a Striped style on Table.
tableVerticalAlignment
'bottom' | 'middle' | 'top'
This property vertically align the contents inside the table according a given position.

Table.Body

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Cell

PropertyDescription
align
'center' | 'left' | 'right'
Aligns the text inside the Cell.
cellDelimiter
TDelimiter
Sometimes we are unable to remove specific table columns from the DOM and need to hide it using CSS. This property can be added to the "new" first or last cell to maintain table styles on the left and right side.
columnTextAlignment
'center' | 'end' | 'start'
Aligns horizontally contents inside the Cell.
expanded
boolean
Fills out the remaining space inside a Cell.
headingCell
boolean
Defines the type of the Cell element, if true, cell element will be a , otherwise .

The default value is false
headingTitle
boolean
Applies a style of heading inside a child of table header cell element.

The default value is false
noWrap
boolean


The default value is false
truncate
boolean
Truncates the text inside a Cell. Requires expanded property value set to true.

The default value is false

Table.Head

Extends from React.TableHTMLAttributes<HTMLTableSectionElement>

Table.Row

PropertyDescription
active
boolean
Forces the active state inside the row.

The default value is false
divider
boolean
Applies a divider style inside the row.

The default value is false
rowDelimiter
TDelimiter
This property can be added to the "new" first or last ClayTable.Row to maintain table styles on the top and bottom sides.

How can this be improved? Create an issue!