CSS and markup for a status bar to put below the Handsontable sheet

Tags: #<Tag:0x00007efc7056e1b8> #<Tag:0x00007efc7056e078>

Has anyone implemented a status bar similar to the one in Excel?

My main use case is displaying status information (“Updating data from server”, “Sending changes to server”, etc.).

Suggestions for CSS/fonts to use to make it “blend in” with the handsontable sheet?

Hi @bernt.brenna

Thank you for contacting us. We don’t provide any guidelines about the styling of the elements that are not the part of the table. Every element that is outside the table is considered as a custom implementation based on the user’s needs.

We have the example that we created internally and it has an UI similar to the one known from Excel or Google Sheets. Please, keep in mind that it’s just our interpretation and not official guide :slight_smile:

Link: https://jsfiddle.net/xocpwq3j/12/

Thanks @adrian.szymanski . I wonder about the width of the toolbar/statusbar: How can I make the toolbar/statusbar have exactly the same width as the spread?

Hi @bernt.brenna

I think the best way would be to get the width of the Handsontable’s container with native JS methods and then set the toolbar width based on that value. Please, keep in mind that in such situation it is best to set the table’s width in the configuration options.

Here’s an example: https://jsfiddle.net/jndy86r0/1/