Covalent: Data table rows can not have custom height after beta.7

Created on 12 Sep 2017  路  5Comments  路  Source: Teradata/covalent

Before beta.7 Data-Table row can be of any height. For example, if I set ng-template for a row

<ng-template tdDataTableTemplate="name" >
  <div [style.height.px]="200"></div>
</ng-template>

When all data table rows will have 200px height.

It is not he case after this PR https://github.com/Teradata/covalent/pull/859. It is no longer possible because height of td-data-table-cell-content-wrapper have been explicitly set to 48px in this file https://github.com/Teradata/covalent/blob/530d8a14db3a7abf67cf63548208d0f5ce485d30/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss

How to allow custom height of data table rows now if I don't need virtual scroll?

enhancement

Most helpful comment

@clarkebishop Do you mean something like this?

before

I've managed to "fix" this by overriding the css and applying text-overflow: ellipsis

after

Although this fixes the ugly compression, I would like the row height to be dynamically determined so the whole text becomes visible, like in the older versions.

My suggestion would be to introduce a boolean property on td-data-table so one can choose to apply fixed height or not.

All 5 comments

I recently ran into this issue. I've got a custom data table, but in some cases the content overflows one line. The fixed height causes the content to be compressed in an ugly way.

Please switch this to a min-height, or provide a good way to override the values set in ~@covalent/core/theming/all-theme.

@clarkebishop Do you mean something like this?

before

I've managed to "fix" this by overriding the css and applying text-overflow: ellipsis

after

Although this fixes the ugly compression, I would like the row height to be dynamically determined so the whole text becomes visible, like in the older versions.

My suggestion would be to introduce a boolean property on td-data-table so one can choose to apply fixed height or not.

For my use case, I'm displaying a file name, and have some long names. I like your ellipsis trick, but it won't work for me.

The boolean or some other method seems like the right answer.

My table rows have thumbnail images. 48px height restriction is really getting in the way. What's the impetus to impose such a height restriction and take away a valuable feature such as resizing? It's certainly a regression for my application, and conceptually for any application which uses elements other than text in tables.

screen shot 2017-09-30 at 10 38 26 am

There is a PR opened to address this this https://github.com/Teradata/covalent/pull/898, but it still requires lots of testing since the reason we forced 48px was that the material spec says a row should have 48px (not more not less).. which also helped simplify the virtual scroll implementation because it can get complicated with dynamic row heights since you need to know the total height before hand..

Since the community seems to want to use data tables for most use cases (i would argue that sometimes a list is a better representation) we wanted to keep everyone happy and try and resolve this issue as efficient as possible.. hopefully we can polish it as we keep going.

Was this page helpful?
0 / 5 - 0 ratings