{"type":"doc","content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"This documentation requires knowledge about HTML and CSS","type":"text"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"You can customize your table grid (TG) using HTML markup:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"add your corporate style to the grid using CSS ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"format the currency values in your table","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"}]}]}]},{"type":"paragraph","content":[{"text":"This page provides an explanation how you can do it in a few easy steps!","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Available CSS classes and IDs for rows, columns, and cells ","type":"text"}]},{"type":"paragraph","content":[{"text":"The names for classes and IDs have the following pattern:","type":"text"}]},{"type":"paragraph","content":[{"text":"Class for rows = \"tg-row-customfield__grid\"","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Class for cols = \"tg-col--","type":"text","marks":[{"type":"strong"}]},{"text":"customfield_","type":"text","marks":[{"type":"strong"}]},{"text":"'","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Id for table = \"","type":"text","marks":[{"type":"strong"}]},{"text":"customfield_","type":"text","marks":[{"type":"strong"}]},{"text":"","type":"text","marks":[{"type":"strong"}]},{"text":"_grid","type":"text","marks":[{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Id for header = \"tg-header-","type":"text","marks":[{"type":"strong"}]},{"text":"customfield_","type":"text","marks":[{"type":"strong"}]},{"text":"","type":"text","marks":[{"type":"strong"}]},{"text":"_grid","type":"text","marks":[{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Id for footer = ","type":"text","marks":[{"type":"strong"}]},{"text":"customfield_<","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"gridId>","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"_grid_pager","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Id ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"for the index column label = \"","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"customfield__grid_rn","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"\"","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"paragraph","content":[{"text":"Id for column labels = \"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"customfield__grid_<","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"columnNameAsInConfigs","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":">","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Id for cells = \"tg-cell-r1-c2--","type":"text","marks":[{"type":"strong"}]},{"text":"customfield_","type":"text","marks":[{"type":"strong"}]},{"text":"","type":"text","marks":[{"type":"strong"}]},{"text":"_grid","type":"text","marks":[{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Examples","type":"text"}]},{"type":"paragraph","content":[{"text":"Assume you have a table grid with the custom field id is \"10100\":","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find all rows of the grid, all you need is to use the following selector: ","type":"text"},{"text":"\"tr.tg-row-customfield_10100_grid\"","type":"text","marks":[{"type":"em"},{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"2492b9e0-626a-4b54-aed9-05166e94b35e","collection":"contentId-2425078","type":"file","height":689}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the \"Status\" column: ","type":"text"},{"text":"\"td.","type":"text","marks":[{"type":"em"},{"type":"strong"}]},{"text":"tg-col-istatus-customfield_10100_grid","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"em"},{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"em"},{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"93a53f9e-42e0-41c0-8d24-78f806aa92b4","collection":"contentId-2425078","type":"file","height":706}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the table of your grid (excluding the header, the footer, and the columns' titles): ","type":"text"},{"text":"\"table#customfield_10100_grid\"","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"5cfa00a5-d0eb-4172-aaa5-9849fb92c59d","collection":"contentId-2425078","type":"file","height":728}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the header of your grid: ","type":"text"},{"text":"\"div#","type":"text","marks":[{"type":"strong"}]},{"text":"tg-header-customfield_10100_grid","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"79835061-2e58-4f7d-becd-5089167dc76f","collection":"contentId-2425078","type":"file","height":765}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the footer of your grid (pager):","type":"text"},{"text":" \"div#customfield_10100_grid_pager\"","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"76b8f3ad-74f5-46c3-b1d9-46acf04e1125","collection":"contentId-2425078","type":"file","height":766}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the label cell of the index column:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" \"th","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"#","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"customfield_10100_grid_rn","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"7d1ea3cf-8653-48ee-b8b4-a9ddf9b05f69","collection":"contentId-2425078","type":"file","height":672}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the label cell of the column \"Acceptability\" defined in the configurations as \"unmiti_acceptability\": ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"\"th#","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"customfield_10100_grid_unmiti_acceptability","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"},{"type":"textColor","attrs":{"color":"#222222"}}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"dd6ecc1d-9234-4382-9eb3-e736f357d031","collection":"contentId-2425078","type":"file","height":642}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To find the cell from the first column of the second row: ","type":"text"},{"text":"\"#","type":"text","marks":[{"type":"strong"}]},{"text":"tg-cell-r2c1-customfield_10100_grid","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"4701b233-c001-417d-966a-202afc44e294","collection":"contentId-2425078","type":"file","height":746}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"Now, let's make your grid a little bit more fun and bring some colors.","type":"text"}]},{"type":"paragraph","content":[{"text":"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\".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1028,"id":"c3656b69-47da-48da-a27f-806aaa5ac314","collection":"contentId-2425078","type":"file","height":418}}]},{"type":"paragraph","content":[{"text":"In the \"Announcement\" text block we can add our CSS styles:","type":"text"}]},{"type":"paragraph","content":[{"text":"Let's make our header and footer pink:","type":"text"}]},{"type":"codeBlock","content":[{"text":"div#tg-header-customfield_10100_grid, div#customfield_10100_grid_pager {\n\tbackground: pink\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Our \"CAUSE\" column yellow...","type":"text","marks":[{"type":"subsup","attrs":{"type":"sup"}}]}]},{"type":"codeBlock","content":[{"text":"td.tg-col-unmiti_cause-customfield_10100_grid {\nbackground: yellow\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Let's make the column titles shown in different font colors","type":"text"}]},{"type":"codeBlock","content":[{"text":"th#customfield_10100_grid_unmiti_cause {\ncolor: purple\n}\n\nth#customfield_10100_grid_unmiti_acceptability {\ncolor: green\n}\n\nth#customfield_10100_grid_unmiti_haz_consequence {\ncolor: blue\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"And let's make \"Environmental risks\" in bold","type":"text"}]},{"type":"codeBlock","content":[{"text":"td#tg-cell-r2c1-customfield_10100_grid {\nfont-weight: bold;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"And change the visibility status under the text filed to \"public\"","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1280,"id":"93f8d339-f75a-45df-9f3b-6d285334ad49","collection":"contentId-2425078","type":"file","height":599}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"Volia! Our grid looks so beautiful now! ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":56.0},"content":[{"type":"media","attrs":{"width":1194,"id":"a4ad32d5-2515-4bf4-be44-43b5c78e1773","collection":"contentId-2425078","type":"file","height":328}}]}],"version":1}

Browser not supported