[SalesForce] LWC Datatable going out of the screen

I have a Parent LWC component that has a Lightning layout and which has three columns with child components included.
I have a button in the middle of the layout item which can control hide/show of left most layout item.

When I click the Hide button, it hides the layout item, and also the other two layouts automatically adjusted as I have flexible layout true.
However, when clicking the Show button, the left-most region appears back and the right-most region go out of the screen.

I noticed that in the rightmost region, datable is causing the issue if I remove the data table it works fine.

Parent Component:

<template>
  <lightning-tabset>
    <div class={customBackround}>
      <lightning-tab label="Student Matching" icon-name="standard:employee_job">
        <lightning-layout>
          <template if:true={filterShowHide}>
            <lightning-layout-item size="2" padding="slds-p-around_x-small">
              <div
                class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
              >
                <c-internsip-match-filter></c-internsip-match-filter>
              </div>
            </lightning-layout-item>
          </template>
          <lightning-layout-item size="6" padding="slds-p-around_x-small">
            <div
              class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
            >
              <c-student-details></c-student-details>
            </div>
          </lightning-layout-item>
          <lightning-layout-item
            flexibility="auto"
            padding="slds-p-around_x-small"
          >
            <lightning-layout-item
              flexibility="auto no-grow"
              class="slds-var-p-top_xx-small"
            >
              <div
                class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
              >
                <c-seats-avaiable></c-seats-avaiable>
              </div>
              <lightning-layout-item flexibility="auto">
                <div
                  class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
                >
                  <c-seat-details></c-seat-details>
                </div>
              </lightning-layout-item>
            </lightning-layout-item>
          </lightning-layout-item>
        </lightning-layout>
      </lightning-tab>
    </div>
    <lightning-tab
      label="Seat Matching"
      icon-name="standard:employee_organization"
    >
      Two Content !
    </lightning-tab>
    <lightning-tab label="Matches Map" icon-name="standard:location">
      Three Content !
    </lightning-tab>
  </lightning-tabset>
</template>

Right Most layout item – Child Component- which is causing the issue:

<template>
  <template if:true={seatSection}>
    <lightning-card
      title="Available Seats"
      icon-name="standard:service_resource"
    >
      <lightning-button
        slot="actions"
        label={label}
        onclick={handleHide}
      ></lightning-button>
      <template if:true={section}>
        <template if:true={dataAvialble}>
          <div
            class="slds-p-around_none slds-var-m-top_x-small slds-var-m-bottom_medium slds-m-horizontal_none"
          >
            <lightning-layout>
              <lightning-layout-item size="3" padding="around-small">
                <div class="custom-box slds-text-align_left">
                  <lightning-combobox
                    name="employer"
                    label="Employer"
                    value={employerName}
                    placeholder="Select Employer"
                    options={Employeroptions}
                    onchange={handleChange}
                  >
                  </lightning-combobox>
                </div>
              </lightning-layout-item>
              <lightning-layout-item size="3" padding="around-small">
                <div class="custom-box slds-text-align_left">
                  <lightning-combobox
                    name="track"
                    label="Track"
                    value={trackName}
                    placeholder="Select Track"
                    options={trackOptions}
                    onchange={handleChange}
                  >
                  </lightning-combobox>
                </div>
              </lightning-layout-item>
              <lightning-layout-item size="3" padding="around-small">
                <div class="custom-box slds-text-align_left">
                  <lightning-combobox
                    name="specialty"
                    label="Specialty"
                    value={specilatyName}
                    placeholder="Select Specialty"
                    options={specialtyOptions}
                    onchange={handleChange}
                  >
                  </lightning-combobox>
                </div>
              </lightning-layout-item>
              <lightning-layout-item size="3" padding="around-small">
                <div class="custom-box slds-text-align_left">
                  <div onkeyup={handleKeyUp}>
                    <lightning-input
                      name="enter-search"
                      label="Search"
                      type="search"
                    ></lightning-input>
                  </div>
                </div>
              </lightning-layout-item>
            </lightning-layout>
          </div>
          <div style="height: 300px;">
            <lightning-datatable
              key-field="id"
              data={data}
              columns={columns}
              onrowaction={handleRowAction}
              default-sort-direction={defaultSortDirection}
              sorted-direction={sortDirection}
              sorted-by={sortedBy}
              onsort={doSorting}
              max-row-selection="1"
              onrowselection={getSelectedRow}
            >
            </lightning-datatable>
            <!--<c-datatable-lwc-fsc record-data={data} column-fields='Id,Name'></c-datatable-lwc-fsc>-->
          </div>
        </template>
        <template if:false={dataAvialble}>
          <div class="slds-text-align_center slds-text-heading_medium">
            No Match Records Found!
          </div>
        </template>
      </template>
    </lightning-card>
  </template>
</template>

Screen Shots:
Initial Stage

Step1: Hide the Layoutitem:

Step2: Show the layout item back:

after adding multiplerows=true in child component:

Best Answer

The error which you are facing is due to the fact that in your third component 'c-seats-available' and 'c-seat-detail' you are not assigning them any size and have put 'flexibility' as auto so when the left most panel is hidden the component just spreads over the available space and doesn't shrink when left most component is shown again.

You will have to use the Grid system for all your components and assign them a particular size and put flexibility = auto on all layout-item

below is the modified code for parent component

<template>
  <lightning-tabset>
     <div class={customBackround}>
        <lightning-tab label="Student Matching" icon-name="standard:employee_job">
           <lightning-layout multiple-rows="true">
              <template if:true={filterShowHide}>
                <lightning-layout-item size="2" flexibility="auto" padding="slds-p-around_x-small">
                  <div
                    class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
                  >
                     <c-internsip-match-filter></c-internsip-match-filter>
                  </div>
                 </lightning-layout-item>
              </template>
              <lightning-layout-item size="6" flexibility="auto" padding="slds-p-around_x-small">
                 <div
                    class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
                 >
                   <c-student-details></c-student-details>
                 </div>
              </lightning-layout-item>
      <lightning-layout-item flexibility="auto" padding="slds-p-around_x-small">
        <lightning-layout multiple-rows="true">
            <lightning-layout-item size="12" flexibility="auto" padding="slds-p-around_x-small">
            
                <div
                class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
                >
                    <c-seats-avaiable></c-seats-avaiable>
                </div>
            </lightning-layout-item>
            <lightning-layout-item size="12" flexibility="auto">
                <div
                class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
                >
                    <c-seat-details></c-seat-details>
                </div>
            </lightning-layout-item>
        </lightning-layout>
      </lightning-layout-item>
      
    </lightning-layout>
  </lightning-tab>
</div>
<lightning-tab
  label="Seat Matching"
  icon-name="standard:employee_organization"
>
  Two Content !
</lightning-tab>
<lightning-tab label="Matches Map" icon-name="standard:location">
  Three Content !
</lightning-tab>

Also in your child component put the data table in a lightning-layout

<template>
  <template if:true={seatSection}>
<lightning-card
  title="Available Seats"
  icon-name="standard:service_resource"
>
  <lightning-button
    slot="actions"
    label={label}
    onclick={handleHide}
  ></lightning-button>
  <template if:true={section}>
    <template if:true={dataAvialble}>
      <div
        class="slds-p-around_none slds-var-m-top_x-small slds-var-m-bottom_medium slds-m-horizontal_none"
      >
        <lightning-layout>
          <lightning-layout-item size="3" padding="around-small">
            <div class="custom-box slds-text-align_left">
              <lightning-combobox
                name="employer"
                label="Employer"
                value={employerName}
                placeholder="Select Employer"
                options={Employeroptions}
                onchange={handleChange}
              >
              </lightning-combobox>
            </div>
          </lightning-layout-item>
          <lightning-layout-item size="3" padding="around-small">
            <div class="custom-box slds-text-align_left">
              <lightning-combobox
                name="track"
                label="Track"
                value={trackName}
                placeholder="Select Track"
                options={trackOptions}
                onchange={handleChange}
              >
              </lightning-combobox>
            </div>
          </lightning-layout-item>
          <lightning-layout-item size="3" padding="around-small">
            <div class="custom-box slds-text-align_left">
              <lightning-combobox
                name="specialty"
                label="Specialty"
                value={specilatyName}
                placeholder="Select Specialty"
                options={specialtyOptions}
                onchange={handleChange}
              >
              </lightning-combobox>
            </div>
          </lightning-layout-item>
          <lightning-layout-item size="3" padding="around-small">
            <div class="custom-box slds-text-align_left">
              <div onkeyup={handleKeyUp}>
                <lightning-input
                  name="enter-search"
                  label="Search"
                  type="search"
                ></lightning-input>
              </div>
            </div>
          </lightning-layout-item>
        </lightning-layout>
      </div>
      <div style="height: 300px;">
        <lightning-layout>
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable
                  key-field="id"
                  data={data}
                  columns={columns}
                  onrowaction={handleRowAction}
                  default-sort-direction={defaultSortDirection}
                  sorted-direction={sortDirection}
                  sorted-by={sortedBy}
                  onsort={doSorting}
                  max-row-selection="1"
                  onrowselection={getSelectedRow}
                >
                </lightning-datatable>
            </lightning-layout-item>
        </lightning-layout>
        <!--<c-datatable-lwc-fsc record-data={data} column-fields='Id,Name'></c-datatable-lwc-fsc>-->
      </div>
    </template>
    <template if:false={dataAvialble}>
      <div class="slds-text-align_center slds-text-heading_medium">
        No Match Records Found!
      </div>
    </template>
  </template>
</lightning-card>

Related Solutions

[SalesForce] Hyperlink record name LWC datatable

here is a solution that works perfectly. I display a list of opportunity and add a hyperlink on the column name of the data table. To do that, you have to create a wrapper class in you apex controller like this:

public with sharing class GetAllOpportunities {
   @AuraEnabled(cacheable=true)
    public static List<DataTableWrapper> getAllOpps() {
        List<Opportunity> listOpp = [SELECT Id, Name ,StageName, CloseDate 
                                     FROM Opportunity Order By Name asc];

        List<DataTableWrapper> response = new List<DataTableWrapper>();
        for(Opportunity opp : listOpp){
            DataTableWrapper obj = new DataTableWrapper();
            obj.oppId = opp.Id;
            obj.name = opp.Name;
            obj.nameUrl = '/'+opp.Id;
            obj.stageName = opp.StageName;
            obj.closeDate = opp.CloseDate;
            response.add(obj);
        }

        return response;
    }

    private class DataTableWrapper {
        @AuraEnabled
        public Id oppId {get;set;}
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String nameUrl {get;set;}
        @AuraEnabled
        public String stageName {get;set;}
        @AuraEnabled
        public Date closeDate {get;set;}
    }


}

note the nameUrl attribute, I'll use it in the js file.

here is the html file:

<template>
    <lightning-card  title="Opportinity List">
        <lightning-datatable data={opportunities} columns={columns} key-field="Id"></lightning-datatable>        
    </lightning-card> 
</template>

And Finally, the js file:

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllOpportunities.getAllOpps';

export default class OpportunityList extends LightningElement {
    @track columns = [
        {
            label: 'Opportunity name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'name' }, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Stage Name',
            fieldName: 'stageName',
            type: 'text',
            sortable: true
        },
        {
            label: 'Close date',
            fieldName: 'closeDate',
            type: 'date',
            sortable: true
        }

    ];

    @track error;
    @track opportunities = [];


    @wire(getAllOpps)
    wiredOpps({error,data}) {
        if (data) {
            this.opportunities = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.opportunities = undefined;
        }
    }
}

==========================================================================

Update

=========================================================================

This code below does the same thing without creating any wrapper class. We can only use JS.

import { LightningElement ,wire,track} from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllOpportunities.getAllOpps';

export default class OpportunityList extends LightningElement {
    @track columns = [
        {
            label: 'Opportunity name',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name' }, 
            target: '_blank'},
            sortable: true
        },
        {
            label: 'Stage Name',
            fieldName: 'StageName',
            type: 'text',
            sortable: true
        },
        {
            label: 'Close date',
            fieldName: 'CloseDate',
            type: 'date',
            sortable: true
        }

    ];

    @track error;
    @track opportunities = [];


    @wire(getAllOpps)
    wiredOpps(result) {
        const { data, error } = result;
        if(data) {
            let nameUrl;
            this.opportunities = data.map(row => { 
                nameUrl = `/${row.Id}`;
                return {...row , nameUrl} 
            })
            this.error = null;
        }
        if(error) {
            this.error = error;
            this.opportunities = [];
        }
    }
}

Apex class

public with sharing class GetAllOpportunities {
   @AuraEnabled(cacheable=true)
    public static List<Opportunity> getAllOpps() {
        return [SELECT Id, Name ,StageName, CloseDate FROM Opportunity Order By Name asc];
    }

}

[SalesForce] LWC datatable column width responsive

for me it solved with following css

.datatable-full-size {
  width: 100% !important;
}

And in the html side

<lightning-datatable class="datatable-full-size" key-field="Id" columns={columnsSolutions} data={solutionsList}></lightning-datatable>

Best Answer

Related Solutions

[SalesForce] Hyperlink record name LWC datatable

[SalesForce] LWC datatable column width responsive

Related Topic