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'

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

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)
childrenReact.Node
Children to be rendered

Table Header Cell

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)
sortDirection
ASC
DESC
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
Column width
Custom row rendering