synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
117 lines (116 loc) • 3.78 kB
JavaScript
import { jsx as i, jsxs as b } from "react/jsx-runtime";
import { StyledTableContainer as I } from "../styled/StyledTableContainer.js";
import { flexRender as L } from "@tanstack/react-table";
import { useRef as $, useState as k, useLayoutEffect as v, useMemo as D } from "react";
import { MemoizedTableBody as F, TableBody as W } from "./TableBody.js";
import { getHeaderSizeCssVariable as h, getColumnSizeCssVariable as q, getCommonPinningStyles as A } from "./TanStackTableUtils.js";
function U(r) {
const {
table: e,
styledTableContainerProps: y,
fullWidth: z = !0,
autoColumnSizing: c = !1,
slots: p = {},
slotProps: T = {}
} = r, {
Thead: C = "thead",
Th: P = "th",
Table: R = "table",
...w
} = p, {
Table: d = {},
Thead: x = {},
Th: S = {},
...B
} = T, M = {
table: e,
slots: w,
slotProps: B,
rows: r.rows,
rowTransform: r.rowTransform
}, u = $(null), m = e.getState().columnVisibility, [g, V] = k(null), n = !c || g?.columns === e.options.columns && g?.columnVisibility === m;
v(() => {
if (!c || n || !u.current) return;
const o = u.current.querySelectorAll(
":scope > thead > tr:first-child > th"
), t = e.getFlatHeaders(), l = {};
t.forEach((s, E) => {
const f = o[E];
f && (l[s.column.id] = Math.ceil(f.getBoundingClientRect().width));
}), Object.keys(l).length > 0 && (e.setColumnSizing(l), V({
columns: e.options.columns,
columnVisibility: m
}));
}, [c, m, n, e]);
const H = D(() => {
const o = e.getFlatHeaders(), t = {};
for (let l = 0; l < o.length; l++) {
const s = o[l];
t[h(s.id)] = s.getSize(), t[q(s.column.id)] = s.column.getSize();
}
return t;
}, [
e.getState().columnSizingInfo,
e.getState().columnSizing,
e.getState().columnVisibility
// If a column is added, its width should be recalculated
]);
let a;
z ? a = "100%" : n ? a = `${e.getTotalSize()}px` : a = "max-content";
const j = e.getState().columnSizingInfo.isResizingColumn ? F : W;
return /* @__PURE__ */ i(I, { ...y, children: /* @__PURE__ */ b(
R,
{
...d,
ref: u,
style: {
...H,
// Pre-measurement: auto layout so the browser can size columns to content.
// Post-measurement: fixed layout so the user can resize below content width.
tableLayout: n ? "fixed" : "auto",
width: a,
...d.style
},
children: [
/* @__PURE__ */ i(C, { ...x, children: e.getHeaderGroups().map((o) => /* @__PURE__ */ i("tr", { children: o.headers.map((t) => /* @__PURE__ */ b(
P,
{
colSpan: t.colSpan,
...S,
style: {
// Pre-measurement: no width hint — let the browser size freely.
// Post-measurement: exact width from the measured/resized value.
...n && {
width: `calc(var(${h(
t.id
)}) * 1px)`
},
...A(t.column),
...S.style
},
children: [
t.isPlaceholder ? null : L(
t.column.columnDef.header,
t.getContext()
),
t.column.getCanResize() && /* @__PURE__ */ i(
"div",
{
className: `resizer ${t.column.getIsResizing() ? "isResizing" : ""}`,
onMouseDown: t.getResizeHandler(),
onTouchStart: t.getResizeHandler()
}
)
]
},
t.id
)) }, o.id)) }),
/* @__PURE__ */ i(j, { ...M })
]
}
) });
}
export {
U as default
};
//# sourceMappingURL=StyledTanStackTable.js.map