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.

import { Table } from '@sproutsocial/racine'
<Table
head={[
{content: 'Food Item', id: '1'},
{content: 'Calories', id: '2', isSortable: true},
{content: 'Total Fat: (69% DV*)', id: '3'},
{content: 'Total Carbs: (21% DV*)', id: '4'},
{content: 'Protein', id: '5'}
]}
rows={[
{
cells: [
{content: '🍔 Bacon Smokehouse Burger', id: '1'},
{content: '840', id: '2'},
{content: '45g', id: '3'},
{content: '62g', id: '4'},
{content: '46g', id: '5'}
],
id: 1
},
{
cells: [
{content: '🍔 Big Mac', id: '1'},
{content: '540', id: '2'},
{content: '28g', id: '3'},
{content: '46g', id: '4'},
{content: '25g', id: '5'}
],
id: 2
}
]}
onSort={e => alert('Sort!')}
sortDirection="asc"
sortId="2"
/>

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
childrenReact.Node
Including children will overwrite all head, rows, rowRender, and sorting props Should be used for manually rendering tables and ignoring data props

Subcomponents

Table Cell

<TableCell
content="🍔 Bacon Smokehouse Burger"
id="bacon_smokehouse"
/>
NameTypeDefaultDescriptionRequired?
idstring
Table Cell Id
contentReact.Node
Content is deprecated. Please use children instead. 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)
scope
'row'
'col'
'rowgroup'
'colgroup'
Controls the scope attribute. If set, will change the element from a `<td>` to a `<th>`. See Mozilla docs for more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)
childrenReact.Node
Children to be rendered

Table Header Cell

<TableHeaderCell
content="Food Item"
id="1"
/>
NameTypeDefaultDescriptionRequired?
isSortableboolean
Legacy Deteremines if a table column is sortable (optional)
shouldTruncateboolean
Truncates text into a singular line with ellipsis (optional)
onSort(id: string) => void
Legacy: Callback for Sorting Table Columns (optional)
sortIdstring
Legacy: Controls which column is being sorted (optional)
sortDirectionunknown
Legacy: Controls the current sort direction (optional)
onClick(e: SyntheticEvent<HTMLButtonElement>) => void
Callback for Click Events. If Included will override onSort prop

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
<Table
head={[{
colSpan: 2,
content: 'Header',
id: '1'
}]}
rows={[
{
cells: [
{content: 'Column 1', id: '1'},
{content: 'Column 2', id: '2'}
],
id: 1
},
{
cells: [
{
colSpan: 2,
content: 'This is a footer for the table.',
id: '1'
}
],
id: 2
}
]}
/>
Column width
<Table
head={[
{
content: 'Food Item',
id: '1',
width: 200
},
{
align: 'center',
content: 'Calories',
id: '2',
isSortable: true,
width: 100
},
{
content: 'Description',
id: '3'
},
{
align: 'right',
content: 'Protein',
id: '4',
width: 100
}
]}
rows={[
{
cells: [
{
content: '🍔 Bacon Smokehouse Burger',
id: '1',
width: 200
},
{
align: 'center',
content: '840',
id: '2',
width: 100
},
{
content: '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.',
id: '3'
},
{
align: 'right',
content: '46g',
id: '4'
}
],
id: 1
},
{
cells: [
{
content: '🍔 Big Mac',
id: '1',
width: 200
},
{
align: 'center',
content: '540',
id: '2',
width: 100
},
{
content: 'Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.',
id: '3'
},
{
align: 'right',
content: '25g',
id: '4'
}
],
id: 2
}
]}
/>
Custom row rendering
<Table
head={[
{
id: "1",
content: "Food Item"
},
{
id: "2",
content: "Calories",
isSortable: true
},
{
id: "3",
content: "Total Fat: (69% DV*)"
},
{
id: "4",
content: "Total Carbs: (21% DV*)"
},
{
id: "5",
content: "Protein"
}
]}
rows={[
{
id: "baconsmokehouse",
cells: [
{id: "1", content: "🍔 Bacon Smokehouse Burger"},
{id: "2", content: "840"},
{id: "3", content: "45g"},
{id: "4", content: "62g"},
{id: "5", content: "46g"}
]
},
{
id: "Big-Mac",
cells: [
{id: "1", content: "🍔 Big Mac"},
{id: "2", content: "540"},
{id: "3", content: "28g"},
{id: "4", content: "46g"},
{id: "5", content: "25g"}
]
}
]}
rowRender={(row) => {
return (
<TableRowAccordion
key={row.id}
id={row.id}
cells={row.cells}
isExpanded={row.id === 'baconsmokehouse'}
onToggle={(id) => alert(`Toggled ID #${id}`)}
detail={row.id === 'baconsmokehouse' ?
<img width='100%' src='https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-baconsmokehouse.jpg' alt='doge' /> :
<img width='100%' src='https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-Big-Mac.jpg' alt='doge' />
}
/>
)
}}
/>