HTML Markup

This documentation requires knowledge about HTML and CSS

You can customize your table grid (TG) using HTML markup:

add your corporate style to the grid using CSS
format the currency values in your table

This page provides an explanation how you can do it in a few easy steps!

Since TG 1.26.0, we introduced CSS classes and IDs for rows, columns, and cells for your convenience to easily find the elements that you want to apply CSS styles to.

Available CSS classes and IDs for rows, columns, and cells

The names for classes and IDs have the following pattern:

Class for rows = "tg-row-customfield_<gridId>_grid"

Class for cols = "tg-col-<columnName>-customfield_<gridId>'

Id for table = "customfield_<gridId>_grid"

Id for header = "tg-header-customfield_<gridId>_grid"

Id for footer = customfield_<gridId>_grid_pager

Id for the index column label = "customfield_<gridId>_grid_rn"

Id for column labels = "customfield_<gridId>_grid_<columnNameAsInConfigs>"

Id for cells = "tg-cell-r1-c2-<columnNameAsInConfigs>-customfield_<gridId>_grid"

Examples

Assume you have a table grid with the custom field id is "10100":

To find all rows of the grid, all you need is to use the following selector: "tr.tg-row-customfield_10100_grid"

To find the "Status" column: "td.tg-col-istatus-customfield_10100_grid"

To find the table of your grid (excluding the header, the footer, and the columns' titles): "table#customfield_10100_grid"

To find the header of your grid: "div#tg-header-customfield_10100_grid"

To find the footer of your grid (pager): "div#customfield_10100_grid_pager"

To find the label cell of the index column: "th#customfield_10100_grid_rn"

To find the label cell of the column "Acceptability" defined in the configurations as "unmiti_acceptability": "th#customfield_10100_grid_unmiti_acceptability"

To find the cell from the first column of the second row: "#tg-cell-r2c1-customfield_10100_grid"

Now, let's make your grid a little bit more fun and bring some colors.

We will do it using the Announcement Banner free plugin for Jira. To enter it, press 'gg' on your keyboard and the appeared panel type: "Announcement banner".

In the "Announcement" text block we can add our CSS styles:

Let's make our header and footer pink:

div#tg-header-customfield_10100_grid, div#customfield_10100_grid_pager {
	background: pink
}

^{Our "CAUSE" column yellow...}

td.tg-col-unmiti_cause-customfield_10100_grid {
background: yellow
}

Let's make the column titles shown in different font colors

th#customfield_10100_grid_unmiti_cause {
color: purple
}

th#customfield_10100_grid_unmiti_acceptability {
color: green
}

th#customfield_10100_grid_unmiti_haz_consequence {
color: blue
}

And let's make "Environmental risks" in bold

And change the visibility status under the text filed to "public"

Volia! Our grid looks so beautiful now!