Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
Related
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
for my work I use angular 7 and ag-grid enterprise latest version. I have an ag-grid table configured with master / detail feature and I need to customize the style of the row when the detail is expanded. For example, I would like to change the background color of the row only when its detail is expanded. I tried with the CSS rule:
.ag-theme-material .ag-row-focus {
background-color: $dark-grey-blue !important;
}
but I don't get the correct behavior, because the row changes color clicking on it even without the detail being expanded, while I want it to change color only if the detail is expanded.
I tried to look at the official documentation of ag-grid, but I didn't find indications for this specific case.
Can you help me please?
Thank you
You can accomplish this with the grid callback getRowStyle and detect if the node is expanded or not:
gridOptions.getRowStyle = (params) => {
if (params.node.expanded) {
return { background: 'red' };
} else {
return { background: 'green' };
}
}
We'd like to use React Data Grid from Adazzle (as mentioned in the tag with this question) now that we're using React (16.xx) and the older jsGrid is less appealing.
Two questions:
Our old jsGrid had a data type to include in the grid called Checkbox. This was immensely helpful. I haven't found a similar type in the React Grid. Have I just missed it or is it not a part of the library?
In each row, in some columns, we'd like to actually have two rows of data inside the column -- i.e., two lines of text separated by carriage return. But the react-data-grid demos only seem to show one line per column. Is this a limitation, or can we use CSS in the values inside columns?
Is there search included for the rows shown in the table at any given point in time?
I will provide answer to your question part by part
1) In react-data-grid column you can include a checkbox by using the formatter
attribute that is specified while the columns are defined.
Consider the following example
let columns = [
{
key: 'name',
name: 'Name',
resizable: true,
width: 100
},
{
key: 'checkbox',
name: 'CheckBox',
formatter:checkBoxFormatter,
resizable: true,
width: 100
}
]
class checkBoxFormatter extends React.Component {
render() {
return (
<div>
<CheckBox></Checkbox> //Provide your checkbox code here
</div>
)
}
}
2)You can exapand the rows for that you need to use getSubRowDetails and onCellExpand attributes of ReactDataGrid component .For example refer this documentation
3)Search is available for filtering .For example refer this documentation
I am facing an issue in ag-grid. I have created a plnkr to reproduce the issue.
In following plunkr, first column's cells are displayed green but when we download in excel they shows blue.
This is because of one cell having both classes, blue and green.
Please note the cellClass function provided to Age column def.
{
headerName: 'Age', field: 'age', width: 90,
cellClass:function(params){
if(params.data.age === 23){
return ['blueBackground', 'greenBackground'];
}
return '';
}
}
But the question is, why does this affect the other column cells in exported excel?
I could understand, if only that particular cell, having both conflicting classes would have the problem of showing either one color.
Plnkr:
https://plnkr.co/edit/OdIwGznvmTYwkUTKZOEa?p=preview
I am using ag-grid 5.1.2
I've configured a getRowStyle function to set the background-color for certain items.
I've noticed that has overridden the 'selected row' color now, so when a row is selected the background will not change to indicate as such.What is the correct way to still let highlighted row color work with the custom getRowStyle. Here is the typescript for the rowStyle function:
self.customRowStyle = function (params: AgParams) {
if (!params.data.isShaded) {
return {
"background-color": "#CEDDDD",
};
}
return null;
};
In your CSSyou can choose not to target the selected row.
ag-Grid adds the class onto the row that is returned from your getRowStyle callback
It also adds .ag-row-selected for rows that get selected.
You can simply use CSS to only target not selected rows or even apply a different style to the rows that are both selected and have your custom class.
Here is an example:
CSS
.bg-red.ag-row:not(.ag-row-selected) {
background-color: red ;
}
OR different style for both selected and bg-red
.bg-red.ag-row {
background-color: red;
}
.bg-red.ag-row.ag-row-selected {
background-color: pink;
}
JS
rowClassRules: {
'bg-red': () => {
return true; // applies class bg-red to all rows
},
},
Here is a live running code example of this in action.
Also here is another live example that overrides row styles on click of a button, but this doesn't involve styling callbacks:
Is this what you are looking for?
Use the getRowClass gridOption instead of getRowStyle. Then in CSS set the appropriate styles for your background row and the brackground row when highlighted.