DataGrid Tanstack

Vlastnost

Typ

Default

Popis

id

string

Identifikátor tabulky

row

Array

Data

columns

Column[]

Definice sloupců tabulky

isLoading

Boolean

false

zobrazení loading stavu

enableRowVirtualization

Boolean

true

Optimalizace performance pro řádky, zapínat při větším datasetu rows > 50

enableColumnVirtualization

Boolean

false

Optimalizace performance pro sloupce, zapínat při větším datasetu columns > 15

enableColumnPinning

Boolean

true

Povolení připínání sloupců v tabulce, aplikuje se na celou tabulku. Je možné řešit ještě na úrovní Column Props

enableGrouping

Boolean

true

Povolení seskupování v tabulce, aplikuje se na celou tabulku. Je možné řešit ještě na úrovní Column Props

enableFiltering

Boolean

true

Povolení filtrování sloupců v tabulce, aplikuje se na celou tabulku. Je možné řešit ještě na úrovní Column Props

actionButtonsInMenu

Boolean

false

Zobrazení tlačítka pro grupování a připínání sloupce v popoveru.

exportData

Boolean

true

Povolení pro export do CSV a Excel

columnDefaultSize

Number | undefined

undefined

Defaultní šířka sloupce, aplikuje se na celou tabulku. Je možné řešit na úrovni Column props. Pokud undefined aplikuje se css pravidlo flex:1 -> všechny sloupce stejně široké roztažené přes celou tabulku

columnDefaultMinSize

Number

100

Minimální šířka sloupce pro resizing, aplikuje se na celou tabulku. Je možné řešit na úrovni Column props.

columnDefaultMaxSize

Number

500

Maximální šířka sloupce pro resizing, aplikuje se na celou tabulku. Je možné řešit na úrovni Column props.

initialGroups

String[]

Defaultně seskupené slupce

initialSorting

[{id: string, desc: boolean}]

Defaultní sorting slopců

initialFiltering

{id: string, value: any}[]

Počáteční filtr při prvním renderu tabulky

initialColumnVisibility

{['id sloupce']: true | false}

Schování sloupce při prvním renderu

leftPinnedColumns

String[]

Defaultně připnuté sloupce vlevo

columnGroupedColor

String

Změna defaultní barvy pro seskupený sloupce

rowAggregationColor

String

Změna defaultní barvy pro agregaci sloupce

dateFormat

'dd.MM.yyyy' | 'd.M.yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';

Změna formátu zobrazení datumu pro sloupec type: 'date'. Pokud není nastaveno formát datumu je podle nastaveného jazyka

userLang

"cs" | "en" | "de" | "sk"| "pl"

"cs"

Nastavení překladů komponenty (neplatí pro názvy sloupců a obsah buňek tabulky)

isLoading

Boolean

Zobrazení loading state

enableRowSelectionOnClick

Boolean

false

Povolit označení řádků na klik

rowDensity

'compact' | 'standard' | 'comfort'

'standard'

Výška řádků

Vlastnost

Type

Default

Popis

field

String

type

'string' | 'number' | 'date' | 'range' | 'select'

'string'

Typ sloupce, na základě typu se zobrazí příslušný filtr sloupce

headerName

String

Název sloupce

enableFilter

Boolean

true

Povolení zakázaní filtrování slupce, default povolen, musí být povoleno props na tabulce enableFiltering

columnAggregation

'sum' | 'median' | 'min' | 'max'

Funkce aplikovaná při seskupení slopce

enableGrouping

Boolean

true

Povolení seskupení slupce, default povolen, musí být povoleno props na tabulce enableGrouping

size

Number

250

Defaultní šířka sloupce

minSize

Number

100

Defaultní min. šířka sloupce

maxSize

Number

500

Defaultní max. šířka sloupce

cell

(cell: any) => any;

Modifikace hodnoty buňky

accessorFn

(originalRow: any, index: number) => any;

kombinace hodnot z více sloupců do jednoho