Data Table 11

Data table variant with extended features. Built with TanStack Table and the base Table component.

Example

Data table with sub data table

A data table with comprehensive column controls including sorting, pinning, moving, and visibility management

Customer		Status
MC Marcus Chen marcus.chen@blakeui.com	$384.92	Processing	10 items
NP Nina Patel nina.patel@blakeui.com	$567.45	Shipped	11 items
OM Oliver Martinez oliver.martinez@blakeui.com	$892.34	Delivered	12 items
SK Sophia Kim sophia.kim@blakeui.com	$246.78	Pending	7 items
JW Jackson Wu jackson.wu@blakeui.com	$1,234.56	Processing	11 items
ET Emma Thompson emma.thompson@blakeui.com	$678.90	Shipped	18 items
LG Lucas Gonzalez lucas.gonzalez@blakeui.com	$423.67	Delivered	10 items
AR Ava Robinson ava.robinson@blakeui.com	$789.23	Cancelled	7 items
EF Ethan Foster ethan.foster@blakeui.com	$534.12	Processing	11 items
IH Isabella Hayes isabella.hayes@blakeui.com	$312.45	Shipped	12 items

Introduction

Data Table 22 uses the same base Table component and TanStack Table as the standard Data Table. Use it when you need the same table capabilities with a dedicated doc for this variant.

Usage

import { DataTable22 } from "@/components/ui/data-table22";

<DataTable22 />;

For full documentation on columns, pagination, row actions, and extending with sorting and filtering, see the Data Table doc.

API Reference

DataTable22

classNamestring

Default: -

Prop	Type	Default	Description
className	string	-	-