Data Table

A basic table for compact records and statuses.

TypeScript Source with Startup & Business plans Light & dark

Sample team members
Name	Role	Status
Alex Morgan	Owner	Active
Jamie Chen	Member	Active
Sam Rivera	Member	Invited

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { TableBasic } from '@/components/component-kit/items/table-basic';
2
3export function Example() {
4  return (
5    <TableBasic caption="Team members" rows={[{ id: "1", name: "Alex Morgan" }]} getRowKey={(row) => row.id} columns={[{ key: "name", header: "Name", cell: (row) => row.name }]} />
6  );
7}

Props

Data Table properties
Prop	Type	Default	Description
`columns`	`TableBasicColumn<T>[]`	`—`	Column headers and cell renderers.
`rows`	`T[]`	`—`	Your table data.
`loading`	`boolean`	`false`	Show placeholder rows.

Name

Role

Status

Alex Morgan

Owner

Active

Jamie Chen

Member

Active

Sam Rivera

Member

Invited

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { TableBasic } from '@/components/component-kit/items/table-basic';
2
3export function Example() {
4  return (
5    <TableBasic caption="Team members" rows={[{ id: "1", name: "Alex Morgan" }]} getRowKey={(row) => row.id} columns={[{ key: "name", header: "Name", cell: (row) => row.name }]} />
6  );
7}

Prop

Type

Default

Description

columns

TableBasicColumn<T>[]

—

Column headers and cell renderers.

rows

T[]

—

Your table data.

loading

boolean

false

Show placeholder rows.

Name

Role

Status

Alex Morgan

Owner

Active

Jamie Chen

Member

Active

Sam Rivera

Member

Invited

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { TableBasic } from '@/components/component-kit/items/table-basic';
2
3export function Example() {
4  return (
5    <TableBasic caption="Team members" rows={[{ id: "1", name: "Alex Morgan" }]} getRowKey={(row) => row.id} columns={[{ key: "name", header: "Name", cell: (row) => row.name }]} />
6  );
7}

Prop

Type

Default

Description

columns

TableBasicColumn<T>[]

—

Column headers and cell renderers.

rows

T[]

—

Your table data.

loading

boolean

false

Show placeholder rows.

Data Table

A basic table for compact records and statuses.

TypeScript Source with Startup & Business plans Light & dark

Sample team members
Name	Role	Status
Alex Morgan	Owner	Active
Jamie Chen	Member	Active
Sam Rivera	Member	Invited

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { TableBasic } from '@/components/component-kit/items/table-basic';
2
3export function Example() {
4  return (
5    <TableBasic caption="Team members" rows={[{ id: "1", name: "Alex Morgan" }]} getRowKey={(row) => row.id} columns={[{ key: "name", header: "Name", cell: (row) => row.name }]} />
6  );
7}

Props

Data Table properties
Prop	Type	Default	Description
`columns`	`TableBasicColumn<T>[]`	`—`	Column headers and cell renderers.
`rows`	`T[]`	`—`	Your table data.
`loading`	`boolean`	`false`	Show placeholder rows.