Autonumber

The native auto increment column type can be used as shown below.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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('N2I0M2M1Y2YyNmUzMDMwOTZkYzg3NDExMGY0ZDEwYzFkY2I1YTMwOTBhMTE5Y2M3ODg1ZWZjODY1YWJiYTJlZjYxNTIyMTg2YjFhODI2YTAzODdjMDlhZjMzYzhhMWFiMTRmYzIzMDFhM2FhN2Y1MmYxYjcyNzM3MTc3OGMxZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROakV4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ["","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
            ["","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
            ["","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
            ["","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"],
            ["","STAYING AT TAMARA'S","GEORGE EZRA"],
            ["","BOHEMIAN RHAPSODY - OST","QUEEN"],
            ["","THANK U NEXT","ARIANA GRANDE"],
            ["","WHAT A TIME TO BE ALIVE","TOM WALKER"],
            ["","A STAR IS BORN","MOTION PICTURE CAST RECORDING"],
            ["","YOU'RE IN MY HEART","ROD STEWART"]
        ],
        columns: [
            { type: 'autonumber', title: 'Id', readonly: true, primaryKey: true, },
            { type: 'text', width: '350px', title: 'Title' },
            { type: 'text', width: '250px', title: 'Artist' }
        ]
    }]
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

// Create the component
export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ["","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
        ["","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
        ["","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
        ["","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"],
        ["","STAYING AT TAMARA'S","GEORGE EZRA"],
        ["","BOHEMIAN RHAPSODY - OST","QUEEN"],
        ["","THANK U NEXT","ARIANA GRANDE"],
        ["","WHAT A TIME TO BE ALIVE","TOM WALKER"],
        ["","A STAR IS BORN","MOTION PICTURE CAST RECORDING"],
        ["","YOU'RE IN MY HEART","ROD STEWART"]
    ]
    // Columns
    const columns = [
        { type: 'autonumber', title: 'Id', readonly: true, primaryKey: true, },
        { type: 'text', width: '350px', title: 'Title' },
        { type: 'text', width: '250px', title: 'Artist' }
    ]

    // 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";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ["","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
            ["","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
            ["","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
            ["","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"],
            ["","STAYING AT TAMARA'S","GEORGE EZRA"],
            ["","BOHEMIAN RHAPSODY - OST","QUEEN"],
            ["","THANK U NEXT","ARIANA GRANDE"],
            ["","WHAT A TIME TO BE ALIVE","TOM WALKER"],
            ["","A STAR IS BORN","MOTION PICTURE CAST RECORDING"],
            ["","YOU'RE IN MY HEART","ROD STEWART"]
        ]
        // Columns
        const columns = [
            { type: 'autonumber', title: 'Id', readonly: true, primaryKey: true, },
            { type: 'text', width: '350px', title: 'Title' },
            { type: 'text', width: '250px', title: 'Artist' }
        ]

        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('N2I0M2M1Y2YyNmUzMDMwOTZkYzg3NDExMGY0ZDEwYzFkY2I1YTMwOTBhMTE5Y2M3ODg1ZWZjODY1YWJiYTJlZjYxNTIyMTg2YjFhODI2YTAzODdjMDlhZjMzYzhhMWFiMTRmYzIzMDFhM2FhN2Y1MmYxYjcyNzM3MTc3OGMxZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROakV4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    standalone: true,
    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, {
            worksheets: [{
                data: [
                    ["","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
                    ["","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
                    ["","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
                    ["","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"],
                    ["","STAYING AT TAMARA'S","GEORGE EZRA"],
                    ["","BOHEMIAN RHAPSODY - OST","QUEEN"],
                    ["","THANK U NEXT","ARIANA GRANDE"],
                    ["","WHAT A TIME TO BE ALIVE","TOM WALKER"],
                    ["","A STAR IS BORN","MOTION PICTURE CAST RECORDING"],
                    ["","YOU'RE IN MY HEART","ROD STEWART"]
                ],
                columns: [
                    { type: 'autonumber', title: 'Id', readonly: true, primaryKey: true, },
                    { type: 'text', width: '350px', title: 'Title' },
                    { type: 'text', width: '250px', title: 'Artist' }
                ]
            }]
        });
    }
}

Edit this page on GitHub