2.0.6 • Published 5 years ago

@bhunjadi/react-data-grid v2.0.6

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

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 npm-badge azure-badge coverage-badge

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

Install

npm install react-data-grid

Usage

import ReactDataGrid from 'react-data-grid';

const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];
const rows = [{ id: 1, title: 'Title 1' }, ...];
const rowGetter = rowNumber => rows[rowNumber];

const Grid = () => {
  return <ReactDataGrid
    columns={columns}
    rowGetter={rowGetter}
    rowsCount={rows.length}
    minHeight={500} />);
}

Exports

Aside from the grid this package exports:

namesource
RowComparerRowComparer
RowsContainerRowsContainer
RowRow
CellCell
HeaderCellHeaderCell
shapesshapes
_helpers_helpers
2.0.6

5 years ago

2.0.5

5 years ago

2.0.3

6 years ago

2.0.4

6 years ago

2.0.2

6 years ago

2.0.0

6 years ago

2.0.0-alpha.2

6 years ago

2.0.0-alpha.1

6 years ago

1.0.25

6 years ago

1.0.24

6 years ago

1.0.23

7 years ago

1.0.22

7 years ago

1.0.21

7 years ago

1.0.20

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

2.0.1

8 years ago