Text wrapping
You can use the wrap: true to automatic wrapping.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZDJiMDFkMTM1MDFiMzVkM2U2MTIwYWZjY2M4Y2JmZDM1ZDM0Yjc3ZWM4YjliNTU2NWYwMzBkMDYxMDhjNzVhNjJjNmE0MjUyNTMyMWU1NzE3ZTA0ZmY4NGNiNGY1YTUyMWVkNWNmNGU1MmViYmI0N2RmZTAxZTM0ODUzNjEwNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qY3hNREUzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let data = [
['Spyro Trilogy Reignited (PS4)', '29.99', 'Spyro Reignited Trilogy is a remaster of the original Spyro trilogy developed by Insomniac Games for the PlayStation: Spyro the Dragon, Spyro 2: Ripto\'s Rage!, and Spyro: Year of the Dragon'],
['Call of Duty: Black Ops 4 (PS4)', '49.99', 'Call of Duty is a first-person shooter video game franchise published by Activision. Starting out in 2003, it first focused on games set in World War II. Over time, the series has seen games set in the midst of the Cold War, futuristic worlds, and outer space.'],
];
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type:'text', width: '200px' },
{ type:'text' },
{ type:'text', width:'400px', align: 'left', wrap: true },
]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
// Set the license
const license = 'ZDJiMDFkMTM1MDFiMzVkM2U2MTIwYWZjY2M4Y2JmZDM1ZDM0Yjc3ZWM4YjliNTU2NWYwMzBkMDYxMDhjNzVhNjJjNmE0MjUyNTMyMWU1NzE3ZTA0ZmY4NGNiNGY1YTUyMWVkNWNmNGU1MmViYmI0N2RmZTAxZTM0ODUzNjEwNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qY3hNREUzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Create the component
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['Spyro Trilogy Reignited (PS4)', '29.99', 'Spyro Reignited Trilogy is a remaster of the original Spyro trilogy developed by Insomniac Games for the PlayStation: Spyro the Dragon, Spyro 2: Ripto\'s Rage!, and Spyro: Year of the Dragon'],
['Call of Duty: Black Ops 4 (PS4)', '49.99', 'Call of Duty is a first-person shooter video game franchise published by Activision. Starting out in 2003, it first focused on games set in World War II. Over time, the series has seen games set in the midst of the Cold War, futuristic worlds, and outer space.'],
]
// Columns
const columns = [
{ type:'text', width: '200px' },
{ type:'text' },
{ type:'text', width:'400px', align: 'left', wrap: true },
]
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'ZDJiMDFkMTM1MDFiMzVkM2U2MTIwYWZjY2M4Y2JmZDM1ZDM0Yjc3ZWM4YjliNTU2NWYwMzBkMDYxMDhjNzVhNjJjNmE0MjUyNTMyMWU1NzE3ZTA0ZmY4NGNiNGY1YTUyMWVkNWNmNGU1MmViYmI0N2RmZTAxZTM0ODUzNjEwNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qY3hNREUzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
// Data
const data = [
['Spyro Trilogy Reignited (PS4)', '29.99', 'Spyro Reignited Trilogy is a remaster of the original Spyro trilogy developed by Insomniac Games for the PlayStation: Spyro the Dragon, Spyro 2: Ripto\'s Rage!, and Spyro: Year of the Dragon'],
['Call of Duty: Black Ops 4 (PS4)', '49.99', 'Call of Duty is a first-person shooter video game franchise published by Activision. Starting out in 2003, it first focused on games set in World War II. Over time, the series has seen games set in the midst of the Cold War, futuristic worlds, and outer space.'],
];
// Columns
const columns = [
{ type:'text', width: '200px' },
{ type:'text' },
{ type:'text', width:'400px', align: 'left', wrap: true },
];
return {
data,
columns,
license,
}
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZDJiMDFkMTM1MDFiMzVkM2U2MTIwYWZjY2M4Y2JmZDM1ZDM0Yjc3ZWM4YjliNTU2NWYwMzBkMDYxMDhjNzVhNjJjNmE0MjUyNTMyMWU1NzE3ZTA0ZmY4NGNiNGY1YTUyMWVkNWNmNGU1MmViYmI0N2RmZTAxZTM0ODUzNjEwNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qY3hNREUzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Data
const data = [
['Spyro Trilogy Reignited (PS4)', '29.99', 'Spyro Reignited Trilogy is a remaster of the original Spyro trilogy developed by Insomniac Games for the PlayStation: Spyro the Dragon, Spyro 2: Ripto\'s Rage!, and Spyro: Year of the Dragon'],
['Call of Duty: Black Ops 4 (PS4)', '49.99', 'Call of Duty is a first-person shooter video game franchise published by Activision. Starting out in 2003, it first focused on games set in World War II. Over time, the series has seen games set in the midst of the Cold War, futuristic worlds, and outer space.'],
];
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
data: data,
columns: [
{ type:'text', width: '200px' },
{ type:'text' },
{ type:'text', width:'400px', align: 'left', wrap: true },
]
});
}
}