How do I use Orders Table in my project?

Copy the OrdersTable source code from https://opensourceui.in/components/orders-table, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Orders Table in a commercial project?

Yes. Opensource UI is MIT licensed. You can use OrdersTable in personal and commercial projects without UI attribution.

Back to Table Components / Table

Orders Table

E-commerce orders table — sort by date, total, or status. The standard admin dashboard orders view.

Preview

Recent orders

Last 7 days

Order	Customer
#3210	Northwind Studio	Mar 8	$248.00	Fulfilled
#3209	Harbor Labs	Mar 8	$92.00	Processing
#3208	Elm & Co.	Mar 7	$156.00	Fulfilled
#3207	Papertrail	Mar 6	$64.00	Cancelled
#3206	Studio Nine	Mar 5	$312.00	Fulfilled

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/table/orders-table.tsx in your project.
4
Import and render:
Example
import { OrdersTable } from "@/components/table/orders-table";
<OrdersTable />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/table/orders-table.tsx

1
2
// Full source: components/components/table/orders-table.tsx
// The Cloudflare worker does not expose the source tree at request time.

Back to Table Components / Table

Orders Table

E-commerce orders table — sort by date, total, or status. The standard admin dashboard orders view.

Preview

Recent orders

Last 7 days

Order	Customer
#3210	Northwind Studio	Mar 8	$248.00	Fulfilled
#3209	Harbor Labs	Mar 8	$92.00	Processing
#3208	Elm & Co.	Mar 7	$156.00	Fulfilled
#3207	Papertrail	Mar 6	$64.00	Cancelled
#3206	Studio Nine	Mar 5	$312.00	Fulfilled

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/table/orders-table.tsx in your project.
4
Import and render:
Example
import { OrdersTable } from "@/components/table/orders-table";
<OrdersTable />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/table/orders-table.tsx

1
2
// Full source: components/components/table/orders-table.tsx
// The Cloudflare worker does not expose the source tree at request time.