Does anyone have an example showing how column headings can be styled in an Interactive Grid?
I would like the column headings in each of the 4 different Column Groups to have a different background color to make the groups more distinguishable:
It doesn't look like there is a way to easily assign a style to the Column Group via the developer interface. So, I've tried to use the TH ID:
#R141502556723241100_ig_grid_vc_cur {
background-color: #242d45;
color: #ffffff;
}
but instead of changing the background-color for the Term/Element TH, it changes the background-color for whatever element is clicked on.
First add a static ID to your IG.
Static ID: my-static-id
Then you can use the following css snippet:
/*
where the value between the quotation marks ("") is the index of the column heading
*/
#my-static-id th[data-idx="0"] {
background-color: rebeccapurple;
}
#my-static-id th[data-idx="1"] {
background-color: green;
}
The result:
Related
I want to highlight child rows in different color using CSS to differentiate parent/child rows.
When you use your browser's DOM inspector, you'll notice that table rows (tr) of a p:treeTable are classed with ui-node-level-n. N is the level, starting at 1. So root items are level 1, children of level 1 are level 2 and so on. To have white root nodes and yellow child nodes, you can use the following CSS rules:
html body .ui-treetable .ui-treetable-data>tr {
background: yellow;
}
body .ui-treetable .ui-treetable-data>tr.ui-node-level-1 {
background: white;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
I am trying to add customized styling to every second row in my AgGrid.
I am using the following snippet of code in my onGridReady:
gridOptions.getRowStyle = function (params) {
if (params.node.rowIndex % 2 === 0) {
return { background: "#f0f1f4" };
};
The issue I am having is I would like to add a variation indicating whether the row is selected or not. Currently the style remains the same either way.
What should I add to my code to achieve this?
Thank you in advance for reading and responding.
AgGrid exposes multiple class names of each row elements to describe its current state (ag-row, ag-row-odd, ag-row-selected...). You can take advantage of that information to override the row style if it's currently selected like below:
.ag-theme-alpine .ag-row.ag-row-odd {
background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
background-color: red;
}
Live Demo
I have a Google sheet for the data source. Column B contains the information I want to show in the table. B1 is the column label ("name") and the rest of column B is the data of interest (B2 is "Anna," B2 is "Bernard," etc.)
As described in https://developers.google.com/chart/interactive/docs/spreadsheets, I can successfully query the data using an URL like https://docs.google.com/spreadsheet/ABC123/gviz/tq=select...
...where the select statement is the encoded version of "SELECT B ORDER BY B."
My table div tag populates but it shows the header row "name." How can I conceal this and make it start with "Anna"?
Do I change the select statement in the front end or is there a table option I can configure to hide the first row?
I figured it out: in the table options, add the parameters:
allowHtml: true,
cssClassNames: { tableCell: 'nameClass', headerCell: 'noHeader' }
and in the CSS, add:
.noHeader { background-color: #FFF; border-collapse: collapse; border:none; font-size: 0px; }
(Following your example) a simpler way is to use display: none (See https://stackoverflow.com/a/5113253/11794965)
So in your CSS, add:
.noHeader {
display: none;
}
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}
I have a column Definition for each colume that extends AbstractColumnDefinition these columns are put in a DefaultTableDefinition PART OF a PagingScrollTable
example:
NAME | SIZE | RES | DELETE |
this style (AT THE END OF THE PAGE ) is added to the column names if you notice all of them are with a cursor pointer , meaning a hand shows up when i hover above each one.
I want to remove the cursor for some cells in the header like delete.
HOW DO YOU set/add/remove a style on a particular cell of the header table of a PagingScrollTable?
THANK YOU
.gwt-ScrollTable .headerTable td {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid black;
vertical-align: bottom;
cursor: pointer;
}
Edit 2 updated this again because the OP's question is finally clear: how do you set a style on a particular cell of the header table of a PagingScrollTable?
PagingScrollTable scrollTable = ...
scrollTable.getHeaderTable().getCellFormatter().addStyleName(row, column, "myStyleName");
where row and column are 0-based integers indicating which cell of the header table to set the style on.
Edit updated this to explain how to set a style on the header, since the person asking the question clarified that's what they want.
If you want to add a style to the header of a PagingScrollTable, just do this:
PagingScrollTable scrollTable = ...
scrollTable.getHeaderTable().addStyleName(row, "myStyleName");
and then put in a CSS rule for myStyleName to set the cursor to whichever one you want, like so:
.myStyleName {
cursor: default;
}
Note that the reason why the cursor is a pointer is that clicking on a column header in a PagingScrollTable will sort the table by that column. To disable that, call scrollTable.setSortPolicy(AbstractScrollTable.SortPolicy.DISABLED
Original answer This will add a style to a column in the body of the table, but not the header or footer:
Since you mention ColumnDefinition I presume you're talking about PagingScrollTable. In that case, the way to add a CSS style to a cell is in the CellRenderer for the cell. Once you've got a ColumnDefinition, do something like this:
CellRenderer<YourRowType, String> cellRenderer = new CellRenderer<YourRowType, String>() {
public void renderRowValue(RowType rowValue, ColumnDefinition<RowType, String> columnDef,
TableDefinition.AbstractCellView<RowType> view) {
view.setHTML(value);
view.addStyleName("myStyleName");
}
};
columnDefinition.setCellRenderer(cellRenderer);
You'll have to change the type parameters of CellRenderer<YourRowType, String> appropriately, but that's more or less how to do it.