@prairielearn/ui 1.2.0 → 1.4.0

package/src/components/ColumnManager.tsx

@@ -1,113 +1,206 @@
 import { type Column, type Table } from '@tanstack/react-table';
-import { useEffect, useRef, useState } from 'preact/compat';
+import clsx from 'clsx';
+import { type JSX, useEffect, useRef, useState } from 'preact/compat';
 import Button from 'react-bootstrap/Button';
 import Dropdown from 'react-bootstrap/Dropdown';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import Tooltip from 'react-bootstrap/Tooltip';
 
 interface ColumnMenuItemProps<RowDataModel> {
   column: Column<RowDataModel>;
-  hidePinButton: boolean;
+  onPinningBoundary: boolean;
   onTogglePin: (columnId: string) => void;
-  onClearElementFocus: () => void;
+  className?: string;
 }
 
-function ColumnMenuItem<RowDataModel>({
+function ColumnLeafItem<RowDataModel>({
   column,
-  hidePinButton = false,
+  onPinningBoundary = false,
   onTogglePin,
-  onClearElementFocus,
+  className,
 }: ColumnMenuItemProps<RowDataModel>) {
-  const pinButtonRef = useRef<HTMLButtonElement>(null);
-
-  if (!column.getCanHide() && !column.getCanPin()) return null;
+  if (!column.getCanHide()) return null;
 
   // Use meta.label if available, otherwise fall back to header or column.id
   const header =
-    (column.columnDef.meta as any)?.label ??
+    column.columnDef.meta?.label ??
     (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
 
   return (
-    <Dropdown.Item
+    <div
       key={column.id}
-      as="div"
-      class="px-2 py-1 d-flex align-items-center justify-content-between"
-      onKeyDown={onClearElementFocus}
+      class={clsx('px-2 py-1 d-flex align-items-center justify-content-between', className)}
     >
       <label class="form-check me-auto text-nowrap d-flex align-items-stretch">
-        <OverlayTrigger
-          placement="top"
-          overlay={<Tooltip>{column.getIsVisible() ? 'Hide column' : 'Show column'}</Tooltip>}
-        >
-          <input
-            type="checkbox"
-            class="form-check-input"
-            checked={column.getIsVisible()}
-            disabled={!column.getCanHide()}
-            aria-label={
-              column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`
-            }
-            aria-describedby={`${column.id}-label`}
-            onChange={column.getToggleVisibilityHandler()}
-          />
-        </OverlayTrigger>
+        <input
+          type="checkbox"
+          class="form-check-input"
+          checked={column.getIsVisible()}
+          disabled={!column.getCanHide()}
+          aria-label={column.getIsVisible() ? `Hide '${header}' column` : `Show '${header}' column`}
+          aria-describedby={`${column.id}-label`}
+          onChange={column.getToggleVisibilityHandler()}
+        />
         <span class="form-check-label ms-2" id={`${column.id}-label`}>
           {header}
         </span>
       </label>
-      {column.getCanPin() && !hidePinButton && (
-        <button
-          ref={pinButtonRef}
-          type="button"
-          // Since the HTML changes, but we want to refocus the pin button, we track
-          // the active pin button and refocuses it when the column manager is rerendered.
-          id={`${column.id}-pin`}
-          class="btn btn-sm btn-ghost ms-2"
-          aria-label={
-            column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`
-          }
-          title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}
-          data-bs-toggle="tooltip"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (!pinButtonRef.current) {
-              throw new Error('pinButtonRef.current is null');
-            }
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              onTogglePin(column.id);
-              return;
-            }
-          }}
-          // Instead, use the arrow keys to move between interactive elements in each menu item.
-          onClick={() => {
-            if (!pinButtonRef.current) {
-              throw new Error('pinButtonRef.current is null');
-            }
-            onTogglePin(column.id);
-          }}
-        >
-          <i class={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden="true" />
-        </button>
+      <button
+        type="button"
+        // Since the HTML changes, but we want to refocus the pin button, we track
+        // the active pin button and refocuses it when the column manager is rerendered.
+        id={`${column.id}-pin`}
+        class={clsx(
+          'btn btn-sm btn-ghost ms-2',
+          (!column.getCanPin() || !onPinningBoundary) && 'invisible',
+        )}
+        aria-label={
+          column.getIsPinned() ? `Unfreeze '${header}' column` : `Freeze '${header}'  column`
+        }
+        title={column.getIsPinned() ? 'Unfreeze column' : 'Freeze column'}
+        data-bs-toggle="tooltip"
+        onClick={() => onTogglePin(column.id)}
+      >
+        <i class={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
+
+function ColumnGroupItem<RowDataModel>({
+  column,
+  onTogglePin,
+  getIsOnPinningBoundary,
+}: {
+  column: Column<RowDataModel>;
+  onTogglePin: (columnId: string) => void;
+  getIsOnPinningBoundary: (columnId: string) => boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const leafColumns = column.getLeafColumns();
+  const visibleLeafColumns = leafColumns.filter((c) => c.getIsVisible());
+  const isAllVisible = visibleLeafColumns.length === leafColumns.length;
+  const isSomeVisible = visibleLeafColumns.length > 0 && !isAllVisible;
+
+  const handleToggleVisibility = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const targetVisibility = !isAllVisible;
+    leafColumns.forEach((col) => {
+      if (col.getCanHide()) {
+        col.toggleVisibility(targetVisibility);
+      }
+    });
+  };
+
+  // Use meta.label if available, otherwise fall back to header or column.id
+  const header =
+    column.columnDef.meta?.label ??
+    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
+
+  return (
+    <div class="d-flex flex-column">
+      <div class="px-2 py-1 d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center flex-grow-1">
+          <input
+            type="checkbox"
+            class="form-check-input flex-shrink-0"
+            checked={isAllVisible}
+            indeterminate={isSomeVisible}
+            aria-label={`Toggle visibility for group '${header}'`}
+            onChange={handleToggleVisibility}
+          />
+          <button
+            type="button"
+            class="btn btn-link text-decoration-none text-reset w-100 text-start d-flex align-items-center justify-content-between ps-2 py-0 pe-0"
+            aria-expanded={isExpanded}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsExpanded(!isExpanded);
+            }}
+          >
+            <span class="fw-bold text-truncate">{header}</span>
+            <i
+              class={clsx(
+                'bi ms-2 text-muted',
+                isExpanded ? 'bi-chevron-down' : 'bi-chevron-right',
+              )}
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+      {isExpanded && (
+        <div class="ps-3 border-start ms-3 mb-1">
+          {column.columns.map((childCol) => (
+            <ColumnItem
+              key={childCol.id}
+              column={childCol}
+              getIsOnPinningBoundary={getIsOnPinningBoundary}
+              onTogglePin={onTogglePin}
+            />
+          ))}
+        </div>
       )}
-    </Dropdown.Item>
+    </div>
   );
 }
 
-export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataModel> }) {
+function ColumnItem<RowDataModel>({
+  column,
+  onTogglePin,
+  getIsOnPinningBoundary,
+}: {
+  column: Column<RowDataModel>;
+  onTogglePin: (columnId: string) => void;
+  getIsOnPinningBoundary: (columnId: string) => boolean;
+}) {
+  if (column.columns.length > 0) {
+    return (
+      <ColumnGroupItem
+        column={column}
+        getIsOnPinningBoundary={getIsOnPinningBoundary}
+        onTogglePin={onTogglePin}
+      />
+    );
+  }
+  return (
+    <ColumnLeafItem
+      column={column}
+      onPinningBoundary={getIsOnPinningBoundary(column.id)}
+      onTogglePin={onTogglePin}
+    />
+  );
+}
+
+interface ColumnManagerProps<RowDataModel> {
+  table: Table<RowDataModel>;
+  topContent?: JSX.Element;
+}
+
+export function ColumnManager<RowDataModel>({
+  table,
+  topContent,
+}: ColumnManagerProps<RowDataModel>) {
   const [activeElementId, setActiveElementId] = useState<string | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const handleTogglePin = (columnId: string) => {
     const currentLeft = table.getState().columnPinning.left ?? [];
     const isPinned = currentLeft.includes(columnId);
+    const allLeafColumns = table.getAllLeafColumns();
+    const currentColumnIndex = allLeafColumns.findIndex((c) => c.id === columnId);
     let newLeft: string[];
     if (isPinned) {
-      newLeft = currentLeft.filter((id) => id !== columnId);
+      // Get the previous column that can be set to unpinned.
+      // This is useful since we want to unpin/pin columns that are not shown in the view manager.
+      const previousFrozenColumnIndex = allLeafColumns.findLastIndex(
+        (c, index) => c.getCanHide() && index < currentColumnIndex,
+      );
+      newLeft = allLeafColumns.slice(0, previousFrozenColumnIndex + 1).map((c) => c.id);
     } else {
-      const columnOrder = table.getAllLeafColumns().map((c) => c.id);
-      const newPinned = new Set([...currentLeft, columnId]);
-      newLeft = columnOrder.filter((id) => newPinned.has(id));
+      // Pin all columns to the left of the current column.
+      const leftColumns = allLeafColumns.slice(0, currentColumnIndex + 1);
+      newLeft = leftColumns.map((c) => c.id);
     }
     table.setColumnPinning({ left: newLeft, right: [] });
     setActiveElementId(`${columnId}-pin`);
@@ -126,8 +219,53 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
     initialPinning.some((id) => !currentPinning.includes(id));
   const showResetButton = isVisibilityChanged || isPinningChanged;
 
-  const pinnedColumns = table.getAllLeafColumns().filter((c) => c.getIsPinned() === 'left');
-  const unpinnedColumns = table.getAllLeafColumns().filter((c) => c.getIsPinned() !== 'left');
+  const allLeafColumns = table.getAllLeafColumns();
+  const pinnedMenuColumns = allLeafColumns.filter(
+    (c) => c.getCanHide() && c.getIsPinned() === 'left',
+  );
+  // Only the first unpinned menu column can be pinned, so we only need to find the first one
+  const firstUnpinnedMenuColumn = allLeafColumns.find(
+    (c) => c.getCanHide() && c.getIsPinned() !== 'left',
+  );
+
+  // Determine if a column is on the pinning boundary (can toggle its pin state).
+  // - Columns in a group cannot be pinned
+  // - Columns after a group cannot be pinned
+  // - Only the last pinned menu column can be unpinned
+  // - Only the first unpinned menu column can be pinned
+  const getIsOnPinningBoundary = (columnId: string) => {
+    const column = allLeafColumns.find((c) => c.id === columnId);
+    if (!column) return false;
+
+    // Columns in a group cannot be pinned
+    if (column.parent) return false;
+
+    // Check if any column at or before this one in the full column order is in a group
+    const columnIdx = allLeafColumns.findIndex((c) => c.id === columnId);
+    const hasGroupAtOrBefore = allLeafColumns.slice(0, columnIdx + 1).some((c) => c.parent);
+
+    if (column.getIsPinned() === 'left') {
+      // Only the last pinned menu column can be unpinned
+      return columnId === pinnedMenuColumns[pinnedMenuColumns.length - 1]?.id;
+    } else {
+      // Cannot pin if there's a group at or before this column
+      if (hasGroupAtOrBefore) return false;
+      // Only the first unpinned menu column can be pinned
+      return columnId === firstUnpinnedMenuColumn?.id;
+    }
+  };
+
+  // Get root columns (for showing hierarchy), but filter to only show unpinned ones
+  // We'll show pinned columns separately in the "Frozen columns" section
+  const unpinnedRootColumns = table.getAllColumns().filter((c) => {
+    if (c.depth !== 0) return false;
+    // A root column is considered unpinned if all its leaf columns are unpinned
+    const leafCols = c.getLeafColumns();
+    return (
+      leafCols.length > 0 &&
+      leafCols.every((leaf) => leaf.getIsPinned() !== 'left' && c.getCanHide())
+    );
+  });
 
   useEffect(() => {
     // When we use the pin or reset button, we want to refocus to another element.
@@ -152,25 +290,35 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
         }
       }}
     >
-      <Dropdown.Toggle variant="outline-secondary" id="column-manager-button">
-        <i class="bi bi-view-list me-2" aria-hidden="true" />
-        View
+      <Dropdown.Toggle
+        // We assume that this component will only appear once per page. If that changes,
+        // we'll need to do something to ensure ID uniqueness here.
+        id="column-manager"
+        variant="tanstack-table"
+      >
+        <i class="bi bi-view-list me-2" aria-hidden="true" /> View{' '}
       </Dropdown.Toggle>
       <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>
-        {pinnedColumns.length > 0 && (
+        {topContent && (
+          <>
+            {topContent}
+            <Dropdown.Divider />
+          </>
+        )}
+        {pinnedMenuColumns.length > 0 && (
           <>
             <div class="px-2 py-1 text-muted small" role="presentation">
               Frozen columns
             </div>
             <div role="group">
-              {pinnedColumns.map((column, index) => {
+              {/* Only leaf columns can be pinned in the current implementation. */}
+              {pinnedMenuColumns.map((column, index) => {
                 return (
-                  <ColumnMenuItem
+                  <ColumnLeafItem
                     key={column.id}
                     column={column}
-                    hidePinButton={index !== pinnedColumns.length - 1}
+                    onPinningBoundary={index === pinnedMenuColumns.length - 1}
                     onTogglePin={handleTogglePin}
-                    onClearElementFocus={() => setActiveElementId(null)}
                   />
                 );
               })}
@@ -178,17 +326,16 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
             <Dropdown.Divider />
           </>
         )}
-        {unpinnedColumns.length > 0 && (
+        {unpinnedRootColumns.length > 0 && (
           <>
             <div role="group">
-              {unpinnedColumns.map((column, index) => {
+              {unpinnedRootColumns.map((column) => {
                 return (
-                  <ColumnMenuItem
+                  <ColumnItem
                     key={column.id}
                     column={column}
-                    hidePinButton={index !== 0}
+                    getIsOnPinningBoundary={getIsOnPinningBoundary}
                     onTogglePin={handleTogglePin}
-                    onClearElementFocus={() => setActiveElementId(null)}
                   />
                 );
               })}
@@ -206,7 +353,8 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
               onClick={() => {
                 table.resetColumnVisibility();
                 table.resetColumnPinning();
-                setActiveElementId('column-manager-button');
+                // Move focus to the column manager button after resetting.
+                setActiveElementId('column-manager');
               }}
             >
               <i class="bi bi-arrow-counterclockwise me-2" aria-hidden="true" />

package/src/components/MultiSelectColumnFilter.tsx

@@ -1,3 +1,4 @@
+import type { Column } from '@tanstack/table-core';
 import clsx from 'clsx';
 import { type JSX, useMemo } from 'preact/compat';
 import Dropdown from 'react-bootstrap/Dropdown';
@@ -11,38 +12,41 @@ function defaultRenderValueLabel<T>({ value }: { value: T }) {
  * Uses AND logic: rows must contain ALL selected values to match.
  *
  * @param params
- * @param params.columnId - The ID of the column
- * @param params.columnLabel - The label of the column, e.g. "Rubric Items"
- * @param params.allColumnValues - All possible values that can appear in the column
+ * @param params.column - The TanStack Table column object
+ * @param params.allColumnValues - All possible values that can appear in the column filter
  * @param params.renderValueLabel - A function that renders the label for a value
- * @param params.columnValuesFilter - The current state of the column filter
- * @param params.setColumnValuesFilter - A function that sets the state of the column filter
  */
-export function MultiSelectColumnFilter<T extends readonly any[]>({
-  columnId,
-  columnLabel,
+export function MultiSelectColumnFilter<TData, TValue>({
+  column,
   allColumnValues,
   renderValueLabel = defaultRenderValueLabel,
-  columnValuesFilter,
-  setColumnValuesFilter,
 }: {
-  columnId: string;
-  columnLabel: string;
-  allColumnValues: T;
-  renderValueLabel?: (props: { value: T[number]; isSelected: boolean }) => JSX.Element;
-  columnValuesFilter: T[number][];
-  setColumnValuesFilter: (value: T[number][]) => void;
+  column: Column<TData, TValue>;
+  /** In some cases, the filter values are not the same as the column values, but `TValue` is a good estimation. */
+  allColumnValues: TValue[];
+  renderValueLabel?: (props: { value: TValue; isSelected: boolean }) => JSX.Element;
 }) {
-  const selected = useMemo(() => new Set(columnValuesFilter), [columnValuesFilter]);
+  const columnId = column.id;
 
-  const toggleSelected = (value: T[number]) => {
+  const label =
+    column.columnDef.meta?.label ??
+    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
+
+  const columnValuesFilter = column.getFilterValue() as TValue[] | undefined;
+
+  const selected = useMemo(() => {
+    return new Set(columnValuesFilter);
+  }, [columnValuesFilter]);
+
+  const toggleSelected = (value: TValue) => {
     const set = new Set(selected);
     if (set.has(value)) {
       set.delete(value);
     } else {
       set.add(value);
     }
-    setColumnValuesFilter(Array.from(set));
+    const newValue = Array.from(set);
+    column.setFilterValue(newValue);
   };
 
   const hasActiveFilter = selected.size > 0;
@@ -53,8 +57,8 @@ export function MultiSelectColumnFilter<T extends readonly any[]>({
         variant="link"
         class="text-muted p-0"
         id={`filter-${columnId}`}
-        aria-label={`Filter ${columnLabel.toLowerCase()}`}
-        title={`Filter ${columnLabel.toLowerCase()}`}
+        aria-label={`Filter ${label.toLowerCase()}`}
+        title={`Filter ${label.toLowerCase()}`}
       >
         <i
           class={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
@@ -62,23 +66,32 @@ export function MultiSelectColumnFilter<T extends readonly any[]>({
         />
       </Dropdown.Toggle>
       <Dropdown.Menu class="p-0">
-        <div class="p-3" style={{ minWidth: '250px' }}>
+        <div class="p-3 pb-0" style={{ minWidth: '250px' }}>
           <div class="d-flex align-items-center justify-content-between mb-2">
-            <div class="fw-semibold">{columnLabel}</div>
+            <div class="fw-semibold">{label}</div>
             <button
               type="button"
               class="btn btn-link btn-sm text-decoration-none p-0"
-              onClick={() => setColumnValuesFilter([])}
+              onClick={() => column.setFilterValue([])}
             >
               Clear
             </button>
           </div>
+        </div>
 
-          <div class="list-group list-group-flush">
-            {allColumnValues.map((value) => {
-              const isSelected = selected.has(value);
-              return (
-                <div key={value} class="list-group-item d-flex align-items-center gap-3 px-0">
+        <div
+          class="list-group list-group-flush"
+          style={{
+            // This is needed to prevent the last item's background from covering
+            // the dropdown's border radius.
+            '--bs-list-group-bg': 'transparent',
+          }}
+        >
+          {allColumnValues.map((value) => {
+            const isSelected = selected.has(value);
+            return (
+              <div key={value} class="list-group-item d-flex align-items-center gap-3">
+                <div class="form-check">
                   <input
                     class="form-check-input"
                     type="checkbox"
@@ -93,9 +106,9 @@ export function MultiSelectColumnFilter<T extends readonly any[]>({
                     })}
                   </label>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
         </div>
       </Dropdown.Menu>
     </Dropdown>

package/src/components/NumericInputColumnFilter.test.ts

@@ -58,45 +58,93 @@ describe('numericColumnFilterFn', () => {
   });
 
   it('should filter with equals operator', () => {
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '=5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '4')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '=5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '4', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should filter with less than operator', () => {
-    expect(numericColumnFilterFn(createMockRow(3), 'col', '<5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '<5')).toBe(false);
-    expect(numericColumnFilterFn(createMockRow(7), 'col', '<5')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(3), 'col', { filterValue: '<5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '<5', emptyOnly: false }),
+    ).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(7), 'col', { filterValue: '<5', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should filter with greater than operator', () => {
-    expect(numericColumnFilterFn(createMockRow(7), 'col', '>5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '>5')).toBe(false);
-    expect(numericColumnFilterFn(createMockRow(3), 'col', '>5')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(7), 'col', { filterValue: '>5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '>5', emptyOnly: false }),
+    ).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(3), 'col', { filterValue: '>5', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should filter with less than or equal operator', () => {
-    expect(numericColumnFilterFn(createMockRow(3), 'col', '<=5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '<=5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(7), 'col', '<=5')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(3), 'col', { filterValue: '<=5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '<=5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(7), 'col', { filterValue: '<=5', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should filter with greater than or equal operator', () => {
-    expect(numericColumnFilterFn(createMockRow(7), 'col', '>=5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '>=5')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(3), 'col', '>=5')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(7), 'col', { filterValue: '>=5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '>=5', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(3), 'col', { filterValue: '>=5', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should return true for invalid or empty filter', () => {
-    expect(numericColumnFilterFn(createMockRow(5), 'col', '')).toBe(true);
-    expect(numericColumnFilterFn(createMockRow(5), 'col', 'invalid')).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '', emptyOnly: false }),
+    ).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: 'invalid', emptyOnly: false }),
+    ).toBe(true);
   });
 
   it('should return false for null values when filter is active', () => {
-    expect(numericColumnFilterFn(createMockRow(null), 'col', '>5')).toBe(false);
+    expect(
+      numericColumnFilterFn(createMockRow(null), 'col', { filterValue: '>5', emptyOnly: false }),
+    ).toBe(false);
   });
 
   it('should return true for null values when filter is empty', () => {
-    expect(numericColumnFilterFn(createMockRow(null), 'col', '')).toBe(true);
+    expect(
+      numericColumnFilterFn(createMockRow(null), 'col', { filterValue: '', emptyOnly: false }),
+    ).toBe(true);
+  });
+  it('should return true for null values when emptyOnly is true', () => {
+    expect(
+      numericColumnFilterFn(createMockRow(null), 'col', { filterValue: '', emptyOnly: true }),
+    ).toBe(true);
+  });
+  it('should return false for set values when emptyOnly is true', () => {
+    expect(
+      numericColumnFilterFn(createMockRow(5), 'col', { filterValue: '', emptyOnly: true }),
+    ).toBe(false);
   });
 });