react-science 11.0.0 → 11.1.0

package/lib/components/logger/FifoLoggerDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FifoLoggerDialog.d.ts","sourceRoot":"","sources":["../../../src/components/logger/FifoLoggerDialog.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAKtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA+B5C,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAqCD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,oDA0D5D"}
+{"version":3,"file":"FifoLoggerDialog.d.ts","sourceRoot":"","sources":["../../../src/components/logger/FifoLoggerDialog.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAKtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA+B5C,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAqCD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,oDAyD5D"}

package/lib/components/logger/FifoLoggerDialog.js

@@ -54,9 +54,9 @@ export function FifoLoggerDialog(props) {
         min-height: 500px;
         max-height: 80vh;
         max-width: 1000px;
-      `, children: [_jsx(DialogBody, { children: _jsx(Table, { data: props.logs, columns: columns, compact: true, bordered: true, tableProps: { style: { width: '100%' } }, renderRowTr: ({ row, children }) => (_jsx("tr", { style: {
+      `, children: [_jsx(DialogBody, { children: _jsx(Table, { data: props.logs, columns: columns, compact: true, bordered: true, tableProps: { style: { width: '100%' } }, renderRowTr: (trProps, row) => (_jsx("tr", { ...trProps, style: {
                             backgroundColor: rowBackgroundColor[row.original.levelLabel],
-                        }, children: children })) }) }), _jsx(DialogFooter, { actions: _jsxs(ActionsFooter, { children: [_jsx(Button, { outlined: true, intent: "danger", icon: "trash", text: "Clear logs", onClick: () => logger.clear() }), _jsx(Button, { outlined: true, intent: "none", text: "Close", onClick: props.onClose })] }) })] }));
+                        } })) }) }), _jsx(DialogFooter, { actions: _jsxs(ActionsFooter, { children: [_jsx(Button, { outlined: true, intent: "danger", icon: "trash", text: "Clear logs", onClick: () => logger.clear() }), _jsx(Button, { outlined: true, intent: "none", text: "Close", onClick: props.onClose })] }) })] }));
 }
 // "fatal" | "error" | "warn" | "info" | "debug" | "trace" | "silent"
 const rowBackgroundColor = {

package/lib/components/logger/FifoLoggerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FifoLoggerDialog.js","sourceRoot":"","sources":["../../../src/components/logger/FifoLoggerDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FifoLoggerDialog.js","sourceRoot":"","sources":["../../../src/components/logger/FifoLoggerDialog.tsx"],"names":[],"mappings":"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"}

package/lib/components/table/table_body.d.ts

@@ -1,8 +1,11 @@
 import type { Row, RowData } from '@tanstack/react-table';
+import type { Virtualizer } from '@tanstack/react-virtual';
 import type { TableRowTrRenderer } from './table_utils.js';
 interface TableBodyProps<TData extends RowData> {
     rows: Array<Row<TData>>;
     renderRowTr: TableRowTrRenderer<TData> | undefined;
+    virtualizeRows?: boolean;
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 export declare function TableBody<TData extends RowData>(props: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/table_body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_body.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAI1D,OAAO,KAAK,EACV,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,SAAS,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgB5E"}
+{"version":3,"file":"table_body.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMxE,OAAO,KAAK,EAAmB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;CACnD;AAED,wBAAgB,SAAS,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAwD5E"}

package/lib/components/table/table_body.js

@@ -1,16 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { notUndefined } from '@tanstack/react-virtual';
 import { Fragment } from 'react';
 import { TableRowCell } from './table_row_cell.js';
 export function TableBody(props) {
-    const { rows, renderRowTr = defaultRenderRowTr } = props;
-    return (_jsx("tbody", { children: rows.map((row) => (_jsx(Fragment, { children: renderRowTr({
-                row,
-                children: row
-                    .getVisibleCells()
-                    .map((cell) => _jsx(TableRowCell, { cell: cell }, cell.id)),
-            }) }, row.id))) }));
+    const { rows, renderRowTr = defaultRenderRowTr, virtualizer, virtualizeRows, } = props;
+    if (virtualizeRows) {
+        const virtualItems = virtualizer.getVirtualItems();
+        const [before, after] = virtualItems.length > 0
+            ? [
+                virtualItems[0].start - virtualizer.options.scrollMargin,
+                virtualizer.getTotalSize() - notUndefined(virtualItems.at(-1)).end,
+            ]
+            : [0, 0];
+        return (_jsxs("tbody", { children: [before > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: before } }) })), virtualItems.map((virtualItem, index) => (_jsx(TableRow, { row: rows[virtualItem.index], renderRowTr: (row) => {
+                        const trProps = getTrRenderProps(row, {
+                            ...virtualItem,
+                            virtualIndex: index,
+                        });
+                        return renderRowTr(trProps, row);
+                    } }, virtualItem.index))), after > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: after } }) }))] }));
+    }
+    return (_jsx("tbody", { children: rows.map((row) => (_jsx(TableRow, { row: row, renderRowTr: (row) => renderRowTr(getTrRenderProps(row), row) }, row.id))) }));
 }
-function defaultRenderRowTr(props) {
-    return _jsx("tr", { children: props.children });
+function TableRow({ row, renderRowTr, }) {
+    return _jsx(Fragment, { children: renderRowTr(row) });
+}
+const defaultRenderRowTr = (trProps) => (_jsx("tr", { ...trProps }));
+function getTrRenderProps(row, virtualItem) {
+    const index = virtualItem ? virtualItem.index : row.index;
+    return {
+        // index is 0-indexed, so odd rows are even indices
+        className: index % 2 === 0 ? 'odd' : '',
+        children: row
+            .getVisibleCells()
+            .map((cell) => _jsx(TableRowCell, { cell: cell }, cell.id)),
+    };
 }
 //# sourceMappingURL=table_body.js.map

package/lib/components/table/table_body.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_body.js","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAWnD,MAAM,UAAU,SAAS,CAAwB,KAA4B;IAC3E,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACzD,OAAO,CACL,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,KAAC,QAAQ,cACN,WAAW,CAAC;gBACX,GAAG;gBACH,QAAQ,EAAE,GAAG;qBACV,eAAe,EAAE;qBACjB,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,YAAY,IAAe,IAAI,EAAE,IAAI,IAAnB,IAAI,CAAC,EAAE,CAAgB,CAAC;aAC7D,CAAC,IANW,GAAG,CAAC,EAAE,CAOV,CACZ,CAAC,GACI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CACzB,KAAqC;IAErC,OAAO,uBAAK,KAAK,CAAC,QAAQ,GAAM,CAAC;AACnC,CAAC"}
+{"version":3,"file":"table_body.js","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"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"}

package/lib/components/table/table_root.d.ts

@@ -2,17 +2,60 @@
 import type { RowData, TableOptions } from '@tanstack/react-table';
 import type { TableHTMLAttributes } from 'react';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
-export interface TableProps<TData extends RowData> {
+interface TableBaseProps<TData extends RowData> {
     data: TData[];
+    /**
+     * Tanstack table definition of columns in the table.
+     */
     columns: Array<TableColumnDef<TData, any>>;
+    /**
+     * Show borders between each cell and row of the table.
+     */
     bordered?: boolean;
+    /**
+     * Reduce the padding around table cells.
+     */
     compact?: boolean;
+    /**
+     * When hovering over a row, change its background color and set the pointer
+     * to be a cursor.
+     */
     interactive?: boolean;
+    /**
+     * Alternate between gray and white background for each row.
+     */
     striped?: boolean;
+    /**
+     * Enable header rows which stick to the top of the table.
+     */
     stickyHeader?: boolean;
+    /**
+     * Use virtualized rows to optimize rendering.
+     * When virtualizing rows, and in order to prevent layout shifts,
+     * it is recommended that all columns have a fixed width.
+     */
+    virtualizeRows?: boolean;
     reactTable?: Omit<TableOptions<TData>, 'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'>;
     tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
+    /**
+     * Override the default row rendering.
+     * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
+     */
     renderRowTr?: TableRowTrRenderer<TData>;
 }
+interface RegularTableProps<TData extends RowData> extends TableBaseProps<TData> {
+    virtualizeRows?: false | undefined;
+}
+interface VirtualizedTableProps<TData extends RowData> extends TableBaseProps<TData> {
+    virtualizeRows: true;
+    /**
+     * For virtualization of the table rows, provide an estimate of the height of each row.
+     * @param index The index of the row in the data array.
+     * @return The estimated height of the row at the given index.
+     */
+    estimatedRowHeight: (index: number) => number;
+}
+export type TableProps<TData extends RowData> = RegularTableProps<TData> | VirtualizedTableProps<TData>;
 export declare function Table<TData extends RowData>(props: TableProps<TData>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=table_root.d.ts.map

package/lib/components/table/table_root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAGtC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG3E,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,OAAO;IAC/C,IAAI,EAAE,KAAK,EAAE,CAAC;IAEd,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAE3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,UAAU,CAAC,EAAE,IAAI,CACf,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAC7D,CAAC;IACF,UAAU,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE,WAAW,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,wBAAgB,KAAK,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,oDAqCpE"}
+{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAc3E,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,EAAE,CAAC;IACd;;OAEG;IAEH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,IAAI,CACf,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAC7D,CAAC;IACF,UAAU,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,qBAAqB,CAAC,KAAK,SAAS,OAAO,CACnD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,EAAE,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IACxC,iBAAiB,CAAC,KAAK,CAAC,GACxB,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,wBAAgB,KAAK,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,oDAwDpE"}

package/lib/components/table/table_root.js

@@ -1,12 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { HTMLTable } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import { getCoreRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
 import { TableBody } from './table_body.js';
 import { TableHeader } from './table_header.js';
 import { useTableColumns } from './use_table_columns.js';
+// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
+// We cannot use that with virtualization, so we override its implementation here.
+const CustomHTMLTable = styled(HTMLTable, {
+    shouldForwardProp: (prop) => prop !== 'striped',
+}) `
+  tbody tr.odd td {
+    background: ${(props) => props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
+  }
+`;
 export function Table(props) {
-    const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, renderRowTr, } = props;
+    const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, renderRowTr, virtualizeRows, } = props;
+    const scrollElementRef = useRef(null);
     const columnDefs = useTableColumns(columns);
     const table = useReactTable({
         ...reactTable,
@@ -15,6 +28,23 @@ export function Table(props) {
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
     });
-    return (_jsxs(HTMLTable, { bordered: bordered, compact: compact, interactive: interactive, striped: striped, ...tableProps, children: [_jsx(TableHeader, { sticky: stickyHeader, headers: table.getFlatHeaders() }), _jsx(TableBody, { rows: table.getRowModel().rows, renderRowTr: renderRowTr })] }));
+    const tanstackVirtualizer = useVirtualizer({
+        enabled: virtualizeRows,
+        count: data.length,
+        getScrollElement: () => scrollElementRef.current,
+        estimateSize: (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
+        overscan: 5,
+    });
+    return (_jsx(Container, { virtualizeRows: virtualizeRows, scrollRef: scrollElementRef, children: _jsxs(CustomHTMLTable, { bordered: bordered, compact: compact, interactive: interactive, striped: striped, ...tableProps, children: [_jsx(TableHeader, { sticky: stickyHeader, headers: table.getFlatHeaders() }), _jsx(TableBody, { rows: table.getRowModel().rows, renderRowTr: renderRowTr, virtualizer: tanstackVirtualizer, virtualizeRows: virtualizeRows })] }) }));
+}
+const ScrollRefDiv = styled.div `
+  height: 100%;
+  overflow: auto;
+`;
+function Container({ virtualizeRows, scrollRef, children, }) {
+    if (virtualizeRows) {
+        return _jsx(ScrollRefDiv, { ref: scrollRef, children: children });
+    }
+    return _jsx(_Fragment, { children: children });
 }
 //# sourceMappingURL=table_root.js.map

package/lib/components/table/table_root.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAqBzD,MAAM,UAAU,KAAK,CAAwB,KAAwB;IACnE,MAAM,EACJ,IAAI,EACJ,OAAO,EAEP,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EAEpB,UAAU,EACV,UAAU,EACV,WAAW,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,aAAa,CAAQ;QACjC,GAAG,UAAU;QACb,IAAI;QACJ,OAAO,EAAE,UAAU;QACnB,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;KACvC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,KACZ,UAAU,aAEd,KAAC,WAAW,IAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,EAAE,GAAI,EACtE,KAAC,SAAS,IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,IAC7D,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"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"}

package/lib/components/table/table_row_cell.d.ts

@@ -1,6 +1,7 @@
 import type { Cell, RowData } from '@tanstack/react-table';
 interface TableRowCellProps<TData extends RowData> {
     cell: Cell<TData, unknown>;
+    className?: string;
 }
 export declare function TableRowCell<TData extends RowData>(props: TableRowCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/table_row_cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_row_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG3D,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO;IAC/C,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,OAAO,EAChD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAShC"}
+{"version":3,"file":"table_row_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG3D,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO;IAC/C,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,OAAO,EAChD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAShC"}

package/lib/components/table/table_row_cell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 export function TableRowCell(props) {
-    const { cell } = props;
-    return (_jsx("td", { style: { position: 'relative' }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+    const { cell, className } = props;
+    return (_jsx("td", { style: { position: 'relative' }, className: className, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
 }
 //# sourceMappingURL=table_row_cell.js.map

package/lib/components/table/table_row_cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_row_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMnD,MAAM,UAAU,YAAY,CAC1B,KAA+B;IAE/B,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,OAAO,CACL,aAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAChC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,GACvD,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"table_row_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD,MAAM,UAAU,YAAY,CAC1B,KAA+B;IAE/B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACL,aAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,YACtD,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,GACvD,CACN,CAAC;AACJ,CAAC"}

package/lib/components/table/table_utils.d.ts

@@ -2,9 +2,9 @@ import type { ColumnDef, Row, RowData } from '@tanstack/react-table';
 import type { ReactNode } from 'react';
 export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue>;
 export declare function createTableColumnHelper<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<TData>;
-export interface TableRowTrRendererProps<TData extends RowData> {
-    row: Row<TData>;
+export interface TableRowTrProps {
+    className: string;
     children: ReactNode;
 }
-export type TableRowTrRenderer<TData extends RowData> = (props: TableRowTrRendererProps<TData>) => ReactNode;
+export type TableRowTrRenderer<TData extends RowData> = (trProps: TableRowTrProps, row: Row<TData>) => ReactNode;
 //# sourceMappingURL=table_utils.d.ts.map

package/lib/components/table/table_utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_utils.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,GAAG,OAAO,IAAI,SAAS,CAC7E,KAAK,EACL,MAAM,CACP,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,KAAK,SAAS,OAAO,yDAE5D;AAED,MAAM,WAAW,uBAAuB,CAAC,KAAK,SAAS,OAAO;IAC5D,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,OAAO,IAAI,CACtD,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,KAClC,SAAS,CAAC"}
+{"version":3,"file":"table_utils.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,GAAG,OAAO,IAAI,SAAS,CAC7E,KAAK,EACL,MAAM,CACP,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,KAAK,SAAS,OAAO,yDAE5D;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,OAAO,IAAI,CACtD,OAAO,EAAE,eAAe,EACxB,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KACZ,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -61,6 +61,7 @@
     "@radix-ui/react-radio-group": "^1.2.1",
     "@tanstack/react-query": "^5.61.5",
     "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.10.9",
     "d3-scale-chromatic": "^3.1.0",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",

package/src/components/logger/FifoLoggerDialog.tsx

@@ -102,14 +102,13 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
           compact
           bordered
           tableProps={{ style: { width: '100%' } }}
-          renderRowTr={({ row, children }) => (
+          renderRowTr={(trProps, row) => (
             <tr
+              {...trProps}
               style={{
                 backgroundColor: rowBackgroundColor[row.original.levelLabel],
               }}
-            >
-              {children}
-            </tr>
+            />
           )}
         />
       </DialogBody>

package/src/components/table/table_body.tsx

@@ -1,37 +1,111 @@
 import type { Row, RowData } from '@tanstack/react-table';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import { notUndefined } from '@tanstack/react-virtual';
+import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
 import { TableRowCell } from './table_row_cell.js';
-import type {
-  TableRowTrRenderer,
-  TableRowTrRendererProps,
-} from './table_utils.js';
+import type { TableRowTrProps, TableRowTrRenderer } from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
   rows: Array<Row<TData>>;
   renderRowTr: TableRowTrRenderer<TData> | undefined;
+  virtualizeRows?: boolean;
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
 export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
-  const { rows, renderRowTr = defaultRenderRowTr } = props;
+  const {
+    rows,
+    renderRowTr = defaultRenderRowTr as TableRowTrRenderer<TData>,
+    virtualizer,
+    virtualizeRows,
+  } = props;
+
+  if (virtualizeRows) {
+    const virtualItems = virtualizer.getVirtualItems();
+    const [before, after] =
+      virtualItems.length > 0
+        ? [
+            virtualItems[0].start - virtualizer.options.scrollMargin,
+            virtualizer.getTotalSize() - notUndefined(virtualItems.at(-1)).end,
+          ]
+        : [0, 0];
+    return (
+      <tbody>
+        {before > 0 && (
+          <tr>
+            <td style={{ height: before }} />
+          </tr>
+        )}
+        {virtualItems.map((virtualItem, index) => (
+          <TableRow
+            key={virtualItem.index}
+            row={rows[virtualItem.index]}
+            renderRowTr={(row) => {
+              const trProps = getTrRenderProps<TData>(row, {
+                ...virtualItem,
+                virtualIndex: index,
+              });
+              return renderRowTr(trProps, row);
+            }}
+          />
+        ))}
+        {after > 0 && (
+          <tr>
+            <td style={{ height: after }} />
+          </tr>
+        )}
+      </tbody>
+    );
+  }
   return (
     <tbody>
       {rows.map((row) => (
-        <Fragment key={row.id}>
-          {renderRowTr({
-            row,
-            children: row
-              .getVisibleCells()
-              .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
-          })}
-        </Fragment>
+        <TableRow
+          key={row.id}
+          row={row}
+          renderRowTr={(row) => renderRowTr(getTrRenderProps(row), row)}
+        />
       ))}
     </tbody>
   );
 }
 
-function defaultRenderRowTr<TData extends RowData>(
-  props: TableRowTrRendererProps<TData>,
-) {
-  return <tr>{props.children}</tr>;
+type TableRowRenderer<TData extends RowData> = (row: Row<TData>) => ReactNode;
+
+function TableRow<TData>({
+  row,
+  renderRowTr,
+}: {
+  row: Row<TData>;
+  renderRowTr: TableRowRenderer<TData>;
+}) {
+  return <Fragment>{renderRowTr(row)}</Fragment>;
+}
+
+const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps) => (
+  <tr {...trProps} />
+);
+
+type RenderRowVirtualItem = VirtualItem & {
+  /**
+   * The index of the element within the virtual list being currently rendered.
+   */
+  virtualIndex: number;
+};
+
+function getTrRenderProps<TData extends RowData>(
+  row: Row<TData>,
+  virtualItem?: RenderRowVirtualItem,
+): TableRowTrProps {
+  const index = virtualItem ? virtualItem.index : row.index;
+
+  return {
+    // index is 0-indexed, so odd rows are even indices
+    className: index % 2 === 0 ? 'odd' : '',
+    children: row
+      .getVisibleCells()
+      .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
+  };
 }

package/src/components/table/table_root.tsx

@@ -1,38 +1,100 @@
 /** @jsxImportSource @emotion/react */
 
 import { HTMLTable } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import type { RowData, TableOptions } from '@tanstack/react-table';
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import type { TableHTMLAttributes } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { ReactNode, RefObject, TableHTMLAttributes } from 'react';
+import { useRef } from 'react';
 
 import { TableBody } from './table_body.js';
 import { TableHeader } from './table_header.js';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
 import { useTableColumns } from './use_table_columns.js';
 
-export interface TableProps<TData extends RowData> {
+// Blueprint's HTMLTable `striped` prop's implementation is based on nth-child odd / even
+// We cannot use that with virtualization, so we override its implementation here.
+const CustomHTMLTable = styled(HTMLTable, {
+  shouldForwardProp: (prop) => prop !== 'striped',
+})`
+  tbody tr.odd td {
+    background: ${(props) =>
+      props.striped ? 'rgba(143, 153, 168, 0.15)' : 'inherit'};
+  }
+`;
+
+interface TableBaseProps<TData extends RowData> {
   data: TData[];
+  /**
+   * Tanstack table definition of columns in the table.
+   */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: Array<TableColumnDef<TData, any>>;
-
+  /**
+   * Show borders between each cell and row of the table.
+   */
   bordered?: boolean;
+  /**
+   * Reduce the padding around table cells.
+   */
   compact?: boolean;
+  /**
+   * When hovering over a row, change its background color and set the pointer
+   * to be a cursor.
+   */
   interactive?: boolean;
+  /**
+   * Alternate between gray and white background for each row.
+   */
   striped?: boolean;
+  /**
+   * Enable header rows which stick to the top of the table.
+   */
   stickyHeader?: boolean;
+  /**
+   * Use virtualized rows to optimize rendering.
+   * When virtualizing rows, and in order to prevent layout shifts,
+   * it is recommended that all columns have a fixed width.
+   */
+  virtualizeRows?: boolean;
 
   reactTable?: Omit<
     TableOptions<TData>,
     'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
   >;
   tableProps?: Omit<TableHTMLAttributes<HTMLTableElement>, 'children'>;
+  /**
+   * Override the default row rendering.
+   * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
+   */
   renderRowTr?: TableRowTrRenderer<TData>;
 }
 
+interface RegularTableProps<TData extends RowData>
+  extends TableBaseProps<TData> {
+  virtualizeRows?: false | undefined;
+}
+
+interface VirtualizedTableProps<TData extends RowData>
+  extends TableBaseProps<TData> {
+  virtualizeRows: true;
+  /**
+   * For virtualization of the table rows, provide an estimate of the height of each row.
+   * @param index The index of the row in the data array.
+   * @return The estimated height of the row at the given index.
+   */
+  estimatedRowHeight: (index: number) => number;
+}
+
+export type TableProps<TData extends RowData> =
+  | RegularTableProps<TData>
+  | VirtualizedTableProps<TData>;
+
 export function Table<TData extends RowData>(props: TableProps<TData>) {
   const {
     data,
@@ -47,8 +109,11 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     reactTable,
     tableProps,
     renderRowTr,
+
+    virtualizeRows,
   } = props;
 
+  const scrollElementRef = useRef<HTMLDivElement>(null);
   const columnDefs = useTableColumns(columns);
   const table = useReactTable<TData>({
     ...reactTable,
@@ -58,16 +123,52 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     getSortedRowModel: getSortedRowModel(),
   });
 
+  const tanstackVirtualizer = useVirtualizer({
+    enabled: virtualizeRows,
+    count: data.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize:
+      (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
+    overscan: 5,
+  });
+
   return (
-    <HTMLTable
-      bordered={bordered}
-      compact={compact}
-      interactive={interactive}
-      striped={striped}
-      {...tableProps}
-    >
-      <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
-      <TableBody rows={table.getRowModel().rows} renderRowTr={renderRowTr} />
-    </HTMLTable>
+    <Container virtualizeRows={virtualizeRows} scrollRef={scrollElementRef}>
+      <CustomHTMLTable
+        bordered={bordered}
+        compact={compact}
+        interactive={interactive}
+        striped={striped}
+        {...tableProps}
+      >
+        <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
+        <TableBody
+          rows={table.getRowModel().rows}
+          renderRowTr={renderRowTr}
+          virtualizer={tanstackVirtualizer}
+          virtualizeRows={virtualizeRows}
+        />
+      </CustomHTMLTable>
+    </Container>
   );
 }
+
+const ScrollRefDiv = styled.div`
+  height: 100%;
+  overflow: auto;
+`;
+
+function Container({
+  virtualizeRows,
+  scrollRef,
+  children,
+}: {
+  virtualizeRows?: boolean;
+  children: ReactNode;
+  scrollRef: RefObject<HTMLDivElement>;
+}) {
+  if (virtualizeRows) {
+    return <ScrollRefDiv ref={scrollRef}>{children}</ScrollRefDiv>;
+  }
+  return <>{children}</>;
+}

package/src/components/table/table_row_cell.tsx

@@ -3,15 +3,16 @@ import { flexRender } from '@tanstack/react-table';
 
 interface TableRowCellProps<TData extends RowData> {
   cell: Cell<TData, unknown>;
+  className?: string;
 }
 
 export function TableRowCell<TData extends RowData>(
   props: TableRowCellProps<TData>,
 ) {
-  const { cell } = props;
+  const { cell, className } = props;
 
   return (
-    <td style={{ position: 'relative' }}>
+    <td style={{ position: 'relative' }} className={className}>
       {flexRender(cell.column.columnDef.cell, cell.getContext())}
     </td>
   );

package/src/components/table/table_utils.ts

@@ -11,10 +11,12 @@ export function createTableColumnHelper<TData extends RowData>() {
   return createColumnHelper<TData>();
 }
 
-export interface TableRowTrRendererProps<TData extends RowData> {
-  row: Row<TData>;
+export interface TableRowTrProps {
+  className: string;
   children: ReactNode;
 }
+
 export type TableRowTrRenderer<TData extends RowData> = (
-  props: TableRowTrRendererProps<TData>,
+  trProps: TableRowTrProps,
+  row: Row<TData>,
 ) => ReactNode;