https://react-datasheet-grid.netlify.app/

Skip to main content
[?] If you like React-Datasheet-Grid, give it a star on GitHub and
follow us on Twitter!
React Datasheet GridFeaturesDoc
NPMGitHub
Search

React Datasheet Grid

A| React component to create beautiful spreadsheets

Active
1
[*]
2
[ ]
Add [1                   ] rows
Getting started
 

Partner

Tggl.io is the number one solution for feature flagging and AB
testing. It allows your technical and product teams to work together
to ship better quality product in less time while improving
conversion.

---------------------------------------------------------------------

const [rows, setRows] = useState([])

return (
  <DataSheetGrid
    value={rows}
    onChange={setRows}
    columns={columns}
  />
)

Easy to use

React Datasheet Grid is simpler to use than a good old <input />,
just plug your state and you are good to go.

Active
1
[ ]
2
[*]
3
[ ]
4
[ ]
5
[*]
6
[ ]

Fast

DSG is optimized for speed and can easily handle hundreds of
thousands of rows thanks to its virtualized architecture.

Renders have been optimized to the strict minimum, follow the
performance guides to get the most out of DSG.

[custom-wid]

Customizable

Control every behavior of the spreadsheet, implement you own widgets,
and customize the style of DSG to match your app.

Feature rich

[logos]

  * Supports copy / pasting to and from Excel, Google-sheet,
    Notion...
  * Keyboard navigation and shortcuts fully-supported
  * Supports right-clicking and custom context menu
  * Supports dragging corner to expand selection
  * Smooth animations
  * Built with Typescript

Learn more