Stack Overflow
Stack Overflow

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:

1022 questions
44
votes
21 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
  • 363
  • 1
  • 4
  • 11
35
votes
14 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
  • 799
  • 1
  • 8
  • 15
20
votes
5 answers

How to create tooltip on ag-grid row?

I want to display a tooltip conditionally based on status field, on hovering over an entire row(not on just cells). In the API documentation, I found this: https://www.ag-grid.com/javascript-grid-column-properties/ tooltip A callback that takes…
Sandeep Kumar
  • 2,397
  • 5
  • 30
  • 37
19
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
  • 1,198
  • 1
  • 14
  • 37
19
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
  • 1,344
  • 4
  • 19
  • 37
19
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
  • 62,658
  • 20
  • 139
  • 163
12
votes
1 answer

Ag-grid React Table TypeError: Cannot read properties of undefined (reading 'setAriaColIndex')

Good night, I'm working with ag-grid on a React project. I created a component that the user can enable column visibility, so far so good, it works perfectly. However, when running a function to set the visibility of all columns, the error mentioned…
Juan Bello
  • 121
  • 1
  • 4
11
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
  • 3,599
  • 7
  • 38
  • 61
10
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,141
  • 2
  • 19
  • 42
9
votes
2 answers

How can I test the content in ag-grid using testing-library?

I am trying to write a few simple tests that the headers and data I want to render are showing up as expected. I created a repo - https://github.com/olore/ag-grid-testing-library to reproduce. The table looks as I would expect when opened in a…
olore
  • 4,687
  • 3
  • 28
  • 40
9
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…
Дмитрий Новик
  • 91
  • 4
9
votes
2 answers

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
  • 261
  • 1
  • 4
  • 14
9
votes
3 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
  • 8,434
  • 6
  • 80
  • 114
9
votes
8 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
  • 528
  • 2
  • 10
  • 27
8
votes
2 answers

react ag-grid auto size columns and grid width

I am using ag-grid, I want the columns width to be dynamic according to the grid content, I do it by using: const onGridReady = params => { params.columnApi.autoSizeAllColumns(); }; but the width of the grid is alays fixed, I have a space in…
user10391869
  • 211
  • 3
  • 4
  • 7
1
2 3
…
68 69