Salesforce LWC – Controlling Height of Datatables

<template> <h1>Data (min-height = 200px & max-height = 400px)</h1> <div style="display: flex;"> <div style="min-height: 200px; max-height: 400px; flex: 1;"> <div style="height: 100%;"> <lightning-datatable key-field="id" data={data} columns={columns}> </lightning-datatable> </div> </div> </div>

<hr>

<h1>Data2 (min-height = 200px & max-height = 400px)</h1> <div style="display: flex;"> <div style="min-height: 200px; max-height: 400px; flex: 1;"> <div style="height: 100%;"> <lightning-datatable key-field="id" data={data2} columns={columns}> </lightning-datatable> </div> </div> </div> </template>

import { LightningElement } from 'lwc'; import fetchDataHelper from './fetchDataHelper';

const columns = [ { label: 'Label', fieldName: 'name' }, { label: 'Website', fieldName: 'website', type: 'url' }, { label: 'Phone', fieldName: 'phone', type: 'phone' }, { label: 'Balance', fieldName: 'amount', type: 'currency' }, { label: 'CloseAt', fieldName: 'closeAt', type: 'date' }, ];

export default class BasicDatatable extends LightningElement { data = []; data2 = []; columns = columns;

// eslint-disable-next-line @lwc/lwc/no-async-await async connectedCallback() { const data = await fetchDataHelper({ amountOfRecords: 100 }); this.data = data.slice(0, 2); this.data2 = data.slice(); } }

const recordMetadata = { name: 'name', email: 'email', website: 'url', amount: 'currency', phone: 'phoneNumber', closeAt: 'dateInFuture', };

export default function fetchDataHelper({ amountOfRecords }) { return fetch('https://data-faker.herokuapp.com/collection', { method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8', }, body: JSON.stringify({ amountOfRecords, recordMetadata, }), }).then((response) => response.json()); }