@codebiba/react-csv-editor

A powerful, feature-rich CSV viewer and editor for React — with a beautiful dark UI, inline cell editing, sorting, filtering, undo/redo, and instant CSV export.

---

✨ Features

Feature	Details
📂 Upload	Drag-and-drop or browse to open any .csv file
✏️ Inline editing	Double-click any cell to edit; Enter / Esc / Tab to confirm or cancel
↩ Undo	20-level undo history
➕ Add rows / columns	Modal forms with auto-detected data types
🗑 Delete	Multi-select rows with checkboxes, bulk delete
🔍 Search	Real-time full-table fuzzy search
🔽 Column filter	Filter by any column value, stack multiple filters
↕️ Sort	Click any header to sort asc/desc; type-aware (numbers, dates, strings)
📊 Sidebar stats	Live row/column/modified/selected counts
🏷 Type inference	Automatic detection of number, date, boolean, string columns
📄 Pagination	50 rows per page
⬇️ Export	Download as .csv or use your own onExport handler
🎨 Beautiful UI	Dark theme with JetBrains Mono + Syne typography

---

📦 Installation

npm install @codebiba/react-csv-editor
# or
yarn add @codebiba/react-csv-editor
# or
pnpm add @codebiba/react-csv-editor

Peer dependencies: react >= 17 and react-dom >= 17 must be installed in your project.

---

🚀 Quick Start

import { CSVEditor } from '@codebiba/react-csv-editor';
import '@codebiba/react-csv-editor/styles';

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <CSVEditor />
    </div>
  );
}

⚠️ The component fills its container. Wrap it in an element with a defined height (e.g. 100vh).

---

🛠 Props

interface CSVEditorProps {
  /** Pre-load data without a file upload */
  initialData?: { headers: string[]; rows: Record<string, string>[] };

  /** Filename shown in the top bar */
  filename?: string;

  /** Called on every data mutation */
  onDataChange?: (data: { headers: string[]; rows: Record<string, string>[] }) => void;

  /** Override the default download behaviour */
  onExport?: (csvString: string, filename: string) => void;

  /** Show the "Load demo data" button in the empty state (default: true) */
  showDemo?: boolean;

  /** Extra CSS class for the root element */
  className?: string;

  /** Inline styles for the root element */
  style?: React.CSSProperties;
}

---

📖 Examples

Load data programmatically

import { CSVEditor } from '@codebiba/react-csv-editor';
import '@codebiba/react-csv-editor/styles';

const data = {
  headers: ['id', 'name', 'email'],
  rows: [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob',   email: 'bob@example.com' },
  ],
};

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <CSVEditor initialData={data} filename="contacts.csv" />
    </div>
  );
}

Controlled data with onDataChange

import { useState } from 'react';
import { CSVEditor } from '@codebiba/react-csv-editor';
import '@codebiba/react-csv-editor/styles';

export default function App() {
  const [csvData, setCsvData] = useState(null);

  return (
    <div style={{ height: '100vh' }}>
      <CSVEditor
        onDataChange={(data) => {
          setCsvData(data);
          console.log('rows:', data.rows.length);
        }}
      />
    </div>
  );
}

Custom export handler (e.g. upload to server)

import { CSVEditor } from '@codebiba/react-csv-editor';
import '@codebiba/react-csv-editor/styles';

export default function App() {
  const handleExport = async (csvString, filename) => {
    const blob = new Blob([csvString], { type: 'text/csv' });
    const formData = new FormData();
    formData.append('file', blob, filename);
    await fetch('/api/upload-csv', { method: 'POST', body: formData });
    alert('Uploaded successfully!');
  };

  return (
    <div style={{ height: '100vh' }}>
      <CSVEditor onExport={handleExport} />
    </div>
  );
}

Inside a Next.js app (App Router)

// app/csv/page.tsx
'use client';

import dynamic from 'next/dynamic';

const CSVEditor = dynamic(
  () => import('@codebiba/react-csv-editor').then((m) => m.CSVEditor),
  { ssr: false }
);

import '@codebiba/react-csv-editor/styles';

export default function Page() {
  return (
    <main style={{ height: '100vh' }}>
      <CSVEditor showDemo />
    </main>
  );
}

---

⌨️ Keyboard Shortcuts

Key	Action
Double-click cell	Enter edit mode
Enter	Confirm edit
Escape	Cancel edit
Tab	Confirm edit and move focus

---

🏗 Development

git clone https://github.com/codebiba/react-csv-editor
cd react-csv-editor
npm install
npm run build   # production build → dist/
npm run dev     # watch mode

---

📄 License

MIT © Aditya Yaduvanshi