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
3
votes
1 answer

Adding custom drodpdown on column Header in ag-Grid

I am trying to create a custom drodpdown on column Header that have UI elements as below (containing some input type text and buttons and unordered list)and this dropdown should get list of column defs inside it as list. Is there way to achieve…
Mahi
  • 3,748
  • 4
  • 35
  • 70
3
votes
1 answer

How to make cell content in ag-grid centered vertically?

I am trying to decrease the row height of ag-grid by setting gridOptions.rowHeight. While this indeed decreases the row height, but the content is not centered vertically in the row. What's the best way to do this? I also tried changing the…
Naresh
  • 23,937
  • 33
  • 132
  • 204
3
votes
1 answer

react hook useState in AgGridColumn onCellClicked function

Currently, I am using functional react components with react hook useState and an AgGridReact Component. I am displaying an AgGridReact and put a onCellClicked function on a AgGridColumn. So far everything is working. In the onCellClicked function I…
anvin
  • 450
  • 2
  • 8
  • 22
3
votes
1 answer

Ag-grid context menu icon

Is it possible to add custom HTML elements to an icon to an Ag-grid context menu item? The following doesnt render any icon: getContextMenuItems = (params) => [ { name: 'Cancel items', action: this.onCancelLocates(), icon: …
Huzan Toorkey
  • 185
  • 1
  • 9
3
votes
2 answers

ag-grid columnsMenuTab customization

I am trying to customize the columnsMenuTab display in ag-grid to hide certain group header rows from being shown. We have a column group hierarchy that looks something like: Name Type Name Formula Column Name We'd like to hide the…
sdev001
  • 31
  • 3
3
votes
0 answers

ag-grid number filter is not working when the field value is rounded

The requirement as follows; The data from backend is stored in row data and passed to ag-grid. The numeric fields in the row data needs to be rounded to 2 digits or more based on the business need. I need to provide numeric filter that needs to…
Sankar Krishnamoorthy
  • 1,255
  • 13
  • 18
3
votes
1 answer

React and ag-grid - how do you update the `getRowClass` function?

Here's a StackBlitz that demonstrates the issue/question: https://stackblitz.com/edit/react-s9l2kj (this is essentially a modified version of the Example Row Class Rules code from the ag-grid website) I have a getRowClass function that needs to be…
gerrod
  • 6,119
  • 6
  • 33
  • 45
3
votes
0 answers

AG-Grid React - Custom Floating Filter dropdown - not showing in the front of grid

I have implemented the Ag-Grid Custom floating filter in React as a dropdown with values of that particular column like in excel In this image Floating filter height has been extended to show the expected output as in this image 1 but what if the…
3
votes
4 answers

How can I pre-select Ag-Grid rows from React state?

When rows are selected by the user, I save which rows are selected in some state. When the grid is rendered, I want those rows to still be selected. I've tried in onModelChanged calling setSelected on all the selected rows. However, this is not…
Zeke Hernandez
  • 1,226
  • 11
  • 14
3
votes
2 answers

Ag-grid custom tooltip with functional component

I am looking at ag-Grid's example on creating a custom tooltip. import React, {Component} from 'react'; export default class CustomTooltip extends Component { getReactContainerClasses() { return ['custom-tooltip']; } render()…
shlau
  • 33
  • 1
  • 3
3
votes
1 answer

ag-grid: access row data in filter test function

While using custom filter options in a grid column I encountered the need to compare the cellValue with some other value of the same row and can't seem to find how to do so, given that no reference to the row data is passed to the test function.…
bockzior
  • 536
  • 1
  • 7
  • 19
3
votes
0 answers

Show a transposed grid

Is there an option, or a reasonably simple way in code, to get ag-grid to show a transposed grid? By that I mean transposing rows and columns; columns down the side, rows across the top; column and row styles transposed to match. I'm using React,…
david.pfx
  • 10,520
  • 3
  • 30
  • 63
3
votes
2 answers

AgGrid: How to blink cell in different color depending on change

I'm using ag-grid-react like this: import { AgGridReact } from "ag-grid-react"; import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-balham.css"; and declares it like this in render(some details removed…
Peter Andersson
  • 1,947
  • 3
  • 28
  • 44
3
votes
3 answers

AgGridReact component not updating when autoGroupColumnDef changes

I'm using ag-Grid with React to test their enterprise row grouping feature. I want to change the row grouping column name during runtime, but I haven't been able to do this. When I make changes to AgGridReact's columnDefs prop, the changes are…
Galen Long
  • 3,693
  • 1
  • 25
  • 37
3
votes
1 answer

ag-grid: Switch between fullRow editing and single cell editing based on rowNode content

I have certain rows in my grid that should trigger fullRow editing because most of the data is blank. Some of the columns should be required columns as well. Is there a way to make certain rows (based on rowNode data) fullRow editable while…
anthozep
  • 333
  • 5
  • 16