Tabulator Spreadsheet Example

HTML

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

JavaScript

//define an array of sheet definitions
var sheets = [
    {
      title:"First Sheet",
      key:"first",
      rows:20,
      columns:20,
      data:[
        [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
        [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
        [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
        [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
      ]
  },
  {
      title:"Second Sheet",
      key:"second",
      data:[
        [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
        [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
        [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
        ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
        [7040,	4861,	2988,	5584,	2344,	9749,	8872,	9177,	6246],
        [6334,	1674,	2967,	"",	9353,	396,	6006,	8572 , ""],
        [6359,	"",	2580,	5723,	9801,	554,	1044,	5266,	8532],
      ]
  },
  {
      title:"Third Sheet",
      key:"third",
      rows:5,
      columns:5,
      data:[
        [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
        ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
        [7040,	4861,	2988,	5584,	2344,	9749,	8872,	9177,	6246],
        [6334,	1674,	2967,	"",	9353,	396,	6006,	8572 , ""],
        [6359,	"",	2580,	5723,	9801,	554,	1044,	5266,	8532],
        [7278,	6971,	2232,	5720,	5665,	7231,	1165,	"",	168],
      ]
  },
];
    
//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",

    spreadsheet:true,
    spreadsheetRows:50,
    spreadsheetColumns:50,
    spreadsheetColumnDefinition:{editor:"input", resizable:"header"},
    spreadsheetSheets:sheets,
    spreadsheetSheetTabs:true,

    rowHeader:{field:"_id", hozAlign:"center", headerSort:false, frozen:true},

    editTriggerEvent:"dblclick", //change edit trigger mode to make cell navigation smoother
    editorEmptyValue:undefined, //ensure empty values are set to undefined so they arent...