Download
This small component allows you to integrate an excel-like datasheet. By default, the spreadsheet handles keyboard navigation and copy-pasting of cells. This example computes expression underneath using mathjs. On an invalid expression, the cell changes color to show the error. Note that react-datasheet does not handle the validation nor the formula computation. Custom renderers allow you to add significant new capabilities to your sheets without requiring changes to react-datagrid itself. This example allows you to reorder both the columns and the rows using drag and drop. This is implemented by using custom components to render the main table (including a custom header) and each row. The drag handler for the rows is the gray cell at the beginning of each row. The "Rating" column also shows how to specify custom cell editing and viewing components.
Features
- Simple and highly customizable excel-like spreadsheet
- Basic datasheet
- Formula datasheet
- Sheet with components
- Sheet with custom renderers
- Sheet with custom structure
Project Samples
