Rotate text

How to rotate the data grid cell text between -90 to 90 degrees.

Documentation

Methods

MethodDescription
rotate(mixed, value) Rotate the spreadsheet cell text.
rotate(cell: string|array, number: number) : void


Initial Settings

The initial definition for a text rotation is using the property cells.


Examples

How to rotate the cell text between -90 to 90 degrees.



JavaScript example

<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>

<p><input type="button" value="Rotate A1 (-90deg)" onclick="rotate(this)"></p>

<script>
var rotate = function(b) {
    worksheets[0].rotate('A1', -90);
}

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjM5ZWFlMTNkNjg0OTQwOWQwMGQ0ODQ5YTUzMDQxYzE4NWFiNTMzNmY2ZmQ0MDkzMGFjNTE5YTRmOGM1NjU3NTBlNmNmOWM0NDg3N2UyODAwNTIyY2QxOWI4Yzk3MzRkYzgyNjliMDQ1N2U5ZmExZWNkZDI0NTUwZGY0ZmMzOGMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpVMk1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create a new spreadsheet
var worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000, 1],
            ['Peugeot', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ],
        columns: [{},{},{},{ type:'checkbox' }],
        cells: {
            A1: { rotate: 90, }
        },
    }]
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

// Set the license
const license = 'MjM5ZWFlMTNkNjg0OTQwOWQwMGQ0ODQ5YTUzMDQxYzE4NWFiNTMzNmY2ZmQ0MDkzMGFjNTE5YTRmOGM1NjU3NTBlNmNmOWM0NDg3N2UyODAwNTIyY2QxOWI4Yzk3MzRkYzgyNjliMDQ1N2U5ZmExZWNkZDI0NTUwZGY0ZmMzOGMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpVMk1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Create the component
export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Mazda', 2001, 2000, 1],
        ['Peugeot', 2010, 5000, 1],
        ['Honda Fit', 2009, 3000, 1],
        ['Honda CRV', 2010, 6000, 0],
    ]
    // Columns
    const columns = [{},{},{},{ type:'checkbox' }];
    // Cells
    const cells: {
        A1: { rotate: 90 }
    }

    // Render data grid component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet data={data} columns={columns} cells={cells} />
            </Spreadsheet>
            <input type={"button"} value={"Fullscren"} onClick={() => spreadsheet.current[0].rotate('A1', -90)} />
        </>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" :columns="columns" :cells="cells" />
    </Spreadsheet>
    <p><input type="button" value="Rotate A1 (-90deg)" @click="this.$refs.spreadsheet.current[0].rotate('A1', -90);"></p>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";

const license = 'MjM5ZWFlMTNkNjg0OTQwOWQwMGQ0ODQ5YTUzMDQxYzE4NWFiNTMzNmY2ZmQ0MDkzMGFjNTE5YTRmOGM1NjU3NTBlNmNmOWM0NDg3N2UyODAwNTIyY2QxOWI4Yzk3MzRkYzgyNjliMDQ1N2U5ZmExZWNkZDI0NTUwZGY0ZmMzOGMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpVMk1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Mazda', 2001, 2000, 1],
            ['Peugeot', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ]
        // Columns
        const columns = [{},{},{},{ type:'checkbox' }];
        // Cells
        const cells: {
            A1: { rotate: 90 }
        }
        return {
            data,
            columns,
            cells,
            license
        }
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MjM5ZWFlMTNkNjg0OTQwOWQwMGQ0ODQ5YTUzMDQxYzE4NWFiNTMzNmY2ZmQ0MDkzMGFjNTE5YTRmOGM1NjU3NTBlNmNmOWM0NDg3N2UyODAwNTIyY2QxOWI4Yzk3MzRkYzgyNjliMDQ1N2U5ZmExZWNkZDI0NTUwZGY0ZmMzOGMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpVMk1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// 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>
        <p><input type="button" value="Rotate A1 (-90deg)" (click)="this.worksheets[0].rotate('A1', -90);"></p>
    `
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            data: [
                ['Mazda', 2001, 2000, 1],
                ['Peugeot', 2010, 5000, 1],
                ['Honda Fit', 2009, 3000, 1],
                ['Honda CRV', 2010, 6000, 0],
            ],
            columns: [{},{},{},{ type:'checkbox' }],
            cells: {
                A1: { rotate: 90, }
            },
        });
    }
}