All examples
integration
Use with LemonadeJS
Reactive rendering with tiny footprint.
TabularJS pairs perfectly with LemonadeJS — a ~5kB reactive library from the same team — to build a file preview UI.
html
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tabularjs/dist/index.js"></script>
<div id="root"></div>
<script>
function Preview() {
const self = this;
self.sheets = [];
self.onupload = async function(e) {
const result = await tabularjs(e.target.files[0]);
self.sheets = result.worksheets;
};
return `<div>
<input type="file" onchange="self.onupload(event)" />
<section :loop="self.sheets">
<h3>{{self.name}}</h3>
<p>{{self.data.length}} rows</p>
</section>
</div>`;
}
lemonade.render(Preview, document.getElementById('root'));
</script>Live Preview
Sample output rendered in Jspreadsheet — upload your own file to try it.
sample-output.xlsx
Drag a file anywhere on this card to replace the sample data