Can we specify a minimum height for a lightning:datatable/lightning-datatable?

Question

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

Answer 1

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;
}

Answer 2

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.

Answer 3

Any updates to this problem i'm also looking for a solution to this beyond aggressive CSS editing for my LWC datatables.