Table (Disclose)

Disclosable tables collapse content related to individual rows and can be expanded by clicking a disclose arrow to reveal additional information inline.

Example

storybook
⌘ Cmd + ⌥ Option + 1

Properties

"Table.TH" Component
propertypropTyperequireddefaultdescription
isCollapsedbool-false Tell the cell to take up the least amount of width possible. This only
works well if the table layout is `auto`, not `fixed`.
isNumericalbool-falseRight-align the cell if the contents are numerical
childrennode--Content within the `Table.TH` component
colSpannumber--Number of columns that the cell should span
testSectionstring--Hook for automated JavaScript tests
widthstring--A number with a unit that becomes the width of the `Table` cell
"Table.TR" Component
propertypropTyperequireddefaultdescription
backgroundColoroneOf 'faint' | 'light'--Background color for each row
borderStyleoneOf 'bottom' | 'top' | 'sides' | 'ends' | 'none'--Border style for each row
childrennode--Expects a `Table.TD` or `Table.TH` component
isActivebool--If true, add active class
noBorderbool--If true, add class to remove border
testSectionstring--Hook for automated JavaScript tests
"Table.THead" Component
propertypropTyperequireddefaultdescription
childrennode--Should be a `Table.TR` component
testSectionstring--Hook for automated JavaScript tests
"Table.TD" Component
propertypropTyperequireddefaultdescription
isNumericalbool-falseRight-align the cell if the contents are numerical
childrennode--Content within the `Table.TD` component
colSpannumber--Number of columns that the cell should span
testSectionstring--Hook for automated JavaScript tests
verticalAlignoneOf 'middle'--Apply a class that vertically aligns the cells within the children
widthstring--A number with a unit that becomes the width of the `Table` cell
"Table.TBody" Component
propertypropTyperequireddefaultdescription
childrennode--Should be a `Table.TR` component
testSectionstring--Hook for automated JavaScript tests
"Table" Component
propertypropTyperequireddefaultdescription
densityoneOf 'tight' | 'loose'-'tight'Sets the padding within cells
tableLayoutAlgorithmoneOf 'auto' | 'fixed'-'fixed' Adjust the [CSS `table-layout` property](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
that is used to calculate the with of inner table cells.
childrennode--Should be a `Table.THead` or `Table.TBody`
shouldAddHoverbool--Whether to set the hover class on the Table
styleoneOf 'wall' | 'rule' | 'rule-no-bottom-border'--Available border and hover options
testSectionstring--Hook for automated JavaScript tests
"WithState" Component
No propTypes defined!
"DiscloseTable" Component
propertypropTyperequireddefaultdescription
childrennodeyes-Should be a `Table.THead` or `Table.TBody`
testSectionstring--Hook for automated JavaScript tests

Usage

Use a disclosable table to display additional inline information about the row data of a table.

Best Practices

Do

Include short data related to the specific row

Don't

Display longform content

Include forms or other complex organisms