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

NameTypeDefaultDescriptionRequired?
head
TypeTableHeaderCell
[]
Array of TableHeaderCells to render
rows
{| /** Table Row Id */ id: string, /** Array for TableCells to render */ cells: TypeTableCell[], |}
[]
Array of TableRows to render
onSort(id: string) => void
Callback for Sorting Table Columns (optional)
sortIdstring
Controls which column is being sorted (optional)
sortDirectionTypeEnumSortDirections
Controls the current sort direction (optional)
rowRender(row: TypeTableRow) => React.Node
Custom row render for flexibilty

Subcomponents

Table Cell

🍔 Bacon Smokehouse Burger
NameTypeDefaultDescriptionRequired?
idstring
Table Cell Id
contentReact.Node
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)
onSort(id: string) => void
Callback for Sorting Table Columns (optional)
sortIdstring
Controls which column is being sorted (optional)
sortDirection
ASC
DESC
Controls the current sort direction (optional)

Table Row Accordion

NameTypeDefaultDescriptionRequired?
detailReact.Node
Content to be rendered in accordion drawer
isExpandedboolean
Controls the display state of the accordion drawer
onToggle(id: string) => void
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