DataView

A table and card grid with search, row click, and cursor pagination.

When to use

Use DataView when you need a table and card grid with search, row click, and cursor pagination.

Import

TypeScript

import { DataView } from '@gzodo/ui'

DataView fills its parent. Give the parent a height. The header holds a title, an optional controlled search field, and a table/grid toggle. Search does not filter rows itself: update data from search.onChange. Pagination appears when limit, totalCount, and totalPages are all set. The footer walks cursors with setCursor.

Examples

Name

Role

Status

Ada Lovelace

Admin

Active

Grace Hopper

Engineer

Active

Alan Turing

Research

Away

Katherine Johnson

Analyst

Active

Margaret Hamilton

Engineer

Away

Tim Berners-Lee

Admin

Invited

Table

Click a row to read it in the title. A row is not clickable when isRecordDisabled returns true. Search narrows the list you pass in.

Name

Role

Status

Ada Lovelace

Admin

Active

Grace Hopper

Engineer

Active

Page 1 of 3

1 - 2 of 6

Pagination

Pass cursor, limit, nextCursor, totalCount, totalPages, and setCursor. Previous and next walk that cursor.

Ada Lovelace

Admin · Active

Grace Hopper

Engineer · Active

Alan Turing

Research · Away

Katherine Johnson

Analyst · Active

Margaret Hamilton

Engineer · Away

Tim Berners-Lee

Admin · Invited

Grid

The header toggle switches to cards. defaultView="grid" starts there. renderRecord replaces the default field list.

Nothing matched this filter.

Loading and empty

isLoading replaces the body with “Loading...”. An empty data array shows “No data”, or noData when you pass it.

DataView

Property

Description

Type

Default

title

Header label. A string renders as subtitle text.

ReactNode

—

columns

Fields for the table and the default card layout.

DataViewColumn<T>[]

—

data

Rows. T is an object record.

T[]

—

search

Controlled header field. Filtering stays outside the component.

{ value: string; onChange: (value: string) => void }

—

onClickRow

Called when a row or card is clicked.

(record: T) => void

—

isRecordDisabled

Disabled rows ignore clicks and fade out.

(record: T) => boolean

—

renderRecord

Custom card body in the grid view.

(record: T) => ReactNode

—

defaultView

Initial layout. The header toggle can change it.

'table' | 'grid'

'table'

pagination

Cursor footer. Shown when limit, totalCount, and totalPages are set.

DataViewPagination

—

isLoading

Replace the body with a loading message.

boolean

—

header

Extra node at the end of the header tools.

ReactNode

—

ghost

Remove the frame border, radius, and fill.

boolean

—

noData

Empty state. Defaults to “No data”.

ReactNode

—

className

Class added on the root.

string

—

DataViewColumn

Property

Description

Type

Default

title

Column heading.

string

—

dataIndex

Field read from the record when render is omitted.

keyof T

—

render

Custom cell. Receives the field value and the full record.

(value, record: T) => ReactNode

—

width

Fixed flex basis, for example 40%.

string

—

justify

Horizontal alignment of the cell.

'flex-start' | 'center' | 'flex-end'

—

DataViewPagination

Property

Description

Type

Default

cursor

Cursor of the page currently shown. Null is the first page.

string | null

—

limit

Page size. Required for the footer to render.

number

—

nextCursor

Cursor of the next page. Null disables Next.

string | null

—

totalCount

Total rows across every page.

number

—

totalPages

Total pages. Required for the footer to render.

number

—

setCursor

Load the page for this cursor.

(cursor: string | null) => void

—

Modal

Avatar