Data Table 32 - Spreadsheet grid with keyboard navigationPro

About Data Table 32

Spreadsheet-style editable grid with lettered columns, numbered rows, arrow/Tab/Enter cell navigation, type-to-edit, a formula bar and live computed totals.

Data Table 32 is a pro data table block for React, built on shadcn/ui and Tailwind CSS. It ships as 155 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

• spreadsheet
• grid
• keyboard
• editable
• cells
• excel

Installation

1. Add the Chocolate UI registry to your components.json (see the installation guide).
2. Run the shadcn CLI:

npx shadcn@latest add @chocolate/data-table-32

Uses: kbd, reveal, utils.

Usage

import DataTable32 from "@/components/blocks/data-table-32"

export default function Page() {
  return <DataTable32 />
}

FAQ