diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx
index bbde0fc..0f8fbcf 100644
--- a/web/src/components/RealtimeTable/RealtimeTable.jsx
+++ b/web/src/components/RealtimeTable/RealtimeTable.jsx
@@ -26,6 +26,7 @@ import { useTableScale } from './hooks/useTableScale';
 import { useBudgetYear } from './hooks/useBudgetYear';
 import { useValidationRules } from './hooks/useValidationRules';
 import { getRowId } from './utils/rowUtils';
+import { DEFAULT_COLUMN_SIZING_INFO } from './utils/columnResizeInfo';
 import { getColumnVirtualizerOptions, getOrderedVisibleColumns } from './utils/columnLayoutUtils';
 
 import { DictVspApi } from '../../api/dict-vsp';
@@ -93,6 +94,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	const [showColumnFilters, setShowColumnFilters] = useState(false);
 	const [selectedColumnId, setSelectedColumnId] = useState();
 	const [rowSelection, setRowSelection] = useState({});
+	const [columnFilters, setColumnFilters] = useState([]);
+	const [columnSizingInfo, setColumnSizingInfo] = useState(DEFAULT_COLUMN_SIZING_INFO);
 	const rowSelectionRef = useRef(rowSelection);
 	rowSelectionRef.current = rowSelection;
 	const [, startTransition] = useTransition();
@@ -332,6 +335,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		globalFilter,
 		showColumnFilters,
 		rowSelection,
+		columnFilters,
+		columnSizingInfo,
 		containerRef,
 		tableMeta,
 		setColumnSizing,
@@ -366,6 +371,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			'data-row-id': row.id,
 		}),
 		onColumnSizingChange: setColumnSizing,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnSizingInfoChange: setColumnSizingInfo,
 		onColumnPinningChange: setColumnPinning,
 		onExpandedChange: setExpanded,
 		onGlobalFilterChange: handleGlobalFilterChange,
@@ -376,6 +383,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			globalFilter,
 			showColumnFilters,
 			rowSelection,
+			columnFilters,
+			columnSizingInfo,
 			editingCell,
 			expanded,
 		},
@@ -425,6 +434,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 				globalFilter,
 				showColumnFilters,
 				rowSelection,
+				columnFilters,
+				columnSizingInfo,
 				containerRef,
 				tableMeta,
 				setColumnSizing,
@@ -444,6 +455,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			globalFilter,
 			showColumnFilters,
 			rowSelection,
+			columnFilters,
+			columnSizingInfo,
 			containerRef,
 			tableMeta,
 			setColumnSizing,
@@ -809,7 +822,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 									columnPinning={columnPinning}
 									columnSizing={columnSizing}
 									columnVisibility={columnVisibility}
-									columnFilters={table.getState().columnFilters}
+									columnFilters={columnFilters}
 									showColumnFilters={showColumnFilters}
 									selectedColumnId={selectedColumnId}
 									onColumnSelect={handleColumnSelect}