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 Item | Calories | Total Fat: (69% DV*) | Total Carbs: (21% DV*) | Protein |
---|---|---|---|---|
🍔 Bacon Smokehouse Burger | 840 | 45g | 62g | 46g |
🍔 Big Mac | 540 | 28g | 46g | 25g |
import { Table } from '@sproutsocial/racine'
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
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) | ||
sortId | string | Controls which column is being sorted (optional) | ||
sortDirection | TypeEnumSortDirections | Controls the current sort direction (optional) | ||
rowRender | (row: TypeTableRow) => React.Node | Custom row render for flexibilty |
Subcomponents
Table Cell
Name | Type | Default | Description | Required? |
---|---|---|---|---|
id | string | Table Cell Id | ||
content | React.Node | Content to be render | ||
colSpan | number | Controls the colSpan attribute (optional) | ||
width | number | Controls the width attribute (optional) | ||
align | "left" "right" "center" "justify" | Controls the CSS text-align property (optional) |
Table Header Cell
Name | Type | Default | Description | Required? |
---|---|---|---|---|
isSortable | boolean | Deteremines if a table column is sortable (optional) | ||
shouldTruncate | boolean | Truncates text into a singular line with ellipsis (optional) | ||
onSort | (id: string) => void | Callback for Sorting Table Columns (optional) | ||
sortId | string | Controls which column is being sorted (optional) | ||
sortDirection | ASC DESC | Controls the current sort direction (optional) |
Table Row Accordion
Name | Type | Default | Description | Required? |
---|---|---|---|---|
detail | React.Node | Content to be rendered in accordion drawer | ||
isExpanded | boolean | Controls the display state of the accordion drawer | ||
onToggle | (id: string) => void | Callback for toggling the accordion drawer state |
Recipes
Column span
Header | |
---|---|
Column 1 | Column 2 |
This is a footer for the table. |
Column width
Food Item | Calories | Description | Protein |
---|---|---|---|
🍔 Bacon Smokehouse Burger | 840 | A 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 Mac | 540 | Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun. | 25g |
Custom row rendering
Food Item | Calories | Total Fat: (69% DV*) | Total Carbs: (21% DV*) | Protein | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
🍔 Bacon Smokehouse Burger | 840 | 45g | 62g | 46g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
🍔 Big Mac | 540 | 28g | 46g | 25g | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |