Interface TableProps

Valores aceitos para o componente Table.

Atente-se que algumas propriedades são herdadas de outros conjuntos

Veja abaixo um exemplo utilizando algumas as propriedades:

Hierarchy

Properties

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

Properties

Optional alignContent

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

O alinhamento do conteúdo ao longo do eixo transversal.

Optional alignItems

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

O alinhamento dos itens ao longo do eixo transversal.

Optional alignSelf

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

O alinhamento do próprio item ao longo do eixo transversal.

Optional backgroundAttachment

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

A fixação do plano de fundo.

Optional backgroundBlendMode

backgroundBlendMode?: "normal" | "multiply" | "hard-light" | "difference"

O modo de mesclagem do plano de fundo.

Optional backgroundClip

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

A área de recorte do plano de fundo.

Optional backgroundColor

backgroundColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor de fundo do componente

Optional backgroundImage

backgroundImage?: any

A imagem de plano de fundo.

Optional backgroundOrigin

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

A origem do posicionamento do plano de fundo.

Optional backgroundPosition

backgroundPosition?: string

A posição do plano de fundo.

Optional backgroundPositionX

backgroundPositionX?: string

A posição horizontal do plano de fundo.

Optional backgroundPositionY

backgroundPositionY?: string

A posição vertical do plano de fundo.

Optional backgroundRepeat

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

A repetição do plano de fundo.

Optional backgroundSize

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

O tamanho do plano de fundo.

Optional basis

basis?: number | "auto"

A base do item flexível.

Optional border

border?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda.

Optional borderBottomWidth

borderBottomWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda inferior.

Optional borderColor

borderColor?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor das bordas do componente

Optional borderLeftWidth

borderLeftWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda esquerda.

Optional borderRadius

borderRadius?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda.

Optional borderRadiusLeftBottom

borderRadiusLeftBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior esquerdo.

Optional borderRadiusLeftTop

borderRadiusLeftTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior esquerdo.

Optional borderRadiusRightBottom

borderRadiusRightBottom?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda inferior direito.

Optional borderRadiusRightTop

borderRadiusRightTop?: "none" | "micro" | "small" | "medium" | "circular" | "pill"

O raio de borda superior direito.

Optional borderRightWidth

borderRightWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda direita.

Optional borderTopWidth

borderTopWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda superior.

Optional borderWidth

borderWidth?: "none" | "hairline" | "thin" | "thick" | "heavy"

A largura da borda total.

Optional bottom

bottom?: string | number

A distância do elemento em relação à parte inferior.

Optional boxShadow

boxShadow?: string

Efeito de sombra

Optional checked

checked?: boolean

Optional color

color?: "none" | "primary-100" | "primary-300" | "primary-500" | "primary-700" | "primary-900" | "secondary-100" | "secondary-300" | "secondary-500" | "secondary-700" | "secondary-900" | "tertiary-100" | "tertiary-300" | "tertiary-500" | "tertiary-700" | "tertiary-900" | "accent-100" | "accent-300" | "accent-500" | "accent-700" | "accent-900" | "neutral-900" | "neutral-700" | "neutral-500" | "neutral-300" | "neutral-100" | "positive-700" | "positive-300" | "warning-700" | "warning-300" | "negative-700" | "negative-300" | "support-01" | "support-02" | "support-03"

Cor do texto no componente

Optional direction

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

A direção do flexbox.

Optional display

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

A exibição do elemento.

Optional flexNone

flexNone?: boolean

Define se o item deve ter flexibilidade nula.

Optional flexWrap

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

O envolvimento dos itens em várias linhas ou colunas.

Optional gap

gap?: number

O espaçamento entre os itens flexíveis.

Optional grow

grow?: number | "auto"

A proporção de crescimento do item flexível.

Optional height

height?: string | number

A altura do elemento.

Optional id

id?: string

Preenche o ID do elemento (não tem muito uso prático)

Optional justifyContent

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

O alinhamento dos itens ao longo do eixo principal.

Optional justifyItems

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

O alinhamento dos próprios itens ao longo do eixo principal.

Optional justifySelf

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

O alinhamento do próprio item ao longo do eixo principal.

Optional left

left?: string | number

A distância do elemento em relação à esquerda.

Optional margin

margin?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem geral.

Optional marginBottom

marginBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem inferior.

Optional marginHorizontal

marginHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem horizontal (esquerda e direita).

Optional marginLeft

marginLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem esquerda.

Optional marginRight

marginRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem direita.

Optional marginTop

marginTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem superior.

Optional marginVertical

marginVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

A margem vertical (superior e inferior).

Optional maxHeight

maxHeight?: string | number

A altura máxima do elemento.

Optional maxWidth

maxWidth?: string | number

A largura máxima do elemento.

Optional minHeight

minHeight?: string | number

A altura mínima do elemento.

Optional minWidth

minWidth?: string | number

A largura mínima do elemento.

Optional opacity

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

A opacidade do elemento.

Optional order

order?: number

A ordem do item no fluxo flexível.

Optional overflow

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

O comportamento de overflow geral.

Optional overflowX

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

O comportamento de overflow horizontal.

Optional overflowY

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

O comportamento de overflow vertical.

Optional padding

padding?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento geral.

Optional paddingBottom

paddingBottom?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento inferior.

Optional paddingHorizontal

paddingHorizontal?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento horizontal (esquerdo e direito).

Optional paddingLeft

paddingLeft?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento esquerdo.

Optional paddingRight

paddingRight?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento direito.

Optional paddingTop

paddingTop?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento superior.

Optional paddingVertical

paddingVertical?: "none" | "small" | "medium" | "quark" | "nano" | "extra-small" | "large" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

O preenchimento vertical (superior e inferior).

Optional position

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

A posição do elemento.

Optional right

right?: string | number

A distância do elemento em relação à direita.

Optional showBorders

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

Variantes de borda para table

 <Table showBorders="all">

Optional shrink

shrink?: number | "auto"

A proporção de encolhimento do item flexível.

Optional top

top?: string | number

A distância do elemento em relação ao topo.

Optional visibility

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

A visibilidade do elemento.

Optional visualState

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

Determina o estado visual do componente e seus filhos.

Optional width

width?: string | number

A largura do elemento.

Optional zIndex

zIndex?: number

O valor de zIndex do elemento.

Settings

Member Visibility

Theme

On This Page