How to set border radius for table?

Tags: #<Tag:0x00007f51c7358db8> #<Tag:0x00007f51c7358c28>

Hi to all.
I have Handsontable 12.4 and can’t find way to round table corners. I’m trying this solutions: https://github.com/handsontable/handsontable/issues/6259#issuecomment-530787283
What does it mean all layers in the first paragraph? I’m trying to set border radius to th and td using selectors. But in this case I got next situation while horizontal scrolling Monosnap%20Aviator%202025-02-20%2021-35-48
Set border radius for parent block looks next: screenshot2
And also there is a problem with border radius after adding new row with border radius (but it disappear after scroll):

Hi @alexx.globenko

In Handsontable v15.0.0 we introduced themes with one of the pre-defined theme already rounded in the corners. You can read more about it at https://handsontable.com/docs/javascript-data-grid/themes/ and test the theme in action in this demo https://stackblitz.com/edit/pgrkmldm-crdz5m9y?file=some-custom-style.css,index.js,index.html,styles.css (it allows to modify styles within the custom theme).

That option was not available before v15.0.0 and required many smaller changes across the library.

Hi @aleksandra_budnik
For some reasons for now we can’t update to v15. There is demo in v12 doc and it works fine with rounding parent block. https://codesandbox.io/p/sandbox/mystifying-waterfall-wgv83f
But at the same time in one of the topic I found sandbox which reproduce my problem with such approach: https://jsfiddle.net/AlexGGGG/48aqw2t3/8/ Could you please provide me with any thoughts how can I move scrollbar from after the table to above last table row?

I am sorry but I do not understand this requirement. Could you maybe share a draft?

@aleksandra_budnik Yes sure. I have already provide you with fiddle (second url in previous message).

@aleksandra_budnik
And I need bottom scrollbar to be placed like on this page https://handsontable.com/docs/react-data-grid/demo/

I am sorry but I cannot see an option for a quick fix without updating to v15+

Hi @aleksandra_budnik
Looks like v15 also has same issue with scrollbar.Monosnap%20Aviator%202025-02-24%2011-26-51

It may need some adjustments. I recommend checking those two demos where we applied custom themes

Hi @aleksandra_budnik
I migrated to v15 but there is another issue with border radius. I need initial table be one row with autocompletes/dropdowns. If I set height prop to ‘auto’ or any number value it set overflow: hidden to main table wrapper block. Everything fine in this case but because hidden overflow autocomplete/dropdown is invisible. If I remove any height value or strict set overflow: visible I can see cell background, borders outside table’s main border.

For example context menu works fine. It looks like it renders different. How can I make autocomplete visible if table has overflow hidden?

There is a demo https://stackblitz.com/edit/pgrkmldm-ehvz3xnb?file=index.js I have commented height prop. You can uncomment it and see another issue but in this case dropdown will be ok

Hi @alexx.globenko

Thank you for the demo.

The table should be able to at least have a hight to show the cell editor and one more cell to show dropdown menu correctly. You may experience some option misalignment but that wilk be solved in the upcoming version (planned release next week).

When it comes to the top-right border it will be rounded if that is the last column in the grid and flat if there are any other columns. But maybe I misunderstood the case as the outcomes from your demo and the screenshot are quite different.