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
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 | ||
children | React.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
Name | Type | Default | Description | Required? |
---|---|---|---|---|
id | string | Table Cell Id | ||
content | React.Node | Content is deprecated. Please use children instead. 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) | ||
children | React.Node | Children to be rendered |
Table Header Cell
Name | Type | Default | Description | Required? |
---|---|---|---|---|
isSortable | boolean | Legacy Deteremines if a table column is sortable (optional) | ||
shouldTruncate | boolean | Truncates text into a singular line with ellipsis (optional) | ||
onSort | (id: string) => void | Legacy: Callback for Sorting Table Columns (optional) | ||
sortId | string | Legacy: Controls which column is being sorted (optional) | ||
sortDirection | unknown | 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
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
Column width
Custom row rendering