Positioning <tr> elements with absolute precision within a intricate layout

Question

Positioning <tr> elements with absolute precision within a intricate layout

I am faced with the challenge of developing a complex UI control. The structure consists of a left-side TreeTable component, implemented using a <table> element, and a right-side SVG component that displays data corresponding to each row of the left TreeTable. While both sides need to function independently as per requirements, they also need to synchronize scrolling behaviors.

The overall layout is structured as follows:

<div>
   <div id="leftComponent">
      <table>...</table
   </div>
   <div id="rightComponent">
      <svg>...</svg>
   </div>
</div>

To optimize performance for large datasets with over 1 million rows, I have implemented a feature where only the rows within the viewport on either side are rendered in the DOM.

However, this approach presents the following challenges:

When scrolling on the right side, due to absolute positioning of elements, achieving synchronization between the two components poses difficulties. For example, part of a row may be visible at the top of the viewport, then all other rows, followed by another partial row at the bottom. How can I offset the content of the leftComponent table to match the rows displayed on the right side? Absolute positioning on the <tr> elements is ineffective. Although rasterized scrolling was considered, it was not deemed viable. Attempting to offset the entire <table> element using something like
```
<table style="margin-top:1337px">
```
affects the sticky header functionality. Are there alternative solutions?
As both components operate relatively independently, having separate vertical scrollbars for each side disrupts the UI experience. Hiding the y-axis scrollbar by setting overflow-y: hidden disables scrolling on the left side. One potential solution could involve intercepting WheelEvents to simulate ScrollEvents for the rightComponent. Previous attempts to hide the y-axis scrollbar using CSS properties like scrollbar-width: none; affected both scrollbars. Keeping the x-axis scrollbar intact visually and functionally while hiding the y-axis scrollbar remains a challenge. Experimenting with techniques such as margin-right: -20px successfully hides the y-axis scrollbar but seems cumbersome.

In summary:

Both components must maintain relative independence while exhibiting synchronized behavior.
Visual removal of the y-axis scrollbar between components without compromising scrolling ability on the left side is necessary.
Ability to offset the left <table> section based on arbitrary pixel values to align with the freely scrollable right side is essential.
Avoidance of a complete overhaul of the left-side structure by converting the <table> into a <div> structure is preferred due to complexity.
Preservation of performance enhancements for rendering only visible rows while ensuring correct alignment with the right side is crucial.

Seeking innovative solutions for these issues. Your insights and suggestions are appreciated.

EDIT: Added screenshots for clarity. https://i.sstatic.net/mXSO5.png https://i.sstatic.net/3l8nN.png

Description: The first image illustrates perfect alignment when scrolled to the top. Both sets of rows are perfectly matched. In contrast, the second image showcases partially scrolled rows, where the topmost row is barely visible. Aiming to achieve consistent alignment similar to the first image proves challenging due to restrictions of the <table> structure on the leftComponent. Additionally, eliminating the middle scrollbar, as specified earlier, while retaining horizontal scrolling functionality on both components remains a priority.

For further details, feel free to inquire.

html css svg

Answer 1

Answer №1

This JS implementation features a scrollTop technique in combination with relative positioning on the rows, as suggested earlier.

The logic should be fairly self-explanatory. Feel free to ask any questions if needed.

const leftComponent = document.getElementById("leftComponent");
const rightComponent = document.getElementById("rightComponent");
const svg = rightComponent.querySelector("svg");

const theadHeight = leftComponent.querySelector("thead").offsetHeight;
const tbodyRowHeight = leftComponent.querySelector("tbody tr").offsetHeight;

const numRows = 100;    // Number of rows in th table
document.documentElement.style.setProperty('--table-height', (theadHeight + numRows * tbodyRowHeight) + 'px');


// Capture rightComponent scroll events
rightComponent.addEventListener('scroll', evt => {
  // Calculate top row index number based on scroll offset and row height
  const topRowIndex = Math.floor(rightComponent.scrollTop / tbodyRowHeight);
  // Work out how many pixels into the top row that the scroll position is
  const scrollFractionalAdjustment = - (rightComponent.scrollTop % tbodyRowHeight);
  // Set the position relative top value for the table rows.
  // This will adjust their vertical position on the page based on scroll fractional offset we just calculated.
  document.documentElement.style.setProperty('--scroll-fractional-adjustment', scrollFractionalAdjustment + 'px');
  // Update the table and graph based on out top row index
  populateTableRows(topRowIndex);
  populateGraph(topRowIndex);
});



function populateTableRows(topRowIndex)
{
  let n = topRowIndex;
  const rows = leftComponent.querySelectorAll("tbody tr");
  rows.forEach((row, i) => {
    const cols = row.querySelectorAll("td");
    cols[0].textContent = "row" + n + " with very long text";
    cols[1].textContent = "row" + n;
    n++;
  });
}


function populateGraph(topRowIndex)
{
}


// Initial setup
populateTableRows(0);
populateGraph(0);

:root {
  --scroll-fractional-adjustment: 0px;
  --table-height: 10000px;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  font-size: 20px;
}
th, td {
  height: 36px;
  line-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  background-color: #aaa;
  color: white;
}

.system {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#leftComponent.
#rightComponent {
  height: var(--table-height);
}

#leftComponent {
  width: 30%;
  height: 100%;
  overflow: scroll hidden;
}
#leftComponent tbody {
  display: block;
  overflow: hidden;
}
#leftComponent tbody td {
  position: relative;
  top: var(--scroll-fractional-adjustment);
}
#leftComponent table th,
#leftComponent table td
{
  max-width: 150px;
}

#rightComponent {
  width: 70%;
  overflow: scroll;
}
#rightComponent .rightContainer {
  width: 100%;
  height: var(--table-height);
}
#rightComponent svg {
  position: fixed;
}

<div class="system">
   <div id="leftComponent">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>ID Blub</th>
            <th>Foo</th>
            <th>Sort string</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
        </tbody>
      </table>
   </div>
   <div id="rightComponent">
      <div class="rightContainer">
        <svg>
          <circle cx="50" cy="50" r="50"/>
        </svg>
      </div>
   </div>
</div>

Answer 2

This JS implementation features a scrollTop technique in combination with relative positioning on the rows, as suggested earlier.

The logic should be fairly self-explanatory. Feel free to ask any questions if needed.

const leftComponent = document.getElementById("leftComponent");
const rightComponent = document.getElementById("rightComponent");
const svg = rightComponent.querySelector("svg");

const theadHeight = leftComponent.querySelector("thead").offsetHeight;
const tbodyRowHeight = leftComponent.querySelector("tbody tr").offsetHeight;

const numRows = 100;    // Number of rows in th table
document.documentElement.style.setProperty('--table-height', (theadHeight + numRows * tbodyRowHeight) + 'px');


// Capture rightComponent scroll events
rightComponent.addEventListener('scroll', evt => {
  // Calculate top row index number based on scroll offset and row height
  const topRowIndex = Math.floor(rightComponent.scrollTop / tbodyRowHeight);
  // Work out how many pixels into the top row that the scroll position is
  const scrollFractionalAdjustment = - (rightComponent.scrollTop % tbodyRowHeight);
  // Set the position relative top value for the table rows.
  // This will adjust their vertical position on the page based on scroll fractional offset we just calculated.
  document.documentElement.style.setProperty('--scroll-fractional-adjustment', scrollFractionalAdjustment + 'px');
  // Update the table and graph based on out top row index
  populateTableRows(topRowIndex);
  populateGraph(topRowIndex);
});



function populateTableRows(topRowIndex)
{
  let n = topRowIndex;
  const rows = leftComponent.querySelectorAll("tbody tr");
  rows.forEach((row, i) => {
    const cols = row.querySelectorAll("td");
    cols[0].textContent = "row" + n + " with very long text";
    cols[1].textContent = "row" + n;
    n++;
  });
}


function populateGraph(topRowIndex)
{
}


// Initial setup
populateTableRows(0);
populateGraph(0);

:root {
  --scroll-fractional-adjustment: 0px;
  --table-height: 10000px;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  font-size: 20px;
}
th, td {
  height: 36px;
  line-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  background-color: #aaa;
  color: white;
}

.system {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#leftComponent.
#rightComponent {
  height: var(--table-height);
}

#leftComponent {
  width: 30%;
  height: 100%;
  overflow: scroll hidden;
}
#leftComponent tbody {
  display: block;
  overflow: hidden;
}
#leftComponent tbody td {
  position: relative;
  top: var(--scroll-fractional-adjustment);
}
#leftComponent table th,
#leftComponent table td
{
  max-width: 150px;
}

#rightComponent {
  width: 70%;
  overflow: scroll;
}
#rightComponent .rightContainer {
  width: 100%;
  height: var(--table-height);
}
#rightComponent svg {
  position: fixed;
}

<div class="system">
   <div id="leftComponent">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>ID Blub</th>
            <th>Foo</th>
            <th>Sort string</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
          <tr>
            <td>row0 with very long text</td>
            <td>row0</td>
            <td>Foo something</td>
            <td>r2u58</td>
          </tr>
        </tbody>
      </table>
   </div>
   <div id="rightComponent">
      <div class="rightContainer">
        <svg>
          <circle cx="50" cy="50" r="50"/>
        </svg>
      </div>
   </div>
</div>

Positioning <tr> elements with absolute precision within a intricate layout

Answer №1

Similar questions

The media query in Css3 is not functioning as expected when using max-width

The div is lacking in height

An adaptive Bootstrap grid that collapses and changes based on screen dimensions

Inconsistency in naming of jQuery CSS properties

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Reposition buttons using JavaScript

Keep HTML in sync across browser and server

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Steps for aligning the upper rectangular text in the center of the larger rectangular border

Can PhoneGap/Cordova's Media class bypass the restrictions of audio in HTML5 on iOS and Android devices?

Adjust text size based on device orientation changes

Using Jquery to input selected dropdown values into a text input field

Rotating SVG images with ease at any center point

The appearance of my website appears differently depending on the resolution

Tips for concealing the body description on the homepage of a blogger website

Incorporate text inside the border of a Material UI chip

Insert half a million records into a database table using JavaScript seamlessly without causing the webpage to crash

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

Gradually reveal each page as it loads while a spinner rotates in anticipation

Turn off link preview feature on Android messages