Data Table 10

Data table with tabbed order status filters, button-style payment filters, global search, and full pagination.

Example

A feature-rich data table with sorting, global filtering, hideable columns, Tabbed filters and full pagination controls with responsive design.

	Purchased		Order Status	Payment Status	Payment Method
#301456	Leather Jacket 3	Sarah Johnson	Ready for pickup	Paid	****7321
#789123	Blue Sneakers 2	Michael Brown	Fulfilled	Paid	****4509
#654321	Red Hoodie 4	Emily Davis	Fulfilled	Pending	****9812
#987654	Black Sunglasses 1	David Lee	Unfulfilled	Pending	****6734
#432187	Green Backpack 2	Lisa Wang	Fulfilled	Paid	****2901
#567890	Silver Watch 1	James Carter	Ready for pickup	Pending	****8456
#234567	Gray Scarf 3	Rachel Kim	Fulfilled	Refunded	****1234
#876543	Purple Dress 2	Thomas Allen	Unfulfilled	Partially refunded	****5678
#345678	White Hat 1	Anna Patel	Ready for pickup	Paid	****9012
#456789	Brown Boots 4	Robert Singh	Fulfilled	Paid	****3456

Showing 1 to 10 of 25 rows

Rows per page

Page 1 of 3

Data Table 10 combines multiple filters and pagination:

Tabs: Filter by order status (All, Processing, Shipped, Pending, Delivered) with counts.
Button filters: Payment status (All, Paid, Pending, Failed).
Global search: Search input filters across columns.
Pagination: Page size selector, previous/next, and row range display.

Uses Table, Button, Input, Tabs, NativeSelect, Badge, and TanStack Table.

import { DataTable14 } from "@/components/ui/data-table14";

<DataTable14 data={orderRows} />;

Replace with your order data (orderId, customer, orderStatus, paymentStatus, total).