patrick-jones / react-datasheet-ex

A collection of composable custom renderers for react-datasheet

Extensions for React-Datasheet

React-Datasheet provides a strong core of data grid functionality that can be easily extended to support different behaviors through it's use of render props. This packages adds custom renderers to support:

• Reordering columns and rows via drag-and-drop
• Resizing columns by dragging

Installation

Install from npm (install react-datasheet also):

$ npm install --save react-datasheet-ex 

To use the drag-and-drop features, install react-dnd as well:

$ npm install --save react-dnd react-dnd-html5-backend

Import as needed:

import {Sheet, Row} from 'react-datasheet-ex';
import {DragDropHeader, DragDropRow} from 'react-datasheet-ex/drag-drop';
import {WidthResizeHandle, ResizableHeaderContainer, ResizableHeader} from 'react-datasheet-ex/resize';

// we need a few styles, too
import 'react-datasheet-ex/react-datasheet-ex.css';

Documentation

Storybook examples and documentation here: https://patrick-jones.github.io/react-datasheet-ex/

The story source code is also a good place to look for guidance.