What stack is the table written for?

React and Ant Design. The separate cell-editing demo references ExcelTable, which is missing from the supplied files. The workflow adapts the chosen source to your repository; standalone HTML output is a separate requested adaptation.

Does it connect to a spreadsheet or hosted database?

No. The provided table uses local sample rows and has no external data loader or save integration. Keep libraries and assets local if the final page needs to run without remote requests.

Can I restyle the grid?

Yes. Edit the ConfigProvider theme and the surrounding component styling using the visual guide. Column widths and value formatting also need attention when replacing the sample data; a single color change does not solve those layout decisions.

Can I edit cells immediately?

Not in the delivered Ant Design table. The separate demo describes an editing callback but imports a component that is absent. Cell editors, validation and persistence must be implemented before promising an editable spreadsheet.

Will numeric columns sort correctly?

Sorting is not configured yet. Add numeric comparators using raw numeric values for price, stock and ratings, then verify zero, large values and any empty cells. The fact that the table library supports sorting does not enable it automatically.

Spreadsheet Data Grid

Previews from the publisher

Present product-style records in an editable-source table with clear column definitions and compact pagination. Spreadsheet Data Grid includes an Ant Design read-only table and a separate editing demo that references an additional component not present in the package. It is a table starting point, not a complete spreadsheet application or an already working cell editor.

What you get

A React/Ant Design table containing product, segment, price, stock and rating columns. Ten sample products are stored as plain row objects with stable keys and paired column definitions.
Six-row pagination and horizontal scrolling, with a warm themed card surface, teal primary color and configurable typography and radius through ConfigProvider.
A separate demonstration of a cell-change callback and local data state, referencing ExcelTable. That component is not included, so the demo does not establish working cell editing in the delivered table.
Editable source and the shared visual contract for colors, type, radius, icon strokes and motion, with instructions to adapt repository conventions and keep all assets local.

Before you choose

Choose this as a read-only product-record table foundation. If editing is essential, specify the validation and saving flow first and budget for that integration. A table that visually resembles a spreadsheet should not imply formulas, file exchange or persistence that the delivered source does not contain.

Good fit

A product or inventory summary that needs readable rows and a consistent table presentation.
A developer looking for a configured table foundation and direct ownership of column and row data.
A project prepared to align the table theme with its page and implement any editing, sorting or persistence needed beyond the provided read-only view.

Not for

A complete Excel replacement, an out-of-the-box editable spreadsheet or a maintained dependency-free npm package. The main component uses Ant Design.
Automatic compatibility with an established design system without reviewing its theme values and column layout.
Live streaming, large-data virtualization, formulas, spreadsheet-file import/export or persistent storage already connected.

How to use

You say

/data-visualization-spreadsheet-grid Add the Spreadsheet Data Grid component to my dashboard using the data I provide. Inspect the existing page and framework before integrating it; ask for missing data rather than inventing values.

Inspect the destination project and integrate the supplied Ant Design table with its React and styling requirements. Do not use the editing demo as proof that ExcelTable is available; choose explicitly whether this page needs display only or a separately implemented editor.
Prepare field definitions, stable row keys and actual product records. Use numeric price, stock and rating values for calculations and sorting, and format them for display rather than relying on the sample’s string values.
Configure column sorting and validation where required. The supplied columns have no sorter definitions and the table has no cell editor. If editing is added, define allowed values, errors and how changes will be saved.
Apply ConfigProvider colors, font and radius with the page’s shared styles, keeping fonts/icons local. Make the most important identity and quantity columns easy to find before choosing how the remaining columns scroll.
Test both pages of a collection larger than six records, empty data, long names and phone-width horizontal scroll. Verify any added numeric sorting or edits against known records and run the project’s type/build checks. Connect actual loading and persistence separately and confirm that saved changes survive a reload before calling the page editable in production.

Requirements and costs

You bring: Not collected yet
Dependencies: Ant Design — required
Outside costs: Not collected yet
Publisher testing: v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT