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
3
votes
0 answers

Make multi line with line break in a cell in react-data-grid

I am using react-data-grid for editing data. Some of data are too long to display in a cell. However, I don't know how to make long data multi line. Also, my data has line break like ↵, but I think react-data-grid ignore this so display the data in…
Nayeon Kim
  • 71
  • 2
  • 6
3
votes
1 answer

How do you display boolean values in a cell of React-Data-Grid?

Pretty simple issue, I'd like to display boolean values in my react-data-grid. I honestly don't care how it's displayed: Checkbox, Radio, text... I just want it to appear so I can edit it. I'd rather not convert my data to all strings, then have…
Chris
  • 1,418
  • 2
  • 16
  • 34
3
votes
0 answers

Using CheckboxEditor with react-data-grid

I'm new to React and I'm trying to get the react-data-grid to display a checkbox for one of the columns. I have imported react-data-grid and react-data-grid-addons but I'm not sure how to pass the required props to the CheckboxEditor. import React,…
Ray
  • 342
  • 5
  • 15
3
votes
1 answer

Multi line Headers in react-data-grid

I would like to display more than one row in my headers. Previously I was able to change the header height. Now I want to display multi line text, preferably passed in as an array. The closest I have come to is digging through some forums and…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
3
votes
0 answers

Reactjs Data Grid Large Data Cut-off react-data-grid

i started using react-data-grid and i noticed that the row heights aren't adjusting when i have a cell with lots of text. The text just gets cut-off. how do i solve this? Example: say i have text that states "this is a test of long data" then it…
user2052618
  • 556
  • 2
  • 7
  • 20
3
votes
1 answer

How to make react data grid table cell editable and focused on click of a button without performing a double click action

I am using react data grid to list down my data . I want to add a new row on click of a button and therefore the first column ( not necessarily first it can be any ) should be editable and focused upon creation. I know react data grid has editable…
Arjita Mitra
  • 962
  • 2
  • 13
  • 36
3
votes
2 answers

Effective onBlur for react-data-grid

I'm jumping in on a pretty big React JS project which is using react-data-grid to display a bunch of editable data. Right now, you have to click an Update button to send changes to the server. My task at hand is to create auto-save functionality…
djibouti33
  • 12,102
  • 9
  • 83
  • 116
2
votes
2 answers

Displaying name of first cell in each row in react-data-grid

I am creating a fertilizer calculator for my CDRIS project (https://cannabisdris.com) in React.js using React-Data-Grid (https://github.com/adazzle/react-data-grid#readme). For 20 years I've used an excel spreadsheet, but now I need to create an…
learnedToCode
  • 75
  • 7
2
votes
0 answers

how to add text wrap for long text in react-data-grid?

i have a react data grid and one cell have long paragraph text. i need to wrap text in color dynamically check example in CSB https://codesandbox.io/s/rdg-cell-editing-forked-nlvsr?file=/src/index.js
n9n
  • 121
  • 1
  • 1
  • 8
2
votes
1 answer

React Data Grid - Able To View But Not Able To Edit Cells

I am using Adazzle's React Data Grid to display data of users which I obtain from my REST service successfully but I am unable to edit and change any of the cells' values despite setting the property editable : true. How can I enable edit cells for…
Ezani
  • 535
  • 3
  • 18
2
votes
2 answers

Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors

I'm trying to use ReactDataGrid library in TypeScript to create a base component with my own defaults so I can stop repeating myself when using in other pages and other components. Here's my base component: import…
M.A Shahbazi
  • 876
  • 9
  • 23
2
votes
1 answer

Error on implementing react-data-grid 7.0.0 from TS to React

I'm trying to implement DnD functionality in react-data-grid, but I'm getting "TypeError: Object(...) is not a function" Error. There is a same file in TypeSript that I provided in the sandbox(it is only for reference). I'm trying to implement the…
Yash
  • 198
  • 1
  • 12
2
votes
0 answers

How can I add new rows to react data grid table from UI using button to add rows?

I am new to react and react-data-grid table. My project needs addition of rows from UI and editing them once they are in table. Editing involves text and drop down in different cell of row. I went through the react-data-grid example.[1]:…
kiran
  • 21
  • 2
2
votes
0 answers

DatePicker calendar is hidden behind table header

I'm trying to use react-datepicker in my react-data-grid filter but can't get to show the calendar on top, i tried to set the react popper as suggested here among other configurations but nothing .react-datepicker-popper { z-index: 9999…
Mugiwara Noshanks
  • 39
  • 1
  • 9
2
votes
0 answers

React DataGrid Cell events

I've tried to add onKeyDown event for Cell component in several ways, but none worked. At first I put onkeydown on div here, just like the rest of events here. I also added tabindex=0 to div. Then put it on ref. It would be nice to know if somebody…
Kirill Pakhomov
  • 87
  • 1
  • 6
1 2
3
…
15 16