Questions tagged [ag-grid]

AG Grid is a client-side and server-side JavaScript grid which is designed to be framework agnostic. It is not dependent on any framework, allowing it to be easily integrated with any of them. Use this tag for questions related to problems with the configuration of AG Grid and its integration with other tools.

Filter by
Sorted by
Tagged with
0 votes
0 answers
10 views

React Ag grid 2 master details in one grid for 2 different columns

I'm trying to create 2 master details in react for 2 columns in one grid (not nested) example picture This is an example that i've seen for vanilla js : https://blog.ag-grid.com/column-drill-down-...
Mizfa_Front's user avatar
0 votes
0 answers
17 views

dash aggrid cell to suggest autocomplete

I created a simple Dash app that loads a CSV file into an Ag-grid. Then, I added a button that adds an empty row to the aggrid once clicked. I would like that once I start typing in one of the cells ...
Ben's user avatar
  • 1,759
0 votes
0 answers
8 views

Is there a way of unit test click event on an ag grid cellRendererSelector

I need to test some behavior in an angular ag-grid. The internal component in the column is being defined with a cellRendererSelector attribute to either render a link component or a normal container (...
jevisan's user avatar
  • 23
1 vote
0 answers
11 views

Triggering "cellValueChanged" event in Angular AG Grid custom renderer component on select change

Triggering "cellValueChanged" event in Angular AG Grid custom renderer component on select change I'm using Angular AG Grid with a custom renderer component. I want to trigger the (...
Vams's user avatar
  • 41
2 votes
1 answer
29 views

Give ag-grid-angular last page information with server side pagination

I use ag-grid entreprise in my angular application. I have a server-side pagination. My response from the server return my data and : "page": 1, "page_size": 10, "total_page&...
Ryley38's user avatar
  • 119
1 vote
1 answer
13 views

AG Grid unit testing that gridApi functions are called (ie: gridApi.setQuickFilter)

I have a function that calls `gridApi.setQuickFilter', and I need to test that it is getting called with the correct arguments. component: clearQuickFilter = () => { this.quickFilter = ''; ...
Robert's user avatar
  • 409
0 votes
0 answers
9 views

How do I use multiple columns for a single group in AG Grid?

As a toy example, let's say I have 3 columns, "City", "Population", and "Neighborhoods". Ideally, I want the data to be laid out like this in three columns AG Grid: > ...
cambrialas's user avatar
0 votes
0 answers
11 views

AG-GRID not showing field as a Checkbox when Value is Boolean and Model Type is 'serverSide'

Working well when the model is default, the data Client Side Data, the field shows a checkbox when value is boolean, but when i change to Server Side Data, shows true or false, if I tried to edit it ...
Jose Ernesto Olazábal's user avatar
1 vote
1 answer
21 views

Apply transaction to a grid with Server Side DataSource and sorted columns

I use Ag Grid with a Server Side DataSource Concider a simple object structure Id and Name My grid is sorted by Name The inital grids looks like +----+--------+ | ID | Name ^ | +----+--------+ | 2 | ...
Mathieu Degroux's user avatar
0 votes
0 answers
35 views

Ag grid table react how can we download all data

I am using Ag grid that has this function const onBtnExport = useCallback(() => { gridRef.current.api.exportDataAsCsv(); }, []); but the problem is it only downloads current page data but I want ...
Hemant Kumar Agrahari's user avatar
0 votes
0 answers
16 views

how to hide console.logs of aggrid?

I haven't passed {debug: true} or anything to gridOptions, yet I am getting tons of logs in console. How can I hide them? Thanks
Terlan's user avatar
  • 19
1 vote
1 answer
34 views

ag-grid auto size columns and grid width

I'm using aggrid, I hope the column width is dynamic according to the content of the grid. I do it by using: params.columnApi.autoSizeAllColumns(); But the width of the list is always slightly larger ...
link's user avatar
  • 11
0 votes
0 answers
10 views

Streamlit aggrid with autocomplete cells

So I don't have any code snippet since I can't figure out how to even start it. I'm trying to create a simple streamlit that will have a button that loads a CSV file and displays it in and editable ...
Ben's user avatar
  • 1,759
-5 votes
0 answers
25 views

How can I Pass the Story book control to custom date component in ag grid for react? [closed]

https://www.ag-grid.com/react-data-grid/component-date/ Use the above link for reference. I have storybook control select. From their I want to pass dateformat dynamic to customdatecomponent.
sahil desai's user avatar
2 votes
1 answer
64 views

How can I modify the value of one dropdown based on a selection in another?

I'm using AG-Grid Community with full-row editing in a grid. I have 2 fields that use agSelectCellEditor. I'm wondering if it's possible to capture a change to the first field during the editing ...
user23046335's user avatar
0 votes
0 answers
59 views

React Ag-Grid: Issue with Column Selection - Cross Button Not Refreshing on Click

In my React Ag-Grid implementation, I've injected a div to serve as a clickable element for clearing the search input within the column selection. While typing with backspace successfully empties the ...
Hakeem Ahmad's user avatar
0 votes
0 answers
14 views

With AgGrid React, Is there a way to preserve column widths across React rerenders?

I'm seeing unexpected column width changes when rerendering a React component that contains an AgGrid. Repro: Render an AgGrid with React Drag a column to change its width Rerender the AgGrid with ...
vilterp's user avatar
1 vote
0 answers
40 views

Ag grid height of ag-center-cols-viewport changed after upgrading from 30.0.6 to 30.2.0 [closed]

We upgraded the ag grid version today from v30.0.6 to v30.2.0 and we noticed a change in the height of "ag-center-cols-viewport". This causes a double scroll bar to be visible when the rows ...
mila's user avatar
  • 491
0 votes
0 answers
12 views

is there a way in Ag-Grid to have a different order for Columns inside toolpanel compared to Columns in the grid?

I'm trying to find a solution to have a different order for the Coluns inside the toolpanel compared to the ones from the grid-table, for ex. I want the columns in the toolpanel to be sorted ...
vxm's user avatar
  • 13
1 vote
1 answer
25 views

Fix a row while sorting in ag grid react

There is a dropdown and based on the values of the dropdown I am sorting the ag grid here but I want to fix a row at top when doing sorting with id 956306 how can I achieve it ?? const ...
Gourav Srivastava's user avatar
0 votes
0 answers
31 views

moving a new visible Column to the end of the grid table in ag-grid

In a React app with ag-grid 28.1.1, I'm trying to find a way to move a newly added Column (by selecting it from the Columns toolpanel) to the end of the grid table. Currently when adding a new Column (...
vxm's user avatar
  • 13
1 vote
1 answer
34 views

Im using getTooltipContent in ag-grid (29.1.0) , is this deprecated how do i make tooltip work?

is there any replacement of getTooltipContent, seems like this is not working in ag grid getTooltipContent={(e) => { const data = e.api.getDisplayedRowAtIndex(e.rowIndex)?.data; return data &&...
arpitha mysuru94's user avatar
0 votes
0 answers
26 views

Ag grid is not showing as intended

component.html--> component.html screenshot component.ts--> ts screenshot component.css--> @import 'ag-grid-community/styles/ag-grid.css'; /* Quartz Theme Specific CSS */ @import 'ag-grid-...
Saurabh Kumar's user avatar
0 votes
0 answers
26 views

ag-grid visual Upgrade: Checkerboard Patterns in Ag-Grid for Minimal Data Display

I am using Ag-Grid, a JavaScript data grid library. Problem : I have a problem with the grid when there is not enough data. When the grid has more than 20 rows of data, the grid is large enough to ...
Cono's user avatar
  • 91
0 votes
0 answers
45 views

What is the best way to propagate child state updates upward in react

I have this structure: function ParentComponent() { const [editedData, setEditedData] = useState<any[]>([]) return <ChildComponent data={editedData} /> } function ChildComponent(...
beseus's user avatar
  • 41
0 votes
2 answers
57 views

How to define a column to be the sum of two columns? i.e. a computed or expression field

I would like to include in my grid an extra column to reflect the up to date sum of two other columns: const columnDef = [ {headerName: 'x', field: 'x', type: 'numericColumn'}, {headerName: 'y'...
SkyWalker's user avatar
  • 13.9k
0 votes
1 answer
53 views

Applying Color Gradient to Rows in AgGrid Dash Table

In the following code, I want to apply a color gradient to the background color of each row based on the combined addition of two columns: 'Raised to Date' and 'Years in Operation' (higher values ...
user2940774's user avatar
0 votes
0 answers
18 views

Angular Ag-Grid Client Side pagination Vs Server Side pagination

We are facing serious performance issues while loading ag-Grid data ( Approx 2000+ records ) in browser. We are loading all the data from DB in single API call and displaying all records without ...
Pravin's user avatar
  • 3
0 votes
0 answers
23 views

In ag-grid react, how do we do server side pagination with real server api call?

In ag-grid react, how do we do server side pagination with real server api call ? how does the grid know about the remaining count for pagination to show next page button? I don't know how to tell ...
techie's user avatar
  • 1
0 votes
1 answer
23 views

Referencing another field in cellRenderer

I am using AG-Grid. I have bunch of fields in columnDefs and a cellRenderer for one of the fields. I want to refer to another field in the cellRenderer. How can I do it? Thanks
Naga Vijayapuram's user avatar
1 vote
2 answers
77 views

Ag Grid React Cell Renderer with Array Values into One Cell

I have an object I want to display using Ag Grid data table. The object is only one row of data for table. 0: {appID: 12345, blocker_issues: Array(2), crtitical_issues: Array(2), major_issues: Array(2)...
annaM's user avatar
  • 135
-1 votes
0 answers
36 views

How to display and Update Array value in AG Grid javascript

i'm using ag-grid java-script community version so to display array of string i create a custom render function but when i edit data it return null value but i need updated data here To display array ...
Muhammad Awais's user avatar
0 votes
0 answers
47 views

dash-ag-grid change button state in callback

Working through the examples for using dash-ag-grid. Is there a way to change the status of the button through a callback? I would like to be able to press a button and have it change from active to ...
Troy D's user avatar
  • 2,175
0 votes
1 answer
28 views

Ag Grid: Hide Value Column Header in Pivot Mode

I am trying to export Ag-Grid as an Excel in Pivot Mode: But I don't want the Value Column Headers in Excel (sum(Gold), sum(Bronze) etc.) Is it possible to remove that row entirely in Ag-Grid ?
User9523's user avatar
  • 415
1 vote
2 answers
30 views

Changing click into row action in AG-Grid

The default behaviour of AG-Grid when clicking a row is to make it a selection. I'm wondering if it's possible to have this selection mode enabled but only make it include the row when a user actually ...
pilotguy's user avatar
  • 589
0 votes
0 answers
27 views

Show a tooltip when we hover over each cell of dropdown options of a column in Aggrid React

I have a scenario where the tooltip works perfect for each cell (table cell) of a dropdown column in Aggrid React table. I have used tooltipcomponent and tooltipComponentParams to get this working. ...
Sushmita Mitkar's user avatar
1 vote
0 answers
26 views

Rendering Dynamic Data retrieved from External Server with Tanstack Table or AG Grid

I have this working piece of code in my nuxt3 app ... <template> <div> <p v-for="user in users" :key="user.id">{{ user.name }}</p> </div> </...
Naga Vijayapuram's user avatar
1 vote
0 answers
41 views

Why does setting a state variable in an AG Grid callback in React reset the column order?

If I move around columns in my AG Grid, i.e. drag them and change the order that they appear, and then trigger an event that sets state the column order will reset; yet, other column state (like ...
genericxname's user avatar
0 votes
1 answer
27 views

SolidJS AG Grid Not Reactively Updating

The code below should alter the heading name of the first column named "manufac", to "new2". But it does not work - it is as if there is not reactivity with the store. The console ...
Jeremy Affolter's user avatar
0 votes
0 answers
38 views

ag-grid-angular tests with Jest fail with error "Class constructor VanillaFrameworkOverrides cannot be invoked without 'new'"

After upgrading to the latest major version of ag-grid, the tests with Jest fail with the following error. TypeError: Class constructor VanillaFrameworkOverrides cannot be invoked without 'new' I have ...
Georgian Stan's user avatar
0 votes
1 answer
22 views

Any way to hide group totals in AG Grid Pivot Table

I'm looking to hide the number in parentheses in the AG Grid pivot tables. It's confusing in many cases and I don't see any option to get rid of it.
dmathisen's user avatar
  • 2,291
0 votes
0 answers
14 views

connecting dropdowns as filters for ag grid react

I have some dropdowns like so - <FilterDropdown title="Category" placeholder="Search for categories" options={removeDuplicatesFromArray(...
complexpie's user avatar
1 vote
1 answer
35 views

Nested data for Tree Data

I'm trying to work with ag-grid's data format while not compromising the data but can't seem to be able to do both. I have data structure like this const data = { singleParent: [ { name: "...
Ikura's user avatar
  • 200
1 vote
1 answer
46 views

How to add nested rows in AG-Grid row groups (Angular)

I have the data set as given below for an AGGrid table . Data -. [{ "name": "Test A", "id": 10, "desc": "test description", "...
Srimoyee Sen's user avatar
0 votes
0 answers
24 views

AgGrid SSRM: detect if page data was loaded from AgGrid's internal store (cache) or from endpoint

I'm using AgGrid SSRM v29.3.5 with pagination. Whenever i navigate to a new page the getRows method gets invoked in order to fetch new data from the backend. When i re-visit a page the data will be ...
Mihai Coloji's user avatar
0 votes
1 answer
46 views

How to remove Ag Grid loading spinner

I am using ag-grid rowModelType=serverSide and currently my overlay when the data is loading has a spinner that looks like the following image below. I want to remove that spinner. I tried hideOverlay(...
user21476047's user avatar
0 votes
0 answers
17 views

Edit Cell in Pivot Mode AG Grid

I am using AG Grid Entreprise, When Pivot mode is active, the calculated cell cannot be edited ! Is there a solution for that ? I need to implement a specific logic that triggers after editing a ...
JAK's user avatar
  • 1
0 votes
1 answer
76 views

Ag-grid react cell skeleton loaders

I am trying to add a skeleton loader to ag grid in my react application that looks like this however I'm not sure it is possible? I have tried using overlayTemplate and also loadingCellRenderer but I ...
complexpie's user avatar
0 votes
0 answers
24 views

AgGrid Custom Floating filter - agSetColumnFilter not setting filter model with setModel()

I have implemented custom dropdown filter and treating it as floatingFilter. (I have enterprise version). export class MultiSelectFilterComponent implements IFloatingFilterAngularComp, OnDestroy {} I ...
Amit Gandole's user avatar
1 vote
1 answer
22 views

Cell Editor Broke when updating aggrid from 26 to 30 using typeahead as cell editor react

In aggrid I added Search using typeahead before in version 26 I used to search values in cell editor had set typeahead to cell editor and set values to cell but after updating to "ag-grid-react&...
Cristo Ferrao's user avatar

1
2 3 4 5
98