es-grid-template/es/table-component/body/TableBody.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import TableBodyRow from "./TableBodyRow";
import { useVirtualizer } from "@tanstack/react-virtual";
// import type { Dispatch, SetStateAction } from "react";
import React from "react";
import { TableContext } from "../useContext";
const TableBody = ({
  columnVirtualizer,
  table,
  tableContainerRef,
  virtualPaddingLeft,
  virtualPaddingRight,
  fixedLeftColumns,
  fixedRightColumns,
  tableId,
  ...rest
}) => {
  const {
    rows
  } = table.getRowModel();
  const {
    editingKey,
    prefix
  } = React.useContext(TableContext);

  //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    estimateSize: () => 36,
    //estimate row height for accurate scrollbar dragging
    getScrollElement: () => tableContainerRef.current,
    //measure dynamic row height, except in firefox because it measures table border height incorrectly
    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
    overscan: 3
  });
  const virtualRows = rowVirtualizer.getVirtualItems();
  return /*#__PURE__*/React.createElement("tbody", {
    className: `${prefix}-grid-tbody`,
    style: {
      display: 'grid',
      height: `${rowVirtualizer.getTotalSize()}px`,
      //tells scrollbar how big the table is
      position: 'relative' //needed for absolute positioning of rows
    }
  }, virtualRows.map(virtualRow => {
    const row = rows[virtualRow.index];
    const isEditing = row.id === editingKey;
    return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, rest, {
      table: table,
      tableId: tableId,
      key: row.id,
      row: row,
      columnVirtualizer: columnVirtualizer,
      rowVirtualizer: rowVirtualizer,
      virtualPaddingLeft: virtualPaddingLeft,
      virtualPaddingRight: virtualPaddingRight,
      virtualRow: virtualRow,
      fixedLeftColumns: fixedLeftColumns,
      fixedRightColumns: fixedRightColumns,
      isEditing: isEditing
    }));
  }));
};
export default TableBody;