My challenge is to center a react handsontable component within a container div while maintaining its autosizing feature. In this scenario, I aim for the width of div #example1 to adapt based on the table's content (adjusting as the number of columns changes).
For reference, here is the example: https://jsfiddle.net/opike99/b1ux0rLy/5/
HTML:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df5fcf3f9eef2f3e9fcfff1f8ddacacb3ac">[email protected]</a>/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b9b0bfb5a2bebfa5b0b3bdb491e0e0ffe0">[email protected]</a>/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>
<div class="outer2">
<div class="outer1">
<div id="example1">
</div>
</div>
</div>
JS:
const container = document.querySelector('#example1');
const numberOfColumns = 7;
const hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(5, numberOfColumns),
colHeaders: true,
rowHeaders: true,
hiddenColumns: true,
width: 'auto',
height: 'auto',
licenseKey: 'non-commercial-and-evaluation',
});
// re-render your Handsontable instance
hot.render()
CSS:
.outer2 {
}
.outer1 {
}
#example1 {
border-style: solid;
/* width: fit-content; */
}