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".

Direct Injection

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.

set.seed(0)
n <- 22

thegrid <- data.frame(sex = sample(c("Male", "Female"), n, TRUE), mark_20 = as.integer(rnorm(n, 12, 3)))

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) : thegrid.

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.

I <- thegrid$mark_20 < 10

thegrid$mark_20[I] <- paste("<strong style='color:#e74c3c'>", thegrid$mark_20[I], "</strong>", sep="")

Another example is to change the alignment according to the value.

I <- thegrid$sex == "Female"

thegrid$sex[I] <- paste("<span style='float:right'>", thegrid$sex[I], "</span>", sep="")

We use float since 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:

colnames(thegrid)[2] <- "<strong style='color:#2980b9'>mark_20</strong>"

Tip

You can also create CSS classes in the project.ppro file on the tab CSS and call them here.

You can download the 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.

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:

thegrid <- mtcars

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 .excel-colname.

.excel-colname {
    background: rgb(52, 152, 219);
    color: white;
}

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 .excel-colname.excel-headerselected.

.excel-colname.excel-headerselected {
    background: rgb(41, 128, 185);
}

To modify the row names in the same way, the corresponding selectors are .excel-rowname and .excel-rowname.excel-headerselected.

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 .excel-firstcelldiv:after.

.excel-firstcelldiv:after {
    font-weight: bold;
    margin-left: 2em;
    content: "mtcars";
}

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.

.excel-content tr:nth-child(even) {
    background: rgb(236, 240, 241);
}

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

.excel-cellselector {
    border: 2px solid rgb(231, 76, 60)
}

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);.

.excel-rangeselector {
    border: 1px solid rgb(231, 76, 60);
    background-color: rgba(231, 76, 60, 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.