DataTable HTMLTemplateFormatter cell size

Community Support
1

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 rbokeh - How to color rows and/or cells in a Bokeh DataTable? - Stack Overflow.

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 bokeh/tables.less at b56543346bad8cdabe99960e63133619feaafbb7 · bokeh/bokeh · GitHub 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?

2

Hoping to give this a bump…

3

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)

4

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.

5

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.

6

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

1 Like