handsontable not showing any table's row?

Question

I am new to handsontable I tried it but it doesn't work here is the js config.

new Handsontable(document.getElementById("test"), {
  data: table_data,
  height: 'auto',
  colWidths: [ 100, 100, 100, 100, 100, 100, 100, 100 ,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  colHeaders: [
    "What",
    "Staff No",
    "Date",
    "Service",
    "Staff",
    "Qty",
    "Invoice",
    "Location",
    "Customer",
    "Customer Mob",
    "Incentive %",
    "Incentive Rate",
    "Tax %",
    "Tax",
    "Value Inc Tax",
    "Value W/O Tax",
    "Actual Sale Value inc tax",
    "Actual Sale Value W/O tax",
    "Incen_Bill_Inc_Tax",
    "Incen_Bill_w/o_Tax",
    "Incen_Actual_Inc_Tax",
    "Incen_Actual_w/o_Tax",
  ],
  columns: [
    { data: 1, type: "text" },
    { data: 2, type: "text" },   
    { data: 3, type: "date"},
    { data: 4, type: "text" },
    { data: 5, type: "numeric" },
    { data: 6, type: "text" },
    { data: 7, type: "text" },
    { data: 8, type: "text" },
    { data: 9, type: "text" },
    { data: 10, type: "text" },
    { data: 11, type: "text" },
    { data: 12, type: "text" },
    { data: 13, type: "text" },
    { data: 14, type: "text" },
    { data: 15, type: "text" },
    { data: 16, type: "text" },
    { data: 17, type: "text" },
    { data: 18, type: "text" },
    { data: 19, type: "text" },
    { data: 20, type: "text" },
    { data: 21, type: "text" },
    { data: 22, type: "text" },
    
    
  ],
//   dropdownMenu: true,
//   hiddenColumns: {
//     indicators: true
//   },
//   contextMenu: true,
//   multiColumnSorting: true,
//   filters: true,
//   rowHeaders: true,
//   manualRowMove: true,
//   afterGetColHeader: alignHeaders,
//   afterOnCellMouseDown: changeCheckboxCell,
//   beforeRenderer: addClassesToRows,
  licenseKey: "non-commercial-and-evaluation"
});

while table_data is 2d array like this
https://i.sstatic.net/14Xtl.png each index is like this
https://i.sstatic.net/q5tzn.png

browser console don't show any error https://i.sstatic.net/B5Jxp.png

while there is no result I mean the table is not populated https://i.sstatic.net/3jlEC.png

Answer 1

Check how you have formatted your 2-dimensional data.

Also, make sure you are using array indexes correctly. For example, this...

{ data: 1, type: "text" }

...will use the second value from each array, because arrays are zero-indexed.

So, for example, if you want your table to display the 'PACKAGE' value, then you would need to use this:

{ data: 0, type: "text" }

I cleaned up the data in your question, to ensure it has the expected structure: [ [...], [...], ... ];

(But I did not adjust any of your array indexes, as noted above).

I then used your table configuration, without making any changes - and it works correctly.

You can click on the blue "Run code snippet" button to see the results.

var table_data = [ 
    ['PACKAGE', 1, '2022-04-30', 'OUTSTATION MAC BRIDAL MAKEUP', '2-Gomti Nagar', '1.0', 'JP-2223-0335', 'Jopling', 'Kajol Srivastava', '918887515895', '20', 20, 18, 3150, '20650.00', 17500, '20650.00', 17500, 4130, 3500, 4130, 3500], 
    ['PACKAGE', 1, '2022-04-29', 'OUTSTATION MAC PARTY MAKEUP', '3-Ashiyana', '1.0', 'JP-2223-0335', 'Jopling', 'Kajol Srivastava', '918887515895', '20', 20, 18, 3150, '20650.00', 17500, '20650.00', 17500, 4130, 3500, 4130, 3500], 
    ['POS', 1, '2022-03-01', 'NAILS REFILL-NAIL EXT. REMOVAL WITH MACHINE', 'Rohit Gautam', '1.0', 'AS-2122-0001', 'Ashiyana', 'Miss Srishti Jaiswal', '918318706610', '7', 7, 18, 102.51, '671.99', 569.49, '708.00', 600, 47, 40, 50, 42], 
    ['POS', 1, '2022-03-01', 'NAILS REFILL-NAIL EXT. REMOVAL WITH MACHINE', 'Rohit Gautam', '1.0', 'AS-2122-0002', 'Ashiyana', 'Miss Anisha', '919363214217', '7', 7, 18, 54, '354.00', 300, '708.00', 600, 25, 21, 50, 42], 
    ['POS', 1, '2022-03-01', 'HAIR COLOR-ROOT TOUCHUP WITH AMMONIA', 'Pavni Shukla', '1.0', 'AS-2122-0003', 'Ashiyana', 'Arti Sachdev', '919839485139', '7', 7, 18, 205.2, '1345.20', 1140, '1416.00', 1200, 94, 80, 99, 84] 
];

new Handsontable(document.getElementById("test"), {
  data: table_data,
  height: 'auto',
  colWidths: [ 100, 100, 100, 100, 100, 100, 100, 100 ,100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  colHeaders: [
    "What",
    "Staff No",
    "Date",
    "Service",
    "Staff",
    "Qty",
    "Invoice",
    "Location",
    "Customer",
    "Customer Mob",
    "Incentive %",
    "Incentive Rate",
    "Tax %",
    "Tax",
    "Value Inc Tax",
    "Value W/O Tax",
    "Actual Sale Value inc tax",
    "Actual Sale Value W/O tax",
    "Incen_Bill_Inc_Tax",
    "Incen_Bill_w/o_Tax",
    "Incen_Actual_Inc_Tax",
    "Incen_Actual_w/o_Tax",
  ],
  columns: [
    { data: 1, type: "text" },
    { data: 2, type: "text" },   
    { data: 3, type: "date"},
    { data: 4, type: "text" },
    { data: 5, type: "numeric" },
    { data: 6, type: "text" },
    { data: 7, type: "text" },
    { data: 8, type: "text" },
    { data: 9, type: "text" },
    { data: 10, type: "text" },
    { data: 11, type: "text" },
    { data: 12, type: "text" },
    { data: 13, type: "text" },
    { data: 14, type: "text" },
    { data: 15, type: "text" },
    { data: 16, type: "text" },
    { data: 17, type: "text" },
    { data: 18, type: "text" },
    { data: 19, type: "text" },
    { data: 20, type: "text" },
    { data: 21, type: "text" },
    { data: 22, type: "text" },
    
    
  ],
//   dropdownMenu: true,
//   hiddenColumns: {
//     indicators: true
//   },
//   contextMenu: true,
//   multiColumnSorting: true,
//   filters: true,
//   rowHeaders: true,
//   manualRowMove: true,
//   afterGetColHeader: alignHeaders,
//   afterOnCellMouseDown: changeCheckboxCell,
//   beforeRenderer: addClassesToRows,
  licenseKey: "non-commercial-and-evaluation"
});

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

</head>

<body>

    <div id="test"></div>

    <!-- JavaScript <script>...</script> goes here for a regular web page -->

</body>

</html>