DataTable HTMLTemplateFormatter cell size

Currently, one can set the background color and other CSS style elements of DataTable cells using the HTMLTemplateFormatter. However, this assigns a child <div class> to the parent <div class slick-cell> which has padding set to 4 px and border set to 0.25 px. Thus, there’s always going to be a bit of white background behind the color, as seen in the answer to https://stackoverflow.com/questions/50996875/how-to-color-rows-and-or-cells-in-a-bokeh-datatable.

It would be nice to be able to color an entire row without that white margin showing up. With the parent having that padding, I don’t think this is possible. One could set the width of the child to something like 110% in the HTMLTemplateFormatter, but this would only push the background color in one direction.

I think it would be better for the parent’s padding and border to be set to 0 px, and then the child (which the user gets control over with HTMLTemplateFormatter) gets to be anywhere the user wants it. So I’d like to change https://github.com/bokeh/bokeh/blob/b56543346bad8cdabe99960e63133619feaafbb7/bokehjs/src/less/widgets/tables.less lines 49, 50, and 52 to 0 px.

Is this the kind of thing I need to make a custom model for, or should I put in a pull request?

Hoping to give this a bump…

I also would find this very useful. I’ve been playing around with the CSS and can’t seem to find the correct property that affects the cell margin. (Novice JS)

AFAIK nothing was ever put into the tracker, so I’d suggest making a GitHub Issue to request it as a feature. In terms of work on the library itself, things that are not recorded in the tracker basically don’t exist.

I’ll put in an issue for it. I don’t want to put in a pull request with my suggested answer because it does make the default look not look as good, so I think that’s something the core developers will need to think through.

See [FEATURE] Give users control over table's cell paddings so rows/columns can be colored continuously · Issue #10985 · bokeh/bokeh · GitHub.

1 Like