Components: [Table] Truncate text in header with ellipsis

[uncledent]

Bug, feature request, or proposal:

Truncate text in mat-header-cell with elliplis as in style guide: https://material.io/guidelines/components/data-tables.html#data-tables-structure

What is the expected behavior?

Truncate text in mat-header-cell with elliplis

What is the current behavior?

Text not being truncated

What are the steps to reproduce?

Simply use this table

What is the use-case or motivation for changing an existing behavior?

Styleguide

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material: 5.1.0
Typescript: 2.6.2
Angular: 5.2.1

Is there anything else we should know?

No

[andrewseguin]

This already works by specifying that your header cell should not wrap

https://stackblitz.com/edit/angular-rd9qkz?file=app/table-basic-example.css

See https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ for more information on making an element truncate text.

We cannot do this automatically for all header cells because not all header cells are made up of just text. Maybe if we introduce some kind of quick-column component that only allows text content, we can do this as an option

[philip-firstorder]

This is linked to #9486, which shows the problems with adding the sort icon 'after' instead of 'before' the header text by default.

The problem with using the current wrap is that big words get truncated in a very ugly way, especially on mobile:

Material guidelines say that for big columns we should add a tooltip and truncate with ellipse, so I would say the css you provided should be included by default, and let the users override with css or with an extra wrap property on cdk if they want multiline.

[philip-firstorder]

This is my fix in styles.scss so that the table headers wrap correctly without truncating the text. It takes care also of the sort icon.

// Fix wrap table headers, when cells also use word-wrap
.mat-header-cell, 
.mat-header-cell button {
  display: block;
  overflow: hidden;
}

[philip-firstorder]

And this is if you want to truncate text with ellipsis both in the header and the table cells, but this will not work as good on mobile devices as the default word wrapping, as less text can be shown.

  // Truncate text in tables with ellipsis
  .no-wrap {
    .mat-header-cell, 
    .mat-header-cell button,
    .mat-cell {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

[tatsujb]

without the .no-wrap it works great! 😄

[jainankit102]

When header have a sorting functionality then truncate CSS is not working properly.

Thanks in advance.

[angular-automatic-lock-bot[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._}