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.

Subcomponents

Table Cell

🍔 Bacon Smokehouse Burger

Table Header Cell

Food Item

Table Row Accordion

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