Stack Overflow
Stack Overflow

Questions tagged [react-data-grid]

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

Docs http://adazzle.github.io/react-data-grid/#/

Source https://github.com/adazzle/react-data-grid

231 questions
15
votes
5 answers

Material UI datagrid with nested data

How do I render nested JSON data on react material UI data grid. In the sandbox attached I want to show the phone numbers of the users from the json on the data grid-Nested JSON Data Grid
Learner Forever
  • 163
  • 1
  • 1
  • 5
14
votes
1 answer

React-data-grid: create column that is based on another column

In react-data-grid how do I create a column that displays values from another column? I have an array of objects that contain something like the following: { id: 3, latitude: 42.101231231, longitude: -81.123132 } My column definition is…
Coin_op
  • 10,568
  • 4
  • 35
  • 46
12
votes
1 answer

Using react-datepicker in react-data-grid compoent

I am using react-data-grid component. It provides a grid structure with edit and lot more options. When we click on each cell, we are able to edit the content of the cell. In my project, I have a situation like when the date column is focused I want…
yasarui
  • 6,209
  • 8
  • 41
  • 75
10
votes
5 answers

Trying to highlight cell in React-data-grid

I am trying to render the background color on certain columns a certain color, in my react-data-grid (adazzle). The problem is that I am getting this white padding around my cells : How do I get rid of this white padding? I simply followed the way…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
7
votes
3 answers

How can I set the dynamic height of react-data-grid

I have integrated react-data-grid into one of my projects. Over there I want to set the dynamic height of the grid based on the loaded rows. How can I do it?
user11994455
7
votes
3 answers

How to pass percentage value to width to React data grid column

Below is my Reactdata grid code this._columns = [ { key: 'id', name: 'ID', width: 40 }, { key: 'task', name: 'Title', width:100 }, …
pareshm
  • 4,874
  • 5
  • 35
  • 53
6
votes
0 answers

How to integrate Redux-form with Addazle react-data-grid

How could a grid from Adazzle data grid be embedded into a Redux-Form based react component? I have a data grid that uses cell editing. The Adazzle grid uses a state variable of rows and some accessor methods to render the data. It has a handler for…
Dranyar
  • 580
  • 1
  • 10
  • 16
6
votes
1 answer

Can we make some rows non-editable in react-data-grid?

I am using react-data-grid for displaying an editable table in a page. I have used editable: true for enabling editable columns. But i have some rows which are non-editable. How can i control this in row-level? Please suggest a solution. PFB the…
Lini Susan V
  • 1,135
  • 1
  • 8
  • 25
5
votes
4 answers

Maximum call stack exceeded in Mui DataGrid React

I have multiple DataGrid tables in my project, but I cannot figure out what is wrong with this one. I have created a codesandbox example of my problem. If anyone could help I would appreciate it very much. It is probably a dumb mistake codesandbox…
Jova
  • 75
  • 1
  • 7
5
votes
3 answers

My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other

This is my first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other Below is the very basic sample code I am trying. The code renders the table with data but renders…
Anand Subramanian
  • 53
  • 4
5
votes
2 answers

react-data-grid cell edit with copy paste

I am trying to create copy paste functionality using react data grid (same as excel). Copy paste is working fine as expected but I am facing issues with inline cell edit. Please refer to the code here…
kapil pandey
  • 1,853
  • 1
  • 13
  • 26
5
votes
1 answer

Is it possible to eliminate the blue border when selecting cells?

I am trying to remove the blue border that appears when you click a cell when using react-data-grid. Is this possible, or will I have to create a pull request?
Matt Beaty
  • 53
  • 4
4
votes
0 answers

Change the row height dynamically using react-data-grid

I am using react-data-grid library. 2nd column's first row content is 'It is a long text, though it is not displaying the whole content. as a solution, I want to change the row height dynamically' So how can I change the row height…
Kirisanth Senthilnathan
  • 189
  • 1
  • 5
4
votes
0 answers

How to insert new row when pressing tab on the last column of the last row

I'm using the React DataGrid At the moment I'm trying to introduce a feature that when the user press TAB on the last column of the last row it should create a new row. I already can create a new row, and I already know when I'm on the last row,…
dfranca
  • 5,156
  • 2
  • 32
  • 60
4
votes
2 answers

react-test-renderer error: TypeError: Cannot read property 'offsetWidth' of undefined

I am trying to test a component which renders the basic example of react-data-grid component (http://adazzle.github.io/react-data-grid/examples.html#/basic). The test code looks like this: import React from 'react'; import renderer from…
vhorta
  • 76
  • 1
  • 6
1
2 3
…
15 16