Excel-like grid component built with React, with editors, keyboard navigation, copy & paste
Questions tagged [react-data-grid]
231 questions
0
votes
1 answer
How to Create a grid of desired Size by using react-data-grid in reactjs?
How to set the size of the final table created using react-data-grid.
For example if I want a 250*250 px size table, how to do that.
Is there any props already available for that?
or it needs to be done using the pure CSS.
After solution provided…
SHUBHAM DEKATE
- 95
- 3
- 14
0
votes
1 answer
In React data grid, Need to add pagination for the data
We are using react data grid, Need to add pagination in that. I dont find any reference for that. Kindly suggest any reference
Rajeshkumar
- 11
- 5
0
votes
0 answers
Does "this" is cloned while refrenced in an export object in a same module?
Can anyone explain what is happening in this code please?
I have a Reactjs module which I have used a ReactDataGrid component in it. The important part of the code is like these:
export default class IssueTable extends Component {
state = {
…
Siamak Ferdos
- 3,181
- 5
- 29
- 56
0
votes
1 answer
How can I access nested arrays in a data object to assign as prop values for a data-grid?
I have a data grid which takes array values for rows and columns. The necessary values come from a data object with 3 layers of nestin. Here is what it looks like:
export const duplicatesBySourceGridData = {
'dataFamily':{
…
Glenncito
- 902
- 1
- 10
- 23
0
votes
1 answer
React Data Grid Custom Row Renderer function in Typescript
I would like to convert the following RowRender() function to Typescript
const RowRenderer = ({ renderBaseRow, ...props }) => {
const color = props.idx % 2 ? "green" : "blue";
return
Chris
- 1,122
- 1
- 12
- 14
0
votes
1 answer
react-data-grid inside reactStrap tab is not shown
I'm adding a grid created with the react-data-grid component inside a bootstrap tab created using reactstrap, but the grid is not shown correctly inside the tab, just an horizontal line, but if I place the same code outside the tab the grid is…
Luca Morelli
- 2,530
- 3
- 28
- 45
0
votes
0 answers
How to enable text copy in React grid built using React-Data-Grid
I am using React-Data-Grid to show my data in the table, but the copy functionality is not working.
Below is my Grid Component in React, In which I have connectd it to the Back end API as well as with React Redux Store.
import React, { Component,…
SHUBHAM DEKATE
- 95
- 3
- 14
0
votes
1 answer
Can't set columns for react data grid. Gives non assignable type error
I am new to both React and TypeScript and am trying to make a simple React Data Grid based on their simple example here: https://adazzle.github.io/react-data-grid/docs/quick-start
Here is what I have:
import React from 'react';
import ReactDataGrid…
Seephor
- 1,692
- 3
- 28
- 50
0
votes
1 answer
React-Data-Grid Bundle Size
I am trying React-Data-Grid in the hope that the resulting bundle size will be smaller than when using ag-Grid or Tabulator which I currently use in my app.
I try it in a small component to verify the resulting bundle size. But unexpectedly, my app…
Lex Soft
- 2,308
- 2
- 13
- 13
0
votes
1 answer
What does ! mean in the context of react refs?
I was looking through the react-data-grid source code and noticed this line: https://github.com/adazzle/react-data-grid/blob/34a2e51931bba2ac8a2f738cd059945d66516b48/packages/react-data-grid/src/HeaderCell.tsx#L107
return x -…
Thrashed Potatoes
- 11
- 3
0
votes
1 answer
Problem with writing custom editor for React-Data-Grid
From the official documentation here about writing up custom editors - https://adazzle.github.io/react-data-grid/docs/examples/custom-editors
And a sample here using custom color picker - https://codesandbox.io/s/l9ko3oqwym?from-embed
And also some…
Fred A
- 1,602
- 1
- 24
- 41
0
votes
1 answer
React DataGrid: how to know which rows are being rendered?
React DataGrid supports virtualization. This way, it only displays the number of rows that are visible, according to the height.
In my component, I would like to know which rows are currently visible (once loaded the grid and after each scrolling).…
pablovb
- 1
- 1
- 2
0
votes
2 answers
How do I remove gridlines (borders) in a React-Data-Grid?
I'm trying to remove gridlines from a basic table. Here is a codesandbox: https://codesandbox.io/s/rdg-cell-editing-u2ood.
How do I do it? Do I need to manually override internal css classes or is there a props to do this?
evianpring
- 3,316
- 1
- 25
- 54
0
votes
1 answer
How can I do a select all on a column of checkboxes with a react-data-grid?
I have a react-data-grid where each cell contains a checkbox and each column name has a check box beside it. When I click the checkbox beside the column name I want to check all of the checkboxes that correspond to that column. Is this possible?…
0
votes
1 answer
How do you style the grouping rows when you group rows in React-Data-Grid?
Is it possible to style the grouping row that you can see in the attached screenshot? What I would like to do is provide a React component that is rendered in place of that.
Here is the codesandbox for the attached screenshot.
The screenshot shows…
evianpring
- 3,316
- 1
- 25
- 54