Utility to allow pasting data intact from Excel (or any spreadsheet) into an HTML table with editable elements.
Requires a table with input elements or elements with contenteditable set to true.
npm install paste-from-excel
import parse from 'paste-from-excel' const handlePaste = (e) => { return parse(e) } return ( <TableContainer onPaste={ handlePaste }> <Table> /* TableCells with inputs */ </Table> </TableContainer> )
import parse from 'paste-from-excel' const handlePaste = (e) => { const options = { rowSelector: '.rt-tr-group', cellSelector: '.rt-td' } return parse(e, options) } return ( <div onPaste={ handlePaste }> <ReactTable data={data} columns={columns} /> </div> )
<script src="https://cdn.jsdelivr.net/gh/n3ps/paste-from-excel/dist/paste-from-excel.min.js"> <table id="my-table"> <tr> <td><input /></td> <td><input /></td> </tr> </table> <script> var myTable = document.querySelector('#my-table') myTable.addEventListener('paste', handlePaste) function handlePaste (e) { return window.PasteFromExcel(e) } </script>
rowSelector
- Sets the selector to identify a "row". Default:
tr
cellSelector
- Sets the selector to identify a "cell". Default:
td
inputSelector
- Sets the selector for the element that act on the paste event, and to find suceeding "editable elements". Default:
input