Табуляторная строка подголовок не остается фиксированной при прокрутке больших данных (1500+ строк+ 200+ столбцов) без в ⇐ Html

[Anonymous]

Я использую табулятор (v5.x) в приложении React (next.js), чтобы отобразить большую таблицу данных (~ 1500 строк × 200 столбцов). Я отключил внутреннюю виртуализацию табулятора, используя: < /p>
Virtualdom: false
и вместо этого я сам обращаюсь с ручным управлением страной (отображая ~ 20 столбцов за раз). < /P>
Что я пытаюсь сделать: < /strong>
У меня есть специальные «подраздельные» подразделения, которые не появляются в строках. Не в строках. Не в строках. Я хочу, чтобы этот ряд оставался липким в верхней части прокручиваемой таблицы - то есть ведущий как замороженный ряд - независимо от того, как далеко я прокручиваю через 1500 рядов. Верх: 0px; Z-Index: 100; Стили к этой строке через: < /p>

• rowformatter в табуляторе < /li>
  , а также через мутацию после того, как таблица рендеринга. ряды После этого он прокручивается, как обычная строка. < /P>
  Что я пробовал: < /strong> < /p>
  
  Маркировка первой строки данных с уникальным идентификатором, как "subHeader" и Applying .custom-subheader-shicky-shoss < /p>
  < /li>
  < /li>
  заставляя строку подголовок повторно рендеринг после 15-го ряда, но липкость все еще разбивается. MUTATIONOBSERVER для принудительного стиля на подзаголодке после рендеров табулятора.

  Код: Выделить всё

  const dataWithSubheader = [
  {
  id: "subheader",
  ...columns.reduce((acc, col) => {
  acc[col] = "";
  return acc;
  }, {}),
  },
  ...Array.from({ length: 1500 }, (_, i) => ({
  id: i,
  ...columns.reduce((acc, col) => {
  acc[col] = "";
  return acc;
  }, {}),
  })),
  ];
  
  const newTable = new Tabulator(tableRef.current, {
  data: dataWithSubheader,
  virtualDom: false,
  height: "500px",
  layout: "fitDataStretch",
  columns: [
  {
  title: "Sr.No",
  formatter: (cell) =>
  cell.getRow().getData().id === "subheader" ? "" : cell.getRow().getPosition(true) + 1,
  frozen: true,
  width: 60,
  },
  ...columns.map((col) => ({
  title: col,
  field: col,
  editor: "input",
  width: 80,
  })),
  ],
  rowFormatter: (row) => {
  const data = row.getData();
  const el = row.getElement();
  if (data.id === "subheader") {
  el.classList.add("custom-subheader-sticky");
  el.style.backgroundColor = "#f5f5f5";
  }
  },
  });
  
  setTable(newTable);
  
  // Enforce sticky style
  const observer = new MutationObserver(() => {
  const subheader = tableRef.current?.querySelector(".custom-subheader-sticky");
  if (subheader) {
  subheader.style.position = "sticky";
  subheader.style.top = "0px";
  subheader.style.zIndex = "100";
  subheader.style.backgroundColor = "#c0c0c0";
  }
  });
  
  observer.observe(tableRef.current, { childList: true, subtree: true });
  
  return () => observer.disconnect();
  < /code>
  }, []); < /p>
  useeffect (() => {
  const scrollcontainer = tableferf.current? .CloSest (". Tabulator"); < /p>
  const handleScroll = () => {
  const subheaderEl = scrollContainer?.querySelector(".custom-subheader-sticky");
  if (subheaderEl) {
  subheaderEl.style.top = `${scrollContainer.scrollTop}px`;
  }
  };
  
  scrollContainer?.addEventListener("scroll", handleScroll);
  return () => scrollContainer?.removeEventListener("scroll", handleScroll);
  

  }, []);

Почему моя липкая строка останавливается после ~ 15 рядов, и как я могу упорствовать в полном диапазоне прокрутки в таблице с виртуальным: False?

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-data-150