When I add columns: my data disappears

Tags: #<Tag:0x00007f8b1db4f910>
#1

When my code is :
$(document).ready(function () {
var objectData =
$.ajax({
async: false,
type: “POST”,
url: “UpdateConsignmentDetails/GetCategoryAttributeList”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (hiddenData ) {

                    var hot = new Handsontable($('#example')[0], {
                        data: hiddenData,
                        colHeaders: true,
                        colHeaders: ['TNT Date Received', 'Trip ID', 'Name', 'Address1', 'Town', 'Invoice Number', 'PO Number', 'Rec Pallets', 'Units', 'Rec Units',
                            'Total Sets', 'Carton Units', 'Rec Cartons', 'Inbound Con', 'Warehouse Location', 'TNT Despatch Date', 'TNT Cons Number',
                            'Bookin Requested', 'Bookin Date', 'Bookin Ref', 'Label Printed', 'Hold Status', 'Order Number']                        
                    });
                }
            }).fail(function () {
                console.log('Request failed, inspect arguments for details')
            });
    });

it works a treat. If I add columns: , all the data disappears. What am I doing wrong?

$(document).ready(function () {
var objectData =
$.ajax({
async: false,
type: “POST”,
url: “UpdateConsignmentDetails/GetCategoryAttributeList”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (hiddenData ) {

                    var hot = new Handsontable($('#example')[0], {
                        data: hiddenData,
                        colHeaders: true,
                        colHeaders: ['TNT Date Received', 'Trip ID', 'Name', 'Address1', 'Town', 'Invoice Number', 'PO Number', 'Rec Pallets', 'Units', 'Rec Units',
                            'Total Sets', 'Carton Units', 'Rec Cartons', 'Inbound Con', 'Warehouse Location', 'TNT Despatch Date', 'TNT Cons Number',
                            'Bookin Requested', 'Bookin Date', 'Bookin Ref', 'Label Printed', 'Hold Status', 'Order Number'],

                        columns: [
                            {},
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            { readOnly: true },
                            {},
                            {},
                            {},
                            {},
                            {},
                            {},
                            {},
                            {},
                            { readOnly: true }
                          ],
#2

Hey @maxine.williams

try adding ‘data’ to each element { readOnly: true }. Data should get a string representation of a key in your object.

example
{name: 'Tim', age: 2}
…
columns: [
{data: ‘name’}, {data: ‘age’}
]

ps. you can also try to use cells method. Then you’ll get something like this https://jsfiddle.net/rqhjtLyf/

#3