Default Column are not displayed in Material Design Data Table (iamisti/mdDataTable)

Question

I am trying to populate the <mdt-column> inside of <mdt-header-row> dynamically with an array from controller. This piece of code doesn't seem to work properly:

hide-column-by-default="c.selector_hidden"

When loading the table default columns are not displayed. Some columns are set as default and are excluded from the "column-selector", so even after selecting all columns in the selector these columns are not displayed.

When i set ...columnSelector: false}... in table-card it shows me my columns, but the functions to select column is gone!?

How can i fix this?

This is the mdt-header-row:

<mdt-header-row>
<mdt-column 
hide-column-by-default="c.selector_hidden" 
exclude-from-column-selector="c.selector_exclude" 
column-sort="c.sort" 
sortable-rows-default="c.sort_default" 
column-key="{{c.key}}"  
align-rule="{{c.align}}" 
column-definition="{{c.definition}}" 
ng-repeat="c in tableHeader"><span>{{c.name}}</span></mdt-column>

</mdt-header-row>

The Data is comming from this Array in controller:

$scope.tableHeader = [
        {
            name: 'Dessert (100g serving)',
            definition: '',
            align: 'left',
            sort: true,
            sort_default:false,
            hidden: false,
            selector_exclude:false,
            selector_hidden:false
        },...

I also created a fork for it: https://codepen.io/anon/pen/JJQyKN?editors=1111

Answer 1

This piece of code doesn't seem to work properly:

hide-column-by-default="c.selector_hidden"

That's because you don't have a selector_hidden property in any of the objects in your tableHeader array. It should look something like this:

$scope.tableHeader = [
        {
            name: 'Dessert (100g serving)',
            definition: '',
            align: 'left',
            sort: true,
            sort_default:false,
            hidden: false,
            selector_exclude:false,
            selector_hidden:true
        },...

Answer 2

Actually the issue is whit this directive it self. I had to modify the md-data-table.js file and change "isVisible" references column to true. I as well changed the isHidden property to "isVisable" because that is what is referenced by the md-data-table-templates.js file. I modified the code further to match our requirements and therefor cannot provide specific patches. However, unfortunately this project seems to be abandoned by the developer.