README.md

Forked React Data Grid

This is a forked react-data-grid (v7.0.0-alpha.22).

Added features:

• multiple column sorting
• keeping all rows in DOM (no recycling)
• option ignoreScrollbarSize which affects ColumnMetrics calculation (for grids without scrollbar)
• column option cellTitle which can provide title for the cell
• passing initial filters to grid
• cellContext prop which is passed to cell formatter
• renderSortableCellContent prop overrides default content of SortableHeaderCell allowing customization of sort arrow

Multiple column sorting

Example

handleMultipleColumnSort(sort) {
  /**
   * sort will be an array
   * for empty sort, sort will still be array with length === 0
   * each object of array is like {column, direction} where column is column.key from columns definition
   * */
}

render() {
  return (
    <ReactDataGrid
      multipleColumnsSort
      onGridMultipleColumnsSort={this.handleMultipleColumnSort}

      // optionally (default: false)
      // this forces user to press Ctrl (or Cmd on Mac OS) to be able to do multiple sort, 
      // without Ctrl it would overwrite the last value and act as single sort (but still pass an array to handleMultipleColumnsSort)
      requireCtrlForMultipleColumnsSort
      ...
    />
  );

Keep all rows in DOM

Example

<ReactDataGrid
  keepAllRowsInDOM
  ...
>

Can be useful if for example you are using expandable rows, etc.

React Data Grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

http://adazzle.github.io/react-data-grid/

Overview

ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React

Installation

The easiest way to use react-data-grid is to install it from npm and build it into your app with Webpack.

npm install react-data-grid

You can then import react-data-grid in your application as follows:

import ReactDataGrid from 'react-data-grid';

Versions In This Repository

• master - commits that will be included in the next minor or patch release
• next - commits that will be included in the next major release (breaking changes)

Most PRs should be made to master, unless you know it is a breaking change.

To install the latest unstable version, you can run

npm install react-data-grid@next

Themes

We use Bootstrap. If you want your Grid to get the "default" styling like the picture above, you'll need to include it separately.

npm install bootstrap

and then import the css from the dist folder when bootstrapping your application

import 'bootstrap/dist/css/bootstrap.css';

Migrations

If you intend to do a major release update for you react-data-grid check the migration documents.

Features

• Lightning fast virtual rendering
• Can render hundreds of thousands of rows with no lag
• Keyboard navigation
• Fully editable grid
• Rich cell editors like checkbox and dropdown editors, complete with keyboard navigation
• Custom cell Editors - Easily create your own
• Custom cell Formatters
• Frozen columns
• Resizable columns
• Sorting
• Filtering
• Context Menu
• Copy and Paste values into other cells
• Multiple cell updates using cell dragdown
• Association of events of individual columns

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

Dev server, publishing

Publish:

# build both version
npm run build
npm run build-commonjs

# publishing directly
cd packages/react-data-grid
npm publish

Running

# build first
npm run build
# run dev server
npm run start

# when source has changed, build again and start