DataGrid Tanstack

Property

Type

Default

Description

id

string

Table identifier

row

Array

Data

columns

Column[]

Table column definitions

isLoading

Boolean

false

loading status display

enableRowVirtualization

Boolean

true

Performance optimization for rows, turn on for larger dataset rows > 50

enableColumnVirtualization

Boolean

false

Performance optimization for columns, turn on for larger datasets columns > 15

enableColumnPinning

Boolean

true

Enabling column pinning in a table, applies to the entire table. It is also possible to resolve this at the Column Props level

enableGrouping

Boolean

true

Enabling grouping in a table, applies to the entire table. It is also possible to solve it at the Column Props level

enableFiltering

Boolean

true

Enabling column filtering in a table, applies to the entire table. It is also possible to solve it at the Column Props level

actionButtonsInMenu

Boolean

false

Displaying the grouping and pinning column button in the popover.

exportData

Boolean

true

Permission to export to CSV and Excel

columnDefaultSize

Number | undefined

undefined

Default column width, applies to the entire table. Can be resolved at the Column props level. If undefined, the CSS rule flex:1 is applied -> all columns of the same width stretched across the entire table

columnDefaultMinSize

Number

100

Minimum column width for resizing, applies to the entire table. Can be resolved at the Column props level.

columnDefaultMaxSize

Number

500

Maximum column width for resizing, applies to the entire table. Can be resolved at the Column props level.

initialGroups

String[]

Default grouped skins

initialSorting

[{id: string, desc: boolean}]

Default column sorting

initialFiltering

{id: string, value: any}[]

Initial filter on first table rendering

initialColumnVisibility

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

Hiding a column on first render

leftPinnedColumns

String[]

Default pinned columns on the left

columnGroupedColor

String

Changing the default color for grouped columns

rowAggregationColor

String

Changing the default color for column aggregation

dateFormat

'dd.MM.yyyy' | 'dMyyyyy' | 'dd/mm/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';

Change the date display format for the column type: 'date'. If not set, the date format is according to the set language

userLang

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

"en"

Component translation settings (does not apply to column names and table cell content)

isLoading

Boolean

Loading state display

enableRowSelectionOnClick

Boolean

false

Enable row selection on click

rowDensity

'compact' | 'standard' | 'comfort'

'standard'

Row height

Property

Type

Default

Description

field

String

type

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

'string'

Column type, based on the type the appropriate column filter will be displayed

headerName

String

Column name

enableFilter

Boolean

true

Enable/disable column filtering, default enabled, must be enabled props on table enableFiltering

columnAggregation

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

Function applied when grouping a column

enableGrouping

Boolean

true

Enables cluster grouping, default enabled, must be enabled with props on the enableGrouping table

size

Number

250

Default column width

minSize

Number

100

Default min. column width

maxSize

Number

500

Default max. column width

cell

(cell: any) => any;

Modifying a cell value

accessorFn

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

combining values ​​from multiple columns into one