react-data-grid-temp

react-data-grid

Install

npm install react-data-grid

Usage

import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' }
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
    />
  );
}

Documentation

• Website
• Changelog
• Contributing

Changelog

v7.0.0-canary.17

• Performance improvements (PR)
• A new rowClass prop (PR)

alpha to canary

• Added:
  • Props:
    • className
    • style
    • onRowsChange
    • onFill
    • onPaste
    • onSelectedCellChange
      • ⚠️ This replaces the onCellSelected and onCellDeSelected props
    • enableFilterRow
      • ⚠️ This replaces the enableHeaderFilters and column.filterable props
    • filters
    • onFiltersChange
    • rows
      • ⚠️ This replace the rowGetter and rowsCount props
    • rowClass
    • defaultColumnOptions
      • ⚠️ This replaces the minColumnWidth and defaultFormatter props
    • groupBy
    • rowGrouper
      • More info in #2106
  • column.cellClass(row) function support:
    • column = { ..., cellClass(row) { return string; } }
  • column.minWidth
  • column.maxWidth
  • column.headerCellClass
  • column.editor
    • New API
  • column.editorOptions
    • More info in #2102
  • column.groupFormatter
    • More info in #2106
  • scrollToRow method
    • ⚠️ This replaces the scrollToRowIndex prop
  • Dark mode support
    • Dark mode is automatically applied following user preference
    • Light and dark modes can be forced by setting the rdg-light or rdg-dark class names.
• Removed:
  • Support:
    • ⚠️ IE11
  • Packages:
    • ⚠️ react-data-grid-addons
  • Props:
    • ⚠️ width
    • ⚠️ height
    • ⚠️ cellContentRenderer
    • ⚠️ contextMenu
      • Check the Context Menu example
    • ⚠️ enableCellSelect
    • ⚠️ enableCellAutoFocus
    • ⚠️ getValidFilterValues
    • ⚠️ onCellCopyPaste
    • ⚠️ onSelectedCellRangeChange
    • ⚠️ onCheckCellIsEditable
      • Use column.editable instead.
    • ⚠️ onGridKeyDown
    • ⚠️ onGridKeyUp
    • ⚠️ onRowDoubleClick
    • ⚠️ onRowsUpdate
      • Use onRowsChange, onFill, and onPaste instead.
    • ⚠️ onHeaderDrop
    • ⚠️ draggableHeaderCell
      • Check #2007 on how to migrate
    • ⚠️ rowGroupRenderer
    • ⚠️ onRowExpandToggle
      • Check #2012 on how to migrate
    • ⚠️ rowsContainer
    • ⚠️ Subrow props: getSubRowDetails, onCellExpand, onDeleteSubRow, and onAddSubRow
      • Check #1853 on how to migrate
    • ⚠️ cellMetaData (from Row and Cell props)
    • ⚠️ value (from column.formatter props)
  • Ref handlers:
    • ⚠️ openCellEditor, use selectCell instead.
  • ⚠️ React elements are no longer supported, please use components instead.
    • For example:

    const column = {
      key: 'example',
      name: 'Example',
    - formatter: <CustomFormatter length={5} />
    + formatter: (props) => <CustomFormatter {...props} length={5} />
    };
    

  • ⚠️ column.events
  • ⚠️ column.getCellActions
    • Check #1845 on how to migrate
  • ⚠️ column.getRowMetaData
  • ⚠️ column.minColumnWidth
  • ⚠️ column.filterable
  • ⚠️ column.draggable
  • ⚠️ cellRangeSelection.{onStart,onUpdate,onEnd}
  • ⚠️ fromRowId, toRowId, and fromRowData from onRowsUpdate argument
  • ⚠️ Stopped exporting HeaderCell
• Renamed:
  • ⚠️ minHeight to height
  • ⚠️ minWidth to width
  • ⚠️ onGridSort to onSort
  • ⚠️ emptyRowsView to emptyRowsRenderer
  • ⚠️ rowKey to rowKeyGetter
  • ⚠️ rowData to row
  • ⚠️ fromRowData to fromRow
  • ⚠️ idx to rowIdx in Row renderer
• Changed:
  • ⚠️ Started publishing ES2019/ESM modules instead of ES5/CommonJS modules.
    • Using @babel/preset-env with core-js is recommended to enable compatibility for the browsers your project aims to support.
  • ⚠️ Improved support for summary rows:
    • summaryRows types are now independent from rows
    • Added column.summaryCellClass and column.summaryFormatter props
    • column.formatter isn't used anymore to render summary row cells.
  • Only visible headers cells are now rendered. #1837
  • ⚠️ the rowKeyGetter prop is now required for row selection.
  • ⚠️ column.cellClass does not affect header cells anymore.
  • ⚠️ onScroll will directly pass the UIEvent rather than the scrollLeft and scrollRight only.
  • ⚠️ The stylesheets are now automatically injected, there is no stylsheet to manually import anymore.

main to alpha

• Added:
  • TypeScript declaration files
  • column.cellContentRenderer
    • More info in this gist
  • summaryRows prop #1773
  • sortColumn and sortDirection props
    • ⚠️ The internal sort states have been removed.
    • Check #1768 on how to migrate.
  • selectedRows and onSelectedRowsChange props
    • ⚠️ Row selection has been reimplemented.
    • A new SelectColumn is now available to import and add a row selection column.
    • Check #1762 on how to migrate.
• Removed:
  • Packages:
    • react-data-grid-examples
      • Use the website as reference, or clone the repo locally and run npm install + npm start
  • Props:
    • ⚠️ onCellsDragged
    • ⚠️ onDragHandleDoubleClick
    • ⚠️ onRows
    • ⚠️ onRowUpdated
    • ⚠️ rowScrollTimeout
    • ⚠️ toolbar
      • Check #1769 on how to migrate
    • ⚠️ isScrolling (from column.formatter props)
  • ⚠️ ContainerEditorWrapper
  • ⚠️ EditorBase
  • ⚠️ setScrollLeft from Row and Cell renderers
    • setScrollLeft instance method was previously required on custom Cell and Row renderers and it can be safely removed now.
    • More info in #1793
  • ⚠️ Dropped ImmutableJS support.
  • ⚠️ Dropped dynamic height row support.
    • This was not officially supported, but it was still possible to implement dynamic rows via custom Row renderer. This was a buggy feature so it has been removed.
  • ⚠️ Removed row reordering support.
• Renamed:
  • ReactDataGrid to DataGrid
• Changed:
  • ⚠️ The stylesheets are now bundled separately:
    • react-data-grid/dist/react-data-grid.css
  • ⚠️ Reimplemented stylesheets, renamed various class names #1780
    • No longer depends on bootstrap
  • Resizing a column now immediately resizes all its cells instead of just its header.
  • Improved performance across the board.

react-data-grid-addons

• ⚠️ react-data-grid-addons has no default export anymore
  • Use import * as DataGridAddons from 'react-data-grid-addons'; instead
• ⚠️ The stylesheets are now bundled separately:
  • react-data-grid-addons/dist/react-data-grid-addons.css
• Removed:
  • ⚠️ AutoComplete editor
  • ⚠️ Utils