CSV import

Since data is just an array, importing is not a table feature to configure: it's reading a file, parsing it, and calling setData. Upload a file below, or load the sample:

CSV import

Upload a .csv file, or load the sample data to see it parsed into the table.

Upload CSV file…

Upload a CSV or load the sample to see it here

import React, { useState } from 'react';
import DataTable, { type TableColumn } from 'react-data-table-component';

interface Contact {
	name: string;
	email: string;
	company: string;
}

const SAMPLE_CSV = `name,email,company
Aria Chen,[email protected],Acme Corp
Marcus Webb,[email protected],Blue Harbor Inc
Priya Kapoor,[email protected],Candle Systems`;

// Naive CSV parser: no quoted-comma support. For production, use a proper CSV library.
function parseCsv(text: string): Contact[] {
	const [headerLine, ...lines] = text.trim().split('\n');
	const headers = headerLine.split(',').map(h => h.trim());

	return lines.filter(Boolean).map(line => {
		const cells = line.split(',').map(c => c.trim());
		return Object.fromEntries(headers.map((h, i) => [h, cells[i] ?? ''])) as unknown as Contact;
	});
}

const columns: TableColumn<Contact>[] = [
	{ id: 'name', name: 'Name', selector: r => r.name, sortable: true },
	{ id: 'email', name: 'Email', selector: r => r.email, sortable: true, grow: 1 },
	{ id: 'company', name: 'Company', selector: r => r.company, sortable: true },
];

export default function CsvImportDemo() {
	const [data, setData] = useState<Contact[]>([]);
	const [error, setError] = useState<string | null>(null);

	function handleFile(file: File) {
		const reader = new FileReader();
		reader.onload = () => {
			try {
				setData(parseCsv(String(reader.result)));
				setError(null);
			} catch {
				setError('Could not parse that file as CSV.');
			}
		};
		reader.readAsText(file);
	}

	return (
		<div className="space-y-3">
			<div className="flex items-center gap-2 flex-wrap">
				<label className="px-3 py-1.5 text-xs font-medium rounded-md border border-gray-200 text-gray-600 hover:border-gray-300 cursor-pointer">
					Upload CSV file…
					<input
						type="file"
						accept=".csv,text/csv"
						className="hidden"
						onChange={e => e.target.files?.[0] && handleFile(e.target.files[0])}
					/>
				</label>
				<button
					onClick={() => {
						setData(parseCsv(SAMPLE_CSV));
						setError(null);
					}}
					className="px-3 py-1.5 text-xs font-medium rounded-md bg-brand-50 text-brand-700 hover:bg-brand-100"
				>
					Load sample CSV
				</button>
				{error && <span className="text-xs text-red-600">{error}</span>}
			</div>
			<div className="rounded-xl border border-gray-200 overflow-hidden">
				<DataTable
					columns={columns}
					data={data}
					highlightOnHover
					noDataComponent={
						<div className="py-8 text-sm text-gray-400">Upload a CSV or load the sample to see it here</div>
					}
				/>
			</div>
		</div>
	);
}

This demo uses Tailwind utility classes for layout. Swap in your own CSS when copying into your project.

Read the file

Use FileReader to read the uploaded file as text:

function handleFile(file: File) {
  const reader = new FileReader();
  reader.onload = () => setData(parseCsv(String(reader.result)));
  reader.readAsText(file);
}

<input type="file" accept=".csv,text/csv" onChange={e => e.target.files?.[0] && handleFile(e.target.files[0])} />

Parse rows into your row type

A minimal parser is a few lines: split on newlines, split each line on commas, and zip against the header row. It doesn't handle quoted commas; reach for a library likepapaparse if your CSVs need that:

function parseCsv(text: string): Contact[] {
  const [headerLine, ...lines] = text.trim().split('\n');
  const headers = headerLine.split(',').map(h => h.trim());

  return lines.filter(Boolean).map(line => {
    const cells = line.split(',').map(c => c.trim());
    return Object.fromEntries(headers.map((h, i) => [h, cells[i] ?? ''])) as unknown as Contact;
  });
}

Pass it straight to data

No import prop, no adapter: the parsed array is the table's data:

const [data, setData] = useState<Contact[]>([]);

<DataTable columns={columns} data={data} />