Getting started

A spreadsheet-style data table for React — editable cells, formulas, rich column types, cell and border formatting, a query builder, find & replace, shareable views, and a "build your own" blank sheet. It is a full spreadsheet UI, not just a grid.

:::info Built on TanStack Table This project is an extension of TanStack Table v8. It began as the official "kitchen-sink" example and grew into a complete spreadsheet on top of it — TanStack Table remains the core engine (columns, sorting, filtering, grouping, pinning, pagination, the row model).

If you use this project, please also star and support TanStack Table. Attribution is preserved in the LICENSE. :::

Install

npm i @jugaaadi/table

react and react-dom 18+ are peer dependencies — bring your own.

Use

import { SpreadsheetTable } from '@jugaaadi/table'
import '@jugaaadi/table/style.css' // import the stylesheet once

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'age', header: 'Age' },
]
const data = [
  { name: 'Ada', age: 36 },
  { name: 'Alan', age: 41 },
]

export default function App() {
  return <SpreadsheetTable columns={columns} data={data} />
}

columns are TanStack Table ColumnDefs, re-exported as ColumnDef.

Import @jugaaadi/table/style.css once. The component ships its compiled styles, so you do not need Tailwind configured in your own app.

A blank N×M sheet

Give rows and cols instead of columns/data to drop the user into an empty sheet they fill in themselves — columns col1…colN, editable, with add row and add column built in:

<SpreadsheetTable rows={4} cols={4} onDataChange={(rows) => console.log(rows)} />

Headers on a sheet like this are plain text fields: click one and type.

Reading edits back out

onDataChange is the main one — it fires after any change with all current rows, and does not fire on initial mount:

<SpreadsheetTable
  columns={columns}
  data={data}
  onDataChange={(rows) => save(rows)}
  onCellChange={(rowIndex, columnId, value) => audit(rowIndex, columnId, value)}
/>

See Integrating for the full prop and event table.

Keyboard

The grid is fully keyboard-driven. Press ? anywhere in the table for the complete shortcut reference, searchable. A few worth knowing up front:

Keys	Action
Enter / F2	Edit the active cell
Tab / Shift+Tab	Move one cell right / left
Ctrl+A	Select the whole grid
Ctrl+C / X / V	Copy / cut / paste
Ctrl+Q	Focus the search
Ctrl+H	Find & replace
Ctrl+Z / Y	Undo / redo

Disclaimer

Provided as is, without warranty of any kind. The author is not responsible for how you use it or for any loss arising from its use — verify your own numbers.

If you think a feature is genuinely missing, please open a pull request.