How to change or update the theme of angular ag-grid . Do we need to write any custom css files or use any other grid except from material

Question

I have a service file which is calling the api and getting the data . I am showing the received data to the ag-grid by assigning the row data value to component variable value . Also I am using ag-grid theme and display the data in rows . Which is successful happening now . But when If I want to change at-grid style like not show any grind borders , each row text color , grid backgrounds color etc yo make it look like a designed wire frame ,am unable to do it with the less knowledge on angular Not sure what is best way to achieve it . Wondering if any of you guys can help me .

Also one more question is, I have data with w,x,y columns coming from the api , how to add the column z which is not in api and add valises to rows

Answer 1

To answer your first question, you can overide variables in ag-grid theme. The list of variables is here: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables

The other styles you can override just like normal css styles overrides.

About your second question: You did not tell us which (if any) framework you're using, so I'm going to tell my experience with angular ag-grid.

When I need to add column z in to the datatset I map the observable result from the api like this:

this.apiService.getData().pipe(
  map((results: Array<any>) => results.map(item => item['z'] = valueZ))
).subscribe(results => this.gridOptions.api.setRowData(results));