Excel-like grid component built with React, with editors, keyboard navigation, copy & paste
Questions tagged [react-data-grid]
231 questions
1
vote
1 answer
reactdatagrid.io checkboxColumn Cannot read properties of undefined (reading 'showInContextMenu')
After adding the checkboxColumn property to my ReactDataGrid, empty extra columns are added to my table when the column order is changed. On clicking the context menu icon in any of the column headers the following exception occurs: "Cannot read…
Duke Wellington
- 21
- 1
- 2
1
vote
1 answer
the frame form-group exceeds the grid ReactDataGrid
As you can see in the image attached, the frame exceeds the grid. how can I style the frame to match grid height or changing the height of the reactdatagrid to match with the height of the frame ?
Thank you
[
Organon
- 23
- 4
1
vote
1 answer
React Data Grid displaying frozen columns as last columns in the table
I am using the react-data-grid library and I am looking for a way to make the frozen columns(marked in red) appear in the right instead in the left(while still remain frozen).
here is a snippet from their website demo:
function getColumns(countries:…
Matan Gubkin
- 3,019
- 6
- 25
- 44
1
vote
1 answer
Row grouping is possible in React-Data-Table-Component?
Hi everyone, I need to group the data by name. It's possible to group rows in the react-data-table component.
Like This:
Micro Kumar
- 167
- 1
- 12
1
vote
2 answers
How to set paginationRowsPerPageOptions['ALL','50',''100'] in React-data-table
Hi Everyone,
I am using the React-Data-Table component for displaying the data. My react data table is working fine. But, I need to set the pagination option [All, 50,100,150]. In the React-data-table component provides the…
Micro Kumar
- 167
- 1
- 12
1
vote
0 answers
ReactDataGrid on edit of a cell force closing the edit mode
we are using ReactDataGrid old version 5.0.1. since it's in production we cannot update that immediately.
when double click a grid it will go into edit mode. and on typing ( bracket it will open a dropdown as below. but this is working fine only in…
Vikas Acharya
- 3,550
- 4
- 19
- 52
1
vote
1 answer
inovua react data grid- change default font size
I'm working on a project that uses the React Data Grid (inovua), and I can't find any documentation on their API reference page or online about how to change the default font size of the data within cells.
I'm trying to fit a good amount of text…
tprebenda
- 389
- 1
- 6
- 17
1
vote
0 answers
Using prop formatter - element inside don't stop rendering
I'm using prop formatter in a column, to render a children element. And it's not working properly.
The element inside formatter, don't stop rendering. This blocks the event of the element inserted into the formatter.
Like this:
image DOM
My…
FelipeBattistotti
- 11
- 1
1
vote
1 answer
Customizing Filter Options React Data Grid
How can we customize the filter options in the ReactDataGrid according to the columns?
For example I want to have only "contains" filter for name . For Date, I want to have an "in range" filter options. I couldnt find in the docs section can you…
msanli224
- 41
- 1
- 9
1
vote
0 answers
Example of testing "onEditComplete" with "@inovua/reactdatagrid`
We are looking to test a callback for editing cells.
Code:
const App = () => {
const useUpdateAndSave = useCallback((event) => {
console.log("Event - onEditComplete: ", event);
}, []);
return (
…
Brian Zitzow
- 148
- 1
- 8
1
vote
1 answer
How to select the desired input field for filtering in React Data Grid
I am trying to write some tests using Cypress with Reactjs (both latest versions). It seems like there is nothing I can select these input fields of filtering because they all look the same. Is there a way to put id/class names to these fields? I…
Thunfische
- 1,107
- 2
- 15
- 35
1
vote
0 answers
Unable to Render React-Data-Grid using ReactDOM
I am using ReactDOM to render my React components (React Data Grid) but it is giving an error saying : TypeError: Cannot read property 'length' of undefined within the useViewPortRows.ts TypeScript file of the grid. I have checked my code and I do…
Ezani
- 535
- 3
- 18
1
vote
0 answers
Excel like filtering with react-data-grid and primereact multiselect
I'm trying to add excel like filtering to react-data-grid(v7) with primereact multiselect and running into some problems with the dropdown closing. By excel like filtering I mean when you apply a filter that updates all the other filters options…
Antespo
- 149
- 1
- 2
- 9
1
vote
0 answers
How to import useCombinedRefs when using react-data-grid
I am trying to implement the draggable columns with react-data-grid based on this example: https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/ColumnsReordering.tsx
I see that this example requires creating a DraggableHeaderRenderer…
CashbyCoder
- 61
- 1
- 8
1
vote
1 answer
Display dynamic arraylist using reactJS
I am working on building a web application using reactJS. We should display the product users subscribed to. Number of products each user subscribes to differs. For Example, here is the response :
{
"data" : [
{
"user":…
NewBee
- 33
- 3