Search code examples
javascripthtmlcsshandsontable

Handsonetable - can't hide columns


I'm trying to hide few colums. Here is my code:

function setTable(options){

    var data = options.data;
    var container = options.container;
    var dataSchema = options.dataSchema;
    var colHeaders = options.colHeaders;
    var columns = options.columns;

    var table = new Handsontable(container, {
        data: data,
        disableVisualSelection:true,
        dataSchema: dataSchema,
        colHeaders:colHeaders,
        columns:columns,
        currentRowClassName: 'selected',
        columnSorting:true,
        columnStreching:true,
        autoColumnSize: true,
        stretchH: 'all',
        outsideClickDeselects: false 

    });
    Handsontable.hooks.add('afterSelectionEnd', function(e){
        var data = this.getDataAtRow(e);
        moveToAlert({
            n:data[1],
            v:data[4],
            lt:data[7],
            ln:data[8]
        });
    }, table);
    Handsontable.hooks.add('afterOnCellMouseOver', function(e,c){
        var data = this.getDataAtRow(c.row);
        if(data[0] == null) return false;
        moveToAlert({
            n:data[1],
            v:data[4],
            lt:data[7],
            ln:data[8]
        })
    }, table);

    return table;
}

actualData.push(
{
    reg:d.r, 
    name:d.n, 
    fd:d.fd, 
    td:d.td, 
    v:d.v, 
    rgps:d.rg, 
    loc:"PL, Wrocław, Autostradowa Obwodnica Wrocławia",
    lt:d.lt,
    ln:d.ln,
    c:'a_'+d.c
}
);   
}

if (TABLE_ACTUAL) TABLE_ACTUAL.destroy();
TABLE_ACTUAL = setTable({
  data:actualData,
  container:document.getElementById('actual-table'),
  dataSchema:{reg: null, name: null, fd: null, td: null, v: null, rgps: null, loc: null, lt:null, ln:null,c:null},
  colHeaders:["Pojazd", "Nazwa", "Od", "Do", "Wartość", "Droga", "Lokalizacja"],
  columns:[
    {
        data:"reg",
        editor:false,
    },
    {
        data:"name",
        editor:false,
    },
    {
        data:"fd",
        editor:false,
    },
    {
        data:"td",
        editor:false,
    },
    {
        data:"v",
        editor:false,
    },
    {
        data:"rgps",
        editor:false,
    },
    {
        data:"loc",
        editor:false,
    }
],
});

So i want to hide 3 last columns ( lt,ln,c) and also disable editor on all colums. Why this way not working? I dont want to use customrender becouse i think its unnecessary.

EDIT SOLVED (thanks to @ZekeDroid)

I used getSourceDataAtRow() instead of getDataAtRow(). Also used fix for sorted table: http://docs.handsontable.com/0.16.1/demo-sorting-data.html and more specifically this : physicalIndex = instance.sortIndex[logicalIndex][0]; as a index for selected row.


Solution

  • It's likely due to the dataSchema option. You are including the columns to show there, even if null. Try removing the dataSchema option entirely. But please provide a fiddle so we can be more sure about it.