DataGrid · Glowup

Glowup

DATA DISPLAY · 48 / 89

DataGrid

DataGrid — a Material You data display component for React Native and web.

󱀫

packages/ui/src/components/DataGrid.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Name

Value

Item 1

Val 1

Item 2

Val 2

Properties

3 controls

Density

Empty Data

Usage

DataGrid.tsx

Variants

The states and shapes this component is meant to be used in.

Sorted

Invoice

Client

󰅃

Issued

󰅃

Total

󰅃

INV-2041

Acme Inc.

12 Aug

€1,240.50

INV-2042

Northwind Ltd

14 Aug

€380.00

INV-2043

Globex GmbH

19 Aug

€4,905.20

INV-2044

Initech BV

23 Aug

€72.90

INV-2045

Umbrella SpA

01 Sep

€2,110.00

Dense

Invoice

Client

󰅃

Issued

󰅃

Total

󰅃

INV-2041

Acme Inc.

12 Aug

€1,240.50

INV-2042

Northwind Ltd

14 Aug

€380.00

INV-2043

Globex GmbH

19 Aug

€4,905.20

INV-2044

Initech BV

23 Aug

€72.90

INV-2045

Umbrella SpA

01 Sep

€2,110.00

Invoice

Client

󰅃

Issued

󰅃

Total

󰅃

Empty

Invoice

Client

󰅃

Issued

󰅃

Total

󰅃

No invoices in this period

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

13 on DataGridProps

Filter props

󰍉

columns

required

ColumnDefinition[]

data

required

any[]

density

"normal" | "dense"

default: "normal"

emptyMessage

string

Shown centered when data is empty and not loading.

headerStyle

ViewStyle

boolean

default: false

onEndReached

() => void

onEndReachedThreshold

number

default: 0.5

onSort

(columnId: string, direction: "asc" | "desc") => void

rowStyle

ViewStyle

sortColumn

string

sortDirection

"asc" | "desc"

style

ViewStyle