synapse-react-client/dist/components/TanStackTable/StyledVirtualTanStackTable.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as s } from "react/jsx-runtime";
import { mergeSlotProps as u } from "../../utils/slots/SlotUtils.js";
import { noop as y } from "lodash-es";
import m, { useContext as f } from "react";
import c from "./StyledTanStackTable.js";
const n = m.createContext(void 0);
function w(l) {
  const { row: t, tableRow: o, ...r } = l, e = f(n);
  return /* @__PURE__ */ s(
    "tr",
    {
      "data-index": t.index,
      ref: (i) => e?.measureElement(i),
      ...r,
      style: {
        ...r.style,
        display: "flex",
        position: "absolute",
        transform: `translateY(${t.start}px)`,
        //this should always be a `style` as it changes on scroll
        width: "100%",
        alignItems: "center"
      }
    }
  );
}
function S(l) {
  const {
    table: t,
    styledTableContainerProps: o,
    fullWidth: r = !0,
    rowVirtualizer: e,
    slotProps: i = {},
    onTableContainerScroll: d = y
  } = l, p = e.getVirtualItems();
  return /* @__PURE__ */ s(n.Provider, { value: e, children: /* @__PURE__ */ s(
    c,
    {
      table: t,
      rows: p,
      rowTransform: (a) => t.getRowModel().rows[a.index],
      fullWidth: r,
      styledTableContainerProps: {
        noStripedRows: !0,
        ...o,
        style: {
          overflow: "auto",
          //our scrollable table container
          position: "relative",
          //needed for sticky header
          ...o?.style
        },
        sx: {
          "thead > tr": {
            display: "flex",
            width: "100%"
          }
        },
        onScroll: (a) => d(a.target)
      },
      ...o,
      slots: {
        Tr: w
      },
      slotProps: u(i, {
        Table: {
          style: {
            display: "grid"
          }
        },
        Thead: {
          style: {
            display: "grid",
            position: "sticky",
            top: 0,
            zIndex: 1
          }
        },
        Th: {
          style: {
            display: "flex"
          }
        },
        Tbody: {
          style: {
            display: "grid",
            height: `${e.getTotalSize()}px`,
            //tells scrollbar how big the table is
            position: "relative"
            //needed for absolute positioning of rows
          }
        }
      })
    }
  ) });
}
export {
  w as VirtualizedTr,
  S as default
};
//# sourceMappingURL=StyledVirtualTanStackTable.js.map