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

Theodore

There is no field selector_hidden in your $scope.tableHeader. I think it should be hidden instead – Spall

could you please be more specific, or point to the specific documentation? Thanks allot, looking forward to get this fixed :-) – Theodore

No I am just talking about your array of objects $scope.tableHeader. I see that you are using hide-column-by-default="c.selector_hidden" in your mdt-column. But I don't see any selector_hidden property in the array $scope.tableHeader ? – Spall

Piece of advice: NEVER store API keys in Javascript. Even though making the AJAX call to the API from the client seems simple and easy, you'll regret it once your API limits are done / your bills skyrocket because of "some dude" in Tokyo. Do a CSRF secure call to your application back-end and then use the API from there (even then put your API key in an environment variable or something). Here is what CodePen has to say - codepen.io/iospadov/post/… – Balas

Answer 1

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.

Theodore

Answer 2

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
        },...

Fiord

no, i don't think this is the issue here!? I updated codepen to show that, but still not working!? codepen.io/anon/pen/JJQyKN?editors=1111 – Theodore