Questions tagged [ag-grid-react]

ag-Grid is an advanced user interface grid designed to integrate deeply into React. Questions related to this tag should target specifically the use of ag-grid with the React JavaScript library.

Github repository: https://github.com/ag-grid/ag-grid

Related tags:

637 questions
35
votes
19 answers

How to use a checkbox for a boolean data with ag-grid

I have searched for awhile now and haven't seen any real example of this. I am using ag-grid-react and I would like for a column that holds a boolean to represent that boolean with a checkbox and update the object in the rowData when changed. I…
Brett
  • 461
  • 1
  • 4
  • 8
19
votes
9 answers

How can I center the text in the headers for an AG-grid control?

How can I center the text in the headers for an AG-grid control? I have tried using cellstyle and cellclass in the column definition but that did not work. Thank you
user7400346
  • 549
  • 1
  • 5
  • 13
15
votes
4 answers

AG Grid tooltip takes long time to render

I was following this example and found out that the table takes quite some time to render the tooltip. It doesn't seem to have any delay whatsoever, and I have tried both defaultBrowserTooltip as well as the custom one but both of them are slow. Any…
Tree Nguyen
  • 937
  • 11
  • 33
12
votes
2 answers

ag-grid: "How to scroll to last known position"?

Ag-Grid offers the method ensureIndexVisible(index, 'middle'); With that method it is easy to scroll to an choosen index. But how do I get the last known index of the scrolling position from the user? An example: We have a table with 600 rows. The…
Paul
  • 495
  • 2
  • 9
  • 19
10
votes
1 answer

Problem with keyboard event in ag-grid with react-select as a popup custom cell editor

I want to use react-select as a custom cell editor for ag-grid Here is the code sandbox link You can download the source here npm install npm start I've removed all the css so it looks so plain, but it still does the job. Here is my package.json { …
William Wino
  • 2,879
  • 6
  • 34
  • 58
9
votes
2 answers

Dealing with ag grid react and rendering a grid of checkboxes

I'm messing with ag-grid, react-apollo, and everything seems to be working fine. The goal here is to click a check box and have a mutation / network request occur modifying some data. The issue i'm having is that it redraws the entire row which can…
Karan
  • 1,081
  • 2
  • 14
  • 35
9
votes
1 answer

Ag-Grid : How to get the focused cell value

How to get the focused cell value at the time focussing on the cell by using the keyboard arrow keys
Mallikarjuna
  • 221
  • 1
  • 2
  • 14
9
votes
7 answers

How to prevent event propagation for "Enter" key press in ag-grid-react cellEditor component?

My question primarily revolves around this statement in the docs w.r.t. the react component: cellEditor Params onKeyDown Callback to tell grid a key was pressed - useful to pass control key events (tab, arrows etc) back to grid - however you do…
buddyp450
  • 601
  • 1
  • 10
  • 26
8
votes
1 answer

Prevent closing cell editor in popup mode on outside click

I have custom text editor in table cell, after I select text in it I want to use top page panel to make it bold (outside of the table), but when I click on the button (on the top page panel) this action closes cell editor popup. Is it posible to…
8
votes
1 answer

AG-Grid: How to remove the Column Menu

I would like to remove the column menu. I can simply display: none it, but it seems a waste to process and render it in the first place. I can only find options on how to edit items inside the menu in the docs. Thanks
Dominic
  • 48,717
  • 14
  • 109
  • 126
8
votes
2 answers

Clickable url value in ag-grid with react

I'm currently giving ag-grid a try and trying to build a table where if the user clicks a column value, they are taken to a page containing that entry's details. How can I make a cell value clickable in ag-grid? I've tried using valueGetter:…
Vlad Schnakovszki
  • 7,446
  • 5
  • 74
  • 105
7
votes
2 answers

ag-grid webpack css not making to the website

I am using ag-grid in my react app, cannot make the css work with webpack. grid is looking like this image: const path = require("path"); var webpack = require("webpack"); let HtmlWebpackPlugin = require("html-webpack-plugin"); let…
johnny
  • 1,772
  • 18
  • 44
6
votes
4 answers

How to access ag-Grid API in React function component (useState hook)?

What is the best way of accessing ag-Grid API inside of React function component? I have to use some of the methods from API (getSelectedNodes, setColumnDefs etc.) so I save a reference to the API (using useState hook) in onGridReady event…
user1068352
  • 534
  • 6
  • 14
6
votes
1 answer

AGGrid with react, calling this.gridApi.sizeColumnsToFit(); is not fitting columns

My problem is my grid won't remain repsonsive at all, or if I try to create a grid not as many columns the whole grid just looks weird. I'd like for it to stretch out to its containers width. Which is what I'd expect sizeColumsToFit To do. I'm…
Karan
  • 1,081
  • 2
  • 14
  • 35
6
votes
1 answer

AG-Grid with Redux

In my job we decided to use AG-Grid in react variant: https://www.ag-grid.com/best-react-data-grid/index.php Currently, our architecture for React is Redux. From my little knowledge of AG-Grid I can say that it doesn't fit very well to this…
Amio.io
  • 17,083
  • 11
  • 66
  • 100
1
2 3
42 43