Back to all frameworks

CSV importer and spreadsheet editor for Next.js

Install @updog/data-editor, mark the component a Client Component with "use client", and embed a full import and edit flow in your App Router app. 100% client-side, no upload server, flat $199/domain.

Importer.tsx 
"use client";

import { useState } from "react";
import { DataEditor } from "@updog/data-editor";
import "@updog/data-editor/styles.css";

type Row = { name: string; passport: string };

const columns = [
  { id: "name", title: "Name" },
  {
    id: "passport",
    title: "Passport",
    validators: [{ type: "required", message: "Passport is required" }],
  },
];

export default function Importer() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open Importer
      </button>
      <DataEditor<Row>
        apiKey="YOUR_API_KEY"
        open={open}
        onClose={() => setOpen(false)}
        columns={columns}
        primaryKey="passport"
        onComplete={(result) => {
          console.log(result);
          setOpen(false);
        }}
      />
    </>
  );
}
View the full example on GitHub

Try it in the browser

Install the package, add your columns, render the component. Free on localhost. Every feature included.

Go to console Read the docs