@prairielearn/ui 1.3.0 → 1.4.0

package/dist/components/TanstackTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAsB,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAK9C,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AA0F1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC1B;AAID;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,GAC/B,EAAE,kBAAkB,CAAC,YAAY,CAAC,eAuYlC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,qBAA4B,GAC7B,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAAC,gCAAgC,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAC9F,eAmFA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,eAOA"}
+{"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,MAAM,EAAO,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI/D,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAoE1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CACpD;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,EAC9B,SAAS,GACV,EAAE,kBAAkB,CAAC,YAAY,CAAC,eA0VlC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAC1B,gCAAgC,CAAC,YAAY,CAAC,EAC9C,OAAO,GAAG,eAAe,GAAG,aAAa,CAC1C,CAAC;CACH,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,eAgFvC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,eAOA"}

package/dist/components/TanstackTable.js

@@ -1,57 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@prairielearn/preact-cjs/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@prairielearn/preact-cjs/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
-import { notUndefined, useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef } from 'preact/hooks';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
+import { run } from '@prairielearn/run';
 import { ColumnManager } from './ColumnManager.js';
 import { TanstackTableDownloadButton, } from './TanstackTableDownloadButton.js';
-function SortIcon({ sortMethod }) {
-    if (sortMethod === 'asc') {
-        return _jsx("i", { class: "bi bi-sort-up-alt", "aria-hidden": "true" });
-    }
-    else if (sortMethod === 'desc') {
-        return _jsx("i", { class: "bi bi-sort-down", "aria-hidden": "true" });
-    }
-    else {
-        return _jsx("i", { class: "bi bi-arrow-down-up opacity-75 text-muted", "aria-hidden": "true" });
-    }
+import { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';
+import { useAutoSizeColumns } from './useAutoSizeColumns.js';
+function TableCell({ cell, rowIdx, colIdx, canSort, canFilter, wrapText, handleGridKeyDown, }) {
+    return (_jsx("td", { tabIndex: 0, "data-grid-cell-row": rowIdx, "data-grid-cell-col": colIdx, class: clsx(!canSort && !canFilter && 'text-center'), style: {
+            display: 'flex',
+            width: cell.column.getSize(),
+            minWidth: 0,
+            maxWidth: cell.column.getSize(),
+            flexShrink: 0,
+            position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,
+            left: cell.column.getIsPinned() === 'left' ? cell.column.getStart() : undefined,
+            verticalAlign: 'middle',
+        }, onKeyDown: (e) => handleGridKeyDown(e, rowIdx, colIdx), children: _jsx("div", { style: {
+                display: 'block',
+                minWidth: 0,
+                maxWidth: '100%',
+                overflow: wrapText ? 'visible' : 'hidden',
+                textOverflow: wrapText ? undefined : 'ellipsis',
+                whiteSpace: wrapText ? 'normal' : 'nowrap',
+                flex: '1 1 0%',
+                width: 0, // Allow flex to control width, but start from 0
+            }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
 }
-function ResizeHandle({ header, setColumnSizing, }) {
-    const minSize = header.column.columnDef.minSize ?? 0;
-    const maxSize = header.column.columnDef.maxSize ?? 0;
-    const handleKeyDown = (e) => {
-        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-            e.preventDefault();
-            const currentSize = header.getSize();
-            const increment = e.shiftKey ? 20 : 5; // Larger increment with Shift key
-            const newSize = e.key === 'ArrowLeft'
-                ? Math.max(minSize, currentSize - increment)
-                : Math.min(maxSize, currentSize + increment);
-            setColumnSizing((prevSizing) => ({
-                ...prevSizing,
-                [header.column.id]: newSize,
-            }));
-        }
-        else if (e.key === 'Home') {
-            e.preventDefault();
-            header.column.resetSize();
-        }
-    };
-    const columnName = typeof header.column.columnDef.header === 'string'
-        ? header.column.columnDef.header
-        : header.column.id;
-    return (_jsx("div", { class: "py-1 h-100", style: { position: 'absolute', right: 0, top: 0, width: '4px' }, children: _jsx("div", { role: "separator", "aria-label": `Resize '${columnName}' column`, "aria-valuetext": `${header.getSize()}px`, "aria-orientation": "vertical", "aria-valuemin": minSize, "aria-valuemax": maxSize, "aria-valuenow": header.getSize(), 
-            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-tabindex
-            tabIndex: 0, class: "h-100", style: {
-                background: header.column.getIsResizing() ? 'var(--bs-primary)' : 'var(--bs-gray-400)',
-                cursor: 'col-resize',
-                transition: 'background-color 0.2s',
-            }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: handleKeyDown }) }));
-}
-const DefaultNoResultsState = (_jsxs(_Fragment, { children: [_jsx("i", { class: "bi bi-search display-4 mb-2", "aria-hidden": "true" }), _jsx("p", { class: "mb-0", children: "No results found matching your search criteria." })] }));
-const DefaultEmptyState = (_jsxs(_Fragment, { children: [_jsx("i", { class: "bi bi-eye-slash display-4 mb-2", "aria-hidden": "true" }), _jsx("p", { class: "mb-0", children: "No results found." })] }));
+const DefaultNoResultsState = (_jsx(TanstackTableEmptyState, { iconName: "bi-search", children: "No results found matching your search criteria." }));
+const DefaultEmptyState = (_jsx(TanstackTableEmptyState, { iconName: "bi-eye-slash", children: "No results found." }));
 const DEFAULT_FILTER_MAP = {};
 /**
  * A generic component that renders a full-width, resizeable Tanstack Table.
@@ -62,19 +43,52 @@ const DEFAULT_FILTER_MAP = {};
  * @param params.rowHeight - The height of the rows in the table
  * @param params.noResultsState - The no results state for the table
  * @param params.emptyState - The empty state for the table
+ * @param params.scrollRef - Optional ref that will be attached to the scroll container element.
  */
-export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowHeight = 42, noResultsState = DefaultNoResultsState, emptyState = DefaultEmptyState, }) {
+export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowHeight = 42, noResultsState = DefaultNoResultsState, emptyState = DefaultEmptyState, scrollRef, }) {
     const parentRef = useRef(null);
     const tableRef = useRef(null);
+    const scrollContainerRef = scrollRef ?? parentRef;
     const rows = [...table.getTopRows(), ...table.getCenterRows()];
     const rowVirtualizer = useVirtualizer({
         count: rows.length,
-        getScrollElement: () => parentRef.current,
+        getScrollElement: () => scrollContainerRef.current,
         estimateSize: () => rowHeight,
         overscan: 10,
+        measureElement: (el) => el?.getBoundingClientRect().height ?? rowHeight,
+    });
+    const visibleColumns = table.getVisibleLeafColumns();
+    const centerColumns = visibleColumns.filter((col) => !col.getIsPinned());
+    const columnVirtualizer = useVirtualizer({
+        count: centerColumns.length,
+        estimateSize: (index) => centerColumns[index]?.getSize(),
+        // `useAutoSizeColumns` solves a different problem (happens once when the column set changes)
+        // and we don't need to measure the cells themselves, so we can use the default estimateSize.
+        getScrollElement: () => scrollContainerRef.current,
+        horizontal: true,
+        overscan: 3,
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualPaddingLeft = run(() => {
+        if (columnVirtualizer && virtualColumns?.length > 0) {
+            return virtualColumns[0]?.start ?? 0;
+        }
+        return null;
     });
-    // Track focused cell for grid navigation
-    const [focusedCell, setFocusedCell] = useState({ row: 0, col: 0 });
+    const virtualPaddingRight = run(() => {
+        if (columnVirtualizer && virtualColumns?.length > 0) {
+            return (columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0));
+        }
+        return null;
+    });
+    // Check if any column has wrapping enabled
+    const hasWrappedColumns = table.getAllLeafColumns().some((col) => col.columnDef.meta?.wrapText);
+    // Create callback for remeasuring after resize
+    const handleResizeEnd = useMemo(() => {
+        if (!hasWrappedColumns)
+            return undefined;
+        return () => rowVirtualizer.measure();
+    }, [hasWrappedColumns, rowVirtualizer]);
     const getVisibleCells = (row) => [
         ...row.getLeftVisibleCells(),
         ...row.getCenterVisibleCells(),
@@ -103,95 +117,47 @@ export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowH
         if (!next) {
             return;
         }
-        setFocusedCell({ row: next.row, col: next.col });
-        // If we are on the leftmost column, we should allow left scrolling.
-        if (colIdx === 0 && e.key === 'ArrowLeft') {
-            return;
-        }
-        // If we are on the top row, we should allow up scrolling.
-        if (rowIdx === 0 && e.key === 'ArrowUp') {
-            return;
-        }
-        // If we are on the rightmost column, we should allow right scrolling.
-        if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {
-            return;
+        // Only handle arrow keys if we're in the cell itself, not in an interactive element
+        const target = e.target;
+        if (target.tagName === 'TD') {
+            // If we are on the leftmost column, we should allow left scrolling.
+            if (colIdx === 0 && e.key === 'ArrowLeft') {
+                return;
+            }
+            // If we are on the top row, we should allow up scrolling.
+            if (rowIdx === 0 && e.key === 'ArrowUp') {
+                return;
+            }
+            // If we are on the rightmost column, we should allow right scrolling.
+            if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {
+                return;
+            }
+            e.preventDefault();
+            const selector = `[data-grid-cell-row="${next.row}"][data-grid-cell-col="${next.col}"]`;
+            const nextCell = tableRef.current?.querySelector(selector);
+            nextCell?.focus();
         }
-        e.preventDefault();
     };
-    useEffect(() => {
-        const selector = `[data-grid-cell-row="${focusedCell.row}"][data-grid-cell-col="${focusedCell.col}"]`;
-        const cell = tableRef.current?.querySelector(selector);
-        if (!cell)
-            return;
-        // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates
-        cell.focus();
-    }, [focusedCell]);
     const virtualRows = rowVirtualizer.getVirtualItems();
-    const [before, after] = virtualRows.length > 0
-        ? [
-            notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
-            rowVirtualizer.getTotalSize() - notUndefined(virtualRows.at(-1)).end,
-        ]
-        : [0, 0];
     const headerGroups = table.getHeaderGroups();
-    const isTableResizing = headerGroups.some((headerGroup) => headerGroup.headers.some((header) => header.column.getIsResizing()));
-    const lastColumnId = table.getAllLeafColumns()[table.getAllLeafColumns().length - 1].id;
-    const tableRect = tableRef.current?.getBoundingClientRect();
+    const leafHeaderGroup = headerGroups[headerGroups.length - 1];
+    const leftPinnedHeaders = leafHeaderGroup.headers.filter((header) => header.column.getIsPinned() === 'left');
+    const centerHeaders = leafHeaderGroup.headers.filter((header) => !header.column.getIsPinned());
+    const isTableResizing = leafHeaderGroup.headers.some((header) => header.column.getIsResizing());
     // We toggle this here instead of in the parent since this component logically manages all UI for the table.
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-manage-parent
     useEffect(() => {
-        document.body.classList.toggle('no-user-select', isTableResizing);
+        document.body.classList.toggle('pl-ui-no-user-select', isTableResizing);
     }, [isTableResizing]);
-    // Dismiss popovers when their triggering element scrolls out of view
+    const hasAutoSized = useAutoSizeColumns(table, tableRef, filters);
+    // Re-measure the virtualizer when auto-sizing completes
     useEffect(() => {
-        const handleScroll = () => {
-            const scrollElement = parentRef.current;
-            if (!scrollElement)
-                return;
-            // Find and check all open popovers
-            const popovers = document.querySelectorAll('.popover.show');
-            popovers.forEach((popover) => {
-                // Find the trigger element for this popover
-                const triggerElement = document.querySelector(`[aria-describedby="${popover.id}"]`);
-                if (!triggerElement)
-                    return;
-                // Check if the trigger element is still visible in the scroll container
-                const scrollRect = scrollElement.getBoundingClientRect();
-                const triggerRect = triggerElement.getBoundingClientRect();
-                // Check if trigger is outside the visible scroll area
-                const isOutOfView = triggerRect.bottom < scrollRect.top ||
-                    triggerRect.top > scrollRect.bottom ||
-                    triggerRect.right < scrollRect.left ||
-                    triggerRect.left > scrollRect.right;
-                if (isOutOfView) {
-                    // Use Bootstrap's Popover API to properly hide it
-                    const popoverInstance = window.bootstrap?.Popover?.getInstance(triggerElement);
-                    if (popoverInstance) {
-                        popoverInstance.hide();
-                    }
-                }
-            });
-        };
-        const scrollElement = parentRef.current;
-        if (scrollElement) {
-            scrollElement.addEventListener('scroll', handleScroll);
-            return () => scrollElement.removeEventListener('scroll', handleScroll);
-        }
-    }, []);
-    // Helper function to get aria-sort value
-    const getAriaSort = (sortDirection) => {
-        switch (sortDirection) {
-            case 'asc':
-                return 'ascending';
-            case 'desc':
-                return 'descending';
-            default:
-                return 'none';
+        if (hasAutoSized) {
+            columnVirtualizer.measure();
         }
-    };
+    }, [columnVirtualizer, hasAutoSized]);
     const displayedCount = table.getRowModel().rows.length;
     const totalCount = table.getCoreRowModel().rows.length;
-    return (_jsxs("div", { style: { position: 'relative' }, class: "d-flex flex-column h-100", children: [_jsx("div", { ref: parentRef, style: {
+    return (_jsxs("div", { style: { position: 'relative' }, class: "d-flex flex-column h-100", children: [_jsx("div", { ref: scrollContainerRef, style: {
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -202,70 +168,50 @@ export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowH
                 }, children: _jsx("div", { ref: tableRef, style: {
                         position: 'relative',
                         width: `max(${table.getTotalSize()}px, 100%)`,
-                    }, children: _jsxs("table", { class: "table table-hover mb-0", style: { tableLayout: 'fixed' }, "aria-label": title, role: "grid", children: [_jsx("thead", { children: headerGroups.map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header, index) => {
-                                        const isPinned = header.column.getIsPinned();
-                                        const sortDirection = header.column.getIsSorted();
-                                        const canSort = header.column.getCanSort();
-                                        const canFilter = header.column.getCanFilter();
-                                        const columnName = typeof header.column.columnDef.header === 'string'
-                                            ? header.column.columnDef.header
-                                            : header.column.id;
-                                        const style = {
-                                            width: header.column.id === lastColumnId
-                                                ? `max(100%, ${header.getSize()}px)`
-                                                : header.getSize(),
-                                            position: 'sticky',
-                                            top: 0,
-                                            zIndex: isPinned === 'left' ? 2 : 1,
-                                            left: isPinned === 'left' ? header.getStart() : undefined,
-                                            boxShadow: 'inset 0 calc(-1 * var(--bs-border-width)) 0 0 rgba(0, 0, 0, 1), inset 0 var(--bs-border-width) 0 0 var(--bs-border-color)',
-                                        };
-                                        return (_jsxs("th", { class: clsx(isPinned === 'left' && 'bg-light'), style: style, "aria-sort": canSort ? getAriaSort(sortDirection) : undefined, role: "columnheader", children: [_jsxs("div", { class: clsx('d-flex align-items-center', canSort || canFilter
-                                                        ? 'justify-content-between'
-                                                        : 'justify-content-center'), children: [_jsxs("button", { class: clsx('text-nowrap text-start', canSort || canFilter ? 'flex-grow-1' : ''), style: {
-                                                                cursor: canSort ? 'pointer' : 'default',
-                                                                overflow: 'hidden',
-                                                                textOverflow: 'ellipsis',
-                                                                background: 'transparent',
-                                                                border: 'none',
-                                                            }, type: "button", "aria-label": canSort
-                                                                ? `'${columnName}' column, current sort is ${getAriaSort(sortDirection)}`
-                                                                : undefined, onClick: canSort ? header.column.getToggleSortingHandler() : undefined, onKeyDown: canSort
-                                                                ? (e) => {
-                                                                    const handleSort = header.column.getToggleSortingHandler();
-                                                                    if (e.key === 'Enter' && handleSort) {
-                                                                        e.preventDefault();
-                                                                        handleSort(e);
-                                                                    }
-                                                                }
-                                                                : undefined, children: [header.isPlaceholder
-                                                                    ? null
-                                                                    : flexRender(header.column.columnDef.header, header.getContext()), canSort && (_jsxs("span", { class: "visually-hidden", children: [", ", getAriaSort(sortDirection), ", click to sort"] }))] }), (canSort || canFilter) && (_jsxs("div", { class: "d-flex align-items-center", children: [canSort && (_jsx("button", { type: "button", class: "btn btn-link text-muted p-0", "aria-label": `Sort ${columnName.toLowerCase()}`, title: `Sort ${columnName.toLowerCase()}`, onClick: header.column.getToggleSortingHandler(), children: _jsx(SortIcon, { sortMethod: sortDirection || false }) })), canFilter && filters[header.column.id]?.({ header })] }))] }), tableRect?.width &&
-                                                    tableRect.width > table.getTotalSize() &&
-                                                    index === headerGroup.headers.length - 1 ? null : (_jsx(ResizeHandle, { header: header, setColumnSizing: table.setColumnSizing }))] }, header.id));
-                                    }) }, headerGroup.id))) }), _jsxs("tbody", { children: [before > 0 && (_jsx("tr", { tabIndex: -1, children: _jsx("td", { colSpan: headerGroups[0].headers.length, style: { height: before } }) })), virtualRows.map((virtualRow) => {
-                                        const row = rows[virtualRow.index];
-                                        const visibleCells = getVisibleCells(row);
-                                        const rowIdx = virtualRow.index;
-                                        return (_jsx("tr", { style: { height: rowHeight }, children: visibleCells.map((cell, colIdx) => {
+                    }, children: _jsxs("table", { class: "table table-hover mb-0", style: { display: 'grid', tableLayout: 'fixed' }, "aria-label": title, role: "grid", children: [_jsx("thead", { style: {
+                                    display: 'grid',
+                                    position: 'sticky',
+                                    top: 0,
+                                    zIndex: 1,
+                                }, children: _jsxs("tr", { style: { display: 'flex', width: `${table.getTotalSize()}px` }, children: [leftPinnedHeaders.map((header) => {
+                                            return (_jsx(TanstackTableHeaderCell, { header: header, filters: filters, table: table, handleResizeEnd: handleResizeEnd, isPinned: "left" }, header.id));
+                                        }), virtualPaddingLeft ? (_jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, virtualColumns.map((virtualColumn) => {
+                                            const header = centerHeaders[virtualColumn.index];
+                                            if (!header)
+                                                return null;
+                                            return (_jsx(TanstackTableHeaderCell, { header: header, filters: filters, table: table, handleResizeEnd: handleResizeEnd, isPinned: false }, header.id));
+                                        }), virtualPaddingRight ? (_jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] }, leafHeaderGroup.id) }), _jsx("tbody", { style: {
+                                    display: 'grid',
+                                    height: `${rowVirtualizer.getTotalSize()}px`,
+                                    position: 'relative',
+                                }, children: virtualRows.map((virtualRow) => {
+                                    const row = rows[virtualRow.index];
+                                    const rowIdx = virtualRow.index;
+                                    const leftPinnedCells = row.getLeftVisibleCells();
+                                    const centerCells = row.getCenterVisibleCells();
+                                    let currentColIdx = 0;
+                                    return (_jsxs("tr", { ref: (node) => rowVirtualizer.measureElement(node), "data-index": virtualRow.index, style: {
+                                            display: 'flex',
+                                            position: 'absolute',
+                                            transform: `translateY(${virtualRow.start}px)`,
+                                            width: `${table.getTotalSize()}px`,
+                                        }, children: [leftPinnedCells.map((cell) => {
+                                                const colIdx = currentColIdx++;
+                                                const canSort = cell.column.getCanSort();
+                                                const canFilter = cell.column.getCanFilter();
+                                                const wrapText = cell.column.columnDef.meta?.wrapText ?? false;
+                                                return (_jsx(TableCell, { cell: cell, rowIdx: rowIdx, colIdx: colIdx, canSort: canSort, canFilter: canFilter, wrapText: wrapText, handleGridKeyDown: handleGridKeyDown }, cell.id));
+                                            }), virtualPaddingLeft ? (_jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, virtualColumns.map((virtualColumn) => {
+                                                const cell = centerCells[virtualColumn.index];
+                                                if (!cell)
+                                                    return null;
+                                                const colIdx = currentColIdx++;
                                                 const canSort = cell.column.getCanSort();
                                                 const canFilter = cell.column.getCanFilter();
-                                                return (_jsx("td", { 
-                                                    // You can tab to the most-recently focused cell.
-                                                    tabIndex: focusedCell.row === rowIdx && focusedCell.col === colIdx ? 0 : -1, "data-grid-cell-row": rowIdx, "data-grid-cell-col": colIdx, class: clsx(!canSort && !canFilter && 'text-center'), style: {
-                                                        width: cell.column.id === lastColumnId
-                                                            ? `max(100%, ${cell.column.getSize()}px)`
-                                                            : cell.column.getSize(),
-                                                        position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,
-                                                        left: cell.column.getIsPinned() === 'left'
-                                                            ? cell.column.getStart()
-                                                            : undefined,
-                                                        whiteSpace: 'nowrap',
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                    }, onFocus: () => setFocusedCell({ row: rowIdx, col: colIdx }), onKeyDown: (e) => handleGridKeyDown(e, rowIdx, colIdx), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                            }) }, row.id));
-                                    }), after > 0 && (_jsx("tr", { tabIndex: -1, children: _jsx("td", { colSpan: headerGroups[0].headers.length, style: { height: after } }) }))] })] }) }) }), table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (_jsx("div", { children: _jsx("div", { class: "d-flex flex-column justify-content-center align-items-center p-4", style: {
+                                                const wrapText = cell.column.columnDef.meta?.wrapText ?? false;
+                                                return (_jsx(TableCell, { cell: cell, rowIdx: rowIdx, colIdx: colIdx, canSort: canSort, canFilter: canFilter, wrapText: wrapText, handleGridKeyDown: handleGridKeyDown }, cell.id));
+                                            }), virtualPaddingRight ? (_jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] }, row.id));
+                                }) })] }) }) }), table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (_jsx("div", { children: _jsx("div", { class: "d-flex flex-column justify-content-center align-items-center p-4", style: {
                         position: 'absolute',
                         top: 0,
                         left: 0,
@@ -283,8 +229,13 @@ export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowH
  * @param params
  * @param params.table - The table model
  * @param params.title - The title of the card
+ * @param params.className - The class name to apply to the card
+ * @param params.style - The style to apply to the card
+ * @param params.singularLabel - The singular label for a single row in the table, e.g. "student"
+ * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. "students"
  * @param params.headerButtons - The buttons to display in the header
  * @param params.columnManagerButtons - The buttons to display next to the column manager (View button)
+ * @param params.columnManagerTopContent - Optional content to display at the top of the column manager (View) dropdown menu
  * @param params.globalFilter - State management for the global filter
  * @param params.globalFilter.value
  * @param params.globalFilter.setValue
@@ -292,7 +243,7 @@ export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowH
  * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.
  * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.
  */
-export function TanstackTableCard({ table, title, headerButtons, columnManagerButtons, globalFilter, tableOptions, downloadButtonOptions = null, }) {
+export function TanstackTableCard({ table, title, singularLabel, pluralLabel, headerButtons, columnManagerButtons, columnManagerTopContent, globalFilter, tableOptions, downloadButtonOptions, className, ...divProps }) {
     const searchInputRef = useRef(null);
     // Focus the search input when Ctrl+F is pressed
     useEffect(() => {
@@ -309,11 +260,11 @@ export function TanstackTableCard({ table, title, headerButtons, columnManagerBu
     }, []);
     const displayedCount = table.getRowModel().rows.length;
     const totalCount = table.getCoreRowModel().rows.length;
-    return (_jsxs("div", { class: "card d-flex flex-column h-100", children: [_jsx("div", { class: "card-header bg-primary text-white", children: _jsxs("div", { class: "d-flex align-items-center justify-content-between gap-2", children: [_jsx("div", { children: title }), _jsxs("div", { class: "d-flex gap-2", children: [headerButtons, downloadButtonOptions && (_jsx(TanstackTableDownloadButton, { table: table, ...downloadButtonOptions }))] })] }) }), _jsxs("div", { class: "card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2", children: [_jsxs("div", { class: "flex-grow-1 flex-lg-grow-0 col-xl-6 col-lg-7 d-flex flex-row gap-2", children: [_jsxs("div", { class: "position-relative flex-grow-1", children: [_jsx("input", { ref: searchInputRef, type: "text", class: "form-control tanstack-table-search-input tanstack-table-focusable-shadow", "aria-label": globalFilter.placeholder, placeholder: globalFilter.placeholder, value: globalFilter.value, autoComplete: "off", onInput: (e) => {
-                                            if (!(e.target instanceof HTMLInputElement))
-                                                return;
-                                            globalFilter.setValue(e.target.value);
-                                        } }), globalFilter.value && (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Clear search" }), children: _jsx("button", { type: "button", class: "btn btn-link tanstack-table-clear-search", "aria-label": "Clear search", onClick: () => globalFilter.setValue(''), children: _jsx("i", { class: "bi bi-x-circle-fill", "aria-hidden": "true" }) }) }))] }), _jsxs("div", { class: "d-none d-md-block", children: [_jsx(ColumnManager, { table: table, id: "column-manager-button-wide" }), columnManagerButtons] })] }), _jsxs("div", { class: "d-block d-md-none", children: [_jsx(ColumnManager, { table: table, id: "column-manager-button-narrow" }), columnManagerButtons] }), _jsx("div", { class: "flex-lg-grow-1 d-flex flex-row justify-content-end", children: _jsxs("div", { class: "text-muted text-nowrap", children: ["Showing ", displayedCount, " of ", totalCount, " ", title.toLowerCase()] }) })] }), _jsx("div", { class: "flex-grow-1", children: _jsx(TanstackTable, { table: table, title: title, ...tableOptions }) })] }));
+    return (_jsxs("div", { class: clsx('card d-flex flex-column', className), ...divProps, children: [_jsx("div", { class: "card-header bg-primary text-white", children: _jsxs("div", { class: "d-flex align-items-center justify-content-between gap-2", children: [_jsx("div", { children: title }), _jsxs("div", { class: "d-flex gap-2", children: [headerButtons, downloadButtonOptions && (_jsx(TanstackTableDownloadButton, { table: table, pluralLabel: pluralLabel, singularLabel: singularLabel, ...downloadButtonOptions }))] })] }) }), _jsxs("div", { class: "card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2", children: [_jsxs("div", { class: "position-relative w-100", style: { maxWidth: 'min(400px, 100%)' }, children: [_jsx("input", { ref: searchInputRef, type: "text", class: "form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow", "aria-label": globalFilter.placeholder, placeholder: globalFilter.placeholder, value: globalFilter.value, autoComplete: "off", onInput: (e) => {
+                                    if (!(e.target instanceof HTMLInputElement))
+                                        return;
+                                    globalFilter.setValue(e.target.value);
+                                } }), globalFilter.value && (_jsx(OverlayTrigger, { overlay: _jsx(Tooltip, { children: "Clear search" }), children: _jsx("button", { type: "button", class: "btn btn-floating-icon", "aria-label": "Clear search", onClick: () => globalFilter.setValue(''), children: _jsx("i", { class: "bi bi-x-circle-fill", "aria-hidden": "true" }) }) }))] }), _jsxs("div", { class: "d-flex flex-wrap flex-row align-items-center gap-2", children: [_jsx(ColumnManager, { table: table, topContent: columnManagerTopContent }), columnManagerButtons] }), _jsxs("div", { class: "ms-auto text-muted text-nowrap", children: ["Showing ", displayedCount, " of ", totalCount, " ", totalCount === 1 ? singularLabel : pluralLabel] })] }), _jsx("div", { class: "flex-grow-1", children: _jsx(TanstackTable, { table: table, title: title, ...tableOptions }) })] }));
 }
 export function TanstackTableEmptyState({ iconName, children, }) {
     return (_jsxs("div", { class: "d-flex flex-column justify-content-center align-items-center text-muted", children: [_jsx("i", { class: clsx('bi', iconName, 'display-4 mb-2'), "aria-hidden": "true" }), _jsx("div", { children: children })] }));