@prairielearn/ui 1.1.2 → 1.3.0

package/dist/index.d.ts

@@ -1,5 +1,8 @@
-export { TanstackTable, TanstackTableCard } from './components/TanstackTable.js';
+export { TanstackTable, TanstackTableCard, TanstackTableEmptyState, } from './components/TanstackTable.js';
 export { ColumnManager } from './components/ColumnManager.js';
 export { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';
 export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';
+export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
+export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, } from './components/NumericInputColumnFilter.js';
+export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/index.js

@@ -1,5 +1,8 @@
-export { TanstackTable, TanstackTableCard } from './components/TanstackTable.js';
+export { TanstackTable, TanstackTableCard, TanstackTableEmptyState, } from './components/TanstackTable.js';
 export { ColumnManager } from './components/ColumnManager.js';
 export { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';
 export { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';
+export { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';
+export { NumericInputColumnFilter, parseNumericFilter, numericColumnFilterFn, } from './components/NumericInputColumnFilter.js';
+export { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC","sourcesContent":["export { TanstackTable, TanstackTableCard } from './components/TanstackTable.js';\nexport { ColumnManager } from './components/ColumnManager.js';\nexport { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';\nexport { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC","sourcesContent":["export {\n  TanstackTable,\n  TanstackTableCard,\n  TanstackTableEmptyState,\n} from './components/TanstackTable.js';\nexport { ColumnManager } from './components/ColumnManager.js';\nexport { TanstackTableDownloadButton } from './components/TanstackTableDownloadButton.js';\nexport { CategoricalColumnFilter } from './components/CategoricalColumnFilter.js';\nexport { MultiSelectColumnFilter } from './components/MultiSelectColumnFilter.js';\nexport {\n  NumericInputColumnFilter,\n  parseNumericFilter,\n  numericColumnFilterFn,\n} from './components/NumericInputColumnFilter.js';\nexport { useShiftClickCheckbox } from './components/useShiftClickCheckbox.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/ui",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
   },
   "scripts": {
     "build": "tsc && tscp",
-    "dev": "tsc --watch --preserveWatchOutput & tscp --watch"
+    "dev": "tsc --watch --preserveWatchOutput & tscp --watch",
+    "test": "vitest run --coverage"
   },
   "dependencies": {
     "@prairielearn/browser-utils": "^2.5.1",
@@ -26,8 +27,9 @@
   },
   "devDependencies": {
     "@prairielearn/tsconfig": "^0.0.0",
-    "@types/node": "^22.18.13",
+    "@types/node": "^22.19.0",
     "typescript": "^5.9.3",
-    "typescript-cp": "^0.1.9"
+    "typescript-cp": "^0.1.9",
+    "vitest": "^4.0.7"
   }
 }

package/src/components/CategoricalColumnFilter.tsx

@@ -70,7 +70,7 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
     <Dropdown align="end">
       <Dropdown.Toggle
         variant="link"
-        class="text-muted p-0 ms-2"
+        class="text-muted p-0"
         id={`filter-${columnId}`}
         aria-label={`Filter ${columnLabel.toLowerCase()}`}
         title={`Filter ${columnLabel.toLowerCase()}`}
@@ -81,40 +81,70 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
         />
       </Dropdown.Toggle>
       <Dropdown.Menu class="p-0">
-        <div class="p-3">
+        <div class="p-3 pb-0">
           <div class="d-flex align-items-center justify-content-between mb-2">
             <div class="fw-semibold">{columnLabel}</div>
             <button
               type="button"
-              class="btn btn-link btn-sm text-decoration-none"
-              onClick={() => apply(mode, new Set())}
+              class={clsx('btn btn-link btn-sm text-decoration-none', {
+                // Hide the clear button if no filters are applied.
+                // Use `visibility` instead of conditional rendering to avoid layout shift.
+                invisible: selected.size === 0 && mode === 'include',
+              })}
+              onClick={() => apply('include', new Set())}
             >
               Clear
             </button>
           </div>
 
-          <div class="btn-group w-100 mb-2" role="group" aria-label="Include or exclude values">
-            <button
-              type="button"
-              class={clsx('btn', mode === 'include' ? 'btn-primary' : 'btn-outline-secondary')}
-              onClick={() => apply('include', selected)}
-            >
-              Include
-            </button>
-            <button
-              type="button"
-              class={clsx('btn', mode === 'exclude' ? 'btn-primary' : 'btn-outline-secondary')}
-              onClick={() => apply('exclude', selected)}
-            >
-              Exclude
-            </button>
+          <div class="btn-group btn-group-sm w-100 mb-2">
+            <input
+              type="radio"
+              class="btn-check"
+              name={`filter-${columnId}-options`}
+              id={`filter-${columnId}-include`}
+              autocomplete="off"
+              checked={mode === 'include'}
+              onChange={() => apply('include', selected)}
+            />
+            <label class="btn btn-outline-primary" for={`filter-${columnId}-include`}>
+              <span class="text-nowrap">
+                {mode === 'include' && <i class="bi bi-check-lg me-1" aria-hidden="true" />}
+                Include
+              </span>
+            </label>
+
+            <input
+              type="radio"
+              class="btn-check"
+              name={`filter-${columnId}-options`}
+              id={`filter-${columnId}-exclude`}
+              autocomplete="off"
+              checked={mode === 'exclude'}
+              onChange={() => apply('exclude', selected)}
+            />
+            <label class="btn btn-outline-primary" for={`filter-${columnId}-exclude`}>
+              <span class="text-nowrap">
+                {mode === 'exclude' && <i class="bi bi-check-lg me-1" aria-hidden="true" />}
+                Exclude
+              </span>
+            </label>
           </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">
+        <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"
@@ -129,9 +159,9 @@ export function CategoricalColumnFilter<T extends readonly any[]>({
                     })}
                   </label>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
         </div>
       </Dropdown.Menu>
     </Dropdown>

package/src/components/ColumnManager.tsx

@@ -2,59 +2,43 @@ import { type Column, type Table } from '@tanstack/react-table';
 import { 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;
   onTogglePin: (columnId: string) => void;
-  onClearElementFocus: () => void;
 }
 
 function ColumnMenuItem<RowDataModel>({
   column,
   hidePinButton = false,
   onTogglePin,
-  onClearElementFocus,
 }: ColumnMenuItemProps<RowDataModel>) {
-  const pinButtonRef = useRef<HTMLButtonElement>(null);
-
   if (!column.getCanHide() && !column.getCanPin()) return null;
 
-  const header = typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+  // Use meta.label if available, otherwise fall back to header or column.id
+  const header =
+    (column.columnDef.meta as any)?.label ??
+    (typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id);
 
   return (
-    <Dropdown.Item
-      key={column.id}
-      as="div"
-      class="px-2 py-1 d-flex align-items-center justify-content-between"
-      onKeyDown={onClearElementFocus}
-    >
+    <div key={column.id} class="px-2 py-1 d-flex align-items-center justify-content-between">
       <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.
@@ -65,33 +49,22 @@ function ColumnMenuItem<RowDataModel>({
           }
           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);
-          }}
+          onClick={() => onTogglePin(column.id)}
         >
           <i class={`bi ${column.getIsPinned() ? 'bi-x' : 'bi-snow'}`} aria-hidden="true" />
         </button>
       )}
-    </Dropdown.Item>
+    </div>
   );
 }
 
-export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataModel> }) {
+export function ColumnManager<RowDataModel>({
+  table,
+  id,
+}: {
+  table: Table<RowDataModel>;
+  id: string;
+}) {
   const [activeElementId, setActiveElementId] = useState<string | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -149,11 +122,15 @@ 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
+        variant="tanstack-table"
+        id={id}
+        // eslint-disable-next-line @eslint-react/no-forbidden-props
+        className="tanstack-table-focusable-shadow"
+      >
+        <i class="bi bi-view-list me-2" aria-hidden="true" /> View{' '}
       </Dropdown.Toggle>
-      <Dropdown.Menu>
+      <Dropdown.Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>
         {pinnedColumns.length > 0 && (
           <>
             <div class="px-2 py-1 text-muted small" role="presentation">
@@ -167,7 +144,6 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
                     column={column}
                     hidePinButton={index !== pinnedColumns.length - 1}
                     onTogglePin={handleTogglePin}
-                    onClearElementFocus={() => setActiveElementId(null)}
                   />
                 );
               })}
@@ -185,7 +161,6 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
                     column={column}
                     hidePinButton={index !== 0}
                     onTogglePin={handleTogglePin}
-                    onClearElementFocus={() => setActiveElementId(null)}
                   />
                 );
               })}
@@ -203,7 +178,7 @@ export function ColumnManager<RowDataModel>({ table }: { table: Table<RowDataMod
               onClick={() => {
                 table.resetColumnVisibility();
                 table.resetColumnPinning();
-                setActiveElementId('column-manager-button');
+                setActiveElementId(id);
               }}
             >
               <i class="bi bi-arrow-counterclockwise me-2" aria-hidden="true" />

package/src/components/MultiSelectColumnFilter.tsx

@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import { type JSX, useMemo } from 'preact/compat';
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function defaultRenderValueLabel<T>({ value }: { value: T }) {
+  return <span>{String(value)}</span>;
+}
+
+/**
+ * A component that allows the user to filter a column containing arrays of values.
+ * 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.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,
+  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;
+}) {
+  const selected = useMemo(() => new Set(columnValuesFilter), [columnValuesFilter]);
+
+  const toggleSelected = (value: T[number]) => {
+    const set = new Set(selected);
+    if (set.has(value)) {
+      set.delete(value);
+    } else {
+      set.add(value);
+    }
+    setColumnValuesFilter(Array.from(set));
+  };
+
+  const hasActiveFilter = selected.size > 0;
+
+  return (
+    <Dropdown align="end">
+      <Dropdown.Toggle
+        variant="link"
+        class="text-muted p-0"
+        id={`filter-${columnId}`}
+        aria-label={`Filter ${columnLabel.toLowerCase()}`}
+        title={`Filter ${columnLabel.toLowerCase()}`}
+      >
+        <i
+          class={clsx('bi', hasActiveFilter ? ['bi-funnel-fill', 'text-primary'] : 'bi-funnel')}
+          aria-hidden="true"
+        />
+      </Dropdown.Toggle>
+      <Dropdown.Menu class="p-0">
+        <div class="p-3" style={{ minWidth: '250px' }}>
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <div class="fw-semibold">{columnLabel}</div>
+            <button
+              type="button"
+              class="btn btn-link btn-sm text-decoration-none p-0"
+              onClick={() => setColumnValuesFilter([])}
+            >
+              Clear
+            </button>
+          </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">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    checked={isSelected}
+                    id={`${columnId}-${value}`}
+                    onChange={() => toggleSelected(value)}
+                  />
+                  <label class="form-check-label fw-normal" for={`${columnId}-${value}`}>
+                    {renderValueLabel({
+                      value,
+                      isSelected,
+                    })}
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

package/src/components/NumericInputColumnFilter.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest';
+
+import { numericColumnFilterFn, parseNumericFilter } from './NumericInputColumnFilter.js';
+
+describe('parseNumericFilter', () => {
+  it('should parse equals operator', () => {
+    expect(parseNumericFilter('5')).toEqual({ operator: '=', value: 5 });
+    expect(parseNumericFilter('=5')).toEqual({ operator: '=', value: 5 });
+    expect(parseNumericFilter('= 5')).toEqual({ operator: '=', value: 5 });
+  });
+
+  it('should parse less than operator', () => {
+    expect(parseNumericFilter('<5')).toEqual({ operator: '<', value: 5 });
+    expect(parseNumericFilter('< 5')).toEqual({ operator: '<', value: 5 });
+  });
+
+  it('should parse greater than operator', () => {
+    expect(parseNumericFilter('>5')).toEqual({ operator: '>', value: 5 });
+    expect(parseNumericFilter('> 5')).toEqual({ operator: '>', value: 5 });
+  });
+
+  it('should parse less than or equal operator', () => {
+    expect(parseNumericFilter('<=5')).toEqual({ operator: '<=', value: 5 });
+    expect(parseNumericFilter('<= 5')).toEqual({ operator: '<=', value: 5 });
+  });
+
+  it('should parse greater than or equal operator', () => {
+    expect(parseNumericFilter('>=5')).toEqual({ operator: '>=', value: 5 });
+    expect(parseNumericFilter('>= 5')).toEqual({ operator: '>=', value: 5 });
+  });
+
+  it('should handle decimals', () => {
+    expect(parseNumericFilter('5.5')).toEqual({ operator: '=', value: 5.5 });
+    expect(parseNumericFilter('>3.14')).toEqual({ operator: '>', value: 3.14 });
+  });
+
+  it('should handle negative numbers', () => {
+    expect(parseNumericFilter('-5')).toEqual({ operator: '=', value: -5 });
+    expect(parseNumericFilter('<-3')).toEqual({ operator: '<', value: -3 });
+  });
+
+  it('should return null for invalid input', () => {
+    expect(parseNumericFilter('')).toBeNull();
+    expect(parseNumericFilter('   ')).toBeNull();
+    expect(parseNumericFilter('abc')).toBeNull();
+    expect(parseNumericFilter('>>')).toBeNull();
+    expect(parseNumericFilter('5.5.5')).toBeNull();
+  });
+
+  it('should handle whitespace', () => {
+    expect(parseNumericFilter('  >  5  ')).toEqual({ operator: '>', value: 5 });
+  });
+});
+
+describe('numericColumnFilterFn', () => {
+  const createMockRow = (value: number | null) => ({
+    getValue: () => value,
+  });
+
+  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);
+  });
+
+  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);
+  });
+
+  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);
+  });
+
+  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);
+  });
+
+  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);
+  });
+
+  it('should return true for invalid or empty filter', () => {
+    expect(numericColumnFilterFn(createMockRow(5), 'col', '')).toBe(true);
+    expect(numericColumnFilterFn(createMockRow(5), 'col', 'invalid')).toBe(true);
+  });
+
+  it('should return false for null values when filter is active', () => {
+    expect(numericColumnFilterFn(createMockRow(null), 'col', '>5')).toBe(false);
+  });
+
+  it('should return true for null values when filter is empty', () => {
+    expect(numericColumnFilterFn(createMockRow(null), 'col', '')).toBe(true);
+  });
+});