Interface TableProps

Accepted values for the Table component.

Note that some properties are inherited from other sets.

Here's an example using some of the properties:

Hierarchy

Properties

alignContent? alignItems? alignSelf? backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundColor? backgroundImage? backgroundOrigin? backgroundPosition? backgroundPositionX? backgroundPositionY? backgroundRepeat? backgroundSize? basis? border? borderBottomStyle? borderBottomWidth? borderColor? borderLeftStyle? borderLeftWidth? borderRadius? borderRadiusLeftBottom? borderRadiusLeftTop? borderRadiusRightBottom? borderRadiusRightTop? borderRightStyle? borderRightWidth? borderStyle? borderTopStyle? borderTopWidth? borderWidth? bottom? boxShadow? color? contentColor? direction? display? elevation? filter? flexNone? flexWrap? gap? grow? height? id? justifyContent? justifyItems? justifySelf? left? margin? marginBottom? marginHorizontal? marginLeft? marginRight? marginTop? marginVertical? maxHeight? maxWidth? minHeight? minWidth? mixBlendMode? objectFit? opacity? order? overflow? overflowX? overflowY? padding? paddingBottom? paddingHorizontal? paddingLeft? paddingRight? paddingTop? paddingVertical? position? right? showBorders? showScrollbars? shrink? top? transform? transition? visibility? visualState? width? zIndex?

Properties

Optional alignContent

alignContent?: "center" | "start" | "end" | "between" | "around"

Content alignment through the element axis

Example:

  <alignContent="center" />

Optional alignItems

alignItems?: "center" | "start" | "end" | "between" | "around"

Item alignment through the element axis

Example:

  <alignItems="center" />

Optional alignSelf

alignSelf?: "center" | "start" | "end" | "between" | "around"

Self alignment through the element axis

Example:

  <alignSelf="center" />

Optional backgroundAttachment

backgroundAttachment?: "scroll" | "fixed" | "local" | "none"

backgroundAttachment defines how a background image behaves in relation to the scrolling of content on the page.

Param

The option for attaching the background image.

  • "scroll": The background image scrolls with the content when the user scrolls the page.
  • "fixed": The background image remains fixed relative to the viewport and does not move when the user scrolls the page.
  • "local": The background image scrolls with the content of a specific element, such as a div.

Example:

   <backgroundAttachment="scrooll" />

Optional backgroundBlendMode

backgroundBlendMode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Defines how background layers blend with each other. It applies blending effects between multiple background images, gradients, or colors within the same element.

Example:

   <View backgroundBlendMode="multiply" />

Optional backgroundClip

backgroundClip?: "border-box" | "padding-box" | "content-box" | "text"

The background clip area.

Example:

   <backgroundClip="border-box" />

Optional backgroundColor

backgroundColor?: string

Background color of component

Check the token table to know which values to use

Example:

   <backgroundColor="background-color" />

Optional backgroundImage

backgroundImage?: any

Change the background Image

Example:

   <backgroundImage="myBoxShadow" />

Optional backgroundOrigin

backgroundOrigin?: "border-box" | "padding-box" | "content-box"

Sets the origin of background positioning

Example:

   <backgroundOrigin="border-box" />

Optional backgroundPosition

backgroundPosition?: string

The position of background

Example:

   <backgroundPosition="center" />

Optional backgroundPositionX

backgroundPositionX?: string

The horizontal position of background

Example:

   <backgroundPositionX="center" />

Optional backgroundPositionY

backgroundPositionY?: string

The vertical position of background

Example:

   <backgroundPositionY="center" />

Optional backgroundRepeat

backgroundRepeat?: "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"

Allows background repetition

Example:

   <backgroundRepeat="repeat" />

Optional backgroundSize

backgroundSize?: "cover" | "contain" | "auto"

Sets the background sizing

Example:

   <backgroundSize="cover" />

Optional basis

basis?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Controls grow and shrink in one index

Example:

  <basis={1} />

Optional border

border?: string

borderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />

Optional borderBottomStyle

borderBottomStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderBottomWidth

borderBottomWidth?: string

borderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderColor

borderColor?: string

Border Color of component

Check the token table to know which values to use

Example:

   <borderColor="neutral-900" />

Optional borderLeftStyle

borderLeftStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderLeftWidth

borderLeftWidth?: string

borderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.

Check the token table to know which values to use

Example:

   <borderBottomWidth="hairline" />

Optional borderRadius

borderRadius?: string

borderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadius="micro" />

Optional borderRadiusLeftBottom

borderRadiusLeftBottom?: string

borderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftBottom="micro" />

Optional borderRadiusLeftTop

borderRadiusLeftTop?: string

borderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusLeftTop="micro" />

Optional borderRadiusRightBottom

borderRadiusRightBottom?: string

borderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightBottom="micro" />

Optional borderRadiusRightTop

borderRadiusRightTop?: string

borderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.

Check the token table to know which values to use

Example:

   <borderRadiusRightTop="micro" />

Optional borderRightStyle

borderRightStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderRightWidth

borderRightWidth?: string

borderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.

Check the token table to know which values to use

Example:

   <borderRightWidth="hairline" />

Optional borderStyle

borderStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopStyle

borderTopStyle?: "hidden" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"

Defines the border style of a component. You need to define borderWidth before use this property.

Example:

   <View borderWidth="hairline" borderStyle="dashed" />

Optional borderTopWidth

borderTopWidth?: string

borderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.

Check the token table to know which values to use

Example:

   <borderTopWidth="hairline" />

Optional borderWidth

borderWidth?: string

The borderWidth determines the thickness of borders in the design system. It's a crucial property for defining the visual weight of elements.

Check the token table to know which values to use

Example:

   <borderWidth="hairline" />

Optional bottom

bottom?: string | number

A distance from the bottom.

Example:

  <bottom={20} />

Optional boxShadow

boxShadow?: string

Efeito de sombra

Example:

  <boxShadow="myBoxShadow" />

Deprecated

Optional color

color?: string

Text color of components

Check the token table to know which values to use

Example:

   <color="neutral-900" />

Optional contentColor

contentColor?: boolean

"Use contrast colors for text and background"

Example:

 <View contentColors backgroundColor="primary-500" />

Optional direction

direction?: "row" | "column" | "row-reverse" | "column-reverse"

Direction of the FlexBox axis

Example:

   <direction="row" />

Optional display

display?: "none" | "block" | "flex" | "inline" | "inline-block" | "inline-flex"

Changes the element exhibition

Example:

<display="flex"/>

Optional elevation

elevation?: "none" | "low" | "medium" | "high" | "highest"

Adjust elevation of component

Example:

  <View elevation="low" ></View>

Optional filter

filter?: string

Sets a filter to image render.

Example:

<Image filter="sepia(60%)" />

Optional flexNone

flexNone?: boolean

Annulate flex properties

Example:

  <flexNone={true} />

Optional flexWrap

flexWrap?: "nowrap" | "wrap" | "reverse"

Activate content wrapping

Example:

  <flexWrap="wrap" />

Optional gap

gap?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Changes the gap between elements

Example:

  <gap={1} />

Optional grow

grow?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Growth ratio of element

Example:

  <grow={1} />

Optional height

height?: string | number

Adjust component height

Example:

   <height={100} />

Optional id

id?: string

"Fills the ID of the element (not very practical)."

Example:

 <View id="id" />

Optional justifyContent

justifyContent?: "center" | "start" | "end" | "between" | "around" | "evenly"

Content distribution through the element axis

Example:

  <justifyContent="center" />

Optional justifyItems

justifyItems?: "center" | "start" | "end" | "between" | "around"

Item distribution through the element axis

Example:

  <JustifyItems="center" />

Optional justifySelf

justifySelf?: "center" | "start" | "end" | "between" | "around"

Self distribution through the element axis

Example:

  <justifySelf="center" />

Optional left

left?: string | number

A distance from the left.

Example:

  <left={20} />

Optional margin

margin?: string

General margin size

Check the token table to know which values to use

Example:

<margin="quark" />

Optional marginBottom

marginBottom?: string

Bottom margin size

Check the token table to know which values to use

Example:

<marginBottom="quark" />

Optional marginHorizontal

marginHorizontal?: string

Horizontal (left and right) margin size

Check the token table to know which values to use

Example:

<marginHorizontal="quark" />

Optional marginLeft

marginLeft?: string

Left margin size

Check the token table to know which values to use

Example:

<marginLeft="quark" />

Optional marginRight

marginRight?: string

Right margin size

Check the token table to know which values to use

Example:

<marginRight="quark" />

Optional marginTop

marginTop?: string

Top margin size

Check the token table to know which values to use

Example:

<marginTop="quark" />

Optional marginVertical

marginVertical?: string

Vertical (top and bottom) margin size

Check the token table to know which values to use

Example:

<marginVertical="quark" />

Optional maxHeight

maxHeight?: string | number

Adjust component maximum height

Example:

   <maxHeight={100} />

Optional maxWidth

maxWidth?: string | number

Adjust component maximum width

Example:

   <maxwidth={100} />

Optional minHeight

minHeight?: string | number

Adjust component minimum height

Example:

   <minHeight={100} />

Optional minWidth

minWidth?: string | number

Adjust component minimum width

Example:

   <minWidth={100} />

Optional mixBlendMode

mixBlendMode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Determines how an element’s content blends with the background or elements behind it. It affects the entire element, including text and images, and creates effects similar to those in graphic design software.

Example:

   <View mixBlendMode="screen" />

Optional objectFit

objectFit?: "none" | "cover" | "contain" | "fill" | "scale-down"

Sets the object fit

Example:

   <objectFit="cover" />

Optional opacity

opacity?: "none" | "solid" | "light" | "half" | "heavy" | "transparent"

Changes the element opacity

Example:

<opacity="light" />

Optional order

order?: number

Changes the order of elements

Example:

  <order="center" />

Optional overflow

overflow?: "scroll" | "overlay" | "auto" | "hidden" | "visible"

The overall overflow behavior.

Example:

  <overflow="hidden" />

Optional overflowX

overflowX?: "scroll" | "overlay" | "auto" | "hidden" | "visible"

The horizontal overflow behavior.

Example:

  <overflowX="hidden" />

Optional overflowY

overflowY?: "scroll" | "overlay" | "auto" | "hidden" | "visible"

The vertical overflow behavior.

Example:

  <overflowY="hidden" />

Optional padding

padding?: string

General padding size

Check the token table to know which values to use

Example:

<padding="quark" />

Optional paddingBottom

paddingBottom?: string

Bottom padding size

Check the token table to know which values to use

Example:

<paddingBottom="quark" />

Optional paddingHorizontal

paddingHorizontal?: string

Horizontal (left and right) padding size

Check the token table to know which values to use

Example:

<paddingHorizontal="quark" />

Optional paddingLeft

paddingLeft?: string

Left padding size

Check the token table to know which values to use

Example:

<paddingLeft="quark" />

Optional paddingRight

paddingRight?: string

Right padding size

Check the token table to know which values to use

Example:

<paddingRight="quark" />

Optional paddingTop

paddingTop?: string

Top padding size

Check the token table to know which values to use

Example:

<paddingTop="quark" />

Optional paddingVertical

paddingVertical?: string

Vertical (top and bottom) padding size

Check the token table to know which values to use

Example:

<paddingVertical="quark" />

Optional position

position?: "fixed" | "static" | "relative" | "absolute" | "sticky"

The element positioning.

Example:

  <position="relative" />

Optional right

right?: string | number

A distance from the right.

Example:

  <right={20} />

Optional showBorders

showBorders?: "vertical" | "all" | "horizontal"

Show table borders or some variations

 <Table showBorders="all">

Optional showScrollbars

showScrollbars?: boolean

This property controls the display of scrollbars.

<View showScrollbars>
</View>

Optional shrink

shrink?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Shrink ratio of element

Example:

  <shrink={1} />

Optional top

top?: string | number

A distance from the top.

Example:

  <top={20} />

Optional transform

transform?: string

"Prepare a position transforming of element"

Example:

 <View transform="rotate(45deg)" />

Optional transition

transition?: string

"Prepare a transition of visual state change"

Example:

 <View transition="background-color 0.5s ease-in-out" />

Optional visibility

visibility?: "hidden" | "visible" | "collapse"

Changes the element visibility

Example:

<visibility="visible" />

Optional visualState

visualState?: "success" | "danger" | "warning"

"Determines the visual state of the component and its children."

Example:

 <View visualState="success" />

Optional width

width?: string | number

Adjust component width

Example:

   <width={100} />

Optional zIndex

zIndex?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Value of z-index

Example:

  <zIndex={1} />

Settings

Member Visibility

Theme

On This Page