@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: '[email protected]' },
    { id: '2', name: 'Bob',   email: '[email protected]' },
  ],
};

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