@bhunjadi/react-data-grid
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.6 • Public • Published

    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:

    name source
    RowComparer RowComparer
    RowsContainer RowsContainer
    Row Row
    Cell Cell
    HeaderCell HeaderCell
    shapes shapes
    _helpers _helpers

    Install

    npm i @bhunjadi/react-data-grid

    DownloadsWeekly Downloads

    156

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    1.18 MB

    Total Files

    339

    Last publish

    Collaborators

    • bhunjadi