CSS for Grid
In this tutorial, we aim to learn how to style the Grid widget. Be sure to have completed the CSS tutorial first.
First, create a new project with the File menu, then New project..., select RPGM project and name our new project "CSS_InTheGrid".
In this section we directly inject CSS through HTML code in the cell values (including headers) of the grid (data.frame or matrix).
Create an R file named gridCSS.R and add it to your sequencer. Add the following code which generates a grid example, that we will edit after.
Create a GUI file named gridCSS.pgui, and add it to your sequencer after gridCSS.R.
In the GUI, add a grid widget with value field (as an R expression) :
It displays the grid with the default style for every cell, close to Excel style.
We can style contextually to a column value by adding these code to the .R file.
Another example is to change the alignment according to the value.
text-align must be applied to the block, not the text, and would not work here. Following this way, we can also modify row names and col names styles. For example:
You can also create CSS classes in the project.ppro file on the tab CSS and call them here.
Modifying Grid Properties
The aim is to modify directly the CSS properties of the grid. We lose the ability to style contextually to the R values, but we have more flexibilty about styling.
In the same project, we restart with the following initial code for the default grid:
In the project.ppro file, in the CSS tab, we will write our own CSS for the grid.
First, we modify the column headers. This is possible with the selector
However, when a cell is selected, the style does not change anymore. To restore this property, we also need to modify the style when the column is selected. The selector is
To modify the row names in the same way, the corresponding selectors are
To conclude about the col and row names, it remains to modify the top left cell, which is empty. To add content to it (like a title), we can do it and style it with the selector
It remains to access the content of the grid. We can add a background color to the lines according the the line number, if even or not. The
.excel-content tr selector gets all lines of the table (except row and col headers), and
.excel-content tr:nth-child(even) gets all even rows.
It is also possible to modify the style of the user selection on the grid. The selector of the selected cell is
.excel-cellselector. Its default style is
border: 2px solid #4b89ff;. We can for example set
Moreover, the range of the selection (which differs to the selected cell) can also be modified using the selector
.excel-rangeselector whose default value is
border: 1px solid #4b89ff; background-color: rgba(75, 137, 255, 0.12);.
This ends our tutorial! You can download the second application as a pgm file for RPGM here (that you can create with the top menu PGM -> Export as PGM) and as a zip file containing all the project for RCode here.