0

I am trying to implement a data table which should be scrollable but it should not change the position of TOP and Left blocks.

This is my CSS: I am applying this to TOP and LEFT Div blocks. But its not working.

.freeze {
    position:sticky;
    overflow: hidden;
}

MY HTML CODE

<template>

 
  <lightning-card title="XLSX multi worksheet" icon-name="custom:custom14">

    <div class="slds-m-around_medium">
      <button onclick={download} class="btn success">Download</button>

      <!--xlsxMain component calling-->
      <c-xlsx-main header-list={xlsHeader} filename={filename} worksheet-name-list={workSheetNameList}
        sheet-data={xlsData}></c-xlsx-main>
    </div>

</lightning-card>


  <lightning-card>
    <lightning-tabset> <!-- variant="vertical" -->
      <lightning-tab label="Account Table">

        <lightning-layout>
          <lightning-layout-item size="12" padding="around-small" small-device-size="3" medium-device-size="6"
            large-device-size="3">

            <label>Show <select name="example_length" aria-controls="example" class="" onchange={optionChange}>
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
              </select> entries</label>

          </lightning-layout-item>
        </lightning-layout>
        <div class="slds-scrollable_y">
        <div>
          <lightning-datatable data={accountData} columns={accountColumns} key-field="id"
            onrowselection={getSelectedName} onheaderaction={handleHeaderAction}>
          </lightning-datatable>
        </div>
        </div>
      </lightning-tab>

      <lightning-tab label="Contact Table" title="2nd tab extended title">
        <div class="slds-scrollable_y">
        <div>
        <h1>Contact Table</h1>
        <div class="slds-scrollable">
        <table>
          <tr>
            <template for:each={contactHeader} for:item="header">
              <th key={header}>{header}</th>
            </template>
          </tr>
          <template for:each={contactData} for:item="item">
            <tr key={item.Id}>
              <th>{item.Name}</th>
              <th>{item.Phone}</th>
              <th>{item.Email}</th>
              <th>{item.Title}</th>
              <th>{item.Id}</th>
            </tr>
          </template>
        </table>
      </div>
    </div>
  </div>
      </lightning-tab>

      <lightning-tab label="Item Three">
        Three Content !
      </lightning-tab>
    </lightning-tabset>

  </lightning-card>
</div>
</template>

enter image description here

Improve this question
2
  • Can you please share c-xlsx-main code in short ? How did you implement the "Account table" & "Contact table" UI ? I assume you are using slds-grid for it.
    – Rohit
    Commented Mar 15, 2023 at 14:18
  • Hi @Rohit, I have now updated my HTML code. Please have a look
    – Praveen Behera
    Commented Mar 16, 2023 at 12:47

1 Answer 1

Reset to default
1

The root cause of centre div not sticking is that the sticky position is applied to incorrect div.

First , you need to remove all slds-scrollable, slds-scrollable_y css classes from the markup.

Second , remove freeze css class as its not required on the outer div.

For fixing the centre div , you just need sticky position on the tab content.

Below is the sample code for the same (I've commented the data tables and added sample text for scroll):

<template>
<lightning-card title="XLSX multi worksheet" icon-name="custom:custom14">

  <div class="slds-m-around_medium">
    <button onclick={download} class="btn success">Download</button>

    <!--xlsxMain component calling-->
    <!-- <c-xlsx-main header-list={xlsHeader} filename={filename} worksheet-name-list={workSheetNameList}
      sheet-data={xlsData}></c-xlsx-main>-->
  </div>

</lightning-card>


<lightning-card>
  <lightning-tabset variant="vertical"> <!-- variant="vertical" -->
    <lightning-tab label="Account Table">

      <lightning-layout>
        <lightning-layout-item size="12" padding="around-small" small-device-size="3" medium-device-size="6"
          large-device-size="3">

          <label>Show <select name="example_length" aria-controls="example" class="" onchange={optionChange}>
              <option value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select> entries</label>

        </lightning-layout-item>
      </lightning-layout>
      <div>
      <div>
        <!--<lightning-datatable data={accountData} columns={accountColumns} key-field="id"
          onrowselection={getSelectedName} onheaderaction={handleHeaderAction}>
        </lightning-datatable>-->
        Account table
      </div>
      </div>
    </lightning-tab>

    <lightning-tab label="Contact Table" title="2nd tab extended title">
      <div>
      <div class="sticky-div">
      <h1>Contact Table</h1>
      <div>
      <!--<table>
        <tr>
          <template for:each={contactHeader} for:item="header">
            <th key={header}>{header}</th>
          </template>
        </tr>
        <template for:each={contactData} for:item="item">
          <tr key={item.Id}>
            <th>{item.Name}</th>
            <th>{item.Phone}</th>
            <th>{item.Email}</th>
            <th>{item.Title}</th>
            <th>{item.Id}</th>
          </tr>
        </template>
      </table>-->
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>
    </div>
</div>
    </lightning-tab>

    <lightning-tab label="Item Three">
      Three Content !
    </lightning-tab>
  </lightning-tabset>

</lightning-card>
</template>

For the 2nd tab , we wrap the content in a div and apply sticky-div css class with below css :

.sticky-div {
  position: sticky;
  overflow: scroll;
  max-height: 50vh;/*Give max height as per your requirement */
}

We are not using any offset for sticky position since we want it to stick to the ancestor tab.

Conclusion : Apply sticky position & max-height for the div which you want to stick to its ancestor.

More about sticky position : https://developer.mozilla.org/en-US/docs/Web/CSS/position

Improve this answer
2
  • Awesome!!! sticky-div is the trick. worked for me. Thank you a lot @Rohit. Please also help me with my other question regarding ExcelJS.
    – Praveen Behera
    Commented Mar 17, 2023 at 10:26
  • 1
    Welcome @PraveenBehera. I will give it a try 👍
    – Rohit
    Commented Mar 17, 2023 at 10:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .