React-React data grid v0.13.13: Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

icon
Latest Release: v0.13.13

react-data-grid npm-badge bundlesize-badge ci-badge

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

Comments

  • Bump react-router-dom from 5.3.0 to 6.2.1
    Bump react-router-dom from 5.3.0 to 6.2.1

    Dec 20, 2021

    Bumps react-router-dom from 5.3.0 to 6.2.1.

    Release notes

    Sourced from react-router-dom's releases.

    v6.2.1

    This release updates the internal history dependency to 5.2.0.

    Full Changelog: https://github.com/remix-run/react-router/compare/v6.2.0...v6.2.1

    v6.2.0

    ? Bug fixes

    • Fixed the RouteProps element type, which should be a ReactNode (#8473)
    • Fixed a bug with useOutlet for top-level routes (#8483)

    ✨ Features

    • We now use statically analyzable CJS exports. This enables named imports in Node ESM scripts (See the commit).

    New Contributors

    Full Changelog: https://github.com/remix-run/react-router/compare/v6.1.1...v6.2.0

    v6.1.1

    In v6.1.0 we inadvertently shipped a new, undocumented API that will likely introduce bugs (#7586). We have flagged HistoryRouter as unstable_HistoryRouter, as this API will likely need to change before a new major release.

    Full Changelog: https://github.com/remix-run/react-router/compare/v6.1.0...v6.1.1

    v6.1.0

    ? Bug fixes

    • Fixed a bug that broke support for base64 encoded IDs on nested routes (#8291)

    ✨ Features

    • <Outlet> can now receive a context prop. This value is passed to child routes and is accessible via the new useOutletContext hook. See the API docs for details. (#8461)
    • <NavLink> can now receive a child function for access to its props. (#8164)

    ? Enhancements

    • Improved TypeScript signature for useMatch and matchPath. For example, when you call useMatch("foo/:bar/:baz"), the path is parsed and the return type will be PathMatch<"bar" | "baz">. (#8030)
    • A few error message improvements (#8202)

    New Contributors

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    Reply
  • fixes #2761
    fixes #2761

    Dec 20, 2021

    • Users can now close the context-menu by clicking outside.
    • Tested with Edge Version 96.0
    Reply
  • After column resize column width styling does not re-render and update after global state mutation
    After column resize column width styling does not re-render and update after global state mutation

    Dec 21, 2021

    Describe the bug

    Column Width does not re-render through state mutation after column resize.

    To Reproduce

    1. Have global state for column and row
    2. Resize Column vis mouse drag
    3. Update global state of a column's width

    Link to code example: small demo

    Expected behavior

    Column width's styling should update after global state mutation.

    Environment

    "react-data-grid": "^7.0.0-beta.7", "react-dom": "^17.0.2",

    Additional context

    I've briefly looked into the internals of DataGrid. I believe React.Memo is preventing updating of column width after columnReize.

    Any help will be great

    Bug 
    Reply
  • ERROR in ./node_modules/react-data-grid/lib/bundle.js (React with Typescript)
    ERROR in ./node_modules/react-data-grid/lib/bundle.js (React with Typescript)

    Dec 25, 2021

    Describe the bug

    Created a new project using npx create-react-app my-app --template typescript

    Installed react-data-grid same as mentioned in the quick start section but after running my app i am getting following error

    image

    To Reproduce

    Couldn't found anything to reproduce it

    Expected behavior

    i have tried the Quick start section instructions so it should be come up with the basic table.

    Environment

    • react-data-grid version: 7.0.0-beta.7
    • react/react-dom version: 17.0.2 / 17.0.2

    image

    Additional context

    I have tried some stackoverflow answers but couldn't succeed.

    tsconfig file image

    Bug 
    Reply
  • I had attempt to migrate from Slick.Grid to React-Data-Grid and found that need introduce  some changes.
    I had attempt to migrate from Slick.Grid to React-Data-Grid and found that need introduce some changes.

    Jan 10, 2022

    Hi!

    I have some changes. You can use something from it. (Note: Now it under development and can contain the bugs because we already introduced it in our software, but I think that you can reuse some things from it for main branch)

    AV: refactored EditCell, props, layout to use instead of SlickGrid. New rule: only client-code can change data rows.

    AV: Header: Refactored layout to Header/Viewport, added scroll synchronization viewport to Header. Because position:sticky work wrong. And scroll position does not correspond to outer components. (when required scroll sync) AV: extracted Prop classes to single files. (It's good C++ way header+implementaton) AV: added experiment with ClassComponent for Cell - CellClass. it more simplified code but same performance. AV: added extra DataGridProps: onBeforeEditCell, onBeforeCellEditorDestroy, onContextMenu, onHeaderContextMenu, onKeyDown - required for us and implemented in Slick.Grid. AV: added extra methods to DataGridHandle: updateRow(), inEditor() AV: fixed keyboard behaviour: ask client-code for processing keys, skip default behaviour on when modification keys is active AV: Editor: changed editor behaviour, added interface ICanCommit to work with statefull editor. Editor can commit change or not. But Editor MUST NOT change row directly and 'by-design'. Editor can change row only after ::commit(). AV: Header: every header must have @title. because caption can be bigger than cel size. AV: DataGrid: introduced 'props' variable because copy-paste (Props/local) is not good idea. AV: DataGrid: Added caching check for rows.length - Every time copying rows array is not good idea to update components. Because User can loaded 2000-5000 items. But we have changed only 1-2 rows. AV: DataGrid: changed onRowUpdated() behaviour: sent only updated rows , User have self own unchanged rows. Added argument:'previousRow' - because we need make diff of changes. Original row we receive from Editor or location. AV: added ContextMenu handlers.

    Reply
  • Module not found: Error: can't resolve 'react/jsx-runtime'
    Module not found: Error: can't resolve 'react/jsx-runtime'

    Jan 14, 2022

    Describe the bug

    Right out of the box:

    Compiled with problems: ERROR in ./node_modules/react-data-grid/lib/bundle.js 3:0-56

    Module not found: Error: Can't resolve 'react/jsx-runtime' in '...\node_modules\react-data-grid\lib' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

    To Reproduce

    1. npx create-react-app my-app --template typescript
    2. npm install
    3. npm run start
    4. npm install react-data-grid
    5. create a new page and add 'import DataGrid, { SelectColumn } from 'react-data-grid';'
    6. Add a simple reference in the code such as 'my columns=[SelectColumn, {key: 'name'}];

    Link to code example: see line 15 in Hompage.tsx

    Expected behavior

    Referencing SelectColumn in typescript code should not cause a compile error.

    Environment

    windows 10 [email protected] [email protected]

    -"react": "^17.0.2", -"react-data-grid": "^7.0.0-beta.7", -"react-dom": "^17.0.2",

    Additional context

    It seems that we can solve the problem if we change the version from "react-data-grid": "^7.0.0-beta.7", to "react-data-grid": "7.0.0-canary.30", (without the '^') in all of these places: -package.json -package-lock.json -node-modules/react-data-grid/package.json

    Should we really have to do this? or have we done something wrong?

    Bug 
    Reply
  • Getting warnings with react 15.5+
    Getting warnings with react 15.5+

    Apr 14, 2017

    WHICH VERSION OF REACT ARE YOU USING?

    Officially Supported:
    [ ] v0.14.x
    
    Community Supported:
    [X] v15.0.x
    

    WHICH BROWSER ARE YOU USING?

    Officially Supported:
    [X] IE 9 / IE 10 / IE 11
    [X] Edge
    [X] Chrome
    
    Should work:
    [X] Firefox
    [X] Safari
    

    I'm submitting a ... (check one with "x")

    [X] bug report
    [ ] feature request
    [ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md
    

    Current behavior

    When you try to run with React 15.5.X you get the following warnings...

    Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
    warning.js:36 Warning: Draggable: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
    

    Expected/desired behavior

    No warnings

    Reproduction of the problem

    Just use the right version of React

    What is the motivation / use case for changing the behavior?

    React upgrage

    Both stack traces show it coming from RDG, I double checked and didn't see any open issues.

    Reply
  • add PropTypes as a separate package
    add PropTypes as a separate package

    Sep 27, 2017

    Fixes #744

    Description

    Because @GlebDolzhikov did not respond since May, I decided to fork, fix, and pull request his original changes for PropType validations.

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines: https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md
    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    [x] Bugfix
    [ ] Feature
    [ ] Code style update (formatting, local variables)
    [ ] Refactoring (no functional changes, no api changes)
    [ ] Build related changes
    [ ] CI related changes
    [ ] Other... Please describe:
    

    What is the current behavior? (You can also link to an open issue here)

    With recent React 16 release application does not work with it, because original PropTypes were removed from the core library into a separate.

    What is the new behavior?

    Application uses separate external prop-types library to validate incoming props.

    Does this PR introduce a breaking change? (check one with "x")

    [ ] Yes
    [x] No
    

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    Reply
  • Upgrade React to v15
    Upgrade React to v15

    Apr 12, 2016

                                                                                                                                                                                                           
    Reply
  • [V2] Missing css files
    [V2] Missing css files

    Jan 26, 2017

    WHICH VERSION OF REACT ARE YOU USING?

    Officially Supported:
    [ ] v0.14.x
    
    Community Supported:
    [x] v15.0.x
    

    WHICH BROWSER ARE YOU USING?

    Officially Supported:
    [ ] IE 9 / IE 10 / IE 11
    [ ] Edge
    [x] Chrome
    
    Should work:
    [ ] Firefox
    [ ] Safari
    

    I'm submitting a ... (check one with "x")

    [x] bug report
    [ ] feature request
    [ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md
    

    Current behavior

    Installed react-data-grid in my (Meteor) project with:

    npm install --save react-data-grid
    npm install --save react-data-grid-addons
    

    Building the application results in:

    Unable to resolve some modules:
    
      "!!./../node_modules/css-loader/index.js!./react-data-grid-header.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
    (web.browser)
      "!!./../node_modules/css-loader/index.js!./react-data-grid-core.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
    (web.browser)
      "!!./../node_modules/css-loader/index.js!./react-data-grid-row.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js (web.browser)
      "!!./../node_modules/css-loader/index.js!./react-data-grid-cell.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
    (web.browser)
      "!!./../node_modules/css-loader/index.js!./react-data-grid-checkbox.css" in /Users/willem/meteor/msfsupport/node_modules/react-data-grid/dist/react-data-grid.js
    (web.browser)
    

    There are no css files in node_modules/react-data-grid or node_modules/react-data-grid

    Expected/desired behavior

    I should expect to see css files in node_modules/react-data-grid or node_modules/react-data-grid

    wontfix 
    Reply
  • (abandoned) Feature proposals
    (abandoned) Feature proposals

    May 3, 2017

    Hey everyone,

    Bit of background first — I’m JP, one of the original maintainers of React Data Grid.

    I’m opening this issue as a place to track and discuss a set of potential new features for the next version of the Grid project.

    Below is a list of notable features I personally want to explore for V3; beyond a bunch of bug-fixes and stability improvements.

    If you have any additional features / comments / suggestions / can help, please leave a comment below.


    ⚠️ ☢️

    DISCLAIMER: This is not an official announcement of new features. I'm trying to gather feedback / gauge interest on this proposed feature set.

    ⚠️ ☢️


    Core

    • Even more performant rendering perf
    • Nested Grids
    • Universal (aka Isomorphic aka SSR) Rendering
    ssr

    Columns

    • Responsive improvements
      • "Hide Order" for Columns at certain breakpoints
    • APIs to programmatically resize / reorder Columns & Rows on the client
    • Select cells by column
    • Client-side create / delete / hide Columns
    • Left / Right Column Freeze

    Rows

    • Dynamic row heights
    dynamic - Drag to resize row height per row (+ API to programmatically resize / reorder)

    resizable-rows

    • Swap Column Formatters & Editors dynamically on the client
    • Freezable Rows (1 or more)

    Cells

    • ColSpan Cells
    • RowSpan Cells
    • Dynamic Styles (dirty data, server-updated data, required, invalid)
      • thanks @dzwiedziu-nkg

    Editors

    • Formula Cells (=A1+B1+C1)

    Functions

    • Copy / Paste Continuous Cell Ranges (finally!!)
    • Copy / Paste Random Cell Sequences
    • Content-aware fill (Drag-down from "August 2017" to fill with "September 2017", "October 2017", etc)
    • File Import & Exports (.json & .csv)

    Theming

    • Material UI theme
    • Full support for Custom Theming

    Tooling

    • Move back to single NPM package (? - to be discussed w/ Adazzle)
    • preact-data-grid & inferno-data-grid (? - anyone interested in official bindings)
    Reply
  • Getting getDefaultProps warnings with react 15.6+
    Getting getDefaultProps warnings with react 15.6+

    Oct 19, 2017

    Which version of React JS are you using?

    ✅ Officially supported ✅

    • [ ] v15.4.x

    ⚠️ Not officially supported, expect warnings ⚠️

    • [ ] v15.5.x
    • [x] v15.6.x

    ☣️ Not officially supported, expect warnings and errors ☣️

    • [ ] v16.x.x

    Which browser are you using?

    ✅ Officially supported ✅

    • [ ] IE 9 / IE 10 / IE 11
    • [ ] Edge
    • [x] Chrome

    ⚠️ Not officially supported, but "should work" ⚠️

    • [ ] Firefox
    • [ ] Safari

    I'm submitting a ...

    • [x] ? Bug Report
    • [ ] ? Feature Request

    ? Need general support? Not sure about how to use React itself, or how to get started with the Grid? Please do not submit support request here. Instead see

    https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md


    Issue Details

    current behavior:

    Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
    

    image

    desired behavior: no warnings

    motivation: less noise in console warnings and compatibility to upgrade React

    Reply