How to set the background color of a checkbox column?

💬 App Building
1

Hello, in a table, we would like to set the Background color of a column typed as Checkbox.
For example here we would like to grey out rows that are excluded:

image

The issue is that it seems that the Background color property is not available for column types containing a component eg. Dropdown, Datepicker, Radio button or Text input.

Is there a solution for that ? :thinking:

1 Like
2

Don't think this is possible via the traditional background field in the column setting. What you could do tho is to add. this logic to your app javascript settings. Haven't tested it fully yet but something in the lines of:

window.addEventListener('load', function () {
  setInterval(function(){ 
    var checkboxes = window.document.getElementsByClassName('boolean-cell-true')

    for(let i = 0; i <= checkboxes.length; i++){
      if (checkboxes[i] == undefined) { continue; }
      console.log(checkboxes[i])
      checkboxes[i].parentElement.parentElement.style.background = '#ccc'
    }
  }, 1000);
} )() }}

The idea being that a) this needs to execute ONCE all tables have been loaded and then periodically checked to color new elements.

NOT TESTED, just thought that's a start, you'll need to work out the deets and fine-tune it a bit. E.g., which elements do you want to color and in which tables (each table has it's on attribute you can use)

Hope that helps a bit

3

There's the awesome :has selector in CSS which would fit perfectly for this use-case but it's not supported by any browser yet :cry:

You could use

.cell-container:has(> .boolean-cell-true) { background: #ccc }

Hope to see that live at some point...

4

Thank you very much for these potential solutions :grinning_face_with_smiling_eyes:
The has version would be great indeed !

1 Like
5

Is this also possible by the javascript code that if we can add group checkboxes within the cell of custom column of the table ?