How can I set visibility of a column, depending of value in another column, in the same row?

nc92

I have a constructor, in Typescript, where a datatable is constructed, with values like 'orderable', 'data' and 'name'. My question is:

How can I set the visibility of one column, based on the value of another, in the same row? I tried with the 'render', which made it possible for me to edit the text. So if I edit the text, the best I can do is set it to an empty string(''), which is not what I want. What I want is to hide the column in that row, something achievable through 'visible: false', for example. Below is my example, with already existing code in the constructor:

data: 'ColumnData',
name: 'ColumnName',
orderable: false,
visibility: /*insert logic here*/,
render: (data: any, t: string, row: any, meta: DataTables.CellMetaSettings) => {
    switch (row['ColumnThatThisOneDependsOn']) {
        case 1:
            return ``;
        default:
            return `<div>${data}</div>`;
    }
}

What I wish I could do would be to change the visibility of column 'ColumnName'(to 'true' or 'false'), depending on the value of column 'ColumnThisOneDependsOn'. Any help would be really appreciated!

colin

When you say change the column visibility, what does that mean? Do you mean make the entire column hidden, or just blank out the value for that particular cell in a specific row?

Colin

nc92

@colin I mean the entire column(in this case when another column of the same row is of a specific value).

colin

Got it. I'd suggest using a variable/array to keep track off whether you want to hide a column, and if so, in initComplete, call column().visible().

Colin

nc92

I finally got it to work! I had to manually create a function in the html file that would set the visibility whenever the events 'init' and 'draw' would happen! Thanks for your help, nonetheless, @colin !