SOROUSH.DESIGN
Design SystemMarkdownStyled System

TableRow

A row in a table. Renders <tr> with optional hover and selected shading.

Source

A row in a table. Renders <tr> with optional hover and selected shading.

<TableRow isHoverable isSelected={row.id === selectedId}>
  <TableCell>web</TableCell>
</TableRow>

Demos

For usage examples, visit the component demo page: Table

Import

import { TableRow } from '@soroush.tech/design-system/Table'

Props

PropTypeDefaultDescription
isHoverablebooleanfalseShades the row on hover with theme.palette[color].light.
isSelectedbooleanfalseFills the row with theme.palette[color].dark + contrast text.
colorPaletteColor'primary'Palette color driving the hover/selected shading (theme.palette[color]) - falls back to the enclosing Table's color.
bgkeyof Theme['background']-Background color.
asElementType'tr'Overrides the root element.

Also supports styled-system space and border props.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.