All examples
framework
React: upload and render
A React hook-based uploader.
Use TabularJS in React to handle file uploads and display parsed data with useState and a file input ref.
jsx
import { useRef, useState } from 'react';
import tabularjs from 'tabularjs';
export default function Uploader() {
const inputRef = useRef(null);
const [data, setData] = useState(null);
const onChange = async (e) => {
const file = e.target.files[0];
if (!file) return;
const result = await tabularjs(file);
setData(result.worksheets[0].data);
};
return (
<div>
<input type="file" ref={inputRef} onChange={onChange} />
{data && (
<table>
<tbody>
{data.map((row, i) => (
<tr key={i}>
{row.map((cell, j) => <td key={j}>{cell}</td>)}
</tr>
))}
</tbody>
</table>
)}
</div>
);
}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