Components
Loading preview...
A beautiful, minimal table component with Excel-like features. Double-click cells to edit, click headers to select entire rows/columns, drag to select ranges, and use Ctrl+C to copy data. Supports CSV export and provides smooth, professional interactions.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/excel-style-table"use client";
import React, { useState } from "react";
import { ExcelTable } from "@/components/ui/excel-style-table";
const sampleData = [
["Product", "Category", "Price", "Stock", "Rating"],
["Laptop", "Electronics", "$999", "45", "4.5"],
["Mouse", "Electronics", "$25", "120", "4.2"],
["Keyboard", "Electronics", "$75", "80", "4.7"],
["Monitor", "Electronics", "$350", "30", "4.6"],
["Desk Chair", "Furniture", "$200", "15", "4.3"],
["Coffee Mug", "Kitchen", "$12", "200", "4.1"],
["Notebook", "Stationery", "$8", "150", "4.4"],
["Pen Set", "Stationery", "$15", "100", "4.0"],
["Desk Lamp", "Furniture", "$45", "60", "4.5"],
["Webcam", "Electronics", "$80", "40", "4.3"],
];
export default function ExcelTableDemo() {
const [data, setData] = useState(sampleData.slice(1));
const headers = sampleData[0];
const handleCellChange = (row: number, col: number, value: string) => {
const newData = [...data];
newData[row][col] = value;
setData(newData);
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-8">
<div className="w-full max-w-4xl">
<ExcelTable
data={data}
headers={headers}
editable={true}
onCellChange={handleCellChange}
/>
</div>
</div>
);
}