Skip to main content

Tr

Interfaces

TrProps

Props for the Tr component.

Extends

  • Omit<React.HTMLAttributes<HTMLTableRowElement>, "color">.Omit<BulmaClassesProps, "backgroundColor" | "color">

Properties

PropertyTypeDescriptionOverrides
alignContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"Align content (e.g., 'center', 'stretch').-
alignItems?"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"Align items (e.g., 'center', 'flex-start').-
alignSelf?"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"Align self (e.g., 'auto', 'center').-
children?ReactNodeTable row content (cells).Omit.children
className?stringAdditional CSS classes to apply.Omit.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "white" | "light" | "dark"Bulma color modifier for the table row.-
colorShade?"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"Color shade suffix (e.g., '00', 'invert').-
display?"block" | "flex" | "inline" | "inline-block" | "inline-flex"Display type (e.g., 'block', 'flex').-
flexDirection?"row" | "row-reverse" | "column" | "column-reverse"Flex direction (e.g., 'row', 'column').-
flexGrow?"0" | "1"Flex grow value (e.g., '0', '1').-
flexShrink?"0" | "1"Flex shrink value (e.g., '0', '1').-
flexWrap?"nowrap" | "wrap" | "wrap-reverse"Flex wrap (e.g., 'wrap', 'nowrap').-
float?"left" | "right"Float direction (e.g., 'left', 'right').-
fontFamily?"primary" | "sans-serif" | "monospace" | "secondary" | "code"Font family (e.g., 'sans-serif', 'code').-
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').-
isSelected?booleanWhether the row is selected (adds Bulma's is-selected class).-
justifyContent?"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"Justify content (e.g., 'center', 'space-between').-
m?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin (e.g., '0', '1').-
mb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin bottom.-
ml?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin left.-
mr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin right.-
mt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin top.-
mx?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin horizontal (left and right).-
my?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin vertical (top and bottom).-
overflow?"clipped"Overflow behavior (e.g., 'clipped').-
overlay?booleanApplies overlay styling if true.-
p?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding (e.g., '0', '1').-
pb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding bottom.-
pl?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding left.-
pr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding right.-
pt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding top.-
px?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding horizontal (left and right).-
py?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding vertical (top and bottom).-
radius?"radiusless"Border radius style (e.g., 'radiusless').-
responsive?"mobile" | "narrow"Responsive behavior (e.g., 'mobile', 'narrow').-
shadow?"shadowless"Shadow style (e.g., 'shadowless').-
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').-
textSize?"1" | "2" | "3" | "4" | "5" | "6" | "7"Text size (e.g., '1', '2').-
textTransform?"capitalized" | "lowercase" | "uppercase" | "italic"Text transformation (e.g., 'uppercase', 'italic').-
textWeight?"light" | "normal" | "medium" | "semibold" | "bold"Text weight (e.g., 'light', 'bold').-
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').-
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').-

Functions

Tr()

Tr(props, deprecatedLegacyContext?): ReactNode

Tr component for rendering a styled Bulma table row.

Supports the is-selected modifier and color modifiers.

Parameters

props

TrProps

Props for the Tr component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered table row element.