[SalesForce] Can we specify a minimum height for a lightning:datatable/lightning-datatable

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

Best Answer

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

Related Solutions

[SalesForce] Lightning Web Component for table rows and cells

Building on the answer provided already by @sfdcfox, this following seems to be working for me and allows me to componentize the entire row (much easier to emit events this way).

parent.html

<table class="slds-table slds-table_bordered slds-border_left slds-border_right">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">
        <div class="slds-truncate" title="Name">Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Some Custom Column">Some Custom Column</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <template for:each={iterableDataSet} for:item="row">
      <c-child-row row={row}>
      </c-child-row>
    </template>
  </tbody>
</table>

childRow.html

<template>
  <!-- taken straight from SLDS -->
  <th data-label="Name" scope="row">
    <div class="slds-truncate" title={row.Name}>{row.Name}</div>
  </th>
  <td data-label="Some Custom Column">
    <div class="slds-truncate">
      <lightning-input
        data-id={row.Id}
        type="number"
        variant="label-hidden"
        name="inputForDataField"
        onchange={handleOnChange}
        value={row.Data_Field__c}>
      </lightning-input>
    </div>
  </td>
  <!-- more tds .... -->
</template>

And the critical piece on childRow.css

:host {
  display: table-row;
}

[SalesForce] Setting a max height for datatable in LWC

I do think that this is an oversight by Salesforce. There is, however, a way to dynamically control the height of the datatable's container div as described in this thread: How to control the height of datatable dynamically in LWC?

Here is my implementation where I set a container height of 150px when the number of rows in my table is more than 3:

HTML Code

<div style={datatableHeight}>
    <lightning-datatable
        key-field="updateId"
        columns={columns}
        data={data}
        onrowaction={handleRowAction}
    >
    </lightning-datatable>
</div>

JS Code

get datatableHeight() {
    if (this.pendingUpdates.length > 3) {
        return 'height: 150px;';
    } else {
        return '';
    }
}

Related Topic