Grouping column headers - Custom method

Community Show & Tell
,
1

Just wanted to share a nice temporary solution to grouping columns in a table by color until we have the ability to group columns together with a grouped column header.

Assuming you have a table component already placed in the main container of your Retool app, add the custom CSS section of your app:

/* Stay within scope of main grid  */
.retool-grid-content {

  /* Target the rows in the cluster table component */
  [class*="nameOfYourTable"] [role="row"] {

   /* Changes header colors at index 1 and 2 */
    :nth-child(n+1) {
      &[role="columnheader"] {
        background: {{ theme.automatic[1] }} !important;
      }
    }

   /* Changes header colors at index 3 and 4 */
    :nth-child(n+3) {
      &[role="columnheader"] {
        background: {{ theme.automatic[4] }} !important;
      }
    }

    /* Changes header colors at index 5 and 6 */
    :nth-child(n+5) {
      &[role="columnheader"] {
        background: {{ theme.canvas }} !important;
      }
    }

    /* Changes header colors at index 7 and 8 */
    :nth-child(n+7) {
      &[role="columnheader"] {
        background: {{ theme.automatic[3] }} !important;
      }
    }

    /* Changes header colors at index 9 and 10 */
    /* NOTE: If you need more colors due to having more columns, you can continue the pattern we've been following. The number that follows 'n+...' will always be the starting target column index */
    :nth-child(n+9) {
      &[role="columnheader"] {
        background: #FFCCA9 !important;
      }
    }

     /* Changes header colors at index 11 and higher. */
     /* NOTE: If you want to style your remaining columns but you want your last header background style color to start at an index higher than 11, you can simply increase the number value. */
    :nth-child(n+11)[role="columnheader"] {
      background: {{ theme.automatic[5] }} !important;
    }
  }
}

The only changes you need to make to the above code are:

  • Change nameOfYourTable in [class*="nameOfYourTable"] to whatever the name/id of your table is;
  • Change the child indexing to match the amount of columns in your table;
  • Change the background colors to whatever you want each grouping of columns to be colored as;

Let me know if you guys have any questions, and I hope this helps some people in their apps!

Also -- this custom CSS should stick through Retool updates :slight_smile: Happy coding!!!

2 Likes