6

Problem

lightning:datatable (rendered as a lightning-datatable) places itself in a wrapper that is only exactly as big as it needs to be. If you click on a header-level action in a table with no rows, the table scrolls up, hiding the header row almost completely. If you click on an area within the lightning:datatable, it usually scrolls back down so you can see the header row, but clicking anywhere else results in an essentially blank area where the menus can no longer be seen.

SSCCE

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="List" default="[ { label: 'Other' }, { label: 'Demo', type: 'action', actions: [ { label: 'Demo', name: 'demo' } ] } ]" />
    <aura:attribute name="data" type="List" default="[ ]" />
    <lightning:datatable columns="{!v.columns}" data="{!v.data}" keyField="Id" />
</aura:application>

Attempts

I tried adding various types of CSS, including a wrapper element, applying a style directly to the table, etc, but nothing seems to work.

Example Attempts

.THIS.dataTable {
  min-height: 3em;
}

    <lightning:datatable class="dataTable" columns="{!v.columns}" data="{!v.data}" keyField="Id" />

  <div class="dataTable">
    <lightning:datatable columns="{!v.columns}" data="{!v.data}" keyField="Id" />
  </div>

Since we can't really "reach" into the component any more because of how LWC works with CSS, is there a solution to this problem other than rendering dummy rows?


Demo

Demonstration of missing/scrolled header

  • You mean lightning:datatable Lightning Aura Component and not lightning-datatable LWC? – Jayant Das Jan 15 at 20:48
  • @JayantDas They are synonymous in this case, as lightning:datatable renders as lightning-datatable, which I've verified in the developer console. – sfdcfox Jan 15 at 20:52
  • 1
    Just a thought here. lightning:datatable may render as lightning-datatable at the platform level, but I think it will be still good to have the terminologies separated and respective to the frameworks for a larger audience so that majority don't mix up (as I did) – Jayant Das Jan 15 at 20:58
  • @JayantDas I clarified the question title. Does that make it better or worse? What would you suggest? – sfdcfox Jan 15 at 21:04
  • Great, thanks. I will recommend to take off the LWC piece totally from title and elaborate a bit more in the question itself as how it renders as LWC and possibly impacting a standalone LWC as well. The reason being, this is still a Lightning Aura Component issue that we are dealing with. Btw, what is your use case of showing the actions for an empty table? As you would have already observed, it works fine if there's at least one row of data. – Jayant Das Jan 15 at 21:10
6

It is a little bit fragile since it relies on the SLDS style class slds-table_header-fixed_container but this sets an (exaggeratedly large) min-height on the header div that gets rendered into the markup for the table.

.THIS .slds-table_header-fixed_container {
    min-height: 12em;
}

enter image description here

  • I'm willing to accept that for now. We might need to revisit it next year, but that's an acceptable risk for now. Thanks for the assist. – sfdcfox Jan 15 at 22:09
0

As per documentation:

Resizing Tables and Columns

The width and height of the datatable is determined by the container element. A scroller is appended to the table body if there are more rows to display. For example, you can restrict the height to 300px by applying CSS styling to the container element.

<div style="height: 300px;">
    <!-- lightning:datatable goes here -->
</div>

You can even configure it using an attribute like this:

<aura:attribute name="heightInPixels" type="Integer" access="global" default="150" />

<div aura:id="dataTable" style="{! 'height: ' + v.heightInPixels + 'px;'}">
    <!-- lightning:datatable goes here -->
</div>

NOTE: VSCode might show a syntax error for the above code, you can just ignore it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.