HTML Markup

So you want to customize your table grid (TG)? Make it more beautiful by adjusting its CSS to your corporate style? Or maybe just to format the currency values in your table? He is 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.

Some Formality

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"

Let's bring on some some examples! 

Assume you have a grid which custom field id is "10100".

If you want 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

td#tg-cell-r2c1-customfield_10100_grid {
font-weight: bold;
}

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

Volia! Our grid looks so beautiful now!