is a live demo.\n\n\n Previewing data in a React data grid (click to show)
\n\n[`react-data-grid`](https://npm.im/react-data-grid) is a data grid tailored for\nreact. It expects two properties: `rows` of data objects and `columns` which\ndescribe the columns. For the purposes of massaging the data to fit the react\ndata grid API it is easiest to start from an array of arrays.\n\nThis demo starts by fetching a remote file and using `XLSX.read` to extract:\n\n```js\nimport { useEffect, useState } from \"react\";\nimport DataGrid from \"react-data-grid\";\nimport { read, utils } from \"xlsx\";\n\nconst url = \"https://oss.sheetjs.com/test_files/RkNumber.xls\";\n\nexport default function App() {\n const [columns, setColumns] = useState([]);\n const [rows, setRows] = useState([]);\n useEffect(() => {(async () => {\n const wb = read(await (await fetch(url)).arrayBuffer(), { WTF: 1 });\n\n /* use sheet_to_json with header: 1 to generate an array of arrays */\n const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });\n\n /* see react-data-grid docs to understand the shape of the expected data */\n setColumns(data[0].map((r) => ({ key: r, name: r })));\n setRows(data.slice(1).map((r) => r.reduce((acc, x, i) => {\n acc[data[0][i]] = x;\n return acc;\n }, {})));\n })(); });\n\n return ;\n}\n```\n\n \n\n\n Previewing data in a VueJS data grid (click to show)
\n\n[`vue3-table-lite`](https://github.com/linmasahiro/vue3-table-lite) is a simple\nVueJS 3 data table. It is featured [in the VueJS demo](/demos/vue/modify/).\n\n \n\n\n Populating a database (SQL or no-SQL) (click to show)
\n\nThe [`database` demo](/demos/database/) includes examples of working with\ndatabases and query results.\n\n \n\n\n Numerical Computations with TensorFlow.js (click to show)
\n\n[`@tensorflow/tfjs`](@tensorflow/tfjs) and other libraries expect data in simple\narrays, well-suited for worksheets where each column is a data vector. That is\nthe transpose of how most people use spreadsheets, where each row is a vector.\n\nA single `Array#map` can pull individual named rows from `sheet_to_json` export:\n\n```js\nconst XLSX = require(\"xlsx\");\nconst tf = require('@tensorflow/tfjs');\n\nconst key = \"age\"; // this is the field we want to pull\nconst ages = XLSX.utils.sheet_to_json(worksheet).map(r => r[key]);\nconst tf_data = tf.tensor1d(ages);\n```\n\nAll fields can be processed at once using a transpose of the 2D tensor generated\nwith the `sheet_to_json` export with `header: 1`. The first row, if it contains\nheader labels, should be removed with a slice:\n\n```js\nconst XLSX = require(\"xlsx\");\nconst tf = require('@tensorflow/tfjs');\n\n/* array of arrays of the data starting on the second row */\nconst aoa = XLSX.utils.sheet_to_json(worksheet, {header: 1}).slice(1);\n/* dataset in the \"correct orientation\" */\nconst tf_dataset = tf.tensor2d(aoa).transpose();\n/* pull out each dataset with a slice */\nconst tf_field0 = tf_dataset.slice([0,0], [1,tensor.shape[1]]).flatten();\nconst tf_field1 = tf_dataset.slice([1,0], [1,tensor.shape[1]]).flatten();\n```\n\nThe [`array` demo](demos/array/) shows a complete example.\n\n \n\n\n### Generating HTML Tables\n\n**API**\n\n_Generate HTML Table from Worksheet_\n\n```js\nvar html = XLSX.utils.sheet_to_html(worksheet);\n```\n\nThe `sheet_to_html` utility function generates HTML code based on the worksheet\ndata. Each cell in the worksheet is mapped to a `` element. Merged cells\nin the worksheet are serialized by setting `colspan` and `rowspan` attributes.\n\n**Examples**\n\nThe `sheet_to_html` utility function generates HTML code that can be added to\nany DOM element by setting the `innerHTML`:\n\n```js\nvar container = document.getElementById(\"tavolo\");\ncontainer.innerHTML = XLSX.utils.sheet_to_html(worksheet);\n```\n\nCombining with `fetch`, constructing a site from a workbook is straightforward:\n\n\n Vanilla JS + HTML fetch workbook and generate table previews (click to show)\n\n```html\n\n \n \n \n \n\n```\n\n \n\n\n React fetch workbook and generate HTML table previews (click to show)\n\nIt is generally recommended to use a React-friendly workflow, but it is possible\nto generate HTML and use it in React with `dangerouslySetInnerHTML`:\n\n```jsx\nfunction Tabeller(props) {\n /* the workbook object is the state */\n const [workbook, setWorkbook] = React.useState(XLSX.utils.book_new());\n\n /* fetch and update the workbook with an effect */\n React.useEffect(() => { (async() => {\n /* fetch and parse workbook -- see the fetch example for details */\n const wb = XLSX.read(await (await fetch(\"sheetjs.xlsx\")).arrayBuffer());\n setWorkbook(wb);\n })(); });\n\n return workbook.SheetNames.map(name => (<>\n name\n \n ));\n}\n```\n\nThe [`react` demo](demos/react) includes more React examples.\n\n \n\n\n VueJS fetch workbook and generate HTML table previews (click to show)\n\nIt is generally recommended to use a VueJS-friendly workflow, but it is possible\nto generate HTML and use it in VueJS with the `v-html` directive:\n\n```jsx\nimport { read, utils } from 'xlsx';\nimport { reactive } from 'vue';\n\nconst S5SComponent = {\n mounted() { (async() => {\n /* fetch and parse workbook -- see the fetch example for details */\n const workbook = read(await (await fetch(\"sheetjs.xlsx\")).arrayBuffer());\n /* loop through the worksheet names in order */\n workbook.SheetNames.forEach(name => {\n /* generate HTML from the corresponding worksheets */\n const html = utils.sheet_to_html(workbook.Sheets[name]);\n /* add to state */\n this.wb.wb.push({ name, html });\n });\n })(); },\n /* this state mantra is required for array updates to work */\n setup() { return { wb: reactive({ wb: [] }) }; },\n template: `\n `\n};\n```\n\nThe [`vuejs` demo](demos/vue) includes more React examples.\n\n \n\n### Generating Single-Worksheet Snapshots\n\nThe `sheet_to_*` functions accept a worksheet object.\n\n**API**\n\n_Generate a CSV from a single worksheet_\n\n```js\nvar csv = XLSX.utils.sheet_to_csv(worksheet, opts);\n```\n\nThis snapshot is designed to replicate the \"CSV UTF8 (`.csv`)\" output type.\n[\"Delimiter-Separated Output\"](#delimiter-separated-output) describes the\nfunction and the optional `opts` argument in more detail.\n\n_Generate \"Text\" from a single worksheet_\n\n```js\nvar txt = XLSX.utils.sheet_to_txt(worksheet, opts);\n```\n\nThis snapshot is designed to replicate the \"UTF16 Text (`.txt`)\" output type.\n[\"Delimiter-Separated Output\"](#delimiter-separated-output) describes the\nfunction and the optional `opts` argument in more detail.\n\n_Generate a list of formulae from a single worksheet_\n\n```js\nvar fmla = XLSX.utils.sheet_to_formulae(worksheet);\n```\n\nThis snapshot generates an array of entries representing the embedded formulae.\nArray formulae are rendered in the form ","readmeFilename":"README.md","users":{"326060588":true,"52u":true,"nxs":true,"detj":true,"du2b":true,"hema":true,"ohar":true,"vwal":true,"ysk8":true,"zhen":true,"anker":true,"iamdb":true,"lgh06":true,"mecal":true,"ncoop":true,"rshaw":true,"tstam":true,"456wyc":true,"bardia":true,"bhedge":true,"cdrnch":true,"dainov":true,"dy_hxl":true,"ecelis":true,"endsun":true,"eshinn":true,"flpamr":true,"hiwanz":true,"hualei":true,"jimjin":true,"kinday":true,"mathjs":true,"nanook":true,"necinc":true,"oblank":true,"serdar":true,"tomi77":true,"tscole":true,"webbot":true,"wisetc":true,"wkx101":true,"ygjack":true,"akwa770":true,"almazov":true,"ayoungh":true,"chengen":true,"coridyn":true,"ezodude":true,"fingnet":true,"kaashin":true,"lijq123":true,"madvedd":true,"mirreal":true,"niggler":true,"ramaleh":true,"rapomon":true,"sharper":true,"sheetjs":true,"sishuai":true,"tiagoha":true,"toddliu":true,"ungurys":true,"vijayst":true,"xfloops":true,"yanghcc":true,"aconrado":true,"ahvonenj":true,"andrewyg":true,"baristna":true,"benhuang":true,"bonashen":true,"brostoch":true,"clholzin":true,"frankl83":true,"johniexu":true,"jvill030":true,"kevin_xi":true,"kim3hyo3":true,"konamgil":true,"leeonway":true,"losymear":true,"markstos":true,"marsking":true,"mayq0422":true,"nick_mcg":true,"oboochin":true,"olamedia":true,"oskaryil":true,"pddivine":true,"rochejul":true,"samuelrn":true,"scaffrey":true,"valorkin":true,"yaozhenx":true,"castasamu":true,"diwushi33":true,"honingwon":true,"j_junyent":true,"luiscauro":true,"magicxiao":true,"mistkafka":true,"neoklosch":true,"ninozhang":true,"pingortle":true,"pirxpilot":true,"polaretto":true,"rbecheras":true,"ricoterox":true,"schiznitz":true,"sherylynn":true,"steve3d3d":true,"titarenko":true,"tomgao365":true,"trahomoto":true,"visual.io":true,"yoshihide":true,"zuizuihao":true,"ahmedmaawy":true,"bmccallion":true,"brennebeck":true,"codebruder":true,"commandlxl":true,"frozzerrer":true,"jakedetels":true,"jarvis1024":true,"jasonevrtt":true,"junipertcy":true,"neuesleben":true,"nkalodimas":true,"ocd_lionel":true,"raycharles":true,"sheetjsdev":true,"shuoshubao":true,"wanglinwei":true,"a-dabrowski":true,"bobonthenet":true,"fengmiaosen":true,"feryardiant":true,"frostfang83":true,"haobingwang":true,"hazemkhaled":true,"julianbeggs":true,"sessionbean":true,"tunnckocore":true,"wangnan0610":true,"bretbouchard":true,"jacobmischka":true,"shekharreddy":true,"superchenney":true,"usabilityetc":true,"zhenguo.zhao":true,"alexbuczynsky":true,"rona_dinihari":true,"igor.gudymenko":true,"phgyorgygulyas":true,"shanewholloway":true,"subbumullapudi":true,"willbreitkreutz":true,"aleksandrsidorov":true,"illustratordavid":true,"michaelsouellette":true,"rahulraghavankklm":true}} |