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.

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

Fraudulent emails targeting my posted ads - beware!

Placing a small image on top of multiple images using CSS

The iPhone header position switches when an HTML5 input type number is selected

MTG Life counter. Display fluctuations in count

Tips for customizing the appearance of jscrollpane in EasyUI

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

Modifying the color of a div based on a specified value using JavaScript

Having trouble deciphering mathematical formulas while editing content on ckeditor

Tips for creating a clickable textbox

Adding multiple images to email HTML with Python made easy

The flask application encounters a 404 error when trying to access the favicon.ico file

Delayed response of text effects in JQuery on page load

Issue: Trouble with Rotating Tooltips in Javascript

What is the method for embedding the creation date of a page within a paragraph on Wagtail?

What steps can I take to ensure that the content remains intact even after the page is

Issue with grid element not properly scaling using the transform:scale property

Phase 2 "Loading" visual backdrop

Tips for maintaining consistent styles in CSS for multiple websites

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

Increase transparency of scrollbar background