Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (onchain-ui-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-datasheet-grid
An Airtable-like / Excel-like component to create beautiful spreadsheets.
Feature rich:
- Dead simple to set up and to use
- Supports copy / pasting to and from Excel, Google-sheet...
- Keyboard navigation and shortcuts fully-supported
- Supports right-clicking and custom context menu
- Supports dragging corner to expand selection
- Easy to extend and implement custom widgets
- Blazing fast, optimized for speed, minimal renders count
- Smooth animations
- Virtualized rows and columns, supports hundreds of thousands of rows
- Extensively customizable, controllable behaviors
- Built with Typescript
Install
npm i react-datasheet-gridUsage
import {
DataSheetGrid,
checkboxColumn,
textColumn,
keyColumn,
} from 'react-datasheet-grid'
// Import the style only once in your app!
import 'react-datasheet-grid/dist/style.css'
const Example = () => {
const [ data, setData ] = useState([
{ active: true, firstName: 'Elon', lastName: 'Musk' },
{ active: false, firstName: 'Jeff', lastName: 'Bezos' },
])
const columns = [
{
...keyColumn('active', checkboxColumn),
title: 'Active',
},
{
...keyColumn('firstName', textColumn),
title: 'First name',
},
{
...keyColumn('lastName', textColumn),
title: 'Last name',
},
]
return (
<DataSheetGrid
value={data}
onChange={setData}
columns={columns}
/>
)
}