[Table] - Follow specs on guidelines

[dev054]

Bug, feature request, or proposal:

Proposal?

What is the expected behavior?

Follow all the specs of data-table.

• When a row is hovered, display a background color on the row.
• When a row is selected, display a background color on the row.
• Long column names should be truncated with an ellipse. (show tooltip?)
• If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable.
• Sort icons should rotate when clicked.

[andrewseguin]

Thanks for the help on getting this up to spec. We have an open PR regarding the sort animation #5831. I'll look into adding the 'light' sort icon on hover to indicate what the next sort would be.

With regards to the column names and selection UX, I think that is going to be more suited for our md-simple-table that will come with sorting, pagination, and selection out of the box.

[dev054]

Doesn't it makes sense to add these really basic things (I mean apply the correct styles to existent css classes - to hover, selection and show elipse in long header names) to follow up the specs in md-table also?

Also, it's not mentioned in guidelines, but I saw a image there and in pagination section it shows: Rows per page, but here the default is Items per page. Is there any chance to change it? Or Items per page is prefered?

[andrewseguin]

Our design of the md-simple-table will be what you are aiming for I think. Right now we simply don't have enough control over the table to enforce these styles since we don't have any enforcement of what is used for cell templates.

For example, column headers can be any template in the md-table but in the md-simple-table we will enforce that it is a text string. This means we can automatically provide styles that will truncate and also show a tooltip on hover.

In addition, it will automatically include selection so it will make sense for us to include hover, active, and selected style states. In the md-table we don't know if the user is showing checkboxes, or what is active, etc.

With regards to the pagination, we went with Items per page because it is not necessary going to be used with the data table. For example, it could be used underneath a grid list, which doesn't have rows. We expect that users will use the Internationalization provider to change it to their design.

[dev054]

@andrewseguin Thanks for the explanations.

I have more two things here:

1 - In all examples in the specs the sort icon comes before the column name. In md-table it comes after. Is it intentional? If so, can you tell me the reason?

2 - I have the impression that there's something really strange on sort icons.

If you have some items like: [1, 3, 4, 2] and you press "asc" the order must be:

1
2
3
4

But currently it's:

4
3
2
1

If you inspect the class element, when the sort direction is "asc", the class applied is mat-sort-header-desc, not mat-sort-header-asc.

See this plunker: https://plnkr.co/edit/1oJk6enLig9UeN5NCAGh?p=info

[andrewseguin]

The sort icon can either be positioned to the left or right with the arrowPosition input, depending on the data text alignment. E.g. if the data is left aligned, you want the sort icon to be to the right.

I think your example didn't save, I don't see it different from the regular sort example

[dev054]

Oh, thanks for the arrowPosition. I didn't see this, sorry.

Can you re-check the example? I really don't know what's happening, but it's not the expected behavior...

You can see this in plunker... when the sort direction is desc, it sorts ascending and vice-versa.

[dev054]

@andrewseguin I think this PR solves part of this, specifically the icon part, but IMHO the behavior is still incorrect as I described. Can you take a look?

[andrewseguin]

Closing PR since some of the issues are resolved and the others have individual issues open (#5889, #6858, #6859)

[rolandjitsu]

@andrewseguin could you point to the issue where the row selection is mentioned? It is a spec of data tables, so I assume it will be implemented.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}