Conditional attributes about md-data-table

[nathanmarks]

@daniel-nagy Honestly, with some potential additional column types (such as menus, editable fields, etc). I think having something like column-type as an attribute would be a decent idea.

column-type="numeric"

etc...

[daniel-nagy]

@nathanmarks valid point.

[anderskristian]

I was sitting and trying to remove the selector column.
I found out that removing md-row-selected.... did the job
But under the process I realized that I cannot style the selector column
Because there is no way to identify the selectors TH / TD tags. Because they are generated.
I tried with styling ...

.no-selector td :first-child {
    display: none;
}

and this will remove the "second" field because the generated TD is not "present" when the browser evaluates the first child.
So it would be nice to be able to put a class on the generated TH and TD elements.

[daniel-nagy]

@anderskristian

"I was sitting and trying to remove the selector column. I found out that removing md-row-selected.... did the job"

Please read the documentation, it explains the purpose of each attribute.

/* to select the checkbox in the table header */
table[md-row-select] > thead > tr > th:first-child { ... }

/* to select all the checkboxes in the table body */
table[md-row-select] > tbody > tr > td:first-child { ... }

[anderskristian]

But that does not work 100% when I did it. The ng-repeat seems to interfere with what element is the first element
So the checkbox element + first "user-row" seems both to be selected..

[daniel-nagy]

I fixed my comment.

I am unable to reproduce the issue, please make a JSFiddle or Plunker clearly demonstrating the issue.

[anderskristian]

Super.
I will leave it here. If I see the problem in another situation I will be back.
I still think it would be relevant to be able to set a md-row-select-class - because the element is added "behind the scene" - and I find :first-child a little nerdy.

[fanturi]

Hi,

It could be great to be able to disable some checkboxes too.
For example we could set a condition in which the checkbox is "selectable":

<tbody md-auto-select>
    <tr ng-repeat="dessert in desserts.data" md-selectable="dessert.calories.value > 2">
        <td>{{dessert.name}}</td>
        <td>{{dessert.calories.value}}</td>
        <td>{{dessert.fat.value}}</td>
        <td>{{dessert.carbs.value}}</td>
        <td>{{dessert.protein.value}}</td>
        <td>{{dessert.sodium.value}}</td>
        <td show-unit>{{dessert.calcium.value}}</td>
        <td show-unit>{{dessert.iron.value}}</td>
    </tr>
</tbody>

If the condition is not met the checkbox is disabled.

Thanks for your work.

[daniel-nagy]

@fanturi I've thought about this in the past and I like your idea. This shouldn't be too difficult to implement.

[daniel-nagy]

@fanturi this is now possible it version 0.7.0; it was a bit more difficult than I anticipated. :)

[fanturi]

Hi @daniel-nagy,

It's great, thanks ! It's working like a charm :)

I just think it's weird to have put the attribute in the <tbody>.
It means we use dessert outside ng-repeat, it's disturbing.

[daniel-nagy]

Haha, yeah it's a little strange. I put it there because there was more room on the <tbody> element if you are using ngRepeat to do pagination in the client.

There is something in the order of 7 different directives now within this module and quite a few of them need to be aware of your ng-repeat expression. It is also worth noting that we couldn't simply put an ng-disabled directive on the table row because anyone with half a brain could open the developer tools and remove the attribute. In addition, conditionally disabling rows required new logic for the master toggle in the table header, so I'm using the body element as sort of a communication medium between the table header and table rows.