DataTable

data

A powerful data table component with sorting, filtering, and pagination built on TanStack Table.

Preview

Name	Email	Status
Alice Johnson	alice@example.com	Active
Bob Smith	bob@example.com	Inactive
Carol White	carol@example.com	Active

Rows per page:

Page 1 of 1

Installation

npm install @launchapp/design-system

Import

import { DataTable } from "@launchapp/design-system";

Examples

Basic Data Table

const columns = [  { accessorKey: "name", header: "Name" },  { accessorKey: "email", header: "Email" },  { accessorKey: "status", header: "Status" },];const data = [  { name: "Alice", email: "alice@example.com", status: "Active" },  { name: "Bob", email: "bob@example.com", status: "Inactive" },];<DataTable columns={columns} data={data} filterColumn="name" />

Props

Prop	Type	Default	Description
`columns`*	`ColumnDef<TData, TValue>[]`	—	Column definitions from TanStack Table.
`data`*	`TData[]`	—	The data array to display.
`filterColumn`	`string`	—	Column key to use for the filter input.
`filterPlaceholder`	`string`	`"Filter..."`	Placeholder for the filter input.

← PreviousContextMenu

Next →DatePicker