Excel-Style Table

Component 217

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Excel-Style Table to your project and fits it to your theme.

Code

How Excel-Style Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}