@cutting/material-react-table 5.0.0 → 5.1.0

package/dist/index.js

@@ -10,10 +10,10 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";
 import { ArrowDownward, ArrowRight, Cancel, ChevronLeft, ChevronRight, ClearAll, Close, ContentCopy, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandMore, FilterAlt, FilterList, FilterListOff, FirstPage, Fullscreen, FullscreenExit, KeyboardDoubleArrowDown, LastPage, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, SyncAlt, ViewColumn, VisibilityOff } from "@mui/icons-material";
-//#region src/fns/sortingFns.ts
+// src/fns/sortingFns.ts
 const fuzzy$1 = (rowA, rowB, columnId) => {
 	let dir = 0;
-	if (rowA.columnFiltersMeta[columnId]) dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+	if ("columnFiltersMeta" in rowA && "columnFiltersMeta" in rowB && rowA.columnFiltersMeta[columnId]) dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
 	return dir === 0 ? sortFn_alphanumeric(rowA, rowB, columnId) : dir;
 };
 const MRT_SortingFns = {
@@ -25,9 +25,8 @@ const MRT_SortingFns = {
 	text: sortFn_text,
 	textCaseSensitive: sortFn_textCaseSensitive
 };
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) - Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-//#endregion
-//#region src/utils/utils.ts
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((meta) => meta.rank)) - Math.max(...Object.values(rowA.columnFiltersMeta).map((meta) => meta.rank));
+// src/utils/utils.ts
 const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
 const getValueAndLabel = (option) => {
 	let label = "";
@@ -37,8 +36,8 @@ const getValueAndLabel = (option) => {
 			label = option;
 			value = option;
 		} else {
-			label = option.label ?? option.value;
-			value = option.value ?? label;
+			label = option.label ?? String(option.value);
+			value = option.value;
 		}
 	}
 	return {
@@ -46,8 +45,7 @@ const getValueAndLabel = (option) => {
 		value
 	};
 };
-//#endregion
-//#region src/utils/row.utils.ts
+// src/utils/row.utils.ts
 const getMRT_Rows = (table, all) => {
 	const { getCenterRows, getPrePaginatedRowModel, getRowModel, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode } } = table;
 	const { creatingRow, pagination } = table.state;
@@ -83,7 +81,7 @@ const getCanRankRows = (table) => {
 };
 const getIsRankingRows = (table) => {
 	const { globalFilter, sorting } = table.state;
-	return getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean);
+	return Boolean(getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean));
 };
 const getIsRowSelected = ({ row, table }) => {
 	const { options: { enableRowSelection } } = table;
@@ -99,7 +97,7 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table }) => (even
 	});
 	row.toggleSelected(value ?? !wasCurrentRowChecked);
 	const changedRowIds = /* @__PURE__ */ new Set([row.id]);
-	if (enableBatchRowSelection && enableMultiRowSelection && event.nativeEvent.shiftKey && lastSelectedRowId.current !== null) {
+	if (enableBatchRowSelection && enableMultiRowSelection && "shiftKey" in event.nativeEvent && event.nativeEvent.shiftKey && lastSelectedRowId.current !== null) {
 		const rows = getMRT_Rows(table, true);
 		const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
 		if (lastIndex !== -1) {
@@ -123,34 +121,18 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table }) => (even
 };
 const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
 	const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId } } = table;
-	selectAllMode === "all" || forceAll ? table.toggleAllRowsSelected(value ?? event.target.checked) : table.toggleAllPageRowsSelected(value ?? event.target.checked);
+	const checked = value ?? event.target.checked;
+	if (selectAllMode === "all" || forceAll) table.toggleAllRowsSelected(checked);
+	else table.toggleAllPageRowsSelected(checked);
 	if (enableRowPinning && rowPinningDisplayMode?.includes("select")) table.setRowPinning({
 		bottom: [],
 		top: []
 	});
 	lastSelectedRowId.current = null;
 };
-//#endregion
-//#region src/hooks/useMRT_Rows.ts
-const useMRT_Rows = (table) => {
-	const { getRowModel, options: { data, enableGlobalFilterRankedResults, positionCreatingRow } } = table;
-	const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting } = table.state;
-	return useMemo(() => getMRT_Rows(table), [
-		creatingRow,
-		data,
-		enableGlobalFilterRankedResults,
-		expanded,
-		getRowModel().rows,
-		globalFilter,
-		pagination.pageIndex,
-		pagination.pageSize,
-		positionCreatingRow,
-		rowPinning,
-		sorting
-	]);
-};
-//#endregion
-//#region src/utils/virtualization.utils.ts
+// src/hooks/useMRT_Rows.ts
+const useMRT_Rows = (table) => getMRT_Rows(table);
+// src/utils/virtualization.utils.ts
 /**
 * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
 * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
@@ -163,13 +145,11 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
 	if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) newIndexes.push(draggingIndex);
 	return newIndexes;
 };
-//#endregion
-//#region src/hooks/useMRT_RowVirtualizer.ts
+// src/hooks/useMRT_RowVirtualizer.ts
 const useMRT_RowVirtualizer = (table, rows) => {
 	const { getRowModel, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions }, refs: { tableContainerRef } } = table;
 	const { density, draggingRow, expanded } = table.state;
-	if (!enableRowVirtualization) return void 0;
-	const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, { table });
+	const rowVirtualizerProps = enableRowVirtualization ? parseFromValuesOrFunc(rowVirtualizerOptions, { table }) : void 0;
 	const realRows = rows ?? getRowModel().rows;
 	/**
 	* when filtering, should find the correct index in filtered rows
@@ -179,6 +159,7 @@ const useMRT_RowVirtualizer = (table, rows) => {
 	const normalRowHeight = density === "compact" ? 37 : density === "comfortable" ? 58 : 73;
 	const rowVirtualizer = useVirtualizer({
 		count: renderDetailPanel ? rowCount * 2 : rowCount,
+		enabled: !!enableRowVirtualization,
 		estimateSize: (index) => renderDetailPanel && index % 2 === 1 ? expanded === true ? 100 : 0 : normalRowHeight,
 		getScrollElement: () => tableContainerRef.current,
 		measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
@@ -188,12 +169,12 @@ const useMRT_RowVirtualizer = (table, rows) => {
 		}, [draggingRowIndex]),
 		...rowVirtualizerProps
 	});
+	if (!enableRowVirtualization) return;
 	rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
 	if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = rowVirtualizer;
 	return rowVirtualizer;
 };
-//#endregion
-//#region src/utils/style.utils.ts
+// src/utils/style.utils.ts
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
 const getMRTTheme = (mrtTheme, muiTheme) => {
 	const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
@@ -286,8 +267,7 @@ const getCommonTooltipProps = (placement) => ({
 	enterNextDelay: 1e3,
 	placement
 });
-//#endregion
-//#region src/utils/cell.utils.ts
+// src/utils/cell.utils.ts
 const isWinCtrlMacMeta = (event) => {
 	return event.ctrlKey && navigator.platform.toLowerCase().includes("win") || event.metaKey && navigator.platform.toLowerCase().includes("mac");
 };
@@ -323,7 +303,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
 			event.preventDefault();
 			getMRT_RowSelectionHandler({
 				row: cell.row,
-				staticRowIndex: +event.target.getAttribute("data-index"),
+				staticRowIndex: Number(event.target.getAttribute("data-index")),
 				table
 			})(event);
 		} else if (header?.column?.id === "mrt-row-select" && table.options.enableSelectAll) {
@@ -340,7 +320,8 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
 			table.toggleAllRowsExpanded();
 		} else if (cell?.column.id === "mrt-row-pin") {
 			event.preventDefault();
-			cell.row.getIsPinned() ? cell.row.pin(false) : cell.row.pin(table.options.rowPinningDisplayMode?.includes("bottom") ? "bottom" : "top");
+			if (cell.row.getIsPinned()) cell.row.pin(false);
+			else cell.row.pin(table.options.rowPinningDisplayMode?.includes("bottom") ? "bottom" : "top");
 		} else if (header && isWinCtrlMacMeta(event)) {
 			const actionsButton = currentCell.querySelector(`button[aria-label="${table.options.localization.columnActions}"]`);
 			if (actionsButton) actionsButton.click();
@@ -404,8 +385,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
 		if (nextCell) nextCell.focus();
 	}
 };
-//#endregion
-//#region src/components/buttons/MRT_CopyButton.tsx
+// src/components/buttons/MRT_CopyButton.tsx
 const MRT_CopyButton = ({ cell, table, ...rest }) => {
 	const { options: { localization, muiCopyButtonProps } } = table;
 	const { column, row } = cell;
@@ -460,8 +440,7 @@ const MRT_CopyButton = ({ cell, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/utils/slotProps.utils.ts
+// src/utils/slotProps.utils.ts
 const getTextFieldSlotProps = (slotProps) => ({
 	formHelperText: slotProps?.formHelperText,
 	htmlInput: slotProps?.htmlInput,
@@ -469,8 +448,7 @@ const getTextFieldSlotProps = (slotProps) => ({
 	inputLabel: slotProps?.inputLabel,
 	select: slotProps?.select
 });
-//#endregion
-//#region src/components/inputs/MRT_EditCellTextField.tsx
+// src/components/inputs/MRT_EditCellTextField.tsx
 const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
 	const { options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow } = table;
 	const { column, row } = cell;
@@ -589,8 +567,7 @@ const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/utils/highlight.utils.ts
+// src/utils/highlight.utils.ts
 const escapeRegExp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
 const termsToRegExpString = (terms) => terms.replace(/\s{2,}/g, " ").split(" ").join("|");
 const buildRegExp = (terms, matchExactly) => {
@@ -616,8 +593,7 @@ const highlightWords = ({ matchExactly = false, query, text }) => {
 		text: str
 	}));
 };
-//#endregion
-//#region src/components/body/MRT_TableBodyCellValue.tsx
+// src/components/body/MRT_TableBodyCellValue.tsx
 const allowedTypes = ["string", "number"];
 const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
 	const { options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor } } } = table;
@@ -676,8 +652,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
 	});
 	return renderedCellValue;
 };
-//#endregion
-//#region src/components/body/MRT_TableBodyCell.tsx
+// src/components/body/MRT_TableBodyCell.tsx
 const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
 	const theme = useTheme();
 	const { options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps }, setHoveredColumn } = table;
@@ -707,7 +682,13 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
 		if (!isLoading && !showSkeletons || skeletonWidth !== 100) return;
 		const size = column.getSize();
 		setSkeletonWidth(columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3));
-	}, [isLoading, showSkeletons]);
+	}, [
+		column,
+		columnDefType,
+		isLoading,
+		showSkeletons,
+		skeletonWidth
+	]);
 	const draggingBorders = useMemo(() => {
 		const isDraggingColumn = draggingColumn?.id === column.id;
 		const isHoveredColumn = hoveredColumn?.id === column.id;
@@ -727,12 +708,19 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
 			borderTop: isDraggingRow || isHoveredRow ? borderStyle : void 0
 		} : void 0;
 	}, [
+		column,
+		columnResizeDirection,
+		columnResizeMode,
 		columnResizing.isResizingColumn,
+		draggingBorderColor,
 		draggingColumn,
 		draggingRow,
 		hoveredColumn,
 		hoveredRow,
-		staticRowIndex
+		numRows,
+		row.id,
+		staticRowIndex,
+		theme.palette.grey
 	]);
 	const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
 	const isEditable = isCellEditable({
@@ -741,7 +729,8 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
 	});
 	const isEditing = isEditable && !["custom", "modal"].includes(editDisplayMode) && (editDisplayMode === "table" || editingRow?.id === row.id || editingCell?.id === cell.id) && !row.getIsGrouped();
 	const isCreating = isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
-	const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true || parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) && !["context-menu", false].includes(parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
+	const columnClickToCopy = parseFromValuesOrFunc(columnDef.enableClickToCopy, cell);
+	const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true || columnClickToCopy === true) && columnClickToCopy !== "context-menu" && columnClickToCopy !== false;
 	const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
 	const cellValueProps = {
 		cell,
@@ -851,8 +840,7 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
 	});
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
-//#endregion
-//#region src/components/body/MRT_TableDetailPanel.tsx
+// src/components/body/MRT_TableDetailPanel.tsx
 const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
 	const { getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel } } = table;
 	const { isLoading } = table.state;
@@ -910,12 +898,11 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
 		})
 	});
 };
-//#endregion
-//#region src/components/body/MRT_TableBodyRow.tsx
+// src/components/body/MRT_TableBodyRow.tsx
 const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
 	const theme = useTheme();
 	const { options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow } = table;
-	const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning } = table.state;
+	const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen } = table.state;
 	const visibleCells = row.getVisibleCells();
 	const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 	const isRowSelected = getIsRowSelected({
@@ -933,15 +920,16 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
 		}),
 		...rest
 	};
-	const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+	const getPinnedIndexes = () => {
 		if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned()) return [];
 		return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
-	}, [pinnedRowIds, rowPinning]);
+	};
+	const [bottomPinnedIndex, topPinnedIndex] = getPinnedIndexes();
 	const tableHeadHeight = (enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight || 0;
 	const tableFooterHeight = enableStickyFooter && tableFooterRef.current?.clientHeight || 0;
 	const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
 	const defaultRowHeight = density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
-	const rowHeight = parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || defaultRowHeight;
+	const rowHeight = parseInt(String(tableRowProps?.style?.height ?? sx?.height), 10) || defaultRowHeight;
 	const handleDragEnter = (_e) => {
 		if (enableRowOrdering && draggingRow) setHoveredRow(row);
 	};
@@ -1031,8 +1019,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
 	})] });
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
-//#endregion
-//#region src/components/body/MRT_TableBody.tsx
+// src/components/body/MRT_TableBody.tsx
 const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
 	const { getBottomRows, getIsSomeRowsPinned, getRowModel, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode }, refs: { tableFooterRef, tableHeadRef, tablePaperRef } } = table;
 	const { columnFilters, globalFilter, isFullScreen, rowPinning } = table.state;
@@ -1042,10 +1029,11 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
 	};
 	const tableHeadHeight = (enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight || 0;
 	const tableFooterHeight = enableStickyFooter && tableFooterRef.current?.clientHeight || 0;
+	const rowModelRows = getRowModel().rows;
 	const pinnedRowIds = useMemo(() => {
 		if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
-		return getRowModel().rows.filter((row) => row.getIsPinned()).map((r) => r.id);
-	}, [rowPinning, getRowModel().rows]);
+		return rowModelRows.filter((row) => row.getIsPinned()).map((r) => r.id);
+	}, [rowPinning, rowModelRows]);
 	const rows = useMRT_Rows(table);
 	const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
 	const { virtualRows } = rowVirtualizer ?? {};
@@ -1141,8 +1129,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
 	] });
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
-//#endregion
-//#region src/components/buttons/MRT_GrabHandleButton.tsx
+// src/components/buttons/MRT_GrabHandleButton.tsx
 const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
 	const { options: { icons: { DragHandleIcon }, localization } } = table;
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -1176,8 +1163,7 @@ const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/body/MRT_TableBodyRowGrabHandle.tsx
+// src/components/body/MRT_TableBodyRowGrabHandle.tsx
 const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
 	const { options: { muiRowDragHandleProps } } = table;
 	const iconButtonProps = {
@@ -1209,8 +1195,7 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
 		table
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_RowPinButton.tsx
+// src/components/buttons/MRT_RowPinButton.tsx
 const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
 	const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode } } = table;
 	const isPinned = row.getIsPinned();
@@ -1245,8 +1230,7 @@ const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/body/MRT_TableBodyRowPinButton.tsx
+// src/components/body/MRT_TableBodyRowPinButton.tsx
 const MRT_TableBodyRowPinButton = ({ row, table, ...rest }) => {
 	const { options: { enableRowPinning, rowPinningDisplayMode } } = table;
 	const { density } = table.state;
@@ -1274,8 +1258,7 @@ const MRT_TableBodyRowPinButton = ({ row, table, ...rest }) => {
 		...rowPinButtonProps
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ColumnPinningButtons.tsx
+// src/components/buttons/MRT_ColumnPinningButtons.tsx
 const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
 	const { options: { icons: { PushPinIcon }, localization } } = table;
 	const handlePinColumn = (pinDirection) => {
@@ -1312,8 +1295,7 @@ const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
 		})] })
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_EditActionButtons.tsx
+// src/components/buttons/MRT_EditActionButtons.tsx
 const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
 	const { options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave }, refs: { editInputRefs }, setCreatingRow, setEditingRow } = table;
 	const { creatingRow, editingRow, isSaving } = table.state;
@@ -1349,7 +1331,7 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
 			exitEditingMode: () => setEditingRow(null),
 			row,
 			table,
-			values: row?._valuesCache
+			values: row._valuesCache
 		});
 	};
 	return /* @__PURE__ */ jsx(Box, {
@@ -1391,8 +1373,7 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
 		})] })
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ExpandAllButton.tsx
+// src/components/buttons/MRT_ExpandAllButton.tsx
 const MRT_ExpandAllButton = ({ table, ...rest }) => {
 	const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel }, toggleAllRowsExpanded } = table;
 	const { density, isLoading } = table.state;
@@ -1423,8 +1404,7 @@ const MRT_ExpandAllButton = ({ table, ...rest }) => {
 		}) })
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ExpandButton.tsx
+// src/components/buttons/MRT_ExpandButton.tsx
 const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
 	const theme = useTheme();
 	const { options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel } } = table;
@@ -1469,8 +1449,7 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
 		}) })
 	});
 };
-//#endregion
-//#region src/utils/column.utils.ts
+// src/utils/column.utils.ts
 const getSubColumnDefs = (columnDef) => "columns" in columnDef ? columnDef.columns : void 0;
 const getColumnId = (columnDef) => columnDef.id ?? ("accessorKey" in columnDef ? columnDef.accessorKey?.toString?.() : void 0) ?? columnDef.header;
 const getAllLeafColumnDefs = (columns) => {
@@ -1520,6 +1499,14 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
 	newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
 	return newColumnOrder;
 };
+const moveColumn = (table, draggedColumn, targetColumn) => {
+	const reorderedColumns = reorderColumn(draggedColumn, targetColumn, table.state.columnOrder);
+	table.setColumnOrder(reorderedColumns);
+	table.setColumnPinning(({ end = [], start = [] }) => ({
+		end: reorderedColumns.filter((header) => end.includes(header)),
+		start: reorderedColumns.filter((header) => start.includes(header))
+	}));
+};
 const getDefaultColumnFilterFn = (columnDef) => {
 	const { filterVariant } = columnDef;
 	if (filterVariant === "multi-select") return "arrIncludesSome";
@@ -1527,6 +1514,7 @@ const getDefaultColumnFilterFn = (columnDef) => {
 	if (filterVariant === "select" || filterVariant === "checkbox") return "equals";
 	return "fuzzy";
 };
+const getFilterOptionLabel = (localization, filterOption) => localization[`filter${filterOption.charAt(0).toUpperCase() + filterOption.slice(1)}`];
 const getColumnFilterInfo = ({ header, table }) => {
 	const { options: { columnFilterModeOptions } } = table;
 	const { column } = header;
@@ -1565,12 +1553,12 @@ const useDropdownOptions = ({ header, table }) => {
 	return useMemo(() => columnDef.filterSelectOptions ?? ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) && facetedUniqueValues ? Array.from(facetedUniqueValues.keys()).filter((value) => value !== null && value !== void 0).sort((a, b) => a.localeCompare(b)) : void 0), [
 		columnDef.filterSelectOptions,
 		facetedUniqueValues,
+		isAutocompleteFilter,
 		isMultiSelectFilter,
 		isSelectFilter
 	]);
 };
-//#endregion
-//#region src/utils/displayColumn.utils.ts
+// src/utils/displayColumn.utils.ts
 function defaultDisplayColumnProps({ header, id, size, tableOptions }) {
 	const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
 	return {
@@ -1626,11 +1614,9 @@ const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
 		...trailingDisplayColIds
 	];
 };
-//#endregion
-//#region src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
+// src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table, ...rest }) => {
-	const { options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor } }, setColumnOrder, setColumnPinning } = table;
-	const { columnOrder } = table.state;
+	const { options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor } } } = table;
 	const { columnDef } = column;
 	const { columnDefType } = columnDef;
 	const switchChecked = column.getIsVisible();
@@ -1653,14 +1639,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
 	const handleDragEnd = (_e) => {
 		setIsDragging(false);
 		setHoveredColumn(null);
-		if (hoveredColumn) {
-			const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
-			setColumnOrder(reorderedColumns);
-			setColumnPinning(({ end = [], start = [] }) => ({
-				end: reorderedColumns.filter((header) => end.includes(header)),
-				start: reorderedColumns.filter((header) => start.includes(header))
-			}));
-		}
+		if (hoveredColumn) moveColumn(table, column, hoveredColumn);
 	};
 	const handleDragEnter = (_e) => {
 		if (!isDragging && columnDef.enableColumnOrdering !== false) setHoveredColumn(column);
@@ -1727,11 +1706,10 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
 		table
 	}, `${i}-${c.id}`))] });
 };
-//#endregion
-//#region src/components/menus/MRT_ShowHideColumnsMenu.tsx
+// src/components/menus/MRT_ShowHideColumnsMenu.tsx
 const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
 	const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, initialState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor } } } = table;
-	const { columnOrder, columnPinning, density } = table.state;
+	const { columnOrder, density } = table.state;
 	const handleToggleAllColumns = (value) => {
 		const updates = getAllLeafColumns().filter((column) => column.columnDef.enableHiding !== false).reduce((acc, column) => {
 			acc[column.id] = value ?? !column.getIsVisible();
@@ -1742,21 +1720,24 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
 			...updates
 		}));
 	};
+	const allTableColumns = getAllColumns();
+	const centerLeafColumns = getCenterLeafColumns();
+	const leftLeafColumns = getLeftLeafColumns();
+	const rightLeafColumns = getRightLeafColumns();
 	const allColumns = useMemo(() => {
-		const columns = getAllColumns();
+		const columns = allTableColumns;
 		if (columnOrder.length > 0 && !columns.some((col) => col.columnDef.columnDefType === "group")) return [
-			...getLeftLeafColumns(),
-			...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => col?.id === colId)),
-			...getRightLeafColumns()
+			...leftLeafColumns,
+			...Array.from(new Set(columnOrder)).map((colId) => centerLeafColumns.find((col) => col?.id === colId)),
+			...rightLeafColumns
 		].filter(Boolean);
 		return columns;
 	}, [
+		allTableColumns,
+		centerLeafColumns,
 		columnOrder,
-		columnPinning,
-		getAllColumns(),
-		getCenterLeafColumns(),
-		getLeftLeafColumns(),
-		getRightLeafColumns()
+		leftLeafColumns,
+		rightLeafColumns
 	]);
 	const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === "group");
 	const hasColumnOrderChanged = useMemo(() => columnOrder.length !== initialState.columnOrder.length || !columnOrder.every((column, index) => column === initialState.columnOrder[index]), [columnOrder, initialState.columnOrder]);
@@ -1814,8 +1795,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ShowHideColumnsButton.tsx
+// src/components/buttons/MRT_ShowHideColumnsButton.tsx
 const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
 	const { options: { icons: { ViewColumnIcon }, localization } } = table;
 	const [anchorEl, setAnchorEl] = useState(null);
@@ -1837,8 +1817,7 @@ const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
 		table
 	})] });
 };
-//#endregion
-//#region src/components/buttons/MRT_ToggleDensePaddingButton.tsx
+// src/components/buttons/MRT_ToggleDensePaddingButton.tsx
 const MRT_ToggleDensePaddingButton = ({ table, ...rest }) => {
 	const { options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization }, setDensity } = table;
 	const { density } = table.state;
@@ -1856,8 +1835,7 @@ const MRT_ToggleDensePaddingButton = ({ table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ToggleFiltersButton.tsx
+// src/components/buttons/MRT_ToggleFiltersButton.tsx
 const MRT_ToggleFiltersButton = ({ table, ...rest }) => {
 	const { options: { icons: { FilterListIcon, FilterListOffIcon }, localization }, setShowColumnFilters } = table;
 	const { showColumnFilters } = table.state;
@@ -1875,8 +1853,7 @@ const MRT_ToggleFiltersButton = ({ table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ToggleFullScreenButton.tsx
+// src/components/buttons/MRT_ToggleFullScreenButton.tsx
 const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
 	const { options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization }, setIsFullScreen } = table;
 	const { isFullScreen } = table.state;
@@ -1901,8 +1878,7 @@ const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ToggleGlobalFilterButton.tsx
+// src/components/buttons/MRT_ToggleGlobalFilterButton.tsx
 const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
 	const { options: { icons: { SearchIcon, SearchOffIcon }, localization }, refs: { searchInputRef }, setShowGlobalFilter } = table;
 	const { globalFilter, showGlobalFilter } = table.state;
@@ -1922,8 +1898,7 @@ const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
 		}) })
 	});
 };
-//#endregion
-//#region src/components/menus/MRT_ActionMenuItem.tsx
+// src/components/menus/MRT_ActionMenuItem.tsx
 const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
 	const { options: { icons: { ArrowRightIcon } } } = table;
 	return /* @__PURE__ */ jsxs(MenuItem, {
@@ -1951,8 +1926,7 @@ const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
 		})]
 	});
 };
-//#endregion
-//#region src/components/menus/MRT_RowActionMenu.tsx
+// src/components/menus/MRT_RowActionMenu.tsx
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table, ...rest }) => {
 	const { options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems } } = table;
 	const { density } = table.state;
@@ -1974,8 +1948,14 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIn
 		if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);
 		return items;
 	}, [
+		EditIcon,
+		editDisplayMode,
+		enableEditing,
+		handleEdit,
+		localization.edit,
 		renderRowActionMenuItems,
 		row,
+		setAnchorEl,
 		staticRowIndex,
 		table
 	]);
@@ -1994,8 +1974,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIn
 		children: menuItems
 	});
 };
-//#endregion
-//#region src/components/buttons/MRT_ToggleRowActionMenuButton.tsx
+// src/components/buttons/MRT_ToggleRowActionMenuButton.tsx
 const commonIconButtonStyles = {
 	"&:hover": { opacity: 1 },
 	height: "2rem",
@@ -2041,6 +2020,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
 		})
 	}) : renderRowActionMenuItems?.({
 		row,
+		closeMenu: () => {},
 		staticRowIndex,
 		table
 	})?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
@@ -2063,8 +2043,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
 		table
 	})] }) : null });
 };
-//#endregion
-//#region src/components/footer/MRT_TableFooterCell.tsx
+// src/components/footer/MRT_TableFooterCell.tsx
 const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
 	const theme = useTheme();
 	const { options: { enableColumnPinning, enableKeyboardShortcuts, muiTableFooterCellProps } } = table;
@@ -2119,8 +2098,7 @@ const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
 		}) ?? columnDef.footer ?? null)
 	});
 };
-//#endregion
-//#region src/components/footer/MRT_TableFooterRow.tsx
+// src/components/footer/MRT_TableFooterRow.tsx
 const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest }) => {
 	const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps } } = table;
 	const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
@@ -2165,8 +2143,7 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
 		]
 	});
 };
-//#endregion
-//#region src/components/footer/MRT_TableFooter.tsx
+// src/components/footer/MRT_TableFooter.tsx
 const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
 	const { options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef } } = table;
 	const { isFullScreen } = table.state;
@@ -2181,7 +2158,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
 		...tableFooterProps,
 		ref: (ref) => {
 			tableFooterRef.current = ref;
-			if (tableFooterProps?.ref) tableFooterProps.ref.current = ref;
+			if (tableFooterProps?.ref && typeof tableFooterProps.ref === "object") tableFooterProps.ref.current = ref;
 		},
 		sx: (theme) => ({
 			bottom: stickFooter ? 0 : void 0,
@@ -2199,8 +2176,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
 		}, footerGroup.id))
 	});
 };
-//#endregion
-//#region src/components/inputs/MRT_SelectCheckbox.tsx
+// src/components/inputs/MRT_SelectCheckbox.tsx
 const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
 	const { options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode } } = table;
 	const { density, isLoading } = table.state;
@@ -2230,7 +2206,8 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
 		disabled: isLoading || row && !row.getCanSelect() || row?.id === "mrt-row-create",
 		onChange: (event) => {
 			event.stopPropagation();
-			selectAll ? onSelectAllChange(event) : onSelectionChange(event);
+			if (selectAll) onSelectAllChange(event);
+			else onSelectionChange(event);
 		},
 		size: density === "compact" ? "small" : "medium",
 		slotProps: { input: { "aria-label": selectAll ? localization.toggleSelectAll : localization.toggleSelectRow } },
@@ -2257,8 +2234,7 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_ToolbarAlertBanner.tsx
+// src/components/toolbar/MRT_ToolbarAlertBanner.tsx
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
 	const { getCoreRowModel, getFilteredSelectedRowModel, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount }, refs: { tablePaperRef } } = table;
 	const { density, grouping, rowSelection, showAlertBanner } = table.state;
@@ -2271,7 +2247,6 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
 	const filteredRowCount = getFilteredSelectedRowModel().rows.length;
 	const selectedRowCount = useMemo(() => manualPagination ? Object.values(rowSelection).filter(Boolean).length : filteredRowCount, [
 		rowSelection,
-		totalRowCount,
 		manualPagination,
 		filteredRowCount
 	]);
@@ -2345,8 +2320,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/menus/MRT_FilterOptionMenu.tsx
+// src/components/menus/MRT_FilterOptionMenu.tsx
 const mrtFilterOptions = (localization) => [
 	{
 		divider: false,
@@ -2458,11 +2432,11 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
 	const currentFilterValue = column?.getFilterValue();
 	let allowedColumnFilterOptions = columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 	if (rangeVariants.includes(columnDef?.filterVariant)) allowedColumnFilterOptions = [...rangeModes, ...allowedColumnFilterOptions ?? []].filter((option) => rangeModes.includes(option));
-	const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef ? allowedColumnFilterOptions === void 0 || allowedColumnFilterOptions?.includes(filterOption.option) : (!globalFilterModeOptions || globalFilterModeOptions.includes(filterOption.option)) && [
+	const [internalFilterOptions] = useState(() => mrtFilterOptions(localization).filter((filterOption) => columnDef ? allowedColumnFilterOptions === void 0 || allowedColumnFilterOptions?.includes(filterOption.option) : (!globalFilterModeOptions || globalFilterModeOptions.includes(filterOption.option)) && [
 		"contains",
 		"fuzzy",
 		"startsWith"
-	].includes(filterOption.option)), []);
+	].includes(filterOption.option)));
 	const handleSelectFilterMode = (option) => {
 		const prevFilterMode = columnDef?._filterFn ?? "";
 		if (!header || !column) setGlobalFilterFn(option);
@@ -2533,8 +2507,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
 		}, index))
 	});
 };
-//#endregion
-//#region src/components/menus/MRT_ColumnActionMenu.tsx
+// src/components/menus/MRT_ColumnActionMenu.tsx
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest }) => {
 	const { getAllLeafColumns, options: { columnFilterDisplayMode, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnResizing, setShowColumnFilters } = table;
 	const { column } = header;
@@ -2727,8 +2700,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
 		}) ?? internalColumnMenuItems
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellColumnActionsButton.tsx
+// src/components/head/MRT_TableHeadCellColumnActionsButton.tsx
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
 	const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps } } = table;
 	const { column } = header;
@@ -2777,8 +2749,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
 		table
 	})] });
 };
-//#endregion
-//#region src/components/inputs/MRT_FilterCheckbox.tsx
+// src/components/inputs/MRT_FilterCheckbox.tsx
 const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
 	const { options: { localization, muiFilterCheckboxProps } } = table;
 	const { density } = table.state;
@@ -2830,8 +2801,7 @@ const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/inputs/MRT_FilterTextField.tsx
+// src/components/inputs/MRT_FilterTextField.tsx
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 	const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps }, refs: { filterInputRefs }, setColumnFilterFns } = table;
 	const { column } = header;
@@ -2871,20 +2841,20 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 		header,
 		table
 	});
-	const filterChipLabel = ["empty", "notEmpty"].includes(currentFilterOption) ? localization[`filter${currentFilterOption?.charAt?.(0)?.toUpperCase() + currentFilterOption?.slice(1)}`] : "";
+	const filterChipLabel = ["empty", "notEmpty"].includes(currentFilterOption) ? getFilterOptionLabel(localization, currentFilterOption) : "";
 	const filterPlaceholder = !isRangeFilter ? textFieldProps?.placeholder ?? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : "";
 	const showChangeModeButton = !!(enableColumnFilterModes && columnDef.enableColumnFilterModes !== false && !rangeFilterIndex && (allowedColumnFilterOptions === void 0 || !!allowedColumnFilterOptions?.length));
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [filterValue, setFilterValue] = useState(() => isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? column.getFilterValue()?.[rangeFilterIndex] || "" : isAutocompleteFilter ? typeof column.getFilterValue() === "string" ? column.getFilterValue() : "" : column.getFilterValue() ?? "");
 	const [autocompleteValue, setAutocompleteValue] = useState(() => isAutocompleteFilter ? column.getFilterValue() || null : null);
-	const handleChangeDebounced = useCallback(debounce((newValue) => {
+	const [handleChangeDebounced] = useState(() => debounce((newValue) => {
 		if (isRangeFilter) column.setFilterValue((old) => {
 			const newFilterValues = old ?? ["", ""];
 			newFilterValues[rangeFilterIndex] = newValue ?? void 0;
 			return newFilterValues;
 		});
 		else column.setFilterValue(newValue ?? void 0);
-	}, isTextboxFilter ? manualFiltering ? 400 : 200 : 1), []);
+	}, isTextboxFilter ? manualFiltering ? 400 : 200 : 1));
 	const handleChange = (newValue) => {
 		setFilterValue(newValue ?? "");
 		handleChangeDebounced(newValue);
@@ -2932,15 +2902,24 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 		setAnchorEl(event.currentTarget);
 	};
 	const isMounted = useRef(false);
+	const handleClearRef = useRef(handleClear);
+	const columnFilterValue = column.getFilterValue();
+	useEffect(() => {
+		handleClearRef.current = handleClear;
+	});
 	useEffect(() => {
 		if (isMounted.current) {
-			const filterValue = column.getFilterValue();
-			if (filterValue === void 0) handleClear();
+			const filterValue = columnFilterValue;
+			if (filterValue === void 0) handleClearRef.current();
 			else if (isRangeFilter && rangeFilterIndex !== void 0) setFilterValue(filterValue[rangeFilterIndex]);
 			else setFilterValue(filterValue);
 		}
 		isMounted.current = true;
-	}, [column.getFilterValue()]);
+	}, [
+		columnFilterValue,
+		isRangeFilter,
+		rangeFilterIndex
+	]);
 	if (columnDef.Filter) return /* @__PURE__ */ jsx(Fragment$1, { children: columnDef.Filter?.({
 		column,
 		header,
@@ -2951,7 +2930,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 		position: "end",
 		sx: {
 			mr: isSelectFilter || isMultiSelectFilter ? "20px" : void 0,
-			visibility: (filterValue?.length ?? 0) > 0 ? "visible" : "hidden"
+			visibility: (typeof filterValue === "string" || Array.isArray(filterValue)) && filterValue.length > 0 ? "visible" : "hidden"
 		},
 		children: /* @__PURE__ */ jsx(Tooltip, {
 			placement: "right",
@@ -2991,7 +2970,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 	}) : null;
 	const commonTextFieldProps = {
 		fullWidth: true,
-		helperText: showChangeModeButton ? /* @__PURE__ */ jsx("label", { children: localization.filterMode.replace("{filterType}", localization[`filter${currentFilterOption?.charAt(0)?.toUpperCase() + currentFilterOption?.slice(1)}`]) }) : null,
+		helperText: showChangeModeButton ? /* @__PURE__ */ jsx("label", { children: localization.filterMode.replace("{filterType}", getFilterOptionLabel(localization, currentFilterOption)) }) : null,
 		inputRef: (inputRef) => {
 			filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = inputRef;
 			if (textFieldProps.inputRef) textFieldProps.inputRef = inputRef;
@@ -3197,8 +3176,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
 		table
 	})] });
 };
-//#endregion
-//#region src/components/inputs/MRT_FilterRangeFields.tsx
+// src/components/inputs/MRT_FilterRangeFields.tsx
 const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
 	return /* @__PURE__ */ jsx(Box, {
 		...rest,
@@ -3215,8 +3193,7 @@ const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
 		}, rangeFilterIndex))
 	});
 };
-//#endregion
-//#region src/components/inputs/MRT_FilterRangeSlider.tsx
+// src/components/inputs/MRT_FilterRangeSlider.tsx
 const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
 	const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs } } = table;
 	const { column } = header;
@@ -3279,7 +3256,8 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
 		slotProps: { input: { ref: (node) => {
 			if (node) {
 				filterInputRefs.current[`${column.id}-0`] = node;
-				if (sliderProps?.slotProps?.input?.ref) sliderProps.slotProps.input.ref = node;
+				const inputSlot = sliderProps?.slotProps?.input;
+				if (inputSlot && typeof inputSlot === "object" && inputSlot.ref && typeof inputSlot.ref === "object") inputSlot.ref.current = node;
 			}
 		} } },
 		sx: (theme) => ({
@@ -3297,11 +3275,10 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
 			m: "-3px -6px",
 			whiteSpace: "nowrap"
 		},
-		children: localization.filterMode.replace("{filterType}", localization[`filter${currentFilterOption?.charAt(0)?.toUpperCase() + currentFilterOption?.slice(1)}`])
+		children: localization.filterMode.replace("{filterType}", getFilterOptionLabel(localization, currentFilterOption))
 	}) : null] });
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellFilterContainer.tsx
+// src/components/head/MRT_TableHeadCellFilterContainer.tsx
 const MRT_TableHeadCellFilterContainer = ({ header, table, ...rest }) => {
 	const { options: { columnFilterDisplayMode } } = table;
 	const { showColumnFilters } = table.state;
@@ -3331,8 +3308,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellFilterLabel.tsx
+// src/components/head/MRT_TableHeadCellFilterLabel.tsx
 const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
 	const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization }, refs: { filterInputRefs }, setShowColumnFilters } = table;
 	const { column } = header;
@@ -3349,7 +3325,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
 	});
 	const getSelectLabel = (index) => getValueAndLabel(dropdownOptions?.find((option) => getValueAndLabel(option).value === (index !== void 0 ? filterValue[index] : filterValue))).label;
 	const isFilterActive = Array.isArray(filterValue) && filterValue.some(Boolean) || !!filterValue && !Array.isArray(filterValue);
-	const filterTooltip = columnFilterDisplayMode === "popover" && !isFilterActive ? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : localization.filteringByColumn.replace("{column}", String(columnDef.header)).replace("{filterType}", currentFilterOption ? localization[`filter${currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1)}`] : "").replace("{filterValue}", `"${Array.isArray(filterValue) ? filterValue.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value).join(`" ${isRangeFilter ? localization.and : localization.or} "`) : isSelectFilter ? getSelectLabel() : filterValue}"`).replace("\" \"", "");
+	const filterTooltip = columnFilterDisplayMode === "popover" && !isFilterActive ? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : localization.filteringByColumn.replace("{column}", String(columnDef.header)).replace("{filterType}", currentFilterOption ? getFilterOptionLabel(localization, currentFilterOption) : "").replace("{filterValue}", `"${Array.isArray(filterValue) ? filterValue.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value).join(`" ${isRangeFilter ? localization.and : localization.or} "`) : isSelectFilter ? getSelectLabel() : filterValue}"`).replace("\" \"", "");
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Grow, {
 		in: columnFilterDisplayMode === "popover" || !!filterValue && !isRangeFilter || isRangeFilter && (!!filterValue?.[0] || !!filterValue?.[1]),
 		unmountOnExit: true,
@@ -3395,7 +3371,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
 		disableScrollLock: true,
 		onClick: (event) => event.stopPropagation(),
 		onClose: (event) => {
-			event.stopPropagation();
+			event.stopPropagation?.();
 			setAnchorEl(null);
 		},
 		onKeyDown: (event) => event.key === "Enter" && setAnchorEl(null),
@@ -3414,12 +3390,11 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
 		})
 	})] });
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellGrabHandle.tsx
+// src/components/head/MRT_TableHeadCellGrabHandle.tsx
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest }) => {
-	const { options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setColumnPinning, setDraggingColumn, setHoveredColumn } = table;
+	const { options: { enableColumnOrdering, muiColumnDragHandleProps }, setDraggingColumn, setHoveredColumn } = table;
 	const { columnDef } = column;
-	const { columnOrder, draggingColumn, hoveredColumn } = table.state;
+	const { draggingColumn, hoveredColumn } = table.state;
 	const iconButtonProps = {
 		...parseFromValuesOrFunc(muiColumnDragHandleProps, {
 			column,
@@ -3443,14 +3418,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
 	const handleDragEnd = (event) => {
 		iconButtonProps?.onDragEnd?.(event);
 		if (hoveredColumn?.id === "drop-zone") column.toggleGrouping();
-		else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id) {
-			const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
-			setColumnOrder(reorderedColumns);
-			setColumnPinning(({ end = [], start = [] }) => ({
-				end: reorderedColumns.filter((header) => end.includes(header)),
-				start: reorderedColumns.filter((header) => start.includes(header))
-			}));
-		}
+		else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id) moveColumn(table, column, hoveredColumn);
 		setDraggingColumn(null);
 		setHoveredColumn(null);
 	};
@@ -3461,8 +3429,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
 		table
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellResizeHandle.tsx
+// src/components/head/MRT_TableHeadCellResizeHandle.tsx
 const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
 	const { options: { columnResizeDirection, columnResizeMode }, setColumnResizing } = table;
 	const { density } = table.state;
@@ -3513,8 +3480,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCellSortLabel.tsx
+// src/components/head/MRT_TableHeadCellSortLabel.tsx
 const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
 	const { options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization } } = table;
 	const { column } = header;
@@ -3555,8 +3521,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadCell.tsx
+// src/components/head/MRT_TableHeadCell.tsx
 const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
 	const theme = useTheme();
 	const { options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps }, refs: { tableHeadCellRefs }, setHoveredColumn } = table;
@@ -3584,7 +3549,11 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
 		if (showColumnActions) pl += 1.75;
 		if (showDragHandle) pl += 1.5;
 		return pl;
-	}, [showColumnActions, showDragHandle]);
+	}, [
+		column,
+		showColumnActions,
+		showDragHandle
+	]);
 	const draggingBorders = useMemo(() => {
 		const showResizeBorder = columnResizing.isResizingColumn === column.id && columnResizeMode === "onChange" && !header.subHeaders.length;
 		const borderStyle = showResizeBorder ? `2px solid ${draggingBorderColor} !important` : draggingColumn?.id === column.id ? `1px dashed ${theme.palette.grey[500]}` : hoveredColumn?.id === column.id ? `2px dashed ${draggingBorderColor}` : void 0;
@@ -3595,9 +3564,15 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
 			borderTop: borderStyle
 		} : void 0;
 	}, [
+		column.id,
+		columnResizeDirection,
+		columnResizeMode,
+		columnResizing.isResizingColumn,
+		draggingBorderColor,
 		draggingColumn,
+		header.subHeaders.length,
 		hoveredColumn,
-		columnResizing.isResizingColumn
+		theme.palette.grey
 	]);
 	const handleDragEnter = (_e) => {
 		if (enableGrouping && hoveredColumn?.id === "drop-zone") setHoveredColumn(null);
@@ -3733,8 +3708,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
 		})]
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHeadRow.tsx
+// src/components/head/MRT_TableHeadRow.tsx
 const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) => {
 	const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps } } = table;
 	const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
@@ -3780,8 +3754,7 @@ const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) =>
 		]
 	});
 };
-//#endregion
-//#region src/components/head/MRT_TableHead.tsx
+// src/components/head/MRT_TableHead.tsx
 const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
 	const { options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner }, refs: { tableHeadRef } } = table;
 	const { isFullScreen, showAlertBanner } = table.state;
@@ -3794,7 +3767,7 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
 		...tableHeadProps,
 		ref: (ref) => {
 			tableHeadRef.current = ref;
-			if (tableHeadProps?.ref) tableHeadProps.ref.current = ref;
+			if (tableHeadProps?.ref && typeof tableHeadProps.ref === "object") tableHeadProps.ref.current = ref;
 		},
 		sx: (theme) => ({
 			display: layoutMode?.startsWith("grid") ? "grid" : void 0,
@@ -3821,8 +3794,7 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
 		}, headerGroup.id))
 	});
 };
-//#endregion
-//#region src/components/inputs/MRT_GlobalFilterTextField.tsx
+// src/components/inputs/MRT_GlobalFilterTextField.tsx
 const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
 	const { options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps }, refs: { searchInputRef }, setGlobalFilter } = table;
 	const { globalFilter, showGlobalFilter } = table.state;
@@ -3833,9 +3805,9 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
 	const isMounted = useRef(false);
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [searchValue, setSearchValue] = useState(globalFilter ?? "");
-	const handleChangeDebounced = useCallback(debounce((event) => {
+	const [handleChangeDebounced] = useState(() => debounce((event) => {
 		setGlobalFilter(event.target.value ?? void 0);
-	}, manualFiltering ? 500 : 250), []);
+	}, manualFiltering ? 500 : 250));
 	const handleChange = (event) => {
 		setSearchValue(event.target.value);
 		handleChangeDebounced(event);
@@ -3849,11 +3821,13 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
 	};
 	useEffect(() => {
 		if (isMounted.current) {
-			if (globalFilter === void 0) handleClear();
-			else setSearchValue(globalFilter);
+			if (globalFilter === void 0) {
+				setSearchValue("");
+				setGlobalFilter(void 0);
+			} else setSearchValue(globalFilter);
 		}
 		isMounted.current = true;
-	}, [globalFilter]);
+	}, [globalFilter, setGlobalFilter]);
 	const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
 	return /* @__PURE__ */ jsxs(Collapse, {
 		in: showGlobalFilter,
@@ -3921,38 +3895,41 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
 		})]
 	});
 };
-//#endregion
-//#region src/fns/aggregationFns.ts
+// src/fns/aggregationFns.ts
 const MRT_AggregationFns = { ...aggregationFns };
-//#endregion
-//#region src/fns/filterFns.ts
+// src/fns/filterFns.ts
 const fuzzy = (row, columnId, filterValue, addMeta) => {
 	const itemRank = rankItem(row.getValue(columnId), filterValue, { threshold: rankings.MATCHES });
 	addMeta?.(itemRank);
 	return itemRank.passed;
 };
 fuzzy.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
+const normalize = (value) => value.toString().toLowerCase().trim();
+const getNormalizedValue = (row, id) => {
+	const value = row.getValue(id);
+	return value === null || value === void 0 ? void 0 : normalize(value);
+};
+const contains = (row, id, filterValue) => !!getNormalizedValue(row, id)?.includes(normalize(filterValue));
 contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
+const startsWith = (row, id, filterValue) => !!getNormalizedValue(row, id)?.startsWith(normalize(filterValue));
 startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
+const endsWith = (row, id, filterValue) => !!getNormalizedValue(row, id)?.endsWith(normalize(filterValue));
 endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
+const equals = (row, id, filterValue) => getNormalizedValue(row, id) === normalize(filterValue);
 equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
+const notEquals = (row, id, filterValue) => getNormalizedValue(row, id) !== normalize(filterValue);
 notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (getNormalizedValue(row, id) ?? "") > normalize(filterValue);
 greaterThan.autoRemove = (val) => !val;
 const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (getNormalizedValue(row, id) ?? "") < normalize(filterValue);
 lessThan.autoRemove = (val) => !val;
 const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 lessThanOrEqualTo.autoRemove = (val) => !val;
-const between = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
+const between = (row, id, filterValues) => (filterValues[0] === "" || filterValues[0] === void 0 || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || filterValues[1] === "" || filterValues[1] === void 0 || lessThan(row, id, filterValues[1]));
 between.autoRemove = (val) => !val;
-const betweenInclusive = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
+const betweenInclusive = (row, id, filterValues) => (filterValues[0] === "" || filterValues[0] === void 0 || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || filterValues[1] === "" || filterValues[1] === void 0 || lessThanOrEqualTo(row, id, filterValues[1]));
 betweenInclusive.autoRemove = (val) => !val;
 const empty = (row, id, _filterValue) => !row.getValue(id)?.toString().trim();
 empty.autoRemove = (val) => !val;
@@ -4037,9 +4014,8 @@ const MRT_DefaultTableFeatures = tableFeatures({
 	sortedRowModel: createSortedRowModel(),
 	sortFns: MRT_SortingFns
 });
-//#endregion
-//#region src/utils/tanstack.helpers.ts
-const flexRender = flexRender$1;
+// src/utils/tanstack.helpers.ts
+const flexRender = (Comp, props) => flexRender$1(Comp, props);
 function createMRTColumnHelper() {
 	return {
 		accessor: (accessor, column) => {
@@ -4056,8 +4032,7 @@ function createMRTColumnHelper() {
 	};
 }
 const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => constructRow(table, "mrt-row-create", originalRow ?? Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({ [getColumnId(col)]: "" }))), rowIndex, depth, subRows, parentId);
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
 const getMRT_RowActionsColumnDef = (tableOptions) => {
 	return {
 		Cell: ({ cell, row, staticRowIndex, table }) => /* @__PURE__ */ jsx(MRT_ToggleRowActionMenuButton, {
@@ -4074,8 +4049,7 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
 const getMRT_RowDragColumnDef = (tableOptions) => {
 	return {
 		Cell: ({ row, rowRef, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowGrabHandle, {
@@ -4092,8 +4066,7 @@ const getMRT_RowDragColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
 const getMRT_RowExpandColumnDef = (tableOptions) => {
 	const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping } } = tableOptions;
 	const alignProps = positionExpandColumn === "last" ? { align: "right" } : void 0;
@@ -4145,8 +4118,7 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
 const getMRT_RowNumbersColumnDef = (tableOptions) => {
 	const { localization, rowNumberDisplayMode } = tableOptions;
 	const { pagination: { pageIndex, pageSize } } = tableOptions.state;
@@ -4162,8 +4134,7 @@ const getMRT_RowNumbersColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
 const getMRT_RowPinningColumnDef = (tableOptions) => {
 	return {
 		Cell: ({ row, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowPinButton, {
@@ -4179,8 +4150,7 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
 const getMRT_RowSelectColumnDef = (tableOptions) => {
 	const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 	return {
@@ -4199,8 +4169,7 @@ const getMRT_RowSelectColumnDef = (tableOptions) => {
 		})
 	};
 };
-//#endregion
-//#region src/icons.ts
+// src/icons.ts
 const MRT_Default_Icons = {
 	ArrowDownwardIcon: ArrowDownward,
 	ArrowRightIcon: ArrowRight,
@@ -4237,8 +4206,7 @@ const MRT_Default_Icons = {
 	ViewColumnIcon: ViewColumn,
 	VisibilityOffIcon: VisibilityOff
 };
-//#endregion
-//#region src/locales/en.ts
+// src/locales/en.ts
 const MRT_Localization_EN = {
 	language: "en",
 	actions: "Actions",
@@ -4333,8 +4301,7 @@ const MRT_Localization_EN = {
 	unpin: "Unpin",
 	unpinAll: "Unpin all"
 };
-//#endregion
-//#region src/hooks/useMRT_TableOptions.ts
+// src/hooks/useMRT_TableOptions.ts
 const MRT_DefaultColumn = {
 	filterVariant: "text",
 	maxSize: 1e3,
@@ -4366,18 +4333,18 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
 		...localization
 	}), [localization]);
 	mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
-	aggregationFns = useMemo(() => ({
+	[aggregationFns] = useState(() => ({
 		...MRT_AggregationFns,
 		...aggregationFns
-	}), []);
-	filterFns = useMemo(() => ({
+	}));
+	[filterFns] = useState(() => ({
 		...MRT_FilterFns,
 		...filterFns
-	}), []);
-	sortFns = useMemo(() => ({
+	}));
+	[sortFns] = useState(() => ({
 		...MRT_SortingFns,
 		...sortFns
-	}), []);
+	}));
 	defaultColumn = useMemo(() => ({
 		...MRT_DefaultColumn,
 		...defaultColumn
@@ -4386,7 +4353,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
 		...MRT_DefaultDisplayColumn,
 		...defaultDisplayColumn
 	}), [defaultDisplayColumn]);
-	[enableColumnVirtualization, enableRowVirtualization] = useMemo(() => [enableColumnVirtualization, enableRowVirtualization], []);
+	[[enableColumnVirtualization, enableRowVirtualization]] = useState(() => [enableColumnVirtualization, enableRowVirtualization]);
 	if (!columnResizeDirection) columnResizeDirection = theme.direction || "ltr";
 	layoutMode = layoutMode || (enableColumnResizing ? "grid-no-grow" : "semantic");
 	if (layoutMode === "semantic" && (enableRowVirtualization || enableColumnVirtualization)) layoutMode = "grid";
@@ -4443,7 +4410,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
 		enableTopToolbar,
 		filterFns,
 		getRowCanExpand: rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : void 0),
-		getSubRows: (row) => row?.subRows,
+		getSubRows: (row) => "subRows" in row ? row.subRows : void 0,
 		icons,
 		id,
 		layoutMode,
@@ -4468,8 +4435,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
 		...rest
 	};
 };
-//#endregion
-//#region src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx
+// src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx
 const blankColProps = {
 	children: null,
 	sx: {
@@ -4492,16 +4458,31 @@ const getMRT_RowSpacerColumnDef = (tableOptions) => {
 		muiTableHeadCellProps: blankColProps
 	};
 };
-//#endregion
-//#region src/hooks/useMRT_Effects.ts
+// src/hooks/useMRT_Effects.ts
 const useMRT_Effects = (table) => {
-	const { getIsSomeRowsPinned, getPrePaginatedRowModel, options: { enablePagination, enableRowPinning, rowCount } } = table;
+	const { getPrePaginatedRowModel, options: { enablePagination, enableRowPinning, rowCount } } = table;
 	const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting } = table.state;
 	const totalColumnCount = table.options.columns.length;
 	const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
-	const rerender = useReducer(() => ({}), {})[1];
+	const [, rerender] = useReducer(() => ({}), {});
 	const initialBodyHeight = useRef(null);
 	const previousTop = useRef(null);
+	const effectValues = useRef({
+		columnOrder,
+		enableRowPinning,
+		pagination,
+		table,
+		tableOptions: table.options
+	});
+	useEffect(() => {
+		effectValues.current = {
+			columnOrder,
+			enableRowPinning,
+			pagination,
+			table,
+			tableOptions: table.options
+		};
+	});
 	useEffect(() => {
 		if (typeof window !== "undefined") initialBodyHeight.current = document.body.style.height;
 	}, []);
@@ -4521,10 +4502,12 @@ const useMRT_Effects = (table) => {
 		}
 	}, [isFullScreen]);
 	useEffect(() => {
-		if (totalColumnCount !== columnOrder.length) table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+		const { columnOrder, table, tableOptions } = effectValues.current;
+		if (totalColumnCount !== columnOrder.length) table.setColumnOrder(getDefaultColumnOrderIds(tableOptions));
 	}, [totalColumnCount]);
 	useEffect(() => {
 		if (!enablePagination || isLoading || showSkeletons) return;
+		const { pagination, table } = effectValues.current;
 		const { pageIndex, pageSize } = pagination;
 		const totalPages = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
 		if (pageIndex < 0 || pageIndex >= totalPages) table.setPageIndex(totalPages - 1);
@@ -4539,18 +4522,19 @@ const useMRT_Effects = (table) => {
 		if (sorting.length) appliedSort.current = sorting;
 	}, [sorting]);
 	useEffect(() => {
+		const { table } = effectValues.current;
 		if (!getCanRankRows(table)) return;
 		if (globalFilter) table.setSorting([]);
 		else table.setSorting(() => appliedSort.current || []);
 	}, [globalFilter]);
 	useEffect(() => {
-		if (enableRowPinning && getIsSomeRowsPinned()) setTimeout(() => {
+		const { enableRowPinning, table } = effectValues.current;
+		if (enableRowPinning && table.getIsSomeRowsPinned()) setTimeout(() => {
 			rerender();
 		}, 150);
 	}, [density]);
 };
-//#endregion
-//#region src/hooks/useMRT_TableInstance.ts
+// src/hooks/useMRT_TableInstance.ts
 /**
 * The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
 * @param definedTableOptions - table options with proper defaults set
@@ -4569,7 +4553,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
 	const topToolbarRef = useRef(null);
 	const tableHeadRef = useRef(null);
 	const tableFooterRef = useRef(null);
-	const initialState = useMemo(() => {
+	const [initialState] = useState(() => {
 		const initState = definedTableOptions.initialState ?? {};
 		initState.columnOrder = initState.columnOrder ?? getDefaultColumnOrderIds({
 			...definedTableOptions,
@@ -4580,7 +4564,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
 		});
 		initState.globalFilterFn = definedTableOptions.globalFilterFn ?? "fuzzy";
 		return initState;
-	}, []);
+	});
 	definedTableOptions.initialState = initialState;
 	const [actionCell, setActionCell] = useState(initialState.actionCell ?? null);
 	const [creatingRow, _setCreatingRow] = useState(initialState.creatingRow ?? null);
@@ -4646,9 +4630,10 @@ const useMRT_TableInstance = (definedTableOptions) => {
 		tableOptions: statefulTableOptions
 	});
 	columnDefsRef.current = statefulTableOptions.columns;
-	statefulTableOptions.data = useMemo(() => (statefulTableOptions.state.isLoading || statefulTableOptions.state.showSkeletons) && !statefulTableOptions.data.length ? [...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null)].map(() => Object.assign({}, ...getAllLeafColumnDefs(statefulTableOptions.columns).map((col) => ({ [getColumnId(col)]: null })))) : statefulTableOptions.data, [
+	statefulTableOptions.data = useMemo(() => (statefulTableOptions.state.isLoading || statefulTableOptions.state.showSkeletons) && !statefulTableOptions.data.length ? [...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null)].map(() => Object.assign({}, ...getAllLeafColumnDefs(columnDefsRef.current).map((col) => ({ [getColumnId(col)]: null })))) : statefulTableOptions.data, [
 		statefulTableOptions.data,
 		statefulTableOptions.state.isLoading,
+		statefulTableOptions.state.pagination.pageSize,
 		statefulTableOptions.state.showSkeletons
 	]);
 	const [features] = useState(() => tableFeatures({
@@ -4698,7 +4683,8 @@ const useMRT_TableInstance = (definedTableOptions) => {
 		setColumnFilterFns: statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns,
 		setCreatingRow: (row) => {
 			const nextRow = row === true ? createRow(table) : row;
-			statefulTableOptions?.onCreatingRowChange?.(nextRow) ?? _setCreatingRow(nextRow);
+			const handled = statefulTableOptions?.onCreatingRowChange?.(nextRow);
+			if (handled === void 0 || handled === null) _setCreatingRow(nextRow);
 		},
 		setDensity: statefulTableOptions.onDensityChange ?? setDensity,
 		setDraggingColumn: statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
@@ -4717,11 +4703,9 @@ const useMRT_TableInstance = (definedTableOptions) => {
 	useMRT_Effects(table);
 	return table;
 };
-//#endregion
-//#region src/hooks/useMaterialReactTable.ts
+// src/hooks/useMaterialReactTable.ts
 const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
-//#endregion
-//#region src/components/toolbar/MRT_LinearProgressBar.tsx
+// src/components/toolbar/MRT_LinearProgressBar.tsx
 const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
 	const { options: { muiLinearProgressProps } } = table;
 	const { isSaving, showProgressBars } = table.state;
@@ -4750,8 +4734,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_TablePagination.tsx
+// src/components/toolbar/MRT_TablePagination.tsx
 const defaultRowsPerPage = [
 	5,
 	10,
@@ -4818,7 +4801,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
 				},
 				label: localization.rowsPerPage,
 				MenuProps: { disableScrollLock: true },
-				onChange: (event) => table.setPageSize(+event.target.value),
+				onChange: (event) => table.setPageSize(Number(event.target.value)),
 				sx: { mb: 0 },
 				value: pageSize,
 				variant: "standard",
@@ -4913,8 +4896,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
 		})] }) : null]
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_ToolbarDropZone.tsx
+// src/components/toolbar/MRT_ToolbarDropZone.tsx
 const MRT_ToolbarDropZone = ({ table, ...rest }) => {
 	const { options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone } = table;
 	const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = table.state;
@@ -4924,12 +4906,18 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
 	const handleDragOver = (e) => {
 		e.preventDefault();
 	};
+	const isShowToolbarDropZoneControlled = table.options.state?.showToolbarDropZone !== void 0;
+	const setShowToolbarDropZoneRef = useRef(setShowToolbarDropZone);
+	useEffect(() => {
+		setShowToolbarDropZoneRef.current = setShowToolbarDropZone;
+	});
 	useEffect(() => {
-		if (table.options.state?.showToolbarDropZone !== void 0) setShowToolbarDropZone(!!enableGrouping && !!draggingColumn && draggingColumn.columnDef.enableGrouping !== false && !grouping.includes(draggingColumn.id));
+		if (isShowToolbarDropZoneControlled) setShowToolbarDropZoneRef.current(!!enableGrouping && !!draggingColumn && draggingColumn.columnDef.enableGrouping !== false && !grouping.includes(draggingColumn.id));
 	}, [
-		enableGrouping,
 		draggingColumn,
-		grouping
+		enableGrouping,
+		grouping,
+		isShowToolbarDropZoneControlled
 	]);
 	return /* @__PURE__ */ jsx(Fade, {
 		in: showToolbarDropZone,
@@ -4959,8 +4947,7 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_BottomToolbar.tsx
+// src/components/toolbar/MRT_BottomToolbar.tsx
 const MRT_BottomToolbar = ({ table, ...rest }) => {
 	const { options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions }, refs: { bottomToolbarRef } } = table;
 	const { isFullScreen } = table.state;
@@ -4975,7 +4962,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
 		ref: (node) => {
 			if (node) {
 				bottomToolbarRef.current = node;
-				if (toolbarProps?.ref) toolbarProps.ref.current = node;
+				if (toolbarProps?.ref && typeof toolbarProps.ref === "object") toolbarProps.ref.current = node;
 			}
 		},
 		sx: (theme) => ({
@@ -5026,8 +5013,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_ToolbarInternalButtons.tsx
+// src/components/toolbar/MRT_ToolbarInternalButtons.tsx
 const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
 	const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions } } = table;
 	return /* @__PURE__ */ jsx(Box, {
@@ -5047,8 +5033,7 @@ const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
 		] })
 	});
 };
-//#endregion
-//#region src/components/toolbar/MRT_TopToolbar.tsx
+// src/components/toolbar/MRT_TopToolbar.tsx
 const MRT_TopToolbar = ({ table }) => {
 	const { options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions }, refs: { topToolbarRef } } = table;
 	const { isFullScreen, showGlobalFilter } = table.state;
@@ -5064,7 +5049,7 @@ const MRT_TopToolbar = ({ table }) => {
 		...toolbarProps,
 		ref: (ref) => {
 			topToolbarRef.current = ref;
-			if (toolbarProps?.ref) toolbarProps.ref.current = ref;
+			if (toolbarProps?.ref && typeof toolbarProps.ref === "object") toolbarProps.ref.current = ref;
 		},
 		sx: (theme) => ({
 			...getCommonToolbarStyles({
@@ -5120,8 +5105,7 @@ const MRT_TopToolbar = ({ table }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/menus/MRT_CellActionMenu.tsx
+// src/components/menus/MRT_CellActionMenu.tsx
 const MRT_CellActionMenu = ({ table, ...rest }) => {
 	const { options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems }, refs: { actionCellRef } } = table;
 	const { actionCell, density } = table.state;
@@ -5130,7 +5114,7 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
 	const { column } = cell;
 	const { columnDef } = column;
 	const handleClose = (event) => {
-		event?.stopPropagation();
+		event?.stopPropagation?.();
 		table.setActionCell(null);
 		actionCellRef.current = null;
 	};
@@ -5182,8 +5166,7 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
 		children: menuItems ?? internalMenuItems
 	});
 };
-//#endregion
-//#region src/components/modals/MRT_EditRowModal.tsx
+// src/components/modals/MRT_EditRowModal.tsx
 const MRT_EditRowModal = ({ open, table, ...rest }) => {
 	const { options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent }, setCreatingRow, setEditingRow } = table;
 	const { creatingRow, editingRow } = table.state;
@@ -5260,24 +5243,19 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
 		] })
 	});
 };
-//#endregion
-//#region src/hooks/useMRT_ColumnVirtualizer.ts
+// src/hooks/useMRT_ColumnVirtualizer.ts
 const useMRT_ColumnVirtualizer = (table) => {
 	const { options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization }, refs: { tableContainerRef } } = table;
-	const { columnPinning, columnVisibility, draggingColumn } = table.state;
-	if (!enableColumnVirtualization) return void 0;
-	const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
+	const { draggingColumn } = table.state;
+	const columnVirtualizerProps = enableColumnVirtualization ? parseFromValuesOrFunc(columnVirtualizerOptions, { table }) : void 0;
 	const visibleColumns = table.getVisibleLeafColumns();
-	const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning ? [visibleColumns.filter((c) => c.getIsPinned() === "start").map((c) => c.getPinnedIndex()), visibleColumns.filter((c) => c.getIsPinned() === "end").map((column) => visibleColumns.length - column.getPinnedIndex() - 1).sort((a, b) => a - b)] : [[], []], [
-		columnPinning,
-		columnVisibility,
-		enableColumnPinning
-	]);
+	const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning ? [visibleColumns.filter((c) => c.getIsPinned() === "start").map((c) => c.getPinnedIndex()), visibleColumns.filter((c) => c.getIsPinned() === "end").map((column) => visibleColumns.length - column.getPinnedIndex() - 1).sort((a, b) => a - b)] : [[], []], [enableColumnPinning, visibleColumns]);
 	const numPinnedLeft = leftPinnedIndexes.length;
 	const numPinnedRight = rightPinnedIndexes.length;
-	const draggingColumnIndex = useMemo(() => draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : void 0, [draggingColumn?.id]);
+	const draggingColumnIndex = useMemo(() => draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : void 0, [draggingColumn?.id, visibleColumns]);
 	const columnVirtualizer = useVirtualizer({
 		count: visibleColumns.length,
+		enabled: !!enableColumnVirtualization,
 		estimateSize: (index) => visibleColumns[index].getSize(),
 		getScrollElement: () => tableContainerRef.current,
 		horizontal: true,
@@ -5293,10 +5271,13 @@ const useMRT_ColumnVirtualizer = (table) => {
 		}, [
 			leftPinnedIndexes,
 			rightPinnedIndexes,
-			draggingColumnIndex
+			draggingColumnIndex,
+			numPinnedLeft,
+			numPinnedRight
 		]),
 		...columnVirtualizerProps
 	});
+	if (!enableColumnVirtualization) return;
 	const virtualColumns = columnVirtualizer.getVirtualItems();
 	columnVirtualizer.virtualColumns = virtualColumns;
 	const numColumns = virtualColumns.length;
@@ -5312,32 +5293,23 @@ const useMRT_ColumnVirtualizer = (table) => {
 	if (columnVirtualizerInstanceRef) columnVirtualizerInstanceRef.current = columnVirtualizer;
 	return columnVirtualizer;
 };
-//#endregion
-//#region src/components/table/MRT_Table.tsx
+// src/components/table/MRT_Table.tsx
 const MRT_Table = ({ table, ...rest }) => {
-	const { getFlatHeaders, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption } } = table;
-	const { columnResizing, columnSizing, columnVisibility, isFullScreen } = table.state;
+	const { getFlatHeaders, options: { enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption } } = table;
+	const { columnResizing, isFullScreen } = table.state;
 	const tableProps = {
 		...parseFromValuesOrFunc(muiTableProps, { table }),
 		...rest
 	};
 	const Caption = parseFromValuesOrFunc(renderCaption, { table });
-	const columnSizeVars = useMemo(() => {
-		const headers = getFlatHeaders();
-		const colSizes = {};
-		for (let i = 0; i < headers.length; i++) {
-			const header = headers[i];
-			const colSize = header.getSize();
-			colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-			colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
-		}
-		return colSizes;
-	}, [
-		columns,
-		columnSizing,
-		columnResizing,
-		columnVisibility
-	]);
+	const headers = getFlatHeaders();
+	const columnSizeVars = {};
+	for (let i = 0; i < headers.length; i++) {
+		const header = headers[i];
+		const colSize = header.getSize();
+		columnSizeVars[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+		columnSizeVars[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+	}
 	const commonTableGroupProps = {
 		columnVirtualizer: useMRT_ColumnVirtualizer(table),
 		table
@@ -5363,8 +5335,7 @@ const MRT_Table = ({ table, ...rest }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/table/MRT_TableLoadingOverlay.tsx
+// src/components/table/MRT_TableLoadingOverlay.tsx
 const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
 	const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps } } = table;
 	const circularProgressProps = {
@@ -5393,11 +5364,10 @@ const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
 		})
 	});
 };
-//#endregion
-//#region src/components/table/MRT_TableContainer.tsx
+// src/components/table/MRT_TableContainer.tsx
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 const MRT_TableContainer = ({ table, ...rest }) => {
-	const { options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef } } = table;
+	const { options: { createDisplayMode, editDisplayMode, enableBottomToolbar, enableCellActions, enableStickyHeader, enableTopToolbar, muiTableContainerProps }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef } } = table;
 	const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay } = table.state;
 	const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
 	const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
@@ -5406,10 +5376,25 @@ const MRT_TableContainer = ({ table, ...rest }) => {
 		...rest
 	};
 	useIsomorphicLayoutEffect(() => {
-		const topToolbarHeight = typeof document !== "undefined" ? topToolbarRef.current?.offsetHeight ?? 0 : 0;
-		const bottomToolbarHeight = typeof document !== "undefined" ? bottomToolbarRef?.current?.offsetHeight ?? 0 : 0;
-		setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
-	});
+		const measureToolbars = () => {
+			setTotalToolbarHeight((topToolbarRef.current?.offsetHeight ?? 0) + (bottomToolbarRef.current?.offsetHeight ?? 0));
+		};
+		measureToolbars();
+		if (typeof ResizeObserver === "undefined" || !tableContainerRef.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			for (const toolbar of [topToolbarRef.current, bottomToolbarRef.current]) if (toolbar) resizeObserver.observe(toolbar);
+			measureToolbars();
+		});
+		resizeObserver.observe(tableContainerRef.current);
+		return () => resizeObserver.disconnect();
+	}, [
+		bottomToolbarRef,
+		enableBottomToolbar,
+		enableTopToolbar,
+		isFullScreen,
+		tableContainerRef,
+		topToolbarRef
+	]);
 	const createModalOpen = createDisplayMode === "modal" && creatingRow;
 	const editModalOpen = editDisplayMode === "modal" && editingRow;
 	return /* @__PURE__ */ jsxs(TableContainer, {
@@ -5419,7 +5404,7 @@ const MRT_TableContainer = ({ table, ...rest }) => {
 		ref: (node) => {
 			if (node) {
 				tableContainerRef.current = node;
-				if (tableContainerProps?.ref) tableContainerProps.ref.current = node;
+				if (tableContainerProps?.ref && typeof tableContainerProps.ref === "object") tableContainerProps.ref.current = node;
 			}
 		},
 		style: {
@@ -5444,8 +5429,7 @@ const MRT_TableContainer = ({ table, ...rest }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/table/MRT_TablePaper.tsx
+// src/components/table/MRT_TablePaper.tsx
 const MRT_TablePaper = ({ table, ...rest }) => {
 	const { options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar }, refs: { tablePaperRef } } = table;
 	const { isFullScreen } = table.state;
@@ -5460,7 +5444,7 @@ const MRT_TablePaper = ({ table, ...rest }) => {
 		...paperProps,
 		ref: (ref) => {
 			tablePaperRef.current = ref;
-			if (paperProps?.ref) paperProps.ref.current = ref;
+			if (paperProps?.ref && typeof paperProps.ref === "object") paperProps.ref.current = ref;
 		},
 		style: {
 			...isFullScreen ? {
@@ -5493,16 +5477,13 @@ const MRT_TablePaper = ({ table, ...rest }) => {
 		]
 	});
 };
-//#endregion
-//#region src/components/MaterialReactTable.tsx
+// src/components/MaterialReactTable.tsx
 const isTableInstanceProp = (props) => props.table !== void 0;
-const MaterialReactTable = (props) => {
-	let table;
-	if (isTableInstanceProp(props)) table = props.table;
-	else table = useMaterialReactTable(props);
+const MRT_TableFromOptions = ({ tableOptions }) => {
+	const table = useMaterialReactTable(tableOptions);
 	return /* @__PURE__ */ jsx(MRT_TablePaper, { table });
 };
-//#endregion
-export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellKeyboardShortcuts, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getSubColumnDefs, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+const MaterialReactTable = (props) => isTableInstanceProp(props) ? /* @__PURE__ */ jsx(MRT_TablePaper, { table: props.table }) : /* @__PURE__ */ jsx(MRT_TableFromOptions, { tableOptions: props });
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellKeyboardShortcuts, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getFilterOptionLabel, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getSubColumnDefs, getTrailingDisplayColumnIds, isCellEditable, moveColumn, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 
 //# sourceMappingURL=index.js.map