TableNG: Reduce how often we re-measure row height (#107604)

This commit is contained in:
Leon Sorokin
2025-07-03 21:46:03 -05:00
committed by GitHub
parent 41014f29ed
commit f2ffdd39ca
2 changed files with 14 additions and 7 deletions

View File

@ -64,7 +64,7 @@ export function TableNG(props: TableNGProps) {
const { const {
cellHeight, cellHeight,
data, data,
enablePagination, enablePagination = false,
enableSharedCrosshair = false, enableSharedCrosshair = false,
enableVirtualization, enableVirtualization,
footerOptions, footerOptions,
@ -265,6 +265,9 @@ export function TableNG(props: TableNGProps) {
cellRootRenderers: {}, cellRootRenderers: {},
}; };
let lastRowIdx = -1;
let _rowHeight = 0;
f.forEach((field, i) => { f.forEach((field, i) => {
const justifyContent = getTextAlign(field); const justifyContent = getTextAlign(field);
const footerStyles = getFooterStyles(justifyContent); const footerStyles = getFooterStyles(justifyContent);
@ -292,9 +295,6 @@ export function TableNG(props: TableNGProps) {
const shouldOverflow = shouldTextOverflow(field); const shouldOverflow = shouldTextOverflow(field);
const shouldWrap = shouldTextWrap(field); const shouldWrap = shouldTextWrap(field);
let lastRowIdx = -1;
let _rowHeight = 0;
// this fires first // this fires first
const renderCellRoot = (key: Key, props: CellRendererProps<TableRow, TableSummaryRow>): ReactNode => { const renderCellRoot = (key: Key, props: CellRendererProps<TableRow, TableSummaryRow>): ReactNode => {
const rowIdx = props.row.__index; const rowIdx = props.row.__index;

View File

@ -140,7 +140,7 @@ export interface PaginatedRowsOptions {
headerHeight: number; headerHeight: number;
footerHeight: number; footerHeight: number;
paginationHeight?: number; paginationHeight?: number;
enabled?: boolean; enabled: boolean;
} }
export interface PaginatedRowsResult { export interface PaginatedRowsResult {
@ -167,11 +167,17 @@ export function usePaginatedRows(
// calculate average row height if row height is variable. // calculate average row height if row height is variable.
const avgRowHeight = useMemo(() => { const avgRowHeight = useMemo(() => {
if (!enabled) {
return 0;
}
if (typeof rowHeight === 'number') { if (typeof rowHeight === 'number') {
return rowHeight; return rowHeight;
} }
return rows.reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
}, [rows, rowHeight]); // we'll just measure 100 rows to estimate
return rows.slice(0, 100).reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
}, [rows, rowHeight, enabled]);
// using dimensions of the panel, calculate pagination parameters // using dimensions of the panel, calculate pagination parameters
const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): { const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): {
@ -325,6 +331,7 @@ export function useTypographyCtx(): TypographyCtx {
const txtWidth = ctx.measureText(txt).width; const txtWidth = ctx.measureText(txt).width;
const avgCharWidth = txtWidth / txt.length + letterSpacing; const avgCharWidth = txtWidth / txt.length + letterSpacing;
const { count } = varPreLine(ctx); const { count } = varPreLine(ctx);
const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => { const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => {
if (text === '') { if (text === '') {
return defaultHeight; return defaultHeight;