Components

Table

Table is a component used for displaying formatted tabular data.

Though basic styles are included with the component, utility components like Box and Text are the best option for handling row and cell-level formatting customization needs.

Food ItemCaloriesTotal Fat: (69% DV*)Total Carbs: (21% DV*)Protein
🍔 Bacon Smokehouse Burger84045g62g46g
🍔 Big Mac54028g46g25g
import { Table } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
headTypeTableHeaderCell[]
Array of TableHeaderCells to render
rowssignature[]
Array of TableRows to render
onSortsignature
Callback for Sorting Table Columns (optional)
sortIdstring
Controls which column is being sorted (optional)
sortDirectionTypeEnumSortDirections
Controls the current sort direction (optional)
rowRendersignature
Custom row render for flexibilty

Subcomponents

Table Cell

🍔 Bacon Smokehouse Burger
NameTypeDefaultDescriptionRequired?
idstring
Table Cell Id
contentReactNode
Content to be render
colSpannumber
Controls the colSpan attribute (optional)
widthnumber
Controls the width attribute (optional)
align"left""right""center""justify"
Controls the CSS text-align property (optional)

Table Header Cell

Food Item
NameTypeDefaultDescriptionRequired?
isSortableboolean
Deteremines if a table column is sortable (optional)
shouldTruncateboolean
Truncates text into a singular line with ellipsis (optional)
onSortsignature
Callback for Sorting Table Columns (optional)
sortIdstring
Controls which column is being sorted (optional)
sortDirectionASCDESC
Controls the current sort direction (optional)

Table Row Accordion

NameTypeDefaultDescriptionRequired?
detailReactNode
Content to be rendered in accordion drawer
isExpandedboolean
Controls the display state of the accordion drawer
onTogglesignature
Callback for toggling the accordion drawer state

Recipes

Column span
Header
Column 1Column 2
This is a footer for the table.
Column width
Food ItemCaloriesDescriptionProtein
🍔 Bacon Smokehouse Burger840A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.46g
🍔 Big Mac540Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.25g
Custom row rendering
Food ItemCaloriesTotal Fat: (69% DV*)Total Carbs: (21% DV*)Protein
🍔 Bacon Smokehouse Burger84045g62g46g
doge
🍔 Big Mac54028g46g25g
doge