TableV2

React API

TableV2

Ref-prop välitetään komponentin renderöimälle elementille.

• caption

  Taulukon otsikko. Otsikon voi toteuttaa myös TableV2Caption-komponentilla.

  Tyyppi: string

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• hasVariants

  Määrittää onko taulukossa tilarivejä (variant). Asetus "auto" tarkistaa tämän automaattisesti, mutta huonontaa suorituskykyä etsimällä tiedon taulukon lapsielementeistä.

  Tyyppi: boolean | "auto"

  Oletusarvo: false

• isScrollable

  Sivusuunnassa vieritettävä taulukko, jos koko taulukko ei mahdu ruudulle. Tämän voi toteuttaa myös TableV2Container-komponentilla.

  Tyyppi: boolean

  Oletusarvo: true

• isStriped

  Rivien raidoitettu korostus.

  Tyyppi: boolean

• size

  Taulukon koko.

  Tyyppi: "xs" | "md"

  Oletusarvo: md

• sortDescription

  Järjestetyn sarakkeen järjestyksen kertova teksti ruudunlukijoille.

  Tyyppi: string

• sortLabel

  Järjestetyn sarakkeen otsikkoteksti ruudunlukijoille.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Body

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Caption

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Cell

Ref-prop välitetään komponentin renderöimälle elementille.

• align

  Tasaa sisällön vasemmalle tai oikealle.

  Tyyppi: "left" | "right"

  Oletusarvo: left

• as

  Tyyppi: "td" | "th"

  Oletusarvo: td

• cellType

  Taulukon solun tyyppi.

  Tyyppi: "status" | "selection" | "icon" | "toggle"

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• dense

  Tiiviimpi asettelu solulle, joka sisältää esimerkiksi ikonin tai muita toimintoja. Voidaan asettaa eri puolille solua tarpeen mukaan.

  Tyyppi: TableV2CellDenseDirection | TableV2CellDenseDirection[]

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Container

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• isScrollable

  Sivusuunnassa vieritettävä taulukko, jos koko taulukko ei mahdu ruudulle.

  Tyyppi: boolean

  Oletusarvo: true

• size

  Taulukon koko.

  Tyyppi: "xs" | "md"

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Footer

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2Head

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2HeadCell

Ref-prop välitetään komponentin renderöimälle elementille.

• align

  Tasaa sisällön vasemmalle tai oikealle.

  Tyyppi: "left" | "right"

  Oletusarvo: left

• as

  Tyyppi: "td" | "th"

  Oletusarvo: th

• cellType

  Taulukon solun tyyppi.

  Tyyppi: "status" | "selection" | "icon" | "toggle" | "sort"

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• dense

  Tiiviimpi asettelu solulle, joka sisältää esimerkiksi ikonin tai muita toimintoja. Voidaan asettaa eri puolille solua tarpeen mukaan.

  Tyyppi: TableV2CellDenseDirection | TableV2CellDenseDirection[]

• hasBorder

  Määrittää näytetäänkö solulla reunaviiva. Tarpeellinen vain jos TableHeadRow-komponenttia ei käytetä.

  Tyyppi: boolean

  Oletusarvo: false

• onClick

  Palstan järjestyspainikkeen onClick-funktio.

  Tyyppi: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

• order

  Palstan järjestys.

  Tyyppi: "none" | "ascending" | "descending"

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

TableV2HeadRow

Ref-prop välitetään komponentin renderöimälle elementille.

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• collapseCellAs

  Laajennettavan rivin solun tyyppi.

  Tyyppi: "td" | "th"

  Oletusarvo: td

• collapseLabel

  Laajennettavan rivin avauspainikkeen saavutettava teksti (aria-label).

  Tyyppi: string

• collapseToggleRef

  Rivin avaavalle painikkeelle välitettävä ref.

  Tyyppi: MutableRefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void)

• hasBorder

  Määrittää näytetäänkö otsikkorivin reunaviiva.

  Tyyppi: boolean

  Oletusarvo: true

• inputRef

  Valintaruudulle tai valintanapille välitettävä ref.

  Tyyppi: MutableRefObject<HTMLInputElement> | ((instance: HTMLInputElement) => void)

• isCollapseOpen

  Määrittää onko laajennettava rivi auki vai kiinni.

  Tyyppi: boolean

• isSelectDisabled

  Määrittää onko valintaruudun tai valintanapin valitseminen estetty.

  Tyyppi: boolean

• isSelected

  Valintaruudun tai valintanapin tila.

  Tyyppi: boolean

• onCollapseClick

  Laajennettavan rivin onClick-funktio.

  Tyyppi: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

• onSelectChange

  Valintaruudun tai valintanapin onChange-funktio.

  Tyyppi: (e: ChangeEvent<HTMLInputElement>) => void

• selectCellAs

  Valintarivin solun tyyppi.

  Tyyppi: "td" | "th"

  Oletusarvo: td

• selectLabel

  Valintaruudun tai valintanapin saavutettava nimilappu.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

• variantCellAs

  Tilarivin tyhjän solun tyyppi.

  Tyyppi: "td" | "th"

  Oletusarvo: td

• variantCellContent

  Tilarivin solun sisältö.

  Tyyppi: ReactNode

• variantLabel

  Tilarivin ruudunlukijoille tarkoitettu teksti.

  Tyyppi: string

TableV2Row

Ref-prop välitetään komponentin renderöimälle elementille.

• animate

  Kääntää komponentin animaation päälle tai pois päältä.

  Tyyppi: boolean

  Oletusarvo: true

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• collapseColspan

  Laajennettavan rivin solun leveys.

  Tyyppi: number

• collapseContent

  Laajennettavan rivin sisältö.

  Tyyppi: ReactNode

• collapseLabel

  Laajennettavan rivin avauspainikkeen saavutettava teksti (aria-label).

  Tyyppi: string

• collapseRowRef

  Laajennettavalle riville välitettävä ref.

  Tyyppi: MutableRefObject<HTMLTableRowElement> | ((instance: HTMLTableRowElement) => void)

• collapseToggleRef

  Laajennettavan rivin avauspainikkeelle välitettävä ref.

  Tyyppi: MutableRefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void)

• inputRef

  Valintaruudulle tai valintanapille välitettävä ref.

  Tyyppi: MutableRefObject<HTMLInputElement> | ((instance: HTMLInputElement) => void)

• isCollapseOpen

  Määrittää onko laajennettava rivi auki vai kiinni.

  Tyyppi: boolean

• isSelectDisabled

  Määrittää onko rivin valintaruudun tai valintanapin valitseminen estetty.

  Tyyppi: boolean

  Oletusarvo: false

• isSelected

  Rivin valinnan tila.

  Tyyppi: boolean

• isSummary

  Yhteenvetorivin ulkoasu.

  Tyyppi: boolean

• isTooltipPopover

  Käyttää hoverilla ja kohdistuksella avautuvan tooltipin sijaan popover-varianttia, joka avautuu klikkauksella. Välitetään korostetun rivin kuvakkeelle.

  Tyyppi: boolean

• onCollapseClick

  Avattavan rivin onClick-funktio.

  Tyyppi: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

• onSelectChange

  Rivin valinnan onChange-funktio.

  Tyyppi: (e: ChangeEvent<HTMLInputElement>) => void

• selectLabel

  Rivin valinnan saavutettava nimilappu.

  Tyyppi: string

• selectType

  Määrittää voiko rivejä valita yhden (valintanapit) vai useampia (valintaruudut).

  Tyyppi: "single" | "multiple"

• shouldAddVariantCell

  Määrittää lisätäänkö ylimääräinen td-elementti automaattisesti riveille, joilla ei ole variant-prop käytössä.

  Tyyppi: boolean

  Oletusarvo: true

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

• tooltipPlacement

  Työkaluvihjeen sijoittelu.

  Tyyppi: "left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"

• tooltipPopoverIconLabel

  Työkaluvihjeen popup-variantin kuvakkeelle välitettävä teksti.

  Tyyppi: string

• variant

  Tilarivin väri ja kuva.

  Tyyppi: "primary" | "success" | "warning" | "danger"

• variantLabel

  Tilarivin ruudunlukijoille tarkoitettu teksti.

  Tyyppi: string

TableV2SortButton

Ref-prop välitetään komponentin renderöimälle elementille.

• align

  Tyyppi: "left" | "right"

  Oletusarvo: left

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• onClick

  Tyyppi: ((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & MouseEventHandler<HTMLButtonElement>

• order

  Tyyppi: "none" | "ascending" | "descending"

  Oletusarvo: none

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string