question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document rowHeight 'auto' value of DatatableRowDetailDirective

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior In the documentation, the rowHeight input is specified to be of type number indicating the height of the detail component DatatableRowDetailDirective

Expected behavior Expected the type to be number  | 'auto' with information on the auto height option.

Reproduction of the problem Set rowHeight to auto and it adjusts to the content height.

<ngx-datatable [rowHeight]="'auto'">
  <ngx-datatable-row-detail [rowHeight]="'auto'">
    <template let-row="row" ngx-datatable-row-detail-template>
      {{row.detail}}
    </template>
  </ngx-datatable-row-detail>
  <ngx-datatable-column name="ColumnName">
    <template let-row="row" ngx-datatable-cell-template>
      {{row.title}}
    </template>
  </ngx-datatable-column>
</ngx-datatable>

What is the motivation / use case for changing the behaviour? Makes the possibility clear and the library more accessible.

Please tell us about your environment:

  • OS: Mac OS X 10.12
  • Editor: VS Code 1.9.1
  • Package manager: npm
  • Table version: 6.1.2
  • Angular version: 2.4.7
  • Browser: Chrome 56
  • Language: TypeScript 2.1.6

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

17reactions
amcdnlcommented, Feb 21, 2017

Auto row height is not possible due to the ahead of time calculations for virtualization of dom. Sorry 😦

12reactions
Schmagacommented, Apr 17, 2018

I am not sure if this is still an issue, but we solved it this way: <ngx-datatable-row-detail [rowHeight]="'100%'">

A little similar to the scss workaround @h6784rfg6 mentioned, but we were trying to avoid /deep/ because it is deprecated and going to be removed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic Component inside ngx-datatable row-detail
Edit: I fiddled with ngx-datatable source sad part of it ngx-datatable-row-detail is not a component but directive and it isn't attached to DOM....
Read more >
swimlane/ngx-datatable - Gitter
Hello, is it possible to do column reordering when the data-table is built with ... Flydown detail view --> <ngx-datatable-row-detail [rowHeight]="auto" ...
Read more >
ngx-datatable - Angular component for presenting large and ...
Angular datatable for handling large and complex datasets in table ... Row Grouping; Fluid Row Height; Fixed Row Height; Dynamic Row Height; Row...
Read more >
Angular Ngx Datatable Row Grouping And Row Detail (forked)
ngx-datatable example with row grouping and row detail in the same table.
Read more >
@swimlane/ngx-datatable@20.1.0 - jsDocs.io
Documentation for npm package @swimlane/ngx-datatable@20.1.0 ... The detail row height is required especially when virtual scroll is enabled ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found