Excel-like grid component built with React, with editors, keyboard navigation, copy & paste
Questions tagged [react-data-grid]
231 questions
4
votes
1 answer
add custom prop to Component instance(not via parent) - react-data-grid
Just to provide broader context -
My eventual goal is to enhance editable Cell with "synced" icon if synced with back-end.
I went on trying to add custom prop to a specific editable Cell, to indicate syncedWithBackEnd = true/false, then have custom…
Vano
- 1,416
- 1
- 13
- 26
4
votes
2 answers
Gettting React.createElement: type is invalid -- expected a string ... but got: undefined
I am trying to copy this example using react data grid into my Typescript project. I created the following class to match the one provided....
import * as React from "react";
import ReactDataGrid from "react-data-grid";
interface PxGridProps…
Jackie
- 21,969
- 32
- 147
- 289
4
votes
2 answers
How to create a link in React Data Grid?
I'm using this adazzle component: https://github.com/adazzle/react-data-grid
I am trying to figure out how to create a clickable link. They have an example of a cell formatter here:…
kidcapital
- 5,064
- 9
- 46
- 68
3
votes
0 answers
react-data-grid | how to use multiple header renderer
We are upgrading from version 5 to 7.0.0-canary.48 of react-data-grid. In version 5, we have both header filters and column reordering features. Not sure how can we implement both with the latest version.
I found a couple of examples of header…
Arun
- 158
- 3
- 17
3
votes
1 answer
React Data Grid failing to compile
I recently install react-data-grid component, and started to try to test it out. It should work from the documentation but I get a compilation error that I am not understanding. I would appreciate some help. Thanks.
Below is the error. I am…
Derrick Omanwa
- 457
- 1
- 5
- 23
3
votes
1 answer
ReactDataGrid row selection does not work
I am trying to build data table using react and react-data-grid version "^7.0.0-canary.16",
The render method looks like this:
render() {
return (
Ivan Novograd
- 41
- 3
3
votes
0 answers
How to merge React Data Grid with react-infinite-scroll-component?
I want to use React Data Grid with the react-infinite-scroll-component, is there any possibility to use it together.
The reason I want to use together to utilize the advantage of data grid features.
I tried to use "infinite scroll with…
Usman
- 125
- 3
- 10
3
votes
0 answers
react-data-grid horizontal scrolling problem
I encountered two buggy scrolling behaviors with react-data-grid. One is the table header's delayed scrolling compared to the table body. The other one is the frozen columns' stuttering behavior. Both are only observed when scrolling with trackpad…
Liam
- 48
- 5
3
votes
1 answer
How to get rid of console warning "enableRowSelect has been deprecated... Please use rowSelection instead.""
)
I'm using React Data Grid(https://adazzle.github.io/react-data-grid/) a few times in my app. I've noticed that there is a console warning for a prop "enableRowSelect", that prints whether you are using the aforementioned prop or not.
Console…
YoyoO
- 71
- 6
3
votes
0 answers
Remove vertical scrollbar from react-data-grid
I want to remove the vertical scroll bard from react-data-grid. I didn't find any configuration setting for the same. However, I manage to do it with css but I can't adjust the column to take 100% width as the space still exits in header column row.…
Jitender
- 7,593
- 30
- 104
- 210
3
votes
1 answer
How to set color of the text in a cell programatically
Is is possible to set color of the text in a cell programmatically?
Well my scenario is i have some numbers filling in the data-grid. I want to color them according to their values. I'm kind of lost here because i didn't found a way to customize a…
Nimesha Kalinga
- 262
- 4
- 17
3
votes
1 answer
How to create custom row renderer in react-data-grid
I tried this to render custom row in react-data-grid. But how can I create custom row for image. I have two columns named image_large and image_small. Code for custom row renderer is given below:
Md Isfar Uddin
- 692
- 11
- 19
3
votes
0 answers
Does react-data-grid support pagination? Cannot find it in the examples
Is there any pagination support?
UI controls for previous and next page and also the input for page number so that user can jump right into the specified page?
Aaron Li
- 103
- 2
- 9
3
votes
1 answer
react-data-grid variable height rows
I have a react data grid that needs variable row height.
this.grid = node}
enableCellSelect
columns={columnDefs}
rowGetter={this.rowGetter(this)}
rowsCount={this.props.table.length}
…
Dan Littlejohn
- 1,329
- 4
- 16
- 30
3
votes
3 answers
React Data Grid Filters Enabled (and open) by default
Is there a way to enable filters to be open (displayed) by default within React Data Grid? Preferably one that allows me to avoid passing in the toolbar={
Jameson Lyon
- 31
- 1
- 4