diff --git a/CLAUDE-TS-conversion-guide.md b/CLAUDE-TS-conversion-guide.md
new file mode 100644
index 0000000000..42362545e5
--- /dev/null
+++ b/CLAUDE-TS-conversion-guide.md
@@ -0,0 +1,736 @@
+# TypeScript Conversion & Type Safety Guide
+
+This guide documents best practices, lessons learned, and guidelines for converting JavaScript to TypeScript and improving type safety in the VEuPathDB web monorepo.
+
+## Table of Contents
+
+1. [JavaScript to TypeScript Conversion](#javascript-to-typescript-conversion)
+2. [Reducing Unsafe Type Assertions](#reducing-unsafe-type-assertions)
+3. [Common Patterns in This Codebase](#common-patterns-in-this-codebase)
+4. [Specific Component Guidelines](#specific-component-guidelines)
+5. [Testing and Verification](#testing-and-verification)
+
+---
+
+## JavaScript to TypeScript Conversion
+
+### General Principles
+
+**Goal:** Convert JavaScript files to TypeScript while maintaining 100% functional compatibility and zero runtime behavior changes.
+
+**Key Rules:**
+
+- Keep class-based components as class-based (don't convert to functional)
+- Keep functional components as functional (don't convert to class-based)
+- Look for existing TypeScript types in the codebase before creating new ones
+- Remove PropTypes in favor of TypeScript interfaces
+- Commit and push regularly to avoid losing work
+
+### Conversion Process
+
+#### 1. Preparation
+
+```bash
+# Find all JavaScript files to convert
+find packages/libs/PACKAGE/src -name "*.js" -o -name "*.jsx"
+
+# Check for existing types
+grep -r "interface\|type" packages/libs/PACKAGE/src --include="*.ts" --include="*.d.ts"
+```
+
+#### 2. File-by-File Conversion
+
+**For each JavaScript file:**
+
+1. **Read the file** to understand its structure
+2. **Identify dependencies** and their types
+3. **Rename the file** using `git mv` to preserve history:
+
+   ```bash
+   # For JSX files
+   git mv Component.jsx Component.tsx
+
+   # For plain JavaScript files
+   git mv utility.js utility.ts
+   ```
+
+4. **Update the file** with proper TypeScript types:
+   - Import types from existing TypeScript files where available
+   - Create interfaces for component props and state
+   - Add type annotations to function parameters and return values
+   - Remove PropTypes imports and definitions
+5. **Verify compilation** (see Testing and Verification section below)
+
+**Important:** Always use `git mv` instead of renaming files manually. This preserves git history and makes it easier to track changes across the rename.
+
+#### 3. Handling Common Patterns
+
+**React Components:**
+
+```typescript
+// Class component
+interface MyComponentProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+interface MyComponentState {
+  isExpanded: boolean;
+}
+
+class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+  constructor(props: MyComponentProps) {
+    super(props);
+    this.state = { isExpanded: false };
+  }
+}
+```
+
+**Functional Components:**
+
+```typescript
+interface MyFunctionProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const MyFunction: React.FC<MyFunctionProps> = ({ value, onChange }) => {
+  // implementation
+};
+```
+
+**Generic Components:**
+
+```typescript
+// For components that work with different data types
+interface TableProps<Row> {
+  rows: Row[];
+  columns: Column<Row>[];
+}
+
+class Table<Row> extends React.Component<TableProps<Row>> {
+  // implementation
+}
+```
+
+#### 4. PropTypes Migration
+
+**Before (JavaScript):**
+
+```javascript
+import PropTypes from 'prop-types';
+
+MyComponent.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  optional: PropTypes.number,
+};
+```
+
+**After (TypeScript):**
+
+```typescript
+interface MyComponentProps {
+  value: string;
+  onChange: (value: string) => void;
+  optional?: number;
+}
+```
+
+### Common Type Imports
+
+**WDK Model Types:**
+
+```typescript
+import {
+  RecordClass,
+  RecordInstance,
+  Question,
+  AttributeField,
+  AttributeValue,
+  LinkAttributeValue,
+  TableField,
+} from '../Utils/WdkModel';
+```
+
+**Mesa Types:**
+
+```typescript
+import type {
+  MesaColumn,
+  MesaStateProps,
+} from '@veupathdb/coreui/lib/components/Mesa/types';
+```
+
+**Category/Ontology Types:**
+
+```typescript
+import {
+  CategoryTreeNode,
+  IndividualNode,
+  CategoryNode,
+  isIndividual,
+} from '../Utils/CategoryUtils';
+```
+
+---
+
+## Reducing Unsafe Type Assertions
+
+### Philosophy
+
+Treat `as` as a last resort. The goal is to have TypeScript infer correct types through proper type annotations, not to force types through assertions.
+
+### Decision Tree for Each `as Something`
+
+```
+1. Can I fix types at the source?
+   ├─ Yes → Add/improve type annotations, generics, discriminated unions
+   └─ No → Continue to 2
+
+2. Is this from untyped/poorly typed code (3rd-party, JSON, DOM)?
+   ├─ Yes → Use runtime checks + type guards
+   └─ No → Continue to 3
+
+3. Is this an allowed case?
+   ├─ Yes (unknown/any boundary, DOM, 3rd-party) → Keep but minimize scope
+   └─ No → Must refactor to remove
+```
+
+### Fix Types at the Source
+
+**❌ Bad: Using `as` to work around poor types**
+
+```typescript
+const result = myFunc() as MyType;
+```
+
+**✅ Good: Add proper return type to function**
+
+```typescript
+function myFunc(): MyType {
+  // implementation
+}
+const result = myFunc(); // Type inferred correctly
+```
+
+**❌ Bad: Casting array initialization**
+
+```typescript
+const items = [] as MyType[];
+```
+
+**✅ Good: Use generic type parameter**
+
+```typescript
+// Option 1: Type annotation
+const items: MyType[] = [];
+
+// Option 2: Generic reduce
+array.reduce<MyType[]>((acc, item) => {
+  // ...
+}, []);
+```
+
+**❌ Bad: Asserting object literals**
+
+```typescript
+const config = {
+  name: 'test',
+  value: 42,
+} as Config;
+```
+
+**✅ Good: Use `satisfies` for validation**
+
+```typescript
+const config = {
+  name: 'test',
+  value: 42,
+} satisfies Config;
+```
+
+### Use Runtime Checks and Type Guards
+
+**❌ Bad: Blind assertion**
+
+```typescript
+const value = data.value as string;
+```
+
+**✅ Good: Runtime check first**
+
+```typescript
+const value = typeof data.value === 'string' ? data.value : '';
+```
+
+**❌ Bad: Assuming property exists**
+
+```typescript
+const text = (obj as any).displayText;
+```
+
+**✅ Good: Type guard with proper checks**
+
+```typescript
+const text =
+  typeof obj === 'object' && obj !== null && 'displayText' in obj
+    ? (obj as { displayText: string }).displayText
+    : '';
+```
+
+**✅ Better: Use proper type from WdkModel**
+
+```typescript
+import { LinkAttributeValue } from '../Utils/WdkModel';
+
+const text =
+  typeof obj === 'object' && obj !== null && 'displayText' in obj
+    ? (obj as LinkAttributeValue).displayText
+    : '';
+```
+
+### Allowed `as` Cases
+
+**1. Casting from `unknown` or `any` at boundaries (after runtime checks)**
+
+```typescript
+function parseData(json: unknown): MyData {
+  // Runtime validation
+  if (typeof json !== 'object' || json === null) {
+    throw new Error('Invalid data');
+  }
+  // Now safe to assert
+  return json as MyData;
+}
+```
+
+**2. DOM interactions with specific element types**
+
+```typescript
+const button = document.getElementById('myButton') as HTMLButtonElement;
+// Acceptable if you know the element exists and is a button
+```
+
+**3. Third-party libraries without accurate typings**
+
+```typescript
+// Wrap in a small helper rather than scattering assertions
+function safeLibCall(input: string): MyType {
+  return poorlyTypedLib.method(input) as MyType;
+}
+```
+
+**4. Non-null assertions after explicit checks**
+
+```typescript
+if (!map.has(key)) {
+  map.set(key, []);
+}
+const array = map.get(key)!; // Safe - we just set it
+```
+
+### Common Patterns to Improve
+
+**Pattern: Discriminated Unions**
+
+❌ Bad:
+
+```typescript
+type Filter = MemberFilter | RangeFilter | MultiFilter;
+
+function process(filter: Filter) {
+  if ((filter.value as MultiFilterValue).filters) {
+    // use as MultiFilter
+  }
+}
+```
+
+✅ Good:
+
+```typescript
+type Filter =
+  | { type: 'member'; value: MemberValue }
+  | { type: 'range'; value: RangeValue }
+  | { type: 'multi'; value: MultiFilterValue };
+
+function process(filter: Filter) {
+  if (filter.type === 'multi') {
+    // TypeScript knows filter.value is MultiFilterValue
+    filter.value.filters.forEach(/* ... */);
+  }
+}
+```
+
+**Pattern: Generic Reduce**
+
+❌ Bad:
+
+```typescript
+const result = items.reduce((acc, item) => {
+  return { ...acc, [item.id]: item };
+}, {} as Record<string, Item>);
+```
+
+✅ Good:
+
+```typescript
+const result = items.reduce<Record<string, Item>>((acc, item) => {
+  return { ...acc, [item.id]: item };
+}, {});
+```
+
+---
+
+## Common Patterns in This Codebase
+
+### Mesa Component Pattern
+
+Mesa is now fully TypeScript with generic types. Use them!
+
+**✅ Correct Mesa Usage:**
+
+```typescript
+import { Mesa } from '@veupathdb/coreui/lib/components/Mesa';
+import type {
+  MesaColumn,
+  MesaStateProps,
+} from '@veupathdb/coreui/lib/components/Mesa/types';
+
+// Define your row type
+type MyRow = {
+  id: string;
+  name: string;
+  value: number;
+};
+
+// Create properly typed state
+const tableState: MesaStateProps<MyRow, string> = {
+  rows: myRows,
+  columns: myColumns as MesaColumn<MyRow, string>[],
+  eventHandlers: {
+    onSort: (column: MesaColumn<MyRow>, direction: string) => {
+      // TypeScript knows column.key is string
+    },
+  },
+  uiState: {
+    sort: {
+      columnKey: sortColumn,
+      direction: 'asc' as 'asc' | 'desc',
+    },
+  },
+  options: {
+    toolbar: true,
+  },
+};
+
+// Use without assertion
+<Mesa state={tableState} />;
+```
+
+### WDK Model Pattern
+
+**Attribute Values:**
+
+```typescript
+import { AttributeValue, LinkAttributeValue } from '../Utils/WdkModel';
+
+// AttributeValue is: string | LinkAttributeValue | null
+
+function renderValue(value: AttributeValue) {
+  if (typeof value === 'object' && value !== null && 'displayText' in value) {
+    // TypeScript knows this is LinkAttributeValue
+    return <a href={value.url}>{value.displayText}</a>;
+  }
+  // TypeScript knows this is string | null
+  return value;
+}
+```
+
+### Category Tree Pattern
+
+**Use type guards:**
+
+```typescript
+import {
+  CategoryTreeNode,
+  IndividualNode,
+  isIndividual,
+} from '../Utils/CategoryUtils';
+
+function processNode(node: CategoryTreeNode) {
+  if (isIndividual(node)) {
+    // TypeScript knows node is IndividualNode
+    const ref = node.wdkReference;
+    // ...
+  }
+}
+```
+
+### HOC Wrapping Pattern
+
+Higher-order components often need assertions. This is acceptable:
+
+```typescript
+import { wrappable, pure } from '../Utils/ComponentUtils';
+
+export default wrappable(pure(MyComponent as any));
+// Acceptable - HOC typing is complex and architectural
+```
+
+### Props Spreading Pattern
+
+When spreading props to components with different interfaces:
+
+```typescript
+// If the interfaces genuinely differ, assertion may be needed
+<ChildComponent {...(props as ChildComponentProps)} />
+
+// But prefer explicit prop passing when possible
+<ChildComponent
+  prop1={props.prop1}
+  prop2={props.prop2}
+/>
+```
+
+---
+
+## Specific Component Guidelines
+
+### Converting Mesa Components
+
+Mesa components use generics extensively. When converting:
+
+1. **Identify the Row type** - what data is being displayed?
+2. **Identify the Key type** - usually `string` for column keys
+3. **Use generic parameters** everywhere:
+
+   ```typescript
+   interface MyComponentProps<Row> extends MesaStateProps<Row> {
+     extraProp: string;
+   }
+
+   class MyComponent<Row> extends Component<MyComponentProps<Row>> {
+     // ...
+   }
+   ```
+
+### Converting Record Components
+
+Record components work with WDK model types:
+
+```typescript
+import {
+  RecordClass,
+  RecordInstance,
+  AttributeField,
+  TableField,
+} from '../Utils/WdkModel';
+
+interface RecordComponentProps {
+  record: RecordInstance;
+  recordClass: RecordClass;
+  attributes: AttributeField[];
+  tables: TableField[];
+}
+```
+
+### Converting Form Components
+
+Form components often have complex event handlers:
+
+```typescript
+interface FormProps {
+  value: FormData;
+  onChange: (value: FormData) => void;
+  onSubmit: (value: FormData) => Promise<void>;
+}
+
+class Form extends Component<FormProps> {
+  handleChange = (field: string) => (value: string) => {
+    this.props.onChange({
+      ...this.props.value,
+      [field]: value,
+    });
+  };
+
+  handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await this.props.onSubmit(this.props.value);
+  };
+}
+```
+
+---
+
+## Testing and Verification
+
+### Before Committing
+
+**1. Install Dependencies (first time only):**
+
+```bash
+# Download and install all dependencies (can take a few minutes)
+yarn
+```
+
+**2. Build and Verify TypeScript Compilation:**
+
+```bash
+# Build wdk-client and its dependencies (cached if no changes)
+yarn nx build-npm-modules @veupathdb/wdk-client
+
+# Or, if dependencies are already built, build just wdk-client:
+yarn workspace @veupathdb/wdk-client build-npm-modules
+```
+
+Must complete successfully with no errors.
+
+**3. Check for Remaining Issues:**
+
+```bash
+# Count 'as any' assertions
+grep -r "as any" packages/libs/PACKAGE/src --include="*.ts" --include="*.tsx" | wc -l
+
+# Find files with most assertions
+grep -r " as " packages/libs/PACKAGE/src --include="*.ts" --include="*.tsx" | \
+  grep -v "as const" | cut -d: -f1 | sort | uniq -c | sort -rn | head -20
+```
+
+**3. Runtime Testing:**
+
+- If possible, run the application and test affected features
+- Check browser console for errors
+- Verify no new warnings
+
+### Commit Strategy
+
+**Commit frequently with clear messages:**
+
+```bash
+# Good commit messages
+git commit -m "Convert Mesa Utils to TypeScript (6 files)"
+git commit -m "Fix TypeScript errors in RecordTable (batch 1/3)"
+git commit -m "Reduce 'as any' assertions in Answer components"
+git commit -m "Improve type safety in Operations.tsx using generics"
+```
+
+**Batch related changes:**
+
+- Group by component/feature area
+- Keep commits focused and atomic
+- Push regularly to avoid losing work
+
+---
+
+## Quick Reference
+
+### Type Import Locations
+
+| Type                                        | Import Path                                   |
+| ------------------------------------------- | --------------------------------------------- |
+| `RecordClass`, `Question`, `AttributeField` | `../Utils/WdkModel`                           |
+| `MesaColumn`, `MesaStateProps`              | `@veupathdb/coreui/lib/components/Mesa/types` |
+| `CategoryTreeNode`, `isIndividual`          | `../Utils/CategoryUtils`                      |
+| `Step`, `StrategyDetails`                   | `../Utils/WdkUser`                            |
+
+### Common TypeScript Patterns
+
+```typescript
+// Generic reduce
+array.reduce<ResultType>((acc, item) => { ... }, initialValue)
+
+// Type guard
+function isType(obj: unknown): obj is MyType {
+  return typeof obj === 'object' && obj !== null && 'property' in obj;
+}
+
+// Discriminated union
+type Result =
+  | { success: true; data: Data }
+  | { success: false; error: Error };
+
+// Non-null assertion (after check)
+if (map.has(key)) {
+  const value = map.get(key)!;
+}
+
+// Satisfies (validation without widening)
+const config = { ... } satisfies Config;
+
+// Optional chaining + nullish coalescing
+const value = obj?.property?.nested ?? defaultValue;
+```
+
+---
+
+## Lessons Learned from This Session
+
+### What Worked Well
+
+1. **Parallel agent execution** for converting multiple files simultaneously
+2. **Systematic batching** of error fixes (10-15 errors per batch)
+3. **Using generic type parameters** instead of `as` assertions
+4. **Starting with utilities** before components (bottom-up approach)
+5. **Regular commits and pushes** to preserve progress
+
+### Common Pitfalls to Avoid
+
+1. **Don't skip reading existing type definitions** - they often already exist
+2. **Don't use `as any` as a first resort** - understand why the type doesn't match
+3. **Don't change class/functional component style** during conversion
+4. **Don't batch too many changes** - keep commits focused
+5. **Don't forget to delete old JavaScript files** after conversion
+
+### Key Insights
+
+- **Mesa's type system** is comprehensive - use it rather than fighting it
+- **WDK Model types** are well-defined - import and use them
+- **Runtime checks before assertions** make code safer and more maintainable
+- **Generic type parameters** are almost always better than type assertions
+- **HOC and component spreading** are the main remaining assertion challenges
+
+---
+
+## Future Work Opportunities
+
+### High Priority
+
+- Convert remaining JavaScript in `web-common` packages
+- Improve discriminated union patterns in filter components
+- Add type guards for complex WDK model interactions
+
+### Medium Priority
+
+- Refactor HOC patterns for better typing
+- Create utility type guards for common patterns
+- Document component-specific type patterns
+
+### Low Priority
+
+- Review and improve remaining `as` assertions at boundaries
+- Consider adding runtime validation libraries (e.g., zod, io-ts)
+- Explore stricter TypeScript compiler options
+
+---
+
+## Getting Help
+
+**When stuck on a type issue:**
+
+1. Check this guide for similar patterns
+2. Search the codebase for existing solutions: `grep -r "similar pattern"`
+3. Look at recently converted files for examples
+4. Check TypeScript docs for the specific feature
+5. Consider if the type issue reveals a real bug
+
+**Resources:**
+
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
+- VEuPathDB web-monorepo existing TypeScript files (best examples)
+
+---
+
+_Last updated: 2025-11-15_
+_Session: JavaScript to TypeScript conversion and type safety improvements_
diff --git a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.tsx
similarity index 63%
rename from packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.tsx
index 91d58d1103..432de97b4c 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.tsx
@@ -4,11 +4,27 @@ import { debounce } from 'lodash';
 import MesaTooltip from './MesaTooltip';
 import Events from '../Utils/Events';
 
-class AnchoredTooltip extends React.Component {
-  constructor(props) {
+interface Position {
+  left?: number;
+  top?: number;
+}
+
+interface AnchoredTooltipProps {
+  className?: string;
+  children?: React.ReactNode;
+  content: React.ReactNode;
+  [key: string]: any;
+}
+
+class AnchoredTooltip extends React.Component<AnchoredTooltipProps> {
+  private childWrapperRef: React.RefObject<HTMLDivElement>;
+  private listeners: { scroll?: string; resize?: string } = {};
+  public updatePosition: (() => void) & { cancel: () => void };
+
+  constructor(props: AnchoredTooltipProps) {
     super(props);
     this.getPosition = this.getPosition.bind(this);
-    this.updatePosition = debounce(this.updatePosition.bind(this), 100);
+    this.updatePosition = debounce(this._updatePosition.bind(this), 100);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.childWrapperRef = React.createRef();
@@ -22,19 +38,19 @@ class AnchoredTooltip extends React.Component {
   }
 
   componentWillUnmount() {
-    Object.values(this.listeners).forEach((listenerId) =>
-      Events.remove(listenerId)
-    );
+    Object.values(this.listeners).forEach((listenerId) => {
+      if (listenerId) Events.remove(listenerId);
+    });
     this.updatePosition.cancel();
   }
 
-  updatePosition() {
+  _updatePosition() {
     this.forceUpdate();
   }
 
-  getPosition() {
+  getPosition(): Position {
     const element = this.childWrapperRef.current;
-    if (!element) return undefined;
+    if (!element) return { left: 0, top: 0 };
 
     const offset = element.getBoundingClientRect();
     const { top, left } = offset;
diff --git a/packages/libs/coreui/src/components/Mesa/Components/BodyLayer.jsx b/packages/libs/coreui/src/components/Mesa/Components/BodyLayer.tsx
similarity index 72%
rename from packages/libs/coreui/src/components/Mesa/Components/BodyLayer.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/BodyLayer.tsx
index 1ebae1316f..53fc1e63db 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/BodyLayer.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/BodyLayer.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-class BodyLayer extends React.Component {
-  constructor(props) {
+interface BodyLayerProps {
+  [key: string]: any;
+}
+
+class BodyLayer extends React.Component<BodyLayerProps> {
+  private el: HTMLDivElement;
+
+  constructor(props: BodyLayerProps) {
     super(props);
     // XXX This will have to be guarded if we ever use server side rendering
     this.el = document.createElement('div');
diff --git a/packages/libs/coreui/src/components/Mesa/Components/Checkbox.jsx b/packages/libs/coreui/src/components/Mesa/Components/Checkbox.tsx
similarity index 72%
rename from packages/libs/coreui/src/components/Mesa/Components/Checkbox.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/Checkbox.tsx
index ad38513157..2743b51a57 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/Checkbox.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/Checkbox.tsx
@@ -1,13 +1,23 @@
 import React from 'react';
 import IndeterminateCheckbox from '../../inputs/checkboxes/IndeterminateCheckbox';
 
-class Checkbox extends React.Component {
-  constructor(props) {
+interface CheckboxProps {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  indeterminate?: boolean;
+}
+
+class Checkbox extends React.Component<CheckboxProps> {
+  constructor(props: CheckboxProps) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
+  handleClick(
+    isCheckedOrEvent: boolean | React.ChangeEvent<HTMLInputElement>
+  ): void {
     let { checked, onChange } = this.props;
     if (typeof onChange === 'function') onChange(!!checked);
   }
@@ -24,6 +34,8 @@ class Checkbox extends React.Component {
           <IndeterminateCheckbox
             checked={checked}
             indeterminate={indeterminate}
+            name=""
+            value=""
             onChange={this.handleClick}
           />
         ) : (
diff --git a/packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.jsx b/packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.tsx
similarity index 70%
rename from packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.tsx
index 07711e2974..51df8cb393 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.tsx
@@ -2,8 +2,14 @@ import React from 'react';
 import Icon from './Icon';
 import AnchoredTooltip from './AnchoredTooltip';
 
-class HelpTrigger extends React.Component {
-  constructor(props) {
+interface HelpTriggerProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+class HelpTrigger extends React.Component<HelpTriggerProps> {
+  constructor(props: HelpTriggerProps) {
     super(props);
   }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Components/Icon.jsx b/packages/libs/coreui/src/components/Mesa/Components/Icon.tsx
similarity index 58%
rename from packages/libs/coreui/src/components/Mesa/Components/Icon.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/Icon.tsx
index 25b18a37fc..4d7e073142 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/Icon.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/Icon.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-class Icon extends React.PureComponent {
+interface IconProps {
+  fa: string;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  style?: React.CSSProperties;
+}
+
+class Icon extends React.PureComponent<IconProps> {
   render() {
     let { fa, className, onClick, style } = this.props;
     className = `icon fa fa-${fa} ${className || ''}`;
diff --git a/packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.jsx b/packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.tsx
similarity index 74%
rename from packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.tsx
index 11995b97af..a80c9d97fc 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.tsx
@@ -1,12 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { uid, makeClassifier } from '../Utils/Utils';
 
 const modalBoundaryClass = makeClassifier('ModalBoundary');
 
-class ModalBoundary extends React.Component {
-  constructor(props) {
+interface Modal {
+  _id?: string;
+  render: React.ComponentType<any>;
+  [key: string]: any;
+}
+
+interface ModalBoundaryProps {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+interface ModalBoundaryState {
+  modals: Modal[];
+}
+
+class ModalBoundary extends React.Component<
+  ModalBoundaryProps,
+  ModalBoundaryState
+> {
+  constructor(props: ModalBoundaryProps) {
     super(props);
 
     this.state = { modals: [] };
@@ -28,7 +45,7 @@ class ModalBoundary extends React.Component {
     );
   }
 
-  addModal(modal) {
+  addModal(modal: Modal): string {
     let { modals } = this.state;
     modal._id = uid();
     modals.push(modal);
@@ -36,11 +53,11 @@ class ModalBoundary extends React.Component {
     return modal._id;
   }
 
-  triggerModalRefresh() {
+  triggerModalRefresh(): void {
     this.forceUpdate();
   }
 
-  removeModal(id) {
+  removeModal(id: string): void {
     let { modals } = this.state;
     let index = modals.findIndex((modal) => modal._id === id);
     if (index < 0) return;
@@ -55,7 +72,7 @@ class ModalBoundary extends React.Component {
 
   renderModalWrapper() {
     const { modals } = this.state;
-    const style = {
+    const style: React.CSSProperties = {
       top: 0,
       left: 0,
       width: '100vw',
@@ -76,10 +93,17 @@ class ModalBoundary extends React.Component {
   render() {
     const { children, style } = this.props;
     const ModalWrapper = this.renderModalWrapper;
-    const fullStyle = Object.assign({}, style ? style : {}, {
+    const fullStyle: React.CSSProperties = Object.assign(
+      {},
+      style ? style : {},
+      {
+        position: 'relative',
+      }
+    );
+    const zIndex = (z: number): React.CSSProperties => ({
       position: 'relative',
+      zIndex: z,
     });
-    const zIndex = (z) => ({ position: 'relative', zIndex: z });
 
     return (
       <div
@@ -95,15 +119,4 @@ class ModalBoundary extends React.Component {
   }
 }
 
-ModalBoundary.childContextTypes = {
-  addModal: PropTypes.func,
-  removeModal: PropTypes.func,
-  triggerModalRefresh: PropTypes.func,
-};
-
-ModalBoundary.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
-  style: PropTypes.object,
-};
-
 export default ModalBoundary;
diff --git a/packages/libs/coreui/src/components/Mesa/Components/OverScroll.jsx b/packages/libs/coreui/src/components/Mesa/Components/OverScroll.tsx
similarity index 54%
rename from packages/libs/coreui/src/components/Mesa/Components/OverScroll.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/OverScroll.tsx
index 37be58a69e..525678d103 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/OverScroll.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/OverScroll.tsx
@@ -1,17 +1,23 @@
 import React from 'react';
 
-class OverScroll extends React.Component {
-  constructor(props) {
+interface OverScrollProps {
+  className?: string;
+  height?: number;
+  children?: React.ReactNode;
+}
+
+class OverScroll extends React.Component<OverScrollProps> {
+  constructor(props: OverScrollProps) {
     super(props);
   }
 
   render() {
     let { className, height } = this.props;
     className = 'OverScroll' + (className ? ' ' + className : '');
-    height = typeof height === 'number' ? height + 'px' : 'none';
+    const heightValue = typeof height === 'number' ? height + 'px' : 'none';
 
-    const style = {
-      maxHeight: height,
+    const style: React.CSSProperties = {
+      maxHeight: heightValue,
       overflowY: 'auto',
     };
 
diff --git a/packages/libs/coreui/src/components/Mesa/Components/SelectBox.jsx b/packages/libs/coreui/src/components/Mesa/Components/SelectBox.tsx
similarity index 65%
rename from packages/libs/coreui/src/components/Mesa/Components/SelectBox.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/SelectBox.tsx
index c189460010..0cbcc83f14 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/SelectBox.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/SelectBox.tsx
@@ -1,18 +1,31 @@
 import React from 'react';
 
-class SelectBox extends React.PureComponent {
-  constructor(props) {
+interface SelectOption {
+  name: string;
+  value: string | number;
+}
+
+interface SelectBoxProps {
+  name?: string;
+  className?: string;
+  selected?: string | number;
+  options?: (SelectOption | string | number)[];
+  onChange?: (value: string) => void;
+}
+
+class SelectBox extends React.PureComponent<SelectBoxProps> {
+  constructor(props: SelectBoxProps) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }
 
-  handleChange(e) {
+  handleChange(e: React.ChangeEvent<HTMLSelectElement>): void {
     const { onChange } = this.props;
     const value = e.target.value;
     if (onChange) onChange(value);
   }
 
-  getOptions() {
+  getOptions(): SelectOption[] {
     let { options } = this.props;
     if (!Array.isArray(options)) return [];
     options = options.map((option) => {
@@ -20,7 +33,7 @@ class SelectBox extends React.PureComponent {
         ? option
         : { name: option.toString(), value: option };
     });
-    return options;
+    return options as SelectOption[];
   }
 
   render() {
diff --git a/packages/libs/coreui/src/components/Mesa/Components/Toggle.jsx b/packages/libs/coreui/src/components/Mesa/Components/Toggle.tsx
similarity index 62%
rename from packages/libs/coreui/src/components/Mesa/Components/Toggle.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/Toggle.tsx
index 81be3d1f00..177ccadfd9 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/Toggle.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/Toggle.tsx
@@ -1,14 +1,22 @@
 import React from 'react';
 
-import Icon from '../../../Components/Mesa/Components/Icon';
+import Icon from './Icon';
 
-class Toggle extends React.Component {
-  constructor(props) {
+interface ToggleProps {
+  enabled: boolean;
+  onChange?: (enabled: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+class Toggle extends React.Component<ToggleProps> {
+  constructor(props: ToggleProps) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
+  handleClick(e: React.MouseEvent): void {
     let { enabled, onChange } = this.props;
     if (typeof onChange === 'function') onChange(!!enabled);
   }
@@ -18,11 +26,11 @@ class Toggle extends React.Component {
     className = 'Toggle' + (className ? ' ' + className : '');
     className += ' ' + (enabled ? 'Toggle-On' : 'Toggle-Off');
     className += disabled ? ' Toggle-Disabled' : '';
-    let offStyle = {
+    let offStyle: React.CSSProperties = {
       fontSize: '1.2rem',
       color: '#989898',
     };
-    let onStyle = Object.assign({}, offStyle, {
+    let onStyle: React.CSSProperties = Object.assign({}, offStyle, {
       color: '#198835',
     });
 
@@ -30,7 +38,7 @@ class Toggle extends React.Component {
       <span
         style={style}
         className={className}
-        onClick={disabled ? null : this.handleClick}
+        onClick={disabled ? undefined : this.handleClick}
       >
         <Icon
           fa={enabled ? 'toggle-on' : 'toggle-off'}
diff --git a/packages/libs/coreui/src/components/Mesa/Components/TruncatedText.jsx b/packages/libs/coreui/src/components/Mesa/Components/TruncatedText.tsx
similarity index 75%
rename from packages/libs/coreui/src/components/Mesa/Components/TruncatedText.jsx
rename to packages/libs/coreui/src/components/Mesa/Components/TruncatedText.tsx
index a78b5f4d2e..96abf9edcd 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/TruncatedText.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/TruncatedText.tsx
@@ -2,14 +2,27 @@ import React from 'react';
 
 import Icon from './Icon';
 
-class TruncatedText extends React.Component {
-  constructor(props) {
+interface TruncatedTextProps {
+  className?: string;
+  cutoff?: number;
+  text: string;
+}
+
+interface TruncatedTextState {
+  expanded: boolean;
+}
+
+class TruncatedText extends React.Component<
+  TruncatedTextProps,
+  TruncatedTextState
+> {
+  constructor(props: TruncatedTextProps) {
     super(props);
     this.state = { expanded: false };
     this.toggleExpansion = this.toggleExpansion.bind(this);
   }
 
-  wordCount(text) {
+  wordCount(text: string): number | undefined {
     if (typeof text !== 'string') return undefined;
     return text
       .trim()
@@ -17,12 +30,12 @@ class TruncatedText extends React.Component {
       .filter((x) => x.length).length;
   }
 
-  reverseText(text) {
+  reverseText(text: string): string {
     if (typeof text !== 'string' || !text.length) return text;
     return text.split('').reverse().join('');
   }
 
-  trimInitialPunctuation(text) {
+  trimInitialPunctuation(text: string): string {
     if (typeof text !== 'string' || !text.length) return text;
     while (text.search(/[a-zA-Z0-9]/) !== 0) {
       text = text.substring(1);
@@ -30,7 +43,7 @@ class TruncatedText extends React.Component {
     return text;
   }
 
-  trimPunctuation(text) {
+  trimPunctuation(text: string): string {
     if (typeof text !== 'string' || !text.length) return text;
 
     text = this.trimInitialPunctuation(text);
@@ -41,10 +54,10 @@ class TruncatedText extends React.Component {
     return text;
   }
 
-  truncate(text, cutoff) {
+  truncate(text: string, cutoff: number): string {
     if (typeof text !== 'string' || typeof cutoff !== 'number') return text;
     let count = this.wordCount(text);
-    if (count < cutoff) return text;
+    if (count !== undefined && count < cutoff) return text;
 
     let words = text
       .trim()
@@ -56,7 +69,7 @@ class TruncatedText extends React.Component {
     return this.trimPunctuation(short) + '...';
   }
 
-  toggleExpansion() {
+  toggleExpansion(): void {
     let { expanded } = this.state;
     this.setState({ expanded: !expanded });
   }
@@ -65,7 +78,7 @@ class TruncatedText extends React.Component {
     let { expanded } = this.state;
     let { className, cutoff, text } = this.props;
     cutoff = typeof cutoff === 'number' ? cutoff : 100;
-    let expandable = this.wordCount(text) > cutoff;
+    let expandable = (this.wordCount(text) ?? 0) > cutoff;
 
     className = 'TruncatedText' + (className ? ' ' + className : '');
     text = expanded ? text : this.truncate(text, cutoff);
diff --git a/packages/libs/coreui/src/components/Mesa/Defaults.jsx b/packages/libs/coreui/src/components/Mesa/Defaults.jsx
deleted file mode 100644
index a1e827de7f..0000000000
--- a/packages/libs/coreui/src/components/Mesa/Defaults.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-export const ColumnDefaults = {
-  primary: false,
-  searchable: true,
-  sortable: true,
-  resizeable: true,
-  truncated: false,
-
-  filterable: false,
-  filterState: {
-    enabled: false,
-    visible: false,
-    blacklist: [],
-  },
-
-  hideable: true,
-  hidden: false,
-
-  disabled: false,
-  type: 'text',
-};
-
-export const OptionsDefaults = {
-  title: null,
-  toolbar: true,
-  inline: false,
-  className: null,
-  showCount: true,
-  errOnOverflow: false,
-  editableColumns: true,
-  overflowHeight: '16em',
-  searchPlaceholder: 'Search This Table',
-  isRowSelected: (row, index) => {
-    return false;
-  },
-};
-
-export const UiStateDefaults = {
-  searchQuery: null,
-  filteredRowCount: 0,
-  sort: {
-    columnKey: null,
-    direction: 'asc',
-  },
-  pagination: {
-    currentPage: 1,
-    totalPages: null,
-    totalRows: null,
-    rowsPerPage: 20,
-  },
-};
diff --git a/packages/libs/coreui/src/components/Mesa/Defaults.ts b/packages/libs/coreui/src/components/Mesa/Defaults.ts
new file mode 100644
index 0000000000..ac6791cc99
--- /dev/null
+++ b/packages/libs/coreui/src/components/Mesa/Defaults.ts
@@ -0,0 +1,96 @@
+interface ColumnDefaultsType {
+  primary: boolean;
+  searchable: boolean;
+  sortable: boolean;
+  resizeable: boolean;
+  truncated: boolean;
+  filterable: boolean;
+  filterState: {
+    enabled: boolean;
+    visible: boolean;
+    blacklist: any[];
+  };
+  hideable: boolean;
+  hidden: boolean;
+  disabled: boolean;
+  type: string;
+}
+
+interface OptionsDefaultsType {
+  title: string | null;
+  toolbar: boolean;
+  inline: boolean;
+  className: string | null;
+  showCount: boolean;
+  errOnOverflow: boolean;
+  editableColumns: boolean;
+  overflowHeight: string;
+  searchPlaceholder: string;
+  isRowSelected: <Row>(row: Row, index: number) => boolean;
+}
+
+interface UiStateDefaultsType {
+  searchQuery: string | null;
+  filteredRowCount: number;
+  sort: {
+    columnKey: string | null;
+    direction: 'asc' | 'desc';
+  };
+  pagination: {
+    currentPage: number;
+    totalPages: number | null;
+    totalRows: number | null;
+    rowsPerPage: number;
+  };
+}
+
+export const ColumnDefaults: ColumnDefaultsType = {
+  primary: false,
+  searchable: true,
+  sortable: true,
+  resizeable: true,
+  truncated: false,
+
+  filterable: false,
+  filterState: {
+    enabled: false,
+    visible: false,
+    blacklist: [],
+  },
+
+  hideable: true,
+  hidden: false,
+
+  disabled: false,
+  type: 'text',
+};
+
+export const OptionsDefaults: OptionsDefaultsType = {
+  title: null,
+  toolbar: true,
+  inline: false,
+  className: null,
+  showCount: true,
+  errOnOverflow: false,
+  editableColumns: true,
+  overflowHeight: '16em',
+  searchPlaceholder: 'Search This Table',
+  isRowSelected: <Row>(row: Row, index: number): boolean => {
+    return false;
+  },
+};
+
+export const UiStateDefaults: UiStateDefaultsType = {
+  searchQuery: null,
+  filteredRowCount: 0,
+  sort: {
+    columnKey: null,
+    direction: 'asc',
+  },
+  pagination: {
+    currentPage: 1,
+    totalPages: null,
+    totalRows: null,
+    rowsPerPage: 20,
+  },
+};
diff --git a/packages/libs/coreui/src/components/Mesa/Templates.jsx b/packages/libs/coreui/src/components/Mesa/Templates.jsx
deleted file mode 100644
index 921726d01a..0000000000
--- a/packages/libs/coreui/src/components/Mesa/Templates.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { OptionsDefaults } from './Defaults';
-import OverScroll from './Components/OverScroll';
-import TruncatedText from './Components/TruncatedText';
-import { stringValue } from './Utils/Utils';
-
-const Templates = {
-  textCell({ key, value, row, rowIndex, column }) {
-    const { truncated } = column;
-    const className = 'Cell Cell-' + key;
-    const text = stringValue(value);
-
-    return truncated ? (
-      <TruncatedText
-        className={className}
-        cutoff={truncated ? OptionsDefaults.overflowHeight : null}
-        text={text}
-      />
-    ) : (
-      <div className={className}>{text}</div>
-    );
-  },
-
-  numberCell({ key, value, row, rowIndex, column }) {
-    const className = 'Cell NumberCell Cell-' + key;
-    const display =
-      typeof value === 'number' ? value.toLocaleString() : stringValue(value);
-
-    return <div className={className}>{display}</div>;
-  },
-
-  wdkLinkCell({ key, value, row, rowIndex, column }) {
-    const className = 'Cell wdkLinkCell Cell-' + key;
-    let { displayText, url } = value;
-    let href = url ? url : '#';
-    let text = displayText.length ? value.displayText : href;
-    text = <div dangerouslySetInnerHTML={{ __html: text }} />;
-    let target = '_blank';
-
-    const props = { href, target, className };
-
-    return <a {...props}>{text}</a>;
-  },
-
-  linkCell({ key, value, row, rowIndex, column }) {
-    const className = 'Cell LinkCell Cell-' + key;
-    const defaults = { href: null, target: '_blank', text: '' };
-    let { href, target, text } = typeof value === 'object' ? value : defaults;
-    // href = href ? href : typeof value === 'string' ? value : '#';
-    href = href ? href : typeof value === 'string' ? value : null;
-    text = text.length ? text : href;
-
-    const props = { href, target, className, name: text };
-
-    return href && <a {...props}>{text}</a>;
-  },
-
-  htmlCell({ key, value, row, rowIndex, column }) {
-    const { truncated } = column;
-    const className = 'Cell HtmlCell Cell-' + key;
-    const content = <div dangerouslySetInnerHTML={{ __html: value }} />;
-    const size = truncated === true ? '16em' : truncated;
-
-    return truncated ? (
-      <OverScroll className={className} size={size}>
-        {content}
-      </OverScroll>
-    ) : (
-      <div className={className}>{content}</div>
-    );
-  },
-
-  heading({ key, name }) {
-    const className = 'Cell HeadingCell HeadingCell-' + key;
-    const content = <b>{name || key}</b>;
-
-    return <div className={className}>{content}</div>;
-  },
-};
-
-export default Templates;
diff --git a/packages/libs/coreui/src/components/Mesa/Templates.tsx b/packages/libs/coreui/src/components/Mesa/Templates.tsx
new file mode 100644
index 0000000000..56d7708c7c
--- /dev/null
+++ b/packages/libs/coreui/src/components/Mesa/Templates.tsx
@@ -0,0 +1,103 @@
+import React, { ReactNode } from 'react';
+
+import { OptionsDefaults } from './Defaults';
+import OverScroll from './Components/OverScroll';
+import TruncatedText from './Components/TruncatedText';
+import { stringValue } from './Utils/Utils';
+import { CellProps } from './types';
+
+interface WdkLinkValue {
+  displayText: string;
+  url?: string;
+}
+
+interface LinkValue {
+  href?: string | null;
+  target?: string;
+  text: string;
+}
+
+const Templates = {
+  textCell<Row>({ key, value, column }: CellProps<Row>): ReactNode {
+    const { truncated } = column as any;
+    const className = 'Cell Cell-' + key;
+    const text = stringValue(value);
+
+    return truncated ? (
+      <TruncatedText className={className} text={text} />
+    ) : (
+      <div className={className}>{text}</div>
+    );
+  },
+
+  numberCell<Row>({ key, value }: CellProps<Row>): ReactNode {
+    const className = 'Cell NumberCell Cell-' + key;
+    const display =
+      typeof value === 'number' ? value.toLocaleString() : stringValue(value);
+
+    return <div className={className}>{display}</div>;
+  },
+
+  wdkLinkCell<Row>({ key, value }: CellProps<Row>): ReactNode {
+    const className = 'Cell wdkLinkCell Cell-' + key;
+    const typedValue = value as WdkLinkValue;
+    let { displayText, url } = typedValue;
+    let href = url ? url : '#';
+    let text = displayText.length ? typedValue.displayText : href;
+    const textElement = <div dangerouslySetInnerHTML={{ __html: text }} />;
+    let target = '_blank';
+
+    const props = { href, target, className };
+
+    return <a {...props}>{textElement}</a>;
+  },
+
+  linkCell<Row>({ key, value }: CellProps<Row>): ReactNode {
+    const className = 'Cell LinkCell Cell-' + key;
+    const defaults: LinkValue = { href: null, target: '_blank', text: '' };
+    let { href, target, text } =
+      typeof value === 'object' && value !== null
+        ? (value as LinkValue)
+        : defaults;
+    const finalHref = href
+      ? href
+      : typeof value === 'string'
+      ? value
+      : undefined;
+    text = text.length ? text : finalHref ?? '';
+
+    const props = { href: finalHref, target, className, name: text };
+
+    return finalHref ? <a {...props}>{text}</a> : null;
+  },
+
+  htmlCell<Row>({ key, value, column }: CellProps<Row>): ReactNode {
+    const { truncated } = column as any;
+    const className = 'Cell HtmlCell Cell-' + key;
+    const content = (
+      <div dangerouslySetInnerHTML={{ __html: value as string }} />
+    );
+    const maxHeight = truncated === true ? '16em' : truncated;
+
+    return truncated ? (
+      <div
+        className={className}
+        style={{ maxHeight, overflowY: 'auto' } as React.CSSProperties}
+      >
+        {content}
+      </div>
+    ) : (
+      <div className={className}>{content}</div>
+    );
+  },
+
+  heading<Row>({ key, column }: CellProps<Row>): ReactNode {
+    const name = column.name;
+    const className = 'Cell HeadingCell HeadingCell-' + key;
+    const content = <b>{name || key}</b>;
+
+    return <div className={className}>{content}</div>;
+  },
+};
+
+export default Templates;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.jsx b/packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.tsx
similarity index 67%
rename from packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.tsx
index 8191506ede..8a4df32f27 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/ActionToolbar.tsx
@@ -1,15 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 
 import SelectionCounter from './SelectionCounter';
 import RowCounter from './RowCounter';
 import { makeClassifier } from '../Utils/Utils';
 import Toggle from '../../widgets/Toggle';
+import { MesaStateProps } from '../types';
 
 const actionToolbarClass = makeClassifier('ActionToolbar');
 
-class ActionToolbar extends React.PureComponent {
-  constructor(props) {
+interface ActionToolbarProps<Row> extends Partial<MesaStateProps<Row>> {
+  children?: ReactNode;
+}
+
+class ActionToolbar<Row> extends React.PureComponent<ActionToolbarProps<Row>> {
+  constructor(props: ActionToolbarProps<Row>) {
     super(props);
     this.dispatchAction = this.dispatchAction.bind(this);
     this.renderCounter = this.renderCounter.bind(this);
@@ -19,15 +23,15 @@ class ActionToolbar extends React.PureComponent {
       this.renderGroupBySelectedToggle.bind(this);
   }
 
-  getSelection() {
+  getSelection(): Row[] {
     const { rows, options } = this.props;
-    const { isRowSelected } = options;
+    const { isRowSelected } = options || {};
 
-    if (typeof isRowSelected !== 'function') return [];
+    if (!rows || typeof isRowSelected !== 'function') return [];
     return rows.filter(isRowSelected);
   }
 
-  dispatchAction(action) {
+  dispatchAction(action: any): void {
     const { handler, callback } = action;
     const { rows, columns } = this.props;
     const selection = this.getSelection();
@@ -35,12 +39,11 @@ class ActionToolbar extends React.PureComponent {
     if (action.selectionRequired && !selection.length) return;
     if (typeof handler === 'function')
       selection.forEach((row) => handler(row, columns));
-    if (typeof callback === 'function')
-      return callback(selection, columns, rows);
+    if (typeof callback === 'function') callback(selection, columns, rows);
   }
 
-  renderCounter() {
-    const { rows = {}, options = {}, uiState = {}, eventHandlers } = this.props;
+  renderCounter(): ReactNode {
+    const { rows = [], options = {}, uiState = {}, eventHandlers } = this.props;
     const { showCount, toolbar } = options;
 
     if (!showCount || (showCount && toolbar)) return null;
@@ -54,11 +57,11 @@ class ActionToolbar extends React.PureComponent {
     );
   }
 
-  renderActionItem({ action }) {
+  renderActionItem({ action }: { action: any }): ReactNode {
     let { element } = action;
     let selection = this.getSelection();
     let disabled =
-      action.selectionRequired && !selection.length ? 'disabled' : null;
+      action.selectionRequired && !selection.length ? 'disabled' : undefined;
 
     if (typeof element !== 'string' && !React.isValidElement(element)) {
       if (typeof element === 'function') element = element(selection);
@@ -76,27 +79,31 @@ class ActionToolbar extends React.PureComponent {
     );
   }
 
-  renderActionItemList() {
+  renderActionItemList(): ReactNode {
     const { actions } = this.props;
-    const ActionItem = this.renderActionItem;
     return (
       <div className={actionToolbarClass('ItemList')}>
         {!actions
           ? null
           : actions
               .filter((action) => action.element)
-              .map((action, idx) => <ActionItem action={action} key={idx} />)}
+              .map((action) => this.renderActionItem({ action }))}
       </div>
     );
   }
 
-  renderGroupBySelectedToggle() {
+  renderGroupBySelectedToggle(): ReactNode {
     const { rows, options = {}, eventHandlers = {}, uiState = {} } = this.props;
     const { isRowSelected } = options;
     const { onGroupBySelectedChange } = eventHandlers;
     const { groupBySelected } = uiState;
 
-    if (!isRowSelected || groupBySelected == null || !onGroupBySelectedChange)
+    if (
+      !rows ||
+      !isRowSelected ||
+      groupBySelected == null ||
+      !onGroupBySelectedChange
+    )
       return null;
 
     return (
@@ -114,28 +121,13 @@ class ActionToolbar extends React.PureComponent {
 
   render() {
     const { rows, eventHandlers, children, options } = this.props;
-    const { selectedNoun, selectedPluralNoun, isRowSelected } = options
-      ? options
-      : {};
+    const { selectedNoun, selectedPluralNoun, isRowSelected } = options || {};
     const {
       onRowSelect,
       onRowDeselect,
       onMultipleRowSelect,
       onMultipleRowDeselect,
-    } = eventHandlers ? eventHandlers : {};
-
-    const ActionList = this.renderActionItemList;
-
-    const selectionCounterProps = {
-      rows,
-      isRowSelected,
-      onRowSelect,
-      onRowDeselect,
-      onMultipleRowSelect,
-      onMultipleRowDeselect,
-      selectedNoun,
-      selectedPluralNoun,
-    };
+    } = eventHandlers || {};
 
     return (
       <div className={actionToolbarClass() + ' Toolbar'}>
@@ -145,21 +137,23 @@ class ActionToolbar extends React.PureComponent {
         {this.renderCounter()}
         <div className={actionToolbarClass('Info')}>
           {this.renderGroupBySelectedToggle()}
-          <SelectionCounter {...selectionCounterProps} />
+          {rows && isRowSelected && (
+            <SelectionCounter
+              rows={rows}
+              isRowSelected={isRowSelected}
+              onRowSelect={onRowSelect}
+              onRowDeselect={onRowDeselect}
+              onMultipleRowSelect={onMultipleRowSelect}
+              onMultipleRowDeselect={onMultipleRowDeselect}
+              selectedNoun={selectedNoun}
+              selectedPluralNoun={selectedPluralNoun}
+            />
+          )}
         </div>
-        <ActionList />
+        {this.renderActionItemList()}
       </div>
     );
   }
 }
 
-ActionToolbar.propTypes = {
-  rows: PropTypes.array,
-  columns: PropTypes.array,
-  actions: PropTypes.array,
-  options: PropTypes.object,
-  eventHandlers: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
-};
-
 export default ActionToolbar;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.tsx
similarity index 50%
rename from packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/DataCell.tsx
index fa88237b2a..67db65dcd4 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.tsx
@@ -1,31 +1,51 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 
 import Templates from '../Templates';
 import { makeClassifier } from '../Utils/Utils';
+import { MesaColumn, MesaStateProps } from '../types';
 
 import { Tooltip } from '../../../components/info/Tooltip';
 
 const dataCellClass = makeClassifier('DataCell');
 
-class DataCell extends React.PureComponent {
-  constructor(props) {
+interface DataCellProps<Row> {
+  column: MesaColumn<Row>;
+  row: Row;
+  inline?: boolean;
+  options?: MesaStateProps<Row>['options'];
+  rowIndex: number;
+  columnIndex: number | null;
+  isChildRow?: boolean;
+  childRowColSpan?: number;
+}
+
+class DataCell<Row> extends React.PureComponent<DataCellProps<Row>> {
+  constructor(props: DataCellProps<Row>) {
     super(props);
     this.renderContent = this.renderContent.bind(this);
   }
 
-  renderContent() {
+  renderContent(): ReactNode {
     const { row, column, rowIndex, columnIndex, inline, options, isChildRow } =
       this.props;
     const { key, getValue } = column;
     const value =
-      typeof getValue === 'function' ? getValue({ row, key }) : row[key];
-    const cellProps = { key, value, row, column, rowIndex, columnIndex };
-    const { childRow } = options;
+      typeof getValue === 'function'
+        ? getValue({ row, index: rowIndex })
+        : (row as any)[key];
+    const cellProps = {
+      key,
+      value,
+      row,
+      column,
+      rowIndex,
+      columnIndex: columnIndex ?? 0,
+    };
+    const { childRow } = options || {};
     if (isChildRow && childRow != null) {
-      return childRow(rowIndex, row);
+      return childRow({ rowIndex, rowData: row });
     }
-    if ('renderCell' in column) {
+    if ('renderCell' in column && column.renderCell) {
       return column.renderCell(cellProps);
     }
 
@@ -49,7 +69,7 @@ class DataCell extends React.PureComponent {
     }
   }
 
-  setTitle(el) {
+  setTitle(el?: HTMLTableCellElement | null): void {
     if (el == null) return;
     el.title = el.scrollWidth <= el.clientWidth ? '' : el.innerText;
   }
@@ -64,28 +84,34 @@ class DataCell extends React.PureComponent {
       : {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
-          maxWidth: options.inlineMaxWidth ? options.inlineMaxWidth : '20vw',
-          maxHeight: options.inlineMaxHeight ? options.inlineMaxHeight : '2em',
+          maxWidth:
+            options && options.inlineMaxWidth ? options.inlineMaxWidth : '20vw',
+          maxHeight:
+            options && options.inlineMaxHeight
+              ? options.inlineMaxHeight
+              : '2em',
         };
 
-    width = typeof width === 'number' ? width + 'px' : width;
-    width = width ? { width, maxWidth: width, minWidth: width } : {};
-    style = Object.assign({}, style, width, whiteSpace);
-    className = dataCellClass() + (className ? ' ' + className : '');
+    const widthValue = typeof width === 'number' ? width + 'px' : width;
+    const widthStyle = widthValue
+      ? { width: widthValue, maxWidth: widthValue, minWidth: widthValue }
+      : {};
+    const finalStyle = Object.assign({}, style, widthStyle, whiteSpace);
+    const finalClassName = dataCellClass() + (className ? ' ' + className : '');
 
     const content = this.renderContent();
 
     const props = {
-      style,
+      style: finalStyle,
       children: content,
-      className,
+      className: finalClassName,
       ...(isChildRow ? { colSpan: childRowColSpan } : null),
     };
 
-    return column.hidden ? null : (
+    return (column as any).hidden ? null : (
       <td
-        onMouseEnter={(e) => this.setTitle(e.target)}
-        onMouseLeave={() => this.setTitle()}
+        onMouseEnter={(e) => this.setTitle(e.target as HTMLTableCellElement)}
+        onMouseLeave={() => this.setTitle(null)}
         key={key + '_' + rowIndex}
         {...props}
       />
@@ -93,13 +119,4 @@ class DataCell extends React.PureComponent {
   }
 }
 
-DataCell.propTypes = {
-  column: PropTypes.object,
-  row: PropTypes.object,
-  inline: PropTypes.bool,
-  options: PropTypes.object,
-  rowIndex: PropTypes.number,
-  columnIndex: PropTypes.number,
-};
-
 export default DataCell;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.tsx
similarity index 64%
rename from packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/DataRow.tsx
index 59f4f8cd6e..a71b8d8ca6 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.tsx
@@ -1,18 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import DataCell from './DataCell';
 import SelectionCell from './SelectionCell';
 import ExpansionCell from './ExpansionCell';
 import { makeClassifier } from '../Utils/Utils';
+import { MesaStateProps } from '../types';
 
 const dataRowClass = makeClassifier('DataRow');
 
 const EXTRA_COLUMNS_FOR_EXPAND_AND_SELECT = 2;
 const EXTRA_COLUMNS_FOR_EXPAND = 1;
 
-class DataRow extends React.PureComponent {
-  constructor(props) {
+interface DataRowProps<Row> extends MesaStateProps<Row> {
+  row: Row;
+  rowIndex: number;
+}
+
+interface DataRowState {
+  expanded: boolean;
+}
+
+class DataRow<Row> extends React.PureComponent<
+  DataRowProps<Row>,
+  DataRowState
+> {
+  constructor(props: DataRowProps<Row>) {
     super(props);
     this.state = { expanded: false };
     this.handleRowClick = this.handleRowClick.bind(this);
@@ -23,44 +35,47 @@ class DataRow extends React.PureComponent {
     this.componentWillReceiveProps = this.componentWillReceiveProps.bind(this);
   }
 
-  componentWillReceiveProps(newProps) {
+  componentWillReceiveProps(newProps: DataRowProps<Row>): void {
     const { row } = this.props;
     if (newProps.row !== row) this.collapseRow();
   }
 
-  expandRow() {
+  expandRow(): void {
     const { options } = this.props;
-    if (!options.inline || options.inlineUseTooltips) return;
+    if (!options || !options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: true });
   }
 
-  collapseRow() {
+  collapseRow(): void {
     const { options } = this.props;
-    if (!options.inline || options.inlineUseTooltips) return;
+    if (!options || !options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: false });
   }
 
-  handleRowClick() {
+  handleRowClick(): void {
     const { row, rowIndex, options } = this.props;
-    const { inline, onRowClick, inlineUseTooltips } = options;
+    if (!options) return;
+    const { inline, onRowClick, inlineUseTooltips } = options as any;
     if (!inline && !onRowClick) return;
     if (inline && !inlineUseTooltips)
       this.setState({ expanded: !this.state.expanded });
     if (typeof onRowClick === 'function') onRowClick(row, rowIndex);
   }
 
-  handleRowMouseOver() {
+  handleRowMouseOver(): void {
     const { row, rowIndex, options } = this.props;
-    const { onRowMouseOver } = options;
+    if (!options) return;
+    const { onRowMouseOver } = options as any;
 
     if (typeof onRowMouseOver === 'function') {
       onRowMouseOver(row, rowIndex);
     }
   }
 
-  handleRowMouseOut() {
+  handleRowMouseOut(): void {
     const { row, rowIndex, options } = this.props;
-    const { onRowMouseOut } = options;
+    if (!options) return;
+    const { onRowMouseOut } = options as any;
 
     if (typeof onRowMouseOut === 'function') {
       onRowMouseOut(row, rowIndex);
@@ -71,10 +86,14 @@ class DataRow extends React.PureComponent {
     const { row, rowIndex, columns, options, eventHandlers, uiState } =
       this.props;
     const { expanded } = this.state;
-    const { columnDefaults, childRow, getRowId } = options ? options : {};
-    const inline = options.inline ? !expanded : false;
+    const { columnDefaults, childRow, getRowId } = options
+      ? options
+      : ({} as any);
+    const inline = options && options.inline ? !expanded : false;
 
     const hasSelectionColumn =
+      options &&
+      eventHandlers &&
       typeof options.isRowSelected === 'function' &&
       typeof eventHandlers.onRowSelect === 'function' &&
       typeof eventHandlers.onRowDeselect === 'function';
@@ -86,7 +105,11 @@ class DataRow extends React.PureComponent {
       getRowId != null;
 
     const showChildRow =
-      hasExpansionColumn && uiState.expandedRows.includes(getRowId(row));
+      hasExpansionColumn &&
+      uiState &&
+      uiState.expandedRows &&
+      getRowId &&
+      uiState.expandedRows.includes(getRowId(row));
     const childRowColSpan =
       columns.length +
       (hasSelectionColumn
@@ -95,10 +118,10 @@ class DataRow extends React.PureComponent {
 
     const rowStyle = !inline
       ? {}
-      : { whiteSpace: 'nowrap', textOverflow: 'ellipsis' };
-    let className = dataRowClass(null, inline ? 'inline' : '');
+      : { whiteSpace: 'nowrap' as const, textOverflow: 'ellipsis' as const };
+    let className = dataRowClass(undefined, inline ? 'inline' : '');
 
-    const { deriveRowClassName } = options;
+    const { deriveRowClassName } = options || {};
     if (typeof deriveRowClassName === 'function') {
       let derivedClassName = deriveRowClassName(row);
       className +=
@@ -114,36 +137,45 @@ class DataRow extends React.PureComponent {
           className={className
             .concat(showChildRow ? ' _childIsExpanded' : '')
             .concat(hasExpansionColumn ? ' _isExpandable' : '')}
-          tabIndex={this.props.options.onRowClick ? -1 : undefined}
+          tabIndex={
+            this.props.options && (this.props.options as any).onRowClick
+              ? -1
+              : undefined
+          }
           style={rowStyle}
           onClick={this.handleRowClick}
           onMouseOver={this.handleRowMouseOver}
           onMouseOut={this.handleRowMouseOut}
         >
-          {hasExpansionColumn && (
+          {hasExpansionColumn && eventHandlers && uiState && (
             <ExpansionCell
               key="_expansion"
+              rows={[]}
               row={row}
-              onExpandedRowsChange={eventHandlers.onExpandedRowsChange}
-              expandedRows={uiState.expandedRows}
-              getRowId={getRowId}
+              onExpandedRowsChange={eventHandlers.onExpandedRowsChange!}
+              expandedRows={uiState.expandedRows!}
+              getRowId={getRowId!}
+              inert={false}
+              heading={false}
             />
           )}
-          {hasSelectionColumn && (
+          {hasSelectionColumn && options && eventHandlers && (
             <SelectionCell
               key="_selection"
               row={row}
+              options={options}
               eventHandlers={eventHandlers}
-              isRowSelected={options.isRowSelected}
+              isRowSelected={options.isRowSelected!}
             />
           )}
           {columns.map((column, columnIndex) => {
+            let finalColumn = column;
             if (typeof columnDefaults === 'object')
-              column = Object.assign({}, columnDefaults, column);
+              finalColumn = Object.assign({}, columnDefaults, column);
             return (
               <DataCell
                 key={`${column.key}-${columnIndex}`}
-                column={column}
+                column={finalColumn}
                 columnIndex={columnIndex}
                 {...sharedProps}
               />
@@ -153,7 +185,11 @@ class DataRow extends React.PureComponent {
         {showChildRow && (
           <tr
             className={className + ' _isExpandable'}
-            tabIndex={this.props.options.onRowClick ? -1 : undefined}
+            tabIndex={
+              this.props.options && (this.props.options as any).onRowClick
+                ? -1
+                : undefined
+            }
             style={rowStyle}
             onClick={this.handleRowClick}
             onMouseOver={this.handleRowMouseOver}
@@ -163,9 +199,9 @@ class DataRow extends React.PureComponent {
               key={`childRow-${rowIndex}`}
               column={{
                 style: {},
-                width: null,
+                width: undefined,
                 className: '',
-                key: 'childRow-test',
+                key: 'childRow-test' as any,
               }}
               columnIndex={null}
               isChildRow={true}
@@ -179,14 +215,4 @@ class DataRow extends React.PureComponent {
   }
 }
 
-DataRow.propTypes = {
-  row: PropTypes.object.isRequired,
-  rowIndex: PropTypes.number.isRequired,
-  columns: PropTypes.array.isRequired,
-
-  options: PropTypes.object,
-  actions: PropTypes.array,
-  eventHandlers: PropTypes.object,
-};
-
 export default DataRow;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.jsx
deleted file mode 100644
index c663e0c040..0000000000
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import DataRow from './DataRow';
-
-class DataRowList extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { props } = this;
-    const { rows, filteredRows } = props;
-
-    return (
-      <tbody className="DataRowList">
-        {filteredRows.map((row, rowIndex) => (
-          <DataRow row={row} key={rowIndex} rowIndex={rowIndex} {...props} />
-        ))}
-      </tbody>
-    );
-  }
-}
-
-export default DataRowList;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.tsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.tsx
new file mode 100644
index 0000000000..77acf16abb
--- /dev/null
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataRowList.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import DataRow from './DataRow';
+import { MesaStateProps } from '../types';
+
+interface DataRowListProps<Row> extends MesaStateProps<Row> {}
+
+class DataRowList<Row> extends React.Component<DataRowListProps<Row>> {
+  constructor(props: DataRowListProps<Row>) {
+    super(props);
+  }
+
+  render() {
+    const { props } = this;
+    const { filteredRows } = props;
+
+    return (
+      <tbody className="DataRowList">
+        {filteredRows &&
+          filteredRows.map((row, rowIndex) => (
+            <DataRow row={row} key={rowIndex} rowIndex={rowIndex} {...props} />
+          ))}
+      </tbody>
+    );
+  }
+}
+
+export default DataRowList;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.tsx
similarity index 67%
rename from packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/DataTable.tsx
index 919c0e2378..6d784e56a7 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.tsx
@@ -1,17 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { CSSProperties } from 'react';
 
 import { isEqual, sum } from 'lodash';
-import { defaultMemoize } from 'reselect';
 
 import HeadingRow from './HeadingRow';
 import DataRowList from './DataRowList';
 import { makeClassifier, combineWidths } from '../Utils/Utils';
+import { MesaStateProps, MesaColumn } from '../types';
 
 const dataTableClass = makeClassifier('DataTable');
 
-class DataTable extends React.Component {
-  constructor(props) {
+interface DataTableProps<Row> extends MesaStateProps<Row> {}
+
+interface DataTableState {
+  dynamicWidths?: number[] | null;
+}
+
+class DataTable<Row> extends React.Component<
+  DataTableProps<Row>,
+  DataTableState
+> {
+  widthCache: number[] = [];
+  resizeId: number = -1;
+  mainRef: HTMLDivElement | null = null;
+  contentTable: HTMLTableElement | null = null;
+  cachedWidth?: number;
+
+  constructor(props: DataTableProps<Row>) {
     super(props);
     this.widthCache = [];
     this.renderStickyTable = this.renderStickyTable.bind(this);
@@ -25,18 +39,21 @@ class DataTable extends React.Component {
     this.mainRef = null;
   }
 
-  shouldUseStickyHeader() {
+  shouldUseStickyHeader(): boolean {
     const { options } = this.props;
     if (!options || !options.useStickyHeader) return false;
     if (!options.tableBodyMaxHeight)
       return console.error(`
       "useStickyHeader" option enabled but no maxHeight for the table is set.
       Use a css height as the "tableBodyMaxHeight" option to use this setting.
-    `);
+    `) as any;
     return true;
   }
 
-  makeFirstNColumnsSticky(columns, n) {
+  makeFirstNColumnsSticky(
+    columns: MesaColumn<Row>[],
+    n: number
+  ): MesaColumn<Row>[] {
     const dynamicWidths = this.widthCache;
 
     if (n <= columns.length) {
@@ -50,13 +67,13 @@ class DataTable extends React.Component {
           moveable: false,
           headingStyle: {
             ...column.headingStyle,
-            position: 'sticky',
+            position: 'sticky' as const,
             left: `${leftOffset}px`,
             zIndex: 2,
           },
           style: {
             ...column.style,
-            position: 'sticky',
+            position: 'sticky' as const,
             left: `${leftOffset}px`,
             zIndex: 1,
           },
@@ -70,13 +87,13 @@ class DataTable extends React.Component {
     return columns;
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.setDynamicWidths();
     this.attachLoadEventHandlers();
     this.attachResizeHandler();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: DataTableProps<Row>): void {
     if (
       this.props.columns.map((c) => c.name).toString() !==
         prevProps.columns.map((c) => c.name).toString() ||
@@ -87,39 +104,43 @@ class DataTable extends React.Component {
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.removeResizeHandler();
   }
 
-  attachLoadEventHandlers() {
+  attachLoadEventHandlers(): void {
     if (this.contentTable == null) return;
     this.contentTable
       .querySelectorAll('img, iframe, object')
       .forEach((node) => {
-        if (node.complete) return;
+        if ((node as HTMLImageElement).complete) return;
         node.addEventListener('load', (event) => {
-          const el = event.target.offsetParent || event.target;
-          if (el.scrollWidth > el.clientWidth) this.setDynamicWidths();
+          const el = (event.target as HTMLElement).offsetParent || event.target;
+          if ((el as HTMLElement).scrollWidth > (el as HTMLElement).clientWidth)
+            this.setDynamicWidths();
         });
       });
   }
 
-  attachResizeHandler() {
+  attachResizeHandler(): void {
     this.resizeId = setInterval(() => {
       if (this.mainRef == null || this.cachedWidth === this.mainRef.clientWidth)
         return;
       this.setDynamicWidths();
       this.cachedWidth = this.mainRef.clientWidth;
-    }, 250);
+    }, 250) as any;
   }
 
-  removeResizeHandler() {
+  removeResizeHandler(): void {
     clearInterval(this.resizeId);
   }
 
-  setDynamicWidths() {
+  setDynamicWidths(): void {
     // noop if rows or filteredRows is empty
-    if (this.props.rows.length === 0 || this.props.filteredRows.length === 0)
+    if (
+      this.props.rows.length === 0 ||
+      (this.props.filteredRows && this.props.filteredRows.length === 0)
+    )
       return;
 
     this.setState({ dynamicWidths: null }, () => {
@@ -140,16 +161,18 @@ class DataTable extends React.Component {
     });
   }
 
-  hasExpansionColumn() {
+  hasExpansionColumn(): boolean {
     const { options, eventHandlers } = this.props;
+    if (!options || !eventHandlers) return false;
     return (
       typeof options.childRow === 'function' &&
       typeof eventHandlers.onExpandedRowsChange === 'function'
     );
   }
 
-  hasSelectionColumn() {
+  hasSelectionColumn(): boolean {
     const { options, eventHandlers } = this.props;
+    if (!options || !eventHandlers) return false;
     return (
       typeof options.isRowSelected === 'function' &&
       typeof eventHandlers.onRowSelect === 'function' &&
@@ -170,13 +193,14 @@ class DataTable extends React.Component {
       uiState,
       headerWrapperStyle,
     } = this.props;
-    const newColumns = options.useStickyFirstNColumns
-      ? this.makeFirstNColumnsSticky(columns, options.useStickyFirstNColumns)
-      : columns;
-    const wrapperStyle = {
-      maxHeight: options ? options.tableBodyMaxHeight : null,
+    const newColumns =
+      options && options.useStickyFirstNColumns
+        ? this.makeFirstNColumnsSticky(columns, options.useStickyFirstNColumns)
+        : columns;
+    const wrapperStyle: CSSProperties = {
+      maxHeight: options ? options.tableBodyMaxHeight : undefined,
     };
-    const tableStyle = {
+    const tableStyle: CSSProperties = {
       tableLayout: 'auto',
     };
     const tableProps = {
@@ -191,10 +215,13 @@ class DataTable extends React.Component {
     return (
       <div ref={(node) => (this.mainRef = node)} className="MesaComponent">
         <div
-          className={dataTableClass(null, [
-            options.useStickyHeader ? 'Sticky' : undefined,
-            options.marginContent ? 'HasMargin' : undefined,
-          ])}
+          className={dataTableClass(
+            undefined,
+            [
+              options && options.useStickyHeader ? 'Sticky' : undefined,
+              options && options.marginContent ? 'HasMargin' : undefined,
+            ].filter((x): x is string => x !== undefined)
+          )}
           style={wrapperStyle}
         >
           <table
@@ -203,10 +230,10 @@ class DataTable extends React.Component {
             style={tableStyle}
             ref={(node) => (this.contentTable = node)}
           >
-            <HeadingRow {...tableProps} />
+            <HeadingRow {...(tableProps as any)} />
             <DataRowList {...tableProps} />
           </table>
-          {this.props.options.marginContent && (
+          {this.props.options && this.props.options.marginContent && (
             <div className={dataTableClass('Margin')}>
               {this.props.options.marginContent}
             </div>
@@ -221,25 +248,4 @@ class DataTable extends React.Component {
   }
 }
 
-DataTable.propTypes = {
-  rows: PropTypes.array,
-  filteredRows: PropTypes.array,
-  headerWrapperStyle: PropTypes.object,
-  columns: PropTypes.array,
-  options: PropTypes.object,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      element: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.node,
-        PropTypes.element,
-      ]),
-      handler: PropTypes.func,
-      callback: PropTypes.func,
-    })
-  ),
-  uiState: PropTypes.object,
-  eventHandlers: PropTypes.objectOf(PropTypes.func),
-};
-
 export default DataTable;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/EmptyState.jsx b/packages/libs/coreui/src/components/Mesa/Ui/EmptyState.tsx
similarity index 81%
rename from packages/libs/coreui/src/components/Mesa/Ui/EmptyState.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/EmptyState.tsx
index c7d93bd54b..f187664bf6 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/EmptyState.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/EmptyState.tsx
@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Icon from '../Components/Icon';
 import { makeClassifier } from '../Utils/Utils';
 
-class EmptyState extends React.PureComponent {
-  constructor(props) {
+const emptyStateClass = makeClassifier('EmptyState');
+
+interface EmptyStateProps {
+  culprit?: 'search' | 'nocolumns' | 'filters' | 'nodata';
+}
+
+interface CulpritInfo {
+  icon: string;
+  title: string;
+  content: ReactNode;
+}
+
+class EmptyState extends React.PureComponent<EmptyStateProps> {
+  constructor(props: EmptyStateProps) {
     super(props);
     this.getCulprit = this.getCulprit.bind(this);
   }
 
-  getCulprit() {
+  getCulprit(): CulpritInfo {
     const { culprit } = this.props;
     switch (culprit) {
       case 'search':
@@ -59,7 +71,6 @@ class EmptyState extends React.PureComponent {
 
   render() {
     const culprit = this.getCulprit();
-    const emptyStateClass = makeClassifier('EmptyState');
 
     return (
       <div className={emptyStateClass()}>
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx b/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
index b58cbe2bb3..61752d4d08 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/ExpansionCell.tsx
@@ -1,19 +1,19 @@
 import React, { useCallback } from 'react';
 import { ArrowDown, ArrowRight } from '../../icons';
 
-type Props = {
-  rows: unknown[];
-  row: unknown;
+type Props<Row = unknown> = {
+  rows: Row[];
+  row: Row;
   onExpandedRowsChange: (ids: (string | number)[]) => void;
   expandedRows: (string | number)[];
-  getRowId: (row: unknown) => string | number;
+  getRowId: (row: Row) => string | number;
   inert: boolean;
   heading: boolean;
 };
 
-const EMPTY_ARRAY: Props['expandedRows'] = [];
+const EMPTY_ARRAY: (string | number)[] = [];
 
-export default function ExpansionCell({
+export default function ExpansionCell<Row = unknown>({
   rows,
   row,
   onExpandedRowsChange,
@@ -21,7 +21,7 @@ export default function ExpansionCell({
   getRowId,
   inert,
   heading,
-}: Props) {
+}: Props<Row>) {
   const expandAllRows = useCallback(
     () => onExpandedRowsChange(rows.map((row) => getRowId(row))),
     [onExpandedRowsChange, rows, getRowId]
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.tsx
similarity index 64%
rename from packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.tsx
index 0bbc62c6c4..b6343c5178 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.tsx
@@ -1,16 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { CSSProperties, ReactElement } from 'react';
 
 import Templates from '../Templates';
 import Icon from '../Components/Icon';
 import HelpTrigger from '../Components/HelpTrigger';
 import { makeClassifier } from '../Utils/Utils';
 import Events, { EventsFactory } from '../Utils/Events';
+import { MesaColumn, MesaSortObject, MesaStateProps } from '../types';
 
 const headingCellClass = makeClassifier('HeadingCell');
 
-class HeadingCell extends React.PureComponent {
-  constructor(props) {
+interface HeadingCellProps<Row, Key = string> {
+  sort?: MesaSortObject<Key extends string ? Key : string>;
+  eventHandlers?: MesaStateProps<Row, Key>['eventHandlers'];
+  column: MesaColumn<Row, Key>;
+  columnIndex: number;
+  primary?: boolean;
+  headingRowIndex?: number;
+  offsetLeft?: number;
+}
+
+interface HeadingCellState {
+  offset: DOMRect | null;
+  isDragging: boolean;
+  isDragTarget: boolean;
+}
+
+class HeadingCell<Row, Key = string> extends React.PureComponent<
+  HeadingCellProps<Row, Key>,
+  HeadingCellState
+> {
+  private element?: HTMLTableCellElement;
+  private listeners?: { [key: string]: string };
+
+  constructor(props: HeadingCellProps<Row, Key>) {
     super(props);
     this.state = {
       offset: null,
@@ -45,12 +67,14 @@ class HeadingCell extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    Object.values(this.listeners).forEach((listenerId) =>
-      Events.remove(listenerId)
-    );
+    if (this.listeners) {
+      Object.values(this.listeners).forEach((listenerId) =>
+        Events.remove(listenerId)
+      );
+    }
   }
 
-  componentdidUpdate(prevProps) {
+  componentDidUpdate(prevProps: HeadingCellProps<Row, Key>) {
     if (
       prevProps.column !== this.props.column ||
       prevProps.column.width !== this.props.column.width
@@ -68,9 +92,9 @@ class HeadingCell extends React.PureComponent {
 
   sortColumn() {
     const { column, sort, eventHandlers } = this.props;
-    const { onSort } = eventHandlers;
+    const { onSort } = eventHandlers ?? {};
     if (typeof onSort !== 'function' || !column.sortable) return;
-    const currentlySorting = sort && sort.columnKey === column.key;
+    const currentlySorting = sort && sort.columnKey === String(column.key);
     const direction =
       currentlySorting && sort.direction === 'asc' ? 'desc' : 'asc';
     return onSort(column, direction);
@@ -78,7 +102,7 @@ class HeadingCell extends React.PureComponent {
 
   // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
-  wrapContent(content = null) {
+  wrapContent(content: React.ReactNode = null) {
     const SortTrigger = this.renderSortTrigger;
     const HelpTrigger = this.renderHelpTrigger;
     const ClickBoundary = this.renderClickBoundary;
@@ -109,25 +133,31 @@ class HeadingCell extends React.PureComponent {
       !('renderHeading' in column) ||
       typeof column.renderHeading !== 'function'
     )
-      return this.wrapContent(Templates.heading(column, columnIndex));
+      return this.wrapContent(
+        Templates.heading({ key: column.key, column } as any)
+      );
 
     const content = column.renderHeading(column, columnIndex, {
-      SortTrigger,
-      HelpTrigger,
-      ClickBoundary,
+      SortTrigger: (<SortTrigger />) as ReactElement,
+      HelpTrigger: (<HelpTrigger />) as ReactElement,
+      ClickBoundary: (<ClickBoundary children={null} />) as ReactElement,
     });
     const { wrapCustomHeadings } = column;
     const shouldWrap =
       wrapCustomHeadings && typeof wrapCustomHeadings === 'function'
-        ? wrapCustomHeadings({ column, columnIndex, headingRowIndex })
+        ? wrapCustomHeadings({
+            column,
+            columnIndex,
+            headerRowIndex: headingRowIndex ?? 0,
+          })
         : wrapCustomHeadings;
 
     return shouldWrap ? this.wrapContent(content) : content;
   }
 
-  renderClickBoundary({ children }) {
-    const style = { display: 'inline-block' };
-    const stopPropagation = (node) => {
+  renderClickBoundary({ children }: { children: React.ReactNode }) {
+    const style: CSSProperties = { display: 'inline-block' };
+    const stopPropagation = (node: HTMLDivElement | null) => {
       if (!node) return null;
       const instance = EventsFactory(node);
       instance.add('click', (e) => {
@@ -143,10 +173,10 @@ class HeadingCell extends React.PureComponent {
 
   renderSortTrigger() {
     const { column, sort, eventHandlers } = this.props;
-    const { columnKey, direction } = sort ? sort : {};
-    const { key, sortable } = column ? column : {};
-    const { onSort } = eventHandlers ? eventHandlers : {};
-    const isActive = columnKey === key;
+    const { columnKey, direction } = sort ?? {};
+    const { key, sortable } = column ?? {};
+    const { onSort } = eventHandlers ?? {};
+    const isActive = columnKey === String(key);
 
     if (!sortable || (typeof onSort !== 'function' && !isActive)) return null;
 
@@ -177,56 +207,59 @@ class HeadingCell extends React.PureComponent {
 
   renderHelpTrigger() {
     const { column } = this.props;
-    if (!column.helpText && !column.htmlHelp) return null;
-    return <HelpTrigger>{column.htmlHelp ?? column.helpText}</HelpTrigger>;
+    if (!column.helpText && !('htmlHelp' in column)) return null;
+    return (
+      <HelpTrigger>
+        {('htmlHelp' in column && column.htmlHelp) ?? column.helpText}
+      </HelpTrigger>
+    );
   }
 
   // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
-  onDragStart(event) {
+  onDragStart(event: React.DragEvent<HTMLTableCellElement>) {
     const { key } = this.props.column;
     event.dataTransfer.effectAllowed = 'copy';
-    event.dataTransfer.setData('text', key);
+    event.dataTransfer.setData('text', String(key));
     this.setState({ isDragging: true });
     return event;
   }
 
-  onDragEnd(event) {
+  onDragEnd(event: React.DragEvent<HTMLTableCellElement>) {
     this.setState({ isDragging: false, isDragTarget: false });
-    this.element.blur();
+    this.element?.blur();
     event.preventDefault();
   }
 
-  onDragEnter(event) {
-    const dragee = event.dataTransfer.getData('text');
+  onDragEnter(event: React.DragEvent<HTMLTableCellElement>) {
     if (!this.state.isDragTarget) this.setState({ isDragTarget: true });
     event.preventDefault();
   }
 
-  onDragExit(event) {
+  onDragExit(event: React.DragEvent<HTMLTableCellElement>) {
     this.setState({ isDragTarget: false });
     event.preventDefault();
   }
 
-  onDragOver(event) {
+  onDragOver(event: React.DragEvent<HTMLTableCellElement>) {
     event.preventDefault();
   }
 
-  onDragLeave(event) {
+  onDragLeave(event: React.DragEvent<HTMLTableCellElement>) {
     this.setState({ isDragTarget: false });
-    this.element.blur();
+    this.element?.blur();
     event.preventDefault();
   }
 
-  onDrop(event) {
-    this.element.blur();
+  onDrop(event: React.DragEvent<HTMLTableCellElement>) {
+    this.element?.blur();
     event.preventDefault();
     const { eventHandlers, columnIndex } = this.props;
-    const { onColumnReorder } = eventHandlers;
+    const { onColumnReorder } = eventHandlers ?? {};
     if (typeof onColumnReorder !== 'function') return;
     const draggedColumn = event.dataTransfer.getData('text');
     if (this.state.isDragTarget) this.setState({ isDragTarget: false });
-    onColumnReorder(draggedColumn, columnIndex);
+    onColumnReorder(draggedColumn as unknown as Key, columnIndex);
   }
 
   getDomEvents() {
@@ -253,26 +286,33 @@ class HeadingCell extends React.PureComponent {
   getClassName() {
     const { key, className } = this.props.column;
     const { isDragging, isDragTarget } = this.state;
-    const modifiers = ['key-' + key];
+    const modifiers = ['key-' + String(key)];
     if (isDragging) modifiers.push('Dragging');
     if (isDragTarget) modifiers.push('DragTarget');
     return (
       (typeof className === 'string' ? className + ' ' : '') +
-      headingCellClass(null, modifiers)
+      headingCellClass(undefined, modifiers)
     );
   }
 
   render() {
     const { column, eventHandlers, primary } = this.props;
-    const { key, headingStyle, width } = column;
-    const widthStyle = width ? { width, maxWidth: width, minWidth: width } : {};
-
-    const style = Object.assign(
-      {},
-      headingStyle ? headingStyle : {},
-      widthStyle
-    );
-    const ref = (element) => (this.element = element);
+    const { key, width } = column;
+    const headingStyle =
+      'headingStyle' in column
+        ? (column.headingStyle as CSSProperties)
+        : undefined;
+    const widthStyle: CSSProperties = width
+      ? { width, maxWidth: width, minWidth: width }
+      : {};
+
+    const style: CSSProperties = {
+      ...(headingStyle ?? {}),
+      ...widthStyle,
+    };
+    const ref = (element: HTMLTableCellElement | null) => {
+      if (element) this.element = element;
+    };
 
     const children = this.renderContent();
     const className = this.getClassName();
@@ -282,21 +322,14 @@ class HeadingCell extends React.PureComponent {
       primary &&
       column.moveable &&
       !column.primary &&
-      typeof eventHandlers.onColumnReorder === 'function';
+      typeof eventHandlers?.onColumnReorder === 'function';
 
     const props = { style, ref, draggable, children, className };
 
-    return column.hidden ? null : <th key={key} {...props} {...domEvents} />;
+    const hidden = 'hidden' in column ? column.hidden : false;
+
+    return hidden ? null : <th key={String(key)} {...props} {...domEvents} />;
   }
 }
 
-HeadingCell.propTypes = {
-  sort: PropTypes.object,
-  eventHandlers: PropTypes.object,
-  column: PropTypes.object.isRequired,
-  columnIndex: PropTypes.number.isRequired,
-  primary: PropTypes.bool,
-  headingRowIndex: PropTypes.number,
-};
-
 export default HeadingCell;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.tsx
similarity index 58%
rename from packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.tsx
index c92e8e71d6..94470c275f 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/HeadingRow.tsx
@@ -1,31 +1,50 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import ExpansionCell from './ExpansionCell';
 
 import HeadingCell from './HeadingCell';
 import SelectionCell from './SelectionCell';
+import { MesaStateProps, MesaColumn } from '../types';
 
-class HeadingRow extends React.PureComponent {
-  constructor(props) {
-    super(props);
-  }
+interface HeadingRowProps<Row, Key = string>
+  extends Pick<
+    MesaStateProps<Row, Key>,
+    'columns' | 'uiState' | 'eventHandlers' | 'options' | 'actions'
+  > {
+  filteredRows: Row[];
+  offsetLeft?: number;
+}
+
+interface ColumnDefaults {
+  [key: string]: any;
+}
+
+type HeadingRowColumn<Row, Key = string> = MesaColumn<Row, Key> & {
+  renderHeading?:
+    | boolean
+    | ((
+        column: MesaColumn<Row, Key>,
+        columnIndex: number,
+        components: any
+      ) => ReactNode)
+    | ReactNode[];
+};
 
+class HeadingRow<Row, Key = string> extends React.PureComponent<
+  HeadingRowProps<Row, Key>
+> {
   render() {
     const {
       filteredRows,
       options,
       columns,
-      actions,
       uiState,
       eventHandlers,
       offsetLeft,
     } = this.props;
-    const { isRowSelected, columnDefaults, childRow, getRowId } = options
-      ? options
-      : {};
-    const { sort, expandedRows } = uiState ? uiState : {};
-    const { onRowSelect, onRowDeselect, onExpandedRowsChange } = eventHandlers
-      ? eventHandlers
-      : {};
+    const { isRowSelected, columnDefaults, childRow, getRowId } = options ?? {};
+    const { sort, expandedRows } = uiState ?? {};
+    const { onRowSelect, onRowDeselect, onExpandedRowsChange } =
+      eventHandlers ?? {};
     const hasSelectionColumn = [
       isRowSelected,
       onRowSelect,
@@ -39,8 +58,9 @@ class HeadingRow extends React.PureComponent {
       getRowId != null;
 
     const rowCount = columns.reduce((count, column) => {
-      const thisCount = Array.isArray(column.renderHeading)
-        ? column.renderHeading.length
+      const col = column as HeadingRowColumn<Row, Key>;
+      const thisCount = Array.isArray(col.renderHeading)
+        ? col.renderHeading.length
         : 1;
       return Math.max(thisCount, count);
     }, 1);
@@ -48,14 +68,17 @@ class HeadingRow extends React.PureComponent {
     const headingRows = new Array(rowCount).fill({}).map((blank, index) => {
       const isFirstRow = !index;
       const cols = columns.map((col) => {
-        const output = Object.assign({}, col);
-        if (Array.isArray(col.renderHeading)) {
+        const column = col as HeadingRowColumn<Row, Key>;
+        const output: any = { ...column };
+        if (Array.isArray(column.renderHeading)) {
           output.renderHeading =
-            col.renderHeading.length > index ? col.renderHeading[index] : false;
+            column.renderHeading.length > index
+              ? column.renderHeading[index]
+              : false;
         } else if (!isFirstRow) {
           output.renderHeading = false;
         }
-        return output;
+        return output as HeadingRowColumn<Row, Key>;
       });
       return { cols, isFirstRow };
     });
@@ -71,32 +94,33 @@ class HeadingRow extends React.PureComponent {
                   heading={true}
                   key="_expansion"
                   rows={filteredRows}
-                  childRow={childRow}
-                  getRowId={getRowId}
+                  row={filteredRows[0]}
+                  getRowId={getRowId as any}
                   onExpandedRowsChange={onExpandedRowsChange}
                   expandedRows={expandedRows}
                 />
               )}
-              {hasSelectionColumn && (
+              {hasSelectionColumn && isRowSelected && (
                 <SelectionCell
                   inert={!isFirstRow}
                   heading={true}
                   key="_selection"
                   rows={filteredRows}
-                  options={options}
-                  eventHandlers={eventHandlers}
+                  options={options as any}
+                  eventHandlers={eventHandlers as any}
                   isRowSelected={isRowSelected}
                 />
               )}
               {cols.map((column, columnIndex) => {
+                let mergedColumn = column;
                 if (typeof columnDefaults === 'object')
-                  column = Object.assign({}, columnDefaults, column);
+                  mergedColumn = { ...columnDefaults, ...column };
                 return (
                   <HeadingCell
-                    sort={sort}
-                    key={`${column.key}-${columnIndex}`}
+                    sort={sort as any}
+                    key={`${String(mergedColumn.key)}-${columnIndex}`}
                     primary={isFirstRow}
-                    column={column}
+                    column={mergedColumn}
                     headingRowIndex={index}
                     offsetLeft={offsetLeft}
                     columnIndex={columnIndex}
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx b/packages/libs/coreui/src/components/Mesa/Ui/MesaController.tsx
similarity index 68%
rename from packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/MesaController.tsx
index cf4f3d44ff..001c09a6a1 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/MesaController.tsx
@@ -1,14 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 
 import DataTable from './DataTable';
 import TableToolbar from './TableToolbar';
 import ActionToolbar from './ActionToolbar';
 import PaginationMenu from './PaginationMenu';
 import EmptyState from './EmptyState';
+import { MesaStateProps } from '../types';
 
-class MesaController extends React.Component {
-  constructor(props) {
+interface MesaControllerProps<Row, Key = string>
+  extends MesaStateProps<Row, Key> {
+  children?: ReactNode;
+  headerWrapperStyle?: React.CSSProperties;
+}
+
+class MesaController<Row, Key = string> extends React.Component<
+  MesaControllerProps<Row, Key>
+> {
+  constructor(props: MesaControllerProps<Row, Key>) {
     super(props);
     this.renderToolbar = this.renderToolbar.bind(this);
     this.renderActionBar = this.renderActionBar.bind(this);
@@ -36,7 +44,7 @@ class MesaController extends React.Component {
     const props = { rows, options, columns, uiState, eventHandlers, children };
     if (!options || !options.toolbar) return null;
 
-    return <TableToolbar {...props} />;
+    return <TableToolbar {...(props as any)} />;
   }
 
   renderActionBar() {
@@ -54,13 +62,13 @@ class MesaController extends React.Component {
     if (!this.renderToolbar() && children)
       props = Object.assign({}, props, { children });
 
-    return <ActionToolbar {...props} />;
+    return <ActionToolbar {...(props as any)} />;
   }
 
   renderEmptyState() {
     const { uiState, options } = this.props;
-    const { emptinessCulprit } = uiState ? uiState : {};
-    const { renderEmptyState } = options ? options : {};
+    const { emptinessCulprit } = uiState ?? {};
+    const { renderEmptyState } = options ?? {};
 
     return renderEmptyState ? (
       renderEmptyState()
@@ -95,22 +103,21 @@ class MesaController extends React.Component {
     const Toolbar = this.renderToolbar;
     const ActionBar = this.renderActionBar;
     const PageNav = this.renderPaginationMenu;
-    const Empty = this.renderEmptyState;
 
-    const className = (options.className ?? '') + ' Mesa MesaComponent';
+    const className = (options?.className ?? '') + ' Mesa MesaComponent';
 
     return (
-      <div className={className} style={options.style}>
+      <div className={className} style={options?.style}>
         <Toolbar />
         <ActionBar />
         <PageNav />
         {rows.length ? (
           <React.Fragment>
-            <DataTable {...props} />
-            {filteredRows.length ? null : <Empty />}
+            <DataTable {...(props as any)} />
+            {filteredRows.length ? null : this.renderEmptyState()}
           </React.Fragment>
         ) : (
-          <Empty />
+          this.renderEmptyState()
         )}
         <PageNav />
       </div>
@@ -118,24 +125,4 @@ class MesaController extends React.Component {
   }
 }
 
-MesaController.propTypes = {
-  rows: PropTypes.array.isRequired,
-  columns: PropTypes.array.isRequired,
-  filteredRows: PropTypes.array,
-  options: PropTypes.object,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      element: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.node,
-        PropTypes.element,
-      ]),
-      handler: PropTypes.func,
-      callback: PropTypes.func,
-    })
-  ),
-  uiState: PropTypes.object,
-  eventHandlers: PropTypes.objectOf(PropTypes.func),
-};
-
 export default MesaController;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.jsx b/packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.tsx
similarity index 78%
rename from packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.tsx
index fdcfea9cb1..a4d73d5b57 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/PaginationMenu.tsx
@@ -1,6 +1,5 @@
 import { range } from 'lodash';
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import Icon from '../Components/Icon';
 import RowsPerPageMenu from './RowsPerPageMenu';
@@ -10,8 +9,27 @@ const settings = {
   innerRadius: 2,
 };
 
-class PaginationMenu extends React.PureComponent {
-  constructor(props) {
+interface PaginationMenuProps {
+  totalRows?: number;
+  totalPages?: number;
+  currentPage?: number;
+  rowsPerPage?: number;
+  onPageChange?: (page: number) => void;
+  rowsPerPageOptions?: number[];
+  onRowsPerPageChange?: (numRows: number) => void;
+}
+
+type RelativePageType =
+  | 'first'
+  | 'start'
+  | 'last'
+  | 'end'
+  | 'next'
+  | 'prev'
+  | 'previous';
+
+class PaginationMenu extends React.PureComponent<PaginationMenuProps> {
+  constructor(props: PaginationMenuProps) {
     super(props);
     this.renderEllipsis = this.renderEllipsis.bind(this);
     this.renderPageLink = this.renderPageLink.bind(this);
@@ -20,7 +38,7 @@ class PaginationMenu extends React.PureComponent {
     this.renderRelativeLink = this.renderRelativeLink.bind(this);
   }
 
-  renderEllipsis(key = '') {
+  renderEllipsis(key: string | number = '') {
     return (
       <div key={'ellipsis-' + key} className="ellipsis">
         ...
@@ -28,7 +46,7 @@ class PaginationMenu extends React.PureComponent {
     );
   }
 
-  renderPageLink(page, current) {
+  renderPageLink(page: number, current?: number) {
     let handler = () => this.goToPage(page);
     return (
       <button
@@ -42,14 +60,15 @@ class PaginationMenu extends React.PureComponent {
     );
   }
 
-  getTotalPages() {
+  getTotalPages(): number {
     const { rowsPerPage, totalPages, totalRows } = this.props;
-    return totalPages || Math.ceil(totalRows / rowsPerPage);
+    return totalPages || Math.ceil((totalRows || 0) / (rowsPerPage || 1));
   }
 
-  getRelativePageNumber(relative) {
+  getRelativePageNumber(relative: string): number | null {
     const { currentPage } = this.props;
     const totalPages = this.getTotalPages();
+    if (!currentPage) return null;
     switch (relative.toLowerCase()) {
       case 'first':
       case 'start':
@@ -67,7 +86,7 @@ class PaginationMenu extends React.PureComponent {
     }
   }
 
-  getRelativeIcon(relative) {
+  getRelativeIcon(relative: string): string | null {
     switch (relative.toLowerCase()) {
       case 'first':
       case 'start':
@@ -85,12 +104,12 @@ class PaginationMenu extends React.PureComponent {
     }
   }
 
-  goToPage(page) {
+  goToPage(page: number) {
     let { onPageChange } = this.props;
     if (onPageChange) onPageChange(page);
   }
 
-  renderRelativeLink({ relative }) {
+  renderRelativeLink({ relative }: { relative: RelativePageType }) {
     const page = this.getRelativePageNumber(relative);
     const icon = this.getRelativeIcon(relative);
 
@@ -112,6 +131,8 @@ class PaginationMenu extends React.PureComponent {
     const { currentPage } = this.props;
     const totalPages = this.getTotalPages();
 
+    if (!currentPage) return null;
+
     const left = Math.max(1, currentPage - innerRadius);
     const right = Math.min(currentPage + innerRadius, totalPages);
     const pageList = range(left, right + 1);
@@ -129,7 +150,7 @@ class PaginationMenu extends React.PureComponent {
 
   renderPerPageMenu() {
     const { rowsPerPage, rowsPerPageOptions, onRowsPerPageChange } = this.props;
-    if (!onRowsPerPageChange) return null;
+    if (!onRowsPerPageChange || !rowsPerPage) return null;
     return (
       <span className="Pagination-Editor">
         <RowsPerPageMenu
@@ -151,7 +172,7 @@ class PaginationMenu extends React.PureComponent {
 
     if (!totalPages || !currentPage) return null;
 
-    const showPageList = totalRows > rowsPerPage;
+    const showPageList = totalRows && rowsPerPage && totalRows > rowsPerPage;
 
     return (
       <div className="PaginationMenu">
@@ -165,14 +186,4 @@ class PaginationMenu extends React.PureComponent {
   }
 }
 
-PaginationMenu.propTypes = {
-  totalRows: PropTypes.number,
-  totalPages: PropTypes.number,
-  currentPage: PropTypes.number,
-  rowsPerPage: PropTypes.number,
-  onPageChange: PropTypes.func,
-  rowsPerPageOptions: PropTypes.array,
-  onRowsPerPageChange: PropTypes.func,
-};
-
 export default PaginationMenu;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx b/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.tsx
similarity index 55%
rename from packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/RowCounter.tsx
index 4657e08294..b07a3b244b 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
+import { MesaStateProps } from '../types';
 
-class RowCounter extends React.PureComponent {
-  constructor(props) {
-    super(props);
-  }
+interface RowCounterProps<Row>
+  extends Pick<MesaStateProps<Row>, 'uiState' | 'eventHandlers'> {
+  rows: Row[];
+}
 
+class RowCounter<Row> extends React.PureComponent<RowCounterProps<Row>> {
   render() {
     const { rows, uiState, eventHandlers } = this.props;
 
-    const { pagination = {}, filteredRowCount = 0 } = uiState;
-    const { totalRows, rowsPerPage } = pagination;
+    const { pagination, filteredRowCount = 0 } = uiState ?? {};
+    const { totalRows, rowsPerPage, currentPage } = pagination ?? {};
 
-    const isPaginated = 'onPageChange' in eventHandlers;
-    const isSearching = uiState.searchQuery && uiState.searchQuery.length;
+    const isPaginated = eventHandlers && 'onPageChange' in eventHandlers;
+    const isSearching = uiState?.searchQuery && uiState.searchQuery.length;
 
     const count = totalRows ? totalRows : rows.length;
 
@@ -20,15 +22,17 @@ class RowCounter extends React.PureComponent {
       (isSearching ? 'result' : 'row') +
       (count - filteredRowCount === 1 ? '' : 's');
 
-    const start = !isPaginated
-      ? null
-      : (pagination.currentPage - 1) * rowsPerPage + 1;
+    const start =
+      !isPaginated || !currentPage || !rowsPerPage
+        ? null
+        : (currentPage - 1) * rowsPerPage + 1;
 
-    const end = !isPaginated
-      ? null
-      : start + rowsPerPage > count - filteredRowCount
-      ? count - filteredRowCount
-      : start - 1 + rowsPerPage;
+    const end =
+      !isPaginated || !start || !rowsPerPage
+        ? null
+        : start + rowsPerPage > count - filteredRowCount
+        ? count - filteredRowCount
+        : start - 1 + rowsPerPage;
 
     let filterString = !filteredRowCount ? null : (
       <span className="faded">
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.jsx b/packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.tsx
similarity index 59%
rename from packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.tsx
index ede2e4e3ea..edb9a4c36a 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/RowsPerPageMenu.tsx
@@ -2,16 +2,22 @@ import React from 'react';
 
 import SelectBox from '../Components/SelectBox';
 
-class RowsPerPageMenu extends React.PureComponent {
-  constructor(props) {
+interface RowsPerPageMenuProps {
+  rowsPerPage: number;
+  rowsPerPageOptions?: number[];
+  onRowsPerPageChange?: (itemsPerPage: number) => void;
+}
+
+class RowsPerPageMenu extends React.PureComponent<RowsPerPageMenuProps> {
+  constructor(props: RowsPerPageMenuProps) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }
 
-  handleChange(itemsPerPage) {
+  handleChange(itemsPerPage: string | number) {
     const { onRowsPerPageChange } = this.props;
-    itemsPerPage = parseInt(itemsPerPage);
-    if (onRowsPerPageChange) onRowsPerPageChange(itemsPerPage);
+    const numItemsPerPage = parseInt(String(itemsPerPage));
+    if (onRowsPerPageChange) onRowsPerPageChange(numItemsPerPage);
   }
 
   render() {
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.tsx
similarity index 67%
rename from packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.tsx
index 05e3fc2b35..31516e0fae 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/SelectionCell.tsx
@@ -3,9 +3,20 @@ import React from 'react';
 import Checkbox from '../Components/Checkbox';
 import AnchoredTooltip from '../Components/AnchoredTooltip';
 import Icon from '../Components/Icon';
+import { MesaStateProps } from '../types';
 
-class SelectionCell extends React.PureComponent {
-  constructor(props) {
+interface SelectionCellProps<Row> {
+  rows?: Row[];
+  row?: Row;
+  heading?: boolean;
+  inert?: boolean;
+  isRowSelected: (row: Row) => boolean;
+  options: MesaStateProps<Row>['options'];
+  eventHandlers: MesaStateProps<Row>['eventHandlers'];
+}
+
+class SelectionCell<Row> extends React.PureComponent<SelectionCellProps<Row>> {
+  constructor(props: SelectionCellProps<Row>) {
     super(props);
     this.selectAllRows = this.selectAllRows.bind(this);
     this.deselectAllRows = this.deselectAllRows.bind(this);
@@ -15,31 +26,34 @@ class SelectionCell extends React.PureComponent {
 
   selectAllRows() {
     const { rows, options, eventHandlers } = this.props;
-    const { isRowSelected } = options;
-    const { onRowSelect, onMultipleRowSelect } = eventHandlers;
+    const { isRowSelected } = options ?? {};
+    const { onRowSelect, onMultipleRowSelect } = eventHandlers ?? {};
+    if (!rows || !isRowSelected) return;
     const unselectedRows = rows.filter((row) => !isRowSelected(row));
     if (onMultipleRowSelect) return onMultipleRowSelect(unselectedRows);
-    return unselectedRows.forEach(onRowSelect);
+    if (onRowSelect) return unselectedRows.forEach(onRowSelect);
   }
 
   deselectAllRows() {
     const { rows, options, eventHandlers } = this.props;
-    const { isRowSelected } = options;
-    const { onRowDeselect, onMultipleRowDeselect } = eventHandlers;
+    const { isRowSelected } = options ?? {};
+    const { onRowDeselect, onMultipleRowDeselect } = eventHandlers ?? {};
+    if (!rows || !isRowSelected) return;
     const selection = rows.filter(isRowSelected);
     if (onMultipleRowDeselect) return onMultipleRowDeselect(selection);
-    return selection.forEach(onRowDeselect);
+    if (onRowDeselect) return selection.forEach(onRowDeselect);
   }
 
   renderPageCheckbox() {
     const { rows, isRowSelected, inert, options } = this.props;
+    if (!rows) return null;
     const selection = rows.filter(isRowSelected);
-    const checked = rows.length && rows.every(isRowSelected);
+    const checked = rows.length > 0 && rows.every(isRowSelected);
     const isIndeterminate = selection.length > 0 && !checked;
 
-    const { selectColumnHeadingDetails } = options;
+    const { selectColumnHeadingDetails } = options ?? {};
 
-    let handler = (e) => {
+    let handler = (e: React.MouseEvent) => {
       e.stopPropagation();
       return checked || isIndeterminate
         ? this.deselectAllRows()
@@ -77,12 +91,15 @@ class SelectionCell extends React.PureComponent {
 
   renderRowCheckbox() {
     const { row, isRowSelected, eventHandlers, inert } = this.props;
-    const { onRowSelect, onRowDeselect } = eventHandlers;
+    const { onRowSelect, onRowDeselect } = eventHandlers ?? {};
+    if (!row) return null;
     const checked = isRowSelected(row);
 
-    let handler = (e) => {
+    let handler = (e: React.MouseEvent) => {
       e.stopPropagation();
-      return checked ? onRowDeselect(row) : onRowSelect(row);
+      return checked
+        ? onRowDeselect && onRowDeselect(row)
+        : onRowSelect && onRowSelect(row);
     };
 
     return (
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.jsx b/packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.tsx
similarity index 69%
rename from packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.tsx
index b29db1931a..d3c4d3cbe9 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/SelectionCounter.tsx
@@ -1,20 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class SelectionCounter extends React.Component {
-  constructor(props) {
+interface SelectionCounterProps<Row> {
+  // all/total "rows" in the table
+  rows: Row[];
+  // predicate to test for 'selectedness'
+  isRowSelected: (row: Row) => boolean;
+
+  // noun and plural to use for selections (e.g. "25 Datasets selected")
+  selectedNoun?: string;
+  selectedPluralNoun?: string;
+  // single and multiple select/deselect handlers
+  onRowSelect?: (row: Row) => void;
+  onRowDeselect?: (row: Row) => void;
+  onMultipleRowSelect?: (rows: Row[]) => void;
+  onMultipleRowDeselect?: (rows: Row[]) => void;
+}
+
+class SelectionCounter<Row> extends React.Component<
+  SelectionCounterProps<Row>
+> {
+  constructor(props: SelectionCounterProps<Row>) {
     super(props);
     this.noun = this.noun.bind(this);
     this.selectAllRows = this.selectAllRows.bind(this);
     this.deselectAllRows = this.deselectAllRows.bind(this);
   }
 
-  noun(size) {
+  noun(size: number | Row[]) {
     const { selectedNoun, selectedPluralNoun } = this.props;
-    size = typeof size === 'number' ? size : size.length;
+    const count = typeof size === 'number' ? size : size.length;
     return !selectedNoun && !selectedPluralNoun
-      ? 'row' + (size === 1 ? '' : 's')
-      : size === 1
+      ? 'row' + (count === 1 ? '' : 's')
+      : count === 1
       ? selectedNoun || 'row'
       : selectedPluralNoun || 'rows';
   }
@@ -25,7 +42,7 @@ class SelectionCounter extends React.Component {
     const unselectedRows = rows.filter((row) => !isRowSelected(row));
     if (typeof onMultipleRowSelect === 'function')
       onMultipleRowSelect(unselectedRows);
-    else unselectedRows.forEach((row) => onRowSelect(row));
+    else if (onRowSelect) unselectedRows.forEach((row) => onRowSelect(row));
   }
 
   deselectAllRows() {
@@ -34,7 +51,7 @@ class SelectionCounter extends React.Component {
     const selection = rows.filter(isRowSelected);
     if (typeof onMultipleRowDeselect === 'function')
       onMultipleRowDeselect(selection);
-    else selection.forEach((row) => onRowDeselect(row));
+    else if (onRowDeselect) selection.forEach((row) => onRowDeselect(row));
   }
 
   render() {
@@ -58,20 +75,4 @@ class SelectionCounter extends React.Component {
   }
 }
 
-SelectionCounter.propTypes = {
-  // all/total "rows" in the table
-  rows: PropTypes.array.isRequired,
-  // predicate to test for 'selectedness'
-  isRowSelected: PropTypes.func.isRequired,
-
-  // noun and plural to use for selections (e.g. "25 Datasets selected")
-  selectedNoun: PropTypes.string,
-  selectedPluralNoun: PropTypes.string,
-  // single and multiple select/deselect handlers
-  onRowSelect: PropTypes.func,
-  onRowDeselect: PropTypes.func,
-  onMultipleRowSelect: PropTypes.func,
-  onMultipleRowDeselect: PropTypes.func,
-};
-
 export default SelectionCounter;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx b/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.tsx
similarity index 75%
rename from packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/TableSearch.tsx
index 64fabbf22a..12c0eb7d20 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Icon from '../Components/Icon';
+import { MesaStateProps } from '../types';
 
-class TableSearch extends React.PureComponent {
-  constructor(props) {
+interface TableSearchProps {
+  searchQuery?: string;
+  options?: MesaStateProps<any>['options'];
+  onSearch?: (query: string) => void;
+}
+
+class TableSearch extends React.PureComponent<TableSearchProps> {
+  constructor(props: TableSearchProps) {
     super(props);
     this.handleQueryChange = this.handleQueryChange.bind(this);
     this.clearSearchQuery = this.clearSearchQuery.bind(this);
   }
 
-  handleQueryChange(e) {
+  handleQueryChange(e: React.ChangeEvent<HTMLInputElement>) {
     const query = e.target.value;
     const { onSearch } = this.props;
     if (onSearch) onSearch(query);
   }
 
   clearSearchQuery() {
-    const query = null;
     const { onSearch } = this.props;
     if (onSearch) onSearch('');
   }
@@ -47,10 +52,4 @@ class TableSearch extends React.PureComponent {
   }
 }
 
-TableSearch.propTypes = {
-  searchQuery: PropTypes.string,
-  options: PropTypes.object,
-  onSearch: PropTypes.func,
-};
-
 export default TableSearch;
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx b/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.tsx
similarity index 73%
rename from packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx
rename to packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.tsx
index 3853b92e66..ff0c74d3a9 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.tsx
@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import TableSearch from './TableSearch';
 import RowCounter from './RowCounter';
+import { MesaStateProps } from '../types';
 
-class TableToolbar extends React.PureComponent {
-  constructor(props) {
+interface TableToolbarProps<Row>
+  extends Pick<MesaStateProps<Row>, 'uiState' | 'eventHandlers' | 'options'> {
+  rows?: Row[];
+  children?: ReactNode;
+}
+
+class TableToolbar<Row> extends React.PureComponent<TableToolbarProps<Row>> {
+  constructor(props: TableToolbarProps<Row>) {
     super(props);
 
     this.renderTitle = this.renderTitle.bind(this);
@@ -16,7 +23,7 @@ class TableToolbar extends React.PureComponent {
 
   renderTitle() {
     const { options } = this.props;
-    const { title } = options;
+    const { title } = options ?? {};
 
     if (!title) return null;
     return <h1 className="TableToolbar-Title">{title}</h1>;
@@ -24,21 +31,21 @@ class TableToolbar extends React.PureComponent {
 
   renderSearch() {
     const { uiState, eventHandlers, options } = this.props;
-    const { onSearch } = eventHandlers;
-    const { searchQuery } = uiState;
+    const { onSearch } = eventHandlers ?? {};
+    const { searchQuery } = uiState ?? {};
 
     if (!onSearch) return null;
     return (
       <TableSearch
         searchQuery={searchQuery}
         onSearch={onSearch}
-        options={options}
+        options={options as any}
       />
     );
   }
 
   renderCounter() {
-    const { rows = {}, options = {}, uiState = {}, eventHandlers } = this.props;
+    const { rows = [], options = {}, uiState = {}, eventHandlers } = this.props;
     const { showCount, toolbar } = options;
 
     if (!showCount || !toolbar) return null;
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/Errors.js b/packages/libs/coreui/src/components/Mesa/Utils/Errors.ts
similarity index 55%
rename from packages/libs/coreui/src/components/Mesa/Utils/Errors.js
rename to packages/libs/coreui/src/components/Mesa/Utils/Errors.ts
index 43636dad4e..507e8bc9b5 100644
--- a/packages/libs/coreui/src/components/Mesa/Utils/Errors.js
+++ b/packages/libs/coreui/src/components/Mesa/Utils/Errors.ts
@@ -1,21 +1,36 @@
 /*    Error Handlers   */
-export const fail = (fn, message, Err = Error) => {
+export const fail = (
+  fn: string,
+  message: string,
+  Err: ErrorConstructor = Error
+): never => {
   throw new Err(`<${fn}>: ${message}`);
 };
 
-export const warn = (fn, message) => {
+export const warn = (fn: string, message: string): undefined => {
   console.warn(`<${fn}>: ${message}`);
   return undefined;
 };
 
-export const badType = (fn, parameter, expected, actual, fatal = false) => {
+export const badType = (
+  fn: string,
+  parameter: string,
+  expected: string,
+  actual: string,
+  fatal = false
+): undefined | never => {
   const message =
     `parameter "${parameter}"  is not of type ${expected} (got ${actual})` +
     (fatal ? '' : `; using empty ${expected}`);
   return fatal ? fail(fn, message, TypeError) : warn(fn, message);
 };
 
-export const missingFromState = (fn, missing, obj = {}, fatal = false) => {
+export const missingFromState = (
+  fn: string,
+  missing: string,
+  obj: Record<string, unknown> = {},
+  fatal = false
+): undefined | never => {
   const present = Object.keys(obj).join(', ');
   const message = `state branch "${missing}" not found in state. Found sibling keys: [${present}]`;
   return fatal ? fail(fn, message, ReferenceError) : warn(fn, message);
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/Events.js b/packages/libs/coreui/src/components/Mesa/Utils/Events.js
deleted file mode 100644
index cb649fe16f..0000000000
--- a/packages/libs/coreui/src/components/Mesa/Utils/Events.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import KeyCodes from './KeyCodes';
-const idPrefix = 'listener_';
-
-export const EventsFactory = (node) => {
-  const instance = {
-    listenerStore: [],
-    add: (eventName, callback) => {
-      eventName = eventName.toLowerCase();
-      let signature = [eventName, callback];
-      let length = instance.listenerStore.push(signature);
-      node.addEventListener(eventName, callback);
-      return idPrefix + --length;
-    },
-    use: (map = {}) => {
-      Object.entries(map).forEach((entry) => instance.add(...entry));
-    },
-    remove: (id) => {
-      const offset = idPrefix.length;
-      let index = parseInt(id.substring(offset));
-      let [event, callback] = instance.listenerStore[index];
-      node.removeEventListener(event, callback);
-      delete instance.listenerStore[index];
-    },
-    clearAll: () => {
-      const clear = (listener, index) => instance.remove(idPrefix + index);
-      instance.listenerStore.forEach(clear);
-    },
-    onKey: (key, callback) => {
-      if (!(key in KeyCodes)) return;
-      return instance.onKeyCode(KeyCodes[key], callback);
-    },
-    onKeyCode: (keyCodeOrSet, callback) => {
-      let handler = (e) => {
-        let acceptable = Array.isArray(keyCodeOrSet)
-          ? keyCodeOrSet
-          : [keyCodeOrSet];
-        if (acceptable.includes(e.keyCode)) callback(e);
-      };
-      return instance.add('keydown', handler);
-    },
-  };
-  return instance;
-};
-
-const Events = EventsFactory(window);
-export default Events;
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/Events.ts b/packages/libs/coreui/src/components/Mesa/Utils/Events.ts
new file mode 100644
index 0000000000..bc75b097ab
--- /dev/null
+++ b/packages/libs/coreui/src/components/Mesa/Utils/Events.ts
@@ -0,0 +1,76 @@
+import KeyCodes from './KeyCodes';
+
+const idPrefix = 'listener_';
+
+type ListenerSignature = [string, EventListener];
+
+interface EventsInstance {
+  listenerStore: (ListenerSignature | undefined)[];
+  add: (eventName: string, callback: EventListener) => string;
+  use: (map?: Record<string, EventListener>) => void;
+  remove: (id: string) => void;
+  clearAll: () => void;
+  onKey: (
+    key: string,
+    callback: (e: KeyboardEvent) => void
+  ) => string | undefined;
+  onKeyCode: (
+    keyCodeOrSet: number | number[],
+    callback: (e: KeyboardEvent) => void
+  ) => string;
+}
+
+export const EventsFactory = (node: EventTarget): EventsInstance => {
+  const instance: EventsInstance = {
+    listenerStore: [],
+    add: (eventName: string, callback: EventListener) => {
+      eventName = eventName.toLowerCase();
+      const signature: ListenerSignature = [eventName, callback];
+      const length = instance.listenerStore.push(signature);
+      node.addEventListener(eventName, callback);
+      return idPrefix + (length - 1);
+    },
+    use: (map: Record<string, EventListener> = {}) => {
+      Object.entries(map).forEach((entry) => instance.add(...entry));
+    },
+    remove: (id: string) => {
+      const offset = idPrefix.length;
+      const index = parseInt(id.substring(offset));
+      const listener = instance.listenerStore[index];
+      if (listener) {
+        const [event, callback] = listener;
+        node.removeEventListener(event, callback);
+        delete instance.listenerStore[index];
+      }
+    },
+    clearAll: () => {
+      const clear = (listener: ListenerSignature | undefined, index: number) =>
+        instance.remove(idPrefix + index);
+      instance.listenerStore.forEach(clear);
+    },
+    onKey: (key: string, callback: (e: KeyboardEvent) => void) => {
+      if (!(key in KeyCodes)) return;
+      return instance.onKeyCode(
+        KeyCodes[key as keyof typeof KeyCodes] as number | number[],
+        callback
+      );
+    },
+    onKeyCode: (
+      keyCodeOrSet: number | number[],
+      callback: (e: KeyboardEvent) => void
+    ) => {
+      const handler = (e: Event) => {
+        const keyboardEvent = e as KeyboardEvent;
+        const acceptable = Array.isArray(keyCodeOrSet)
+          ? keyCodeOrSet
+          : [keyCodeOrSet];
+        if (acceptable.includes(keyboardEvent.keyCode)) callback(keyboardEvent);
+      };
+      return instance.add('keydown', handler);
+    },
+  };
+  return instance;
+};
+
+const Events = EventsFactory(window);
+export default Events;
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.js b/packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.ts
similarity index 99%
rename from packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.js
rename to packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.ts
index 15b789a1b4..f6052a0a8e 100644
--- a/packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.js
+++ b/packages/libs/coreui/src/components/Mesa/Utils/KeyCodes.ts
@@ -169,6 +169,6 @@ const KeyCodes = {
   doubleQuote: 222,
   quote: 222,
   backtick: 223,
-};
+} as const;
 
 export default KeyCodes;
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.js b/packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.ts
similarity index 61%
rename from packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.js
rename to packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.ts
index 58206e1883..e262b1e7ea 100644
--- a/packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.js
+++ b/packages/libs/coreui/src/components/Mesa/Utils/MesaSelection.ts
@@ -1,149 +1,195 @@
 import { badType } from './Errors';
 
-export const createSelection = (_selection = []) => {
+export const createSelection = <T = string | number>(
+  _selection: T[] = []
+): T[] => {
   if (!Array.isArray(_selection))
     return badType(
       'addIdToSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   const selection = new Set(_selection);
   return [...selection];
 };
 
-export const selectionFromRows = (rows, idAccessor) => {
+export const selectionFromRows = <Row>(
+  rows: Row[],
+  idAccessor: (row: Row) => string | number
+): (string | number)[] => {
   if (typeof idAccessor !== 'function')
     return badType(
       'selectionFromRows',
       'idAccessor',
       'function',
       typeof idAccessor
-    );
+    ) as never;
   const idList = mapListToIds(rows, idAccessor);
   return createSelection(idList);
 };
 
-export const addRowToSelection = (_selection, row, idAccessor) => {
+export const addRowToSelection = <Row>(
+  _selection: (string | number)[],
+  row: Row,
+  idAccessor: (row: Row) => string | number
+): (string | number)[] => {
   if (!Array.isArray(_selection))
     return badType(
       'addIdToSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   if (typeof idAccessor !== 'function')
     return badType(
       'addRowToSelection',
       'idAccessor',
       'function',
       typeof idAccessor
-    );
+    ) as never;
   const id = idAccessor(row);
   return addIdToSelection(_selection, id);
 };
 
-export const addIdToSelection = (_selection = [], id) => {
+export const addIdToSelection = <T = string | number>(
+  _selection: T[] = [],
+  id: T
+): T[] => {
   if (!Array.isArray(_selection))
     return badType(
       'addIdToSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   const selection = new Set(_selection);
   selection.add(id);
   return [...selection];
 };
 
-export const addIdsToSelection = (_selection = [], ids) => {
+export const addIdsToSelection = <T = string | number>(
+  _selection: T[] = [],
+  ids: T[]
+): T[] => {
   if (!Array.isArray(_selection))
     return badType(
       'addIdToSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   if (!Array.isArray(ids))
-    return badType('addIdToSelection', 'ids', 'array', typeof ids);
+    return badType('addIdToSelection', 'ids', 'array', typeof ids) as never;
   const selection = new Set([..._selection, ...ids]);
   return [...selection];
 };
 
-export const removeRowFromSelection = (_selection, row, idAccessor) => {
+export const removeRowFromSelection = <Row>(
+  _selection: (string | number)[],
+  row: Row,
+  idAccessor: (row: Row) => string | number
+): (string | number)[] => {
   if (!Array.isArray(_selection))
     return badType(
       'removeRowFromSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   if (typeof idAccessor !== 'function')
     return badType(
       'removeRowFromSelection',
       'idAccessor',
       'function',
       typeof idAccessor
-    );
+    ) as never;
   const id = idAccessor(row);
   return removeIdFromSelection(_selection, id);
 };
 
-export const removeIdFromSelection = (_selection, id) => {
+export const removeIdFromSelection = <T = string | number>(
+  _selection: T[],
+  id: T
+): T[] => {
   if (!Array.isArray(_selection))
     return badType(
       'removeIdFromSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   const selection = new Set(Array.isArray(_selection) ? _selection : []);
   selection.delete(id);
   return [...selection];
 };
 
-export const removeIdsFromSelection = (_selection, ids) => {
+export const removeIdsFromSelection = <T = string | number>(
+  _selection: T[],
+  ids: T[]
+): T[] => {
   if (!Array.isArray(_selection))
     return badType(
       'removeIdsFromSelection',
       '_selection',
       'array',
       typeof _selection
-    );
+    ) as never;
   if (!Array.isArray(ids))
-    return badType('removeIdsFromSelection', 'ids', 'array', typeof ids);
+    return badType(
+      'removeIdsFromSelection',
+      'ids',
+      'array',
+      typeof ids
+    ) as never;
   const selection = new Set(_selection);
   const removable = new Set(ids);
   return [...selection].filter((item) => !removable.has(item));
 };
 
-export const isRowSelected = (selection, row, idAccessor) => {
+export const isRowSelected = <Row>(
+  selection: (string | number)[],
+  row: Row,
+  idAccessor: (row: Row) => string | number
+): boolean => {
   if (typeof idAccessor !== 'function')
     return badType(
       'isRowSelected',
       'idAccessor',
       'function',
       typeof idAccessor
-    );
+    ) as never;
   const id = idAccessor(row);
   return selection.includes(id);
 };
 
-export const mapListToIds = (list, idAccessor) => {
+export const mapListToIds = <Row>(
+  list: Row[],
+  idAccessor: (row: Row) => string | number
+): (string | number)[] => {
   if (typeof idAccessor !== 'function')
-    return badType('mapListToIds', 'idAccessor', 'function', typeof idAccessor);
+    return badType(
+      'mapListToIds',
+      'idAccessor',
+      'function',
+      typeof idAccessor
+    ) as never;
   return list.map(idAccessor);
 };
 
-export const intersectSelection = (_selection, _list, idAccessor) => {
+export const intersectSelection = <Row>(
+  _selection: (string | number)[],
+  _list: Row[],
+  idAccessor: (row: Row) => string | number
+): (string | number)[] => {
   if (typeof idAccessor !== 'function')
     return badType(
       'intersectSelection',
       'idAccessor',
       'function',
       typeof idAccessor
-    );
-  const idList = mapListToIds(_list);
+    ) as never;
+  const idList = mapListToIds(_list, idAccessor);
   const selection = new Set(Array.isArray(_selection) ? _selection : []);
   const intersection = new Set(idList);
   return [...selection].filter((item) => intersection.has(item));
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/MesaState.js b/packages/libs/coreui/src/components/Mesa/Utils/MesaState.ts
similarity index 53%
rename from packages/libs/coreui/src/components/Mesa/Utils/MesaState.js
rename to packages/libs/coreui/src/components/Mesa/Utils/MesaState.ts
index 3397de8e00..b37c6597c6 100644
--- a/packages/libs/coreui/src/components/Mesa/Utils/MesaState.js
+++ b/packages/libs/coreui/src/components/Mesa/Utils/MesaState.ts
@@ -1,12 +1,18 @@
 import { fail, badType, missingFromState } from './Errors';
 import { repositionItemInList } from './Utils';
+import type { MesaStateProps, MesaColumn } from '../types';
+import { CSSProperties } from 'react';
 
 /*    Basic Setters   */
-export const setRows = (state, rows, resetFilteredRows = true) => {
+export const setRows = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  rows: Row[],
+  resetFilteredRows = true
+): Partial<MesaStateProps<Row, Key>> => {
   if (!Array.isArray(rows))
     return badType('setRows', 'rows', 'array', typeof rows) || state;
-  let filteredRows = [...rows];
-  let replacements = Object.assign(
+  const filteredRows = [...rows];
+  const replacements = Object.assign(
     {},
     { rows },
     resetFilteredRows ? { filteredRows } : {}
@@ -14,7 +20,10 @@ export const setRows = (state, rows, resetFilteredRows = true) => {
   return Object.assign({}, state, replacements);
 };
 
-export const setFilteredRows = (state, filteredRows) => {
+export const setFilteredRows = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  filteredRows: Row[]
+): Partial<MesaStateProps<Row, Key>> => {
   if (!Array.isArray(filteredRows))
     return (
       badType(
@@ -27,18 +36,30 @@ export const setFilteredRows = (state, filteredRows) => {
   return Object.assign({}, state, { filteredRows });
 };
 
-export const filterRows = (state, predicate) => {
+export const filterRows = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  predicate: (row: Row) => boolean
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof predicate !== 'function')
     return (
       badType('filterRows', 'predicate', 'function', typeof predicate) || state
     );
   if (!Array.isArray(state.rows))
-    return missingFromState('filterRows', 'rows', state) || state;
+    return (
+      missingFromState(
+        'filterRows',
+        'rows',
+        state as Record<string, unknown>
+      ) || state
+    );
   const filteredRows = state.rows.filter(predicate);
   return setFilteredRows(state, filteredRows);
 };
 
-export const setColumns = (state, columns) => {
+export const setColumns = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  columns: MesaColumn<Row, Key>[]
+): Partial<MesaStateProps<Row, Key>> => {
   if (!Array.isArray(columns))
     return badType('setColumns', 'columns', 'array', typeof columns) || state;
   const keys = columns.map((col) => col.key);
@@ -47,14 +68,18 @@ export const setColumns = (state, columns) => {
     ? initialUiState.columnOrder
     : [];
   keys.forEach((key) => {
-    if (!columnOrder.includes(key)) columnOrder = [...columnOrder, key];
+    if (!columnOrder!.includes(key as string))
+      columnOrder = [...columnOrder!, key as string];
   });
-  columnOrder = columnOrder.filter((key) => keys.includes(key));
+  columnOrder = columnOrder!.filter((keyStr) => keys.includes(keyStr as Key));
   const uiState = Object.assign({}, initialUiState, { columnOrder });
   return Object.assign({}, state, { columns, uiState });
 };
 
-export const setColumnOrder = (state, columnOrder) => {
+export const setColumnOrder = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  columnOrder: string[]
+): Partial<MesaStateProps<Row, Key>> | undefined => {
   if (!Array.isArray(columnOrder))
     return badType(
       'setColumnOrder',
@@ -67,25 +92,37 @@ export const setColumnOrder = (state, columnOrder) => {
   return Object.assign({}, state, { uiState });
 };
 
-export const setActions = (state, actions) => {
+export const setActions = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  actions: NonNullable<MesaStateProps<Row, Key>['actions']>
+): Partial<MesaStateProps<Row, Key>> => {
   if (!Array.isArray(actions))
     return badType('setActions', 'actions', 'array', typeof actions) || state;
   return Object.assign({}, state, { actions });
 };
 
-export const setUiState = (state, uiState) => {
+export const setUiState = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  uiState: NonNullable<MesaStateProps<Row, Key>['uiState']>
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof uiState !== 'object')
     return badType('setUiState', 'uiState', 'object', typeof uiState) || state;
   return Object.assign({}, state, { uiState });
 };
 
-export const setOptions = (state, options) => {
+export const setOptions = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  options: NonNullable<MesaStateProps<Row, Key>['options']>
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof options !== 'object')
     return badType('setOptions', 'options', 'object', typeof options) || state;
   return Object.assign({}, state, { options });
 };
 
-export const setHeaderWrapperStyle = (state, headerWrapperStyle) => {
+export const setHeaderWrapperStyle = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  headerWrapperStyle: CSSProperties
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof headerWrapperStyle !== 'object')
     return (
       badType(
@@ -98,7 +135,10 @@ export const setHeaderWrapperStyle = (state, headerWrapperStyle) => {
   return Object.assign({}, state, { headerWrapperStyle });
 };
 
-export const setEventHandlers = (state, eventHandlers) => {
+export const setEventHandlers = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  eventHandlers: NonNullable<MesaStateProps<Row, Key>['eventHandlers']>
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof eventHandlers !== 'object')
     return (
       badType(
@@ -111,54 +151,78 @@ export const setEventHandlers = (state, eventHandlers) => {
   return Object.assign({}, state, { eventHandlers });
 };
 
-export const getSelectedRows = (state, onlyFilteredRows = true) => {
+export const getSelectedRows = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  onlyFilteredRows = true
+): Row[] => {
   if (onlyFilteredRows && !('filteredRows' in state))
-    return missingFromState('getSelectedRows', 'filteredRows', state) || state;
-  const { filteredRows } = state;
-  if (onlyFilteredRows && !Array.isArray(filteredRows))
     return (
-      badType(
+      missingFromState(
         'getSelectedRows',
         'filteredRows',
-        'array',
-        typeof filteredRows
-      ) || state
+        state as Record<string, unknown>
+      ) || (state as never)
     );
+  const { filteredRows } = state;
+  if (onlyFilteredRows && !Array.isArray(filteredRows))
+    return (badType(
+      'getSelectedRows',
+      'filteredRows',
+      'array',
+      typeof filteredRows
+    ) || state) as never;
 
   if (!onlyFilteredRows && !('rows' in state))
-    return missingFromState('getSelectedRows', 'filteredRows', state) || state;
+    return (
+      missingFromState(
+        'getSelectedRows',
+        'filteredRows',
+        state as Record<string, unknown>
+      ) || (state as never)
+    );
   const { rows } = state;
   if (!onlyFilteredRows && !Array.isArray(rows))
-    return badType('getSelectedRows', 'rows', 'array', typeof rows) || state;
-
-  if (!('options' in state))
-    return missingFromState('getSelectedRows', 'options', state) || state;
-  if (typeof state.options !== 'object')
     return (
-      badType('getSelectedRows', 'options', 'object', typeof options) || state
+      badType('getSelectedRows', 'rows', 'array', typeof rows) ||
+      (state as never)
     );
-  const { options } = state;
 
-  if (!('isRowSelected' in options))
-    return (
-      missingFromState('getSelectedRows', 'options.isRowSelected', options) ||
-      state
-    );
-  const { isRowSelected } = state;
-  if (typeof isRowSelected !== 'function')
+  if (!('options' in state))
     return (
-      badType(
+      missingFromState(
         'getSelectedRows',
-        'options.isRowSelected',
-        'function',
-        typeof isRowSelected
-      ) || state
+        'options',
+        state as Record<string, unknown>
+      ) || (state as never)
     );
+  if (typeof state.options !== 'object')
+    return (badType(
+      'getSelectedRows',
+      'options',
+      'object',
+      typeof state.options
+    ) || state) as never;
+  const { options } = state;
 
-  return (onlyFilteredRows ? filteredRows : rows).filter(isRowSelected);
+  if (!options || !('isRowSelected' in options))
+    return (missingFromState(
+      'getSelectedRows',
+      'options.isRowSelected',
+      (options as Record<string, unknown>) || {}
+    ) || state) as never;
+  const { isRowSelected } = options;
+  if (typeof isRowSelected !== 'function')
+    return (badType(
+      'getSelectedRows',
+      'options.isRowSelected',
+      'function',
+      typeof isRowSelected
+    ) || state) as never;
+
+  return (onlyFilteredRows ? filteredRows : rows)!.filter(isRowSelected);
 };
 
-export const getRows = (state) => {
+export const getRows = <Row>(state: Partial<MesaStateProps<Row>>): Row[] => {
   const { rows } = state;
   if (!Array.isArray(rows)) {
     badType('getRows', 'rows', 'array', typeof rows);
@@ -167,7 +231,9 @@ export const getRows = (state) => {
   return rows;
 };
 
-export const getFilteredRows = (state) => {
+export const getFilteredRows = <Row>(
+  state: Partial<MesaStateProps<Row>>
+): Row[] => {
   const { filteredRows } = state;
   if (!Array.isArray(filteredRows)) {
     badType('getFilteredRows', 'filteredRows', 'array', typeof filteredRows);
@@ -176,7 +242,9 @@ export const getFilteredRows = (state) => {
   return filteredRows;
 };
 
-export const getColumns = (state) => {
+export const getColumns = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>
+): MesaColumn<Row, Key>[] => {
   const { columns } = state;
   if (!Array.isArray(columns)) {
     badType('getColumns', 'columns', 'array', typeof columns);
@@ -185,7 +253,9 @@ export const getColumns = (state) => {
   return columns;
 };
 
-export const getActions = (state) => {
+export const getActions = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>
+): NonNullable<MesaStateProps<Row, Key>['actions']> => {
   const { actions } = state;
   if (!Array.isArray(actions)) {
     badType('getActions', 'actions', 'array', typeof actions);
@@ -194,7 +264,9 @@ export const getActions = (state) => {
   return actions;
 };
 
-export const getOptions = (state) => {
+export const getOptions = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>
+): NonNullable<MesaStateProps<Row, Key>['options']> => {
   const { options } = state;
   if (typeof options !== 'object') {
     badType('getOptions', 'options', 'object', typeof options);
@@ -203,7 +275,9 @@ export const getOptions = (state) => {
   return options;
 };
 
-export const getEventHandlers = (state) => {
+export const getEventHandlers = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>
+): NonNullable<MesaStateProps<Row, Key>['eventHandlers']> => {
   const { eventHandlers } = state;
   if (typeof eventHandlers !== 'object') {
     badType(
@@ -212,12 +286,14 @@ export const getEventHandlers = (state) => {
       'object',
       typeof eventHandlers
     );
-    return [];
+    return {};
   }
   return eventHandlers;
 };
 
-export const getUiState = (state) => {
+export const getUiState = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>
+): NonNullable<MesaStateProps<Row, Key>['uiState']> => {
   const { uiState } = state;
   if (typeof uiState !== 'object') {
     badType('getUiState', 'uiState', 'object', typeof uiState);
@@ -229,10 +305,9 @@ export const getUiState = (state) => {
 /*    Generic state "create" function   */
 
 /**
- * @param {any} options
- * @param {any=} state
+ * Creates a Mesa state object from the provided options
  */
-export const create = (
+export const create = <Row, Key extends string = string>(
   {
     rows,
     filteredRows,
@@ -242,9 +317,18 @@ export const create = (
     eventHandlers,
     uiState,
     headerWrapperStyle,
+  }: {
+    rows?: Row[];
+    filteredRows?: Row[];
+    columns?: MesaColumn<Row, Key>[];
+    options?: NonNullable<MesaStateProps<Row, Key>['options']>;
+    actions?: NonNullable<MesaStateProps<Row, Key>['actions']>;
+    eventHandlers?: NonNullable<MesaStateProps<Row, Key>['eventHandlers']>;
+    uiState?: NonNullable<MesaStateProps<Row, Key>['uiState']>;
+    headerWrapperStyle?: CSSProperties;
   },
-  state = {}
-) => {
+  state: Partial<MesaStateProps<Row, Key>> = {}
+): Partial<MesaStateProps<Row, Key>> => {
   state = setRows(state, rows ? rows : []);
   state = setColumns(state, columns ? columns : []);
   state = setOptions(state, options ? options : {});
@@ -264,7 +348,10 @@ export const create = (
 
 /*    Deeper, more specific setters   */
 
-export const setSelectionPredicate = (state, predicate) => {
+export const setSelectionPredicate = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  predicate: (row: Row) => boolean
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof predicate !== 'function')
     return (
       badType(
@@ -280,7 +367,10 @@ export const setSelectionPredicate = (state, predicate) => {
   return Object.assign({}, state, { options });
 };
 
-export const setSearchQuery = (state, searchQuery) => {
+export const setSearchQuery = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  searchQuery: string | null
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof searchQuery !== 'string' && searchQuery !== null)
     return (
       badType('setSearchQuery', 'searchQuery', 'string', typeof searchQuery) ||
@@ -293,7 +383,12 @@ export const setSearchQuery = (state, searchQuery) => {
   return Object.assign({}, state, { uiState });
 };
 
-export const setEmptinessCulprit = (state, emptinessCulprit) => {
+export const setEmptinessCulprit = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  emptinessCulprit:
+    | NonNullable<MesaStateProps<Row, Key>['uiState']>['emptinessCulprit']
+    | null
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof emptinessCulprit !== 'string' && emptinessCulprit !== null)
     return (
       badType(
@@ -310,7 +405,10 @@ export const setEmptinessCulprit = (state, emptinessCulprit) => {
   return Object.assign({}, state, { uiState });
 };
 
-export const setSortColumnKey = (state, columnKey) => {
+export const setSortColumnKey = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  columnKey: string
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof columnKey !== 'string')
     return (
       badType('setSortColumnKey', 'columnKey', 'string', typeof columnKey) ||
@@ -327,7 +425,10 @@ export const setSortColumnKey = (state, columnKey) => {
   return Object.assign({}, state, { uiState });
 };
 
-export const setSortDirection = (state, direction) => {
+export const setSortDirection = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  direction: 'asc' | 'desc'
+): Partial<MesaStateProps<Row, Key>> => {
   if (typeof direction !== 'string')
     return (
       badType('setSortDirection', 'direction', 'string', typeof direction) ||
@@ -352,43 +453,56 @@ export const setSortDirection = (state, direction) => {
   return Object.assign({}, state, { uiState });
 };
 
-export const moveColumnToIndex = (state, columnKey, toIndex) => {
+export const moveColumnToIndex = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  columnKey: Key,
+  toIndex: number
+): Partial<MesaStateProps<Row, Key>> | undefined => {
   if (typeof columnKey !== 'string')
-    return badType(
-      'changeColumnIndex',
-      '"columnKey" should be a string.',
-      TypeError
+    return (
+      fail('changeColumnIndex', '"columnKey" should be a string.', TypeError) ||
+      state
     );
   if (typeof toIndex !== 'number')
-    return badType(
-      'changeColumnIndex',
-      '"toIndex" should be a number"',
-      TypeError
+    return (
+      fail('changeColumnIndex', '"toIndex" should be a number"', TypeError) ||
+      state
     );
   if (!('columns' in state))
-    return missingFromState('changeColumnIndex', 'columns', state) || state;
+    return (
+      missingFromState(
+        'changeColumnIndex',
+        'columns',
+        state as Record<string, unknown>
+      ) || state
+    );
 
   const oldColumns = getColumns(state);
   const fromIndex = oldColumns.findIndex(({ key }) => columnKey === key);
   if (fromIndex < 0)
     return (
-      fail('changeColumnIndex', `column with key "${columnKey}" not found.`) ||
-      state
+      fail(
+        'changeColumnIndex',
+        `column with key "${String(columnKey)}" not found.`
+      ) || state
     );
   const columns = repositionItemInList(oldColumns, fromIndex, toIndex);
   return Object.assign({}, state, { columns });
 };
 
-export const callActionOnSelectedRows = (
-  state,
-  action,
+export const callActionOnSelectedRows = <Row, Key extends string = string>(
+  state: Partial<MesaStateProps<Row, Key>>,
+  action: (row: Row) => void,
   batch = false,
   onlyFilteredRows = true
-) => {
+): Partial<MesaStateProps<Row, Key>> => {
   if (!('selectedRows' in state))
     return (
-      missingFromState('callActionOnSelectedRows', 'selectedRows', state) ||
-      state
+      missingFromState(
+        'callActionOnSelectedRows',
+        'selectedRows',
+        state as Record<string, unknown>
+      ) || state
     );
   if (typeof action !== 'function')
     return (
@@ -401,7 +515,7 @@ export const callActionOnSelectedRows = (
     );
 
   const selectedRows = getSelectedRows(state, onlyFilteredRows);
-  if (batch) action(selectedRows);
+  if (batch) action(selectedRows as never);
   else selectedRows.forEach(action);
   return state;
 };
diff --git a/packages/libs/coreui/src/components/Mesa/Utils/Utils.js b/packages/libs/coreui/src/components/Mesa/Utils/Utils.ts
similarity index 57%
rename from packages/libs/coreui/src/components/Mesa/Utils/Utils.js
rename to packages/libs/coreui/src/components/Mesa/Utils/Utils.ts
index 4de941c31d..10bb48f3ff 100644
--- a/packages/libs/coreui/src/components/Mesa/Utils/Utils.js
+++ b/packages/libs/coreui/src/components/Mesa/Utils/Utils.ts
@@ -1,4 +1,4 @@
-export function stringValue(value) {
+export function stringValue(value: unknown): string {
   switch (typeof value) {
     case 'string':
       // HTML should not be parsed here.
@@ -25,7 +25,7 @@ export function stringValue(value) {
   }
 }
 
-export function isHtml(text, strict = false) {
+export function isHtml(text: unknown, strict = false): boolean {
   if (typeof text !== 'string') return false;
   if (strict && (text[0] !== '<' || text[text.length - 1] !== '>'))
     return false;
@@ -34,50 +34,64 @@ export function isHtml(text, strict = false) {
   return Array.from(parser.body.childNodes).some((node) => node.nodeType === 1);
 }
 
-export function htmlStringValue(html) {
+export function htmlStringValue(html: string): string {
   const tmp = document.createElement('DIV');
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || '';
 }
 
-export function sortFactory(accessor) {
-  accessor = typeof accessor == 'function' ? accessor : (value) => value;
-  return function (a, b) {
-    let A = accessor(a);
-    let B = accessor(b);
-    return A === B ? 0 : A < B ? 1 : -1;
+export function sortFactory<T>(
+  accessor?: (value: T) => unknown
+): (a: T, b: T) => number {
+  const accessorFn =
+    typeof accessor === 'function' ? accessor : (value: T) => value;
+  return function (a: T, b: T) {
+    const A = accessorFn(a);
+    const B = accessorFn(b);
+    // Using any for comparison as we're doing a generic sort
+    return A === B ? 0 : (A as any) < (B as any) ? 1 : -1;
   };
 }
 
-export const numericValue = (val) =>
+export const numericValue = (val: unknown): number =>
   val ? parseFloat(`${val}`.replace('inf', 'Infinity')) : 0;
 
-export function numberSort(_list, key, ascending = true) {
+export function numberSort<T extends Record<string, unknown>>(
+  _list: T[],
+  key: string,
+  ascending = true
+): T[] {
   const list = [..._list];
-  const accessor = (val) => numericValue(val[key]);
+  const accessor = (val: T) => numericValue(val[key]);
   const result = list.sort(sortFactory(accessor));
   return ascending ? result.reverse() : result;
 }
 
 export const customSortFactory =
-  (sortBy) =>
-  (_list, key, ascending = true) => {
-    const list = [..._list];
-    const accessor = (val) => sortBy(val[key]);
-    const result = list.sort(sortFactory(accessor));
+  <T>(sortBy: (value: unknown) => unknown) =>
+  (_list: T[], key: string, ascending = true): T[] => {
+    const list = [..._list] as Record<string, unknown>[];
+    const accessor = (val: Record<string, unknown>) => sortBy(val[key]);
+    const result = list.sort(sortFactory(accessor)) as T[];
     return ascending ? result.reverse() : result;
   };
 
-export function arraysMatch(a, b) {
+export function arraysMatch<T>(a: unknown, b: unknown): boolean | undefined {
   if (!Array.isArray(a) || !Array.isArray(b)) return undefined;
   if (a.length !== b.length) return false;
-  while (a.length) {
-    if (a.shift() !== b.shift()) return false;
+  const aCopy = [...a];
+  const bCopy = [...b];
+  while (aCopy.length) {
+    if (aCopy.shift() !== bCopy.shift()) return false;
   }
   return true;
 }
 
-export function repositionItemInList(list, fromIndex, toIndex) {
+export function repositionItemInList<T>(
+  list: T[],
+  fromIndex: number,
+  toIndex: number
+): T[] {
   if (!list || !list.length) return list;
   if (fromIndex === toIndex) return list;
   if (fromIndex < 0 || toIndex < 0) return list;
@@ -89,12 +103,18 @@ export function repositionItemInList(list, fromIndex, toIndex) {
   return [...updatedList];
 }
 
-export function textSort(_list, key, ascending = true) {
+export function textSort<T extends Record<string, unknown>>(
+  _list: T[],
+  key: string,
+  ascending = true
+): T[] {
   const list = [..._list];
-  const accessor = (val) =>
-    typeof val[key] === 'string'
-      ? val[key].trim().toLowerCase()
-      : stringValue(val[key]).toLowerCase();
+  const accessor = (val: T) => {
+    const value = val[key];
+    return typeof value === 'string'
+      ? value.trim().toLowerCase()
+      : stringValue(value).toLowerCase();
+  };
   const preSort = list.map(accessor);
   const sorted = list.sort(sortFactory(accessor));
   const postSort = sorted.map(accessor);
@@ -102,30 +122,33 @@ export function textSort(_list, key, ascending = true) {
   return ascending ? result.reverse() : result;
 }
 
-export function makeClassifier(namespace, globalNamespace) {
-  return (element, modifiers) => {
+export function makeClassifier(
+  namespace?: string,
+  globalNamespace?: string
+): (element?: string | string[], modifiers?: string | string[]) => string {
+  return (element?: string | string[], modifiers?: string | string[]) => {
     if (Array.isArray(element)) element = element.join('-');
-    let base =
+    const base =
       (globalNamespace ? globalNamespace + '-' : '') +
       (namespace ? namespace : '') +
       (element ? '-' + element : '');
     if (!modifiers || !modifiers.length) return base;
     if (!Array.isArray(modifiers)) modifiers = [modifiers];
     return modifiers.reduce((output, modifier) => {
-      let addendum = ' ' + base + '--' + modifier;
+      const addendum = ' ' + base + '--' + modifier;
       return output + addendum;
     }, base);
   };
 }
 
-export function randomize(low = 0, high = 99) {
+export function randomize(low = 0, high = 99): number {
   return Math.floor(Math.random() * (high - low + 1) + low);
 }
 
-export function uid(len = 8) {
+export function uid(len = 8): string {
   let output = '';
   while (output.length < len) {
-    let index = randomize(0, 35);
+    const index = randomize(0, 35);
     if (index >= 10) output += String.fromCharCode(87 + index);
     else output += index.toString();
   }
@@ -140,19 +163,22 @@ export const displayUnits = {
   percent: /[0-9]+%$/,
 };
 
-export function getUnitValue(size) {
+export function getUnitValue(size: string): number {
   if (typeof size !== 'string')
-    throw new TypeError('<getUnitValue>: invalid "size" string param:', size);
-  return parseInt(size.match(/[0-9]+/)[0]);
+    throw new TypeError('<getUnitValue>: invalid "size" string param:' + size);
+  const match = size.match(/[0-9]+/);
+  if (!match)
+    throw new TypeError('<getUnitValue>: no numeric value found in size');
+  return parseInt(match[0]);
 }
 
-export function combineWidths(...widths) {
-  if (!Array.isArray(widths)) return null;
-  if (widths.length === 1 && Array.isArray(widths[0])) widths = widths.shift();
+export function combineWidths(...widths: (string | number)[]): string {
+  if (!Array.isArray(widths)) return '';
+  if (widths.length === 1 && Array.isArray(widths[0])) widths = widths[0];
   if (!Array.isArray(widths))
-    throw new TypeError('<combineWidths>: invalid widths provided:', widths);
+    throw new TypeError('<combineWidths>: invalid widths provided:' + widths);
 
-  const totals = {};
+  const totals: Record<string, number> = {};
 
   widths.forEach((width) => {
     if (typeof width === 'number')
@@ -162,19 +188,19 @@ export function combineWidths(...widths) {
     else width = width.toLowerCase();
 
     Object.entries(displayUnits).forEach(([unit, pattern]) => {
-      if (pattern.test(width)) {
+      if (pattern.test(width as string)) {
         totals[unit] =
           typeof totals[unit] === 'number'
-            ? totals[unit] + getUnitValue(width)
-            : getUnitValue(width);
+            ? totals[unit] + getUnitValue(width as string)
+            : getUnitValue(width as string);
       }
     });
   });
 
   return Object.keys(totals).reduce((outputString, unit, index) => {
     if (!totals[unit]) return outputString;
-    let displayUnit = unit === 'percent' ? '%' : unit;
-    let value = totals[unit];
+    const displayUnit = unit === 'percent' ? '%' : unit;
+    const value = totals[unit];
     if (index === 0) return value + displayUnit;
     else return `calc(${outputString} + ${value + displayUnit})`;
   }, '');
diff --git a/packages/libs/coreui/src/components/Mesa/index.jsx b/packages/libs/coreui/src/components/Mesa/index.ts
similarity index 100%
rename from packages/libs/coreui/src/components/Mesa/index.jsx
rename to packages/libs/coreui/src/components/Mesa/index.ts
diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts
index 38674aa59a..e72d59c6d3 100644
--- a/packages/libs/coreui/src/components/Mesa/types.ts
+++ b/packages/libs/coreui/src/components/Mesa/types.ts
@@ -29,6 +29,7 @@ export interface MesaStateProps<
     emptinessCulprit?: 'search' | 'nocolumns' | 'filters' | 'nodata';
     expandedRows?: (number | string)[];
     groupBySelected?: boolean;
+    columnOrder?: string[];
   };
   headerWrapperStyle?: CSSProperties;
   options?: {
@@ -43,6 +44,7 @@ export interface MesaStateProps<
     editableColumns?: boolean;
     overflowHeight?: string;
     toolbar?: boolean;
+    columnDefaults?: Partial<MesaColumn<Row, Key>>;
     /**
      * It's possible to render counts in the ActionToolbar and the Toolbar, so be careful not to duplicate.
      * This is because we pass search filters as children to Mesa that renders in the Toolbar if the toolbar
@@ -90,12 +92,12 @@ export interface MesaStateProps<
     onMultipleRowSelect?: (rows: Row[]) => void;
     onMultipleRowDeselect?: (rows: Row[]) => void;
     onColumnReorder?: (columnKey: Key, columnIndex: number) => void;
-    onExpandedRowsChange?: (indexes: number[]) => void;
+    onExpandedRowsChange?: (ids: (string | number)[]) => void;
     onGroupBySelectedChange?: (groupBySelected: boolean) => void;
   };
 }
 
-interface MesaAction<Row, Key = DefaultColumnKey<Row>> {
+export interface MesaAction<Row, Key = DefaultColumnKey<Row>> {
   selectionRequired?: boolean;
   element: React.ReactNode;
   callback?: (row: Row, columns: MesaColumn<Row, Key>[]) => void;
@@ -135,9 +137,12 @@ export interface MesaColumn<
   resizeable?: boolean;
   moveable?: boolean;
   helpText?: string;
+  htmlHelp?: string;
   style?: CSSProperties;
+  headingStyle?: CSSProperties;
   className?: string;
   width?: CSSProperties['width'];
+  hidden?: boolean;
   getValue?: (props: { row: Row; index: number }) => Value;
   renderCell?: (cellProps: CellProps<Row, Key, Value>) => ReactNode;
   renderHeading?:
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/DateField.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/DateField.tsx
similarity index 55%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/DateField.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/DateField.tsx
index 0125ae72bf..11a33d47cc 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/DateField.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/DateField.tsx
@@ -7,16 +7,62 @@ import {
   formatDate,
   parseDate,
 } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import {
+  Field,
+  RangeFilter,
+  OntologyTermSummary,
+  ValueCounts,
+} from '../../Components/AttributeFilter/Types';
+
+/**
+ * Distribution entry type for histogram data
+ */
+interface DistributionEntry {
+  value: number | string | null;
+  count: number;
+  filteredCount: number;
+}
+
+/**
+ * Props for the DateField component
+ */
+interface DateFieldProps {
+  distribution: DistributionEntry[];
+  toFilterValue: (value: number) => number | string;
+  toHistogramValue: (value: number | string) => number;
+  selectByDefault: boolean;
+  onChange: (
+    activeField: Field,
+    range: { min?: number | string | null; max?: number | string | null },
+    includeUnknown: boolean,
+    valueCounts: ValueCounts
+  ) => void;
+  activeField: Field;
+  activeFieldState: {
+    summary: OntologyTermSummary;
+    [key: string]: any;
+  };
+  filter?: RangeFilter;
+  overview?: React.ReactNode;
+  displayName: string;
+  unknownCount: number;
+  timeformat?: string;
+  onRangeScaleChange?: (activeField: Field, range: any) => void;
+  histogramTruncateYAxisDefault?: boolean;
+  histogramScaleYAxisDefault?: boolean;
+}
 
 /**
  * Date field component
  */
-export default class DateField extends React.Component {
-  static getHelpContent(props) {
-    return HistogramField.getHelpContent(props);
+export default class DateField extends React.Component<DateFieldProps> {
+  timeformat?: string;
+
+  static getHelpContent(props: DateFieldProps) {
+    return HistogramField.getHelpContent(props as any);
   }
 
-  constructor(props) {
+  constructor(props: DateFieldProps) {
     super(props);
     this.toHistogramValue = this.toHistogramValue.bind(this);
     this.toFilterValue = this.toFilterValue.bind(this);
@@ -26,11 +72,11 @@ export default class DateField extends React.Component {
     this.setDateFormat(this.props.activeFieldState.summary.valueCounts);
   }
 
-  componentWillUpdate(nextProps) {
+  componentWillUpdate(nextProps: DateFieldProps) {
     this.setDateFormat(nextProps.activeFieldState.summary.valueCounts);
   }
 
-  setDateFormat(distribution) {
+  setDateFormat(distribution: ValueCounts) {
     const firstDateEntry = distribution.find((entry) => entry.value != null);
     if (firstDateEntry == null) {
       console.warn(
@@ -38,19 +84,19 @@ export default class DateField extends React.Component {
         distribution
       );
     } else {
-      this.timeformat = getFormatFromDateString(firstDateEntry.value);
+      this.timeformat = getFormatFromDateString(firstDateEntry.value as string);
     }
   }
 
-  toHistogramValue(value) {
+  toHistogramValue(value: number | string): number {
     const date = typeof value === 'string' ? parseDate(value) : new Date(value);
     return date.getTime();
   }
 
-  toFilterValue(value) {
+  toFilterValue(value: number): number | string {
     switch (typeof value) {
       case 'number':
-        return formatDate(this.timeformat, new Date(value));
+        return formatDate(this.timeformat || 'yyyy-MM-dd', new Date(value));
       default:
         return value;
     }
@@ -68,7 +114,7 @@ export default class DateField extends React.Component {
       knownDist
         .filter((entry) => entry.filteredCount > 0)
         .map((entry) => entry.value),
-      (value) => parseDate(value).getTime()
+      (value) => parseDate(value as string | number).getTime()
     );
     var distMin = values[0];
     var distMax = values[values.length - 1];
@@ -76,7 +122,7 @@ export default class DateField extends React.Component {
     var dateDist = knownDist.map(function (entry) {
       // convert value to time in ms
       return Object.assign({}, entry, {
-        value: parseDate(entry.value).getTime(),
+        value: parseDate(entry.value as string | number).getTime(),
       });
     });
 
@@ -93,7 +139,7 @@ export default class DateField extends React.Component {
 
     return (
       <HistogramField
-        {...this.props}
+        {...(this.props as any)}
         timeformat={this.timeformat}
         distribution={dateDist}
         unknownCount={unknownCount}
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.tsx
similarity index 74%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.tsx
index 70526ef05b..7bed47d3f0 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyField.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-/**
- * Empty field component
- */
-export default function EmptyField(props) {
+interface EmptyFieldProps {
+  displayName: string;
+}
+
+export default function EmptyField(props: EmptyFieldProps) {
   return (
     <div>
       <h3>
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.tsx
similarity index 69%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.tsx
index 7b2ab6a7f0..7c97bb5ad4 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/EmptyValues.tsx
@@ -3,8 +3,13 @@ import React from 'react';
 import Icon from '../../Components/Icon/IconAlt';
 
 import { isRange } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import { Field } from '../../Components/AttributeFilter/Types';
 
-export default function EmptyValue(props) {
+interface EmptyValueProps {
+  activeField: Field;
+}
+
+export default function EmptyValue(props: EmptyValueProps) {
   return (
     <div style={{ fontSize: '5rem', textAlign: 'center', margin: '5rem' }}>
       <Icon fa={isRange(props.activeField) ? 'bar-chart-o' : 'table'} />
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.tsx
similarity index 63%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.tsx
index 419eb09954..b119e96e13 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { makeClassNameHelper } from '../../Utils/ComponentUtils';
 import Icon from '../../Components/Icon/IconAlt';
@@ -6,18 +5,56 @@ import EmptyField from '../../Components/AttributeFilter/EmptyField';
 import MultiFieldFilter from '../../Components/AttributeFilter/MultiFieldFilter';
 import SingleFieldFilter from '../../Components/AttributeFilter/SingleFieldFilter';
 import { isMulti } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import {
+  Field,
+  Filter,
+  FieldTreeNode,
+  OntologyTermSummary,
+} from '../../Components/AttributeFilter/Types';
 
 const cx = makeClassNameHelper('field-detail');
+
+/**
+ * State for a particular field filter
+ */
+type FieldFilterState = {
+  loading?: boolean;
+  summary?: OntologyTermSummary;
+  leafSummaries?: OntologyTermSummary[];
+  errorMessage?: string;
+  // member, range, multi specific settings
+  [key: string]: any;
+};
+
+/**
+ * Props for the FieldFilter component
+ */
+type FieldFilterProps = {
+  displayName?: string;
+  dataCount?: number | null;
+  filteredDataCount?: number;
+  filters?: Filter[];
+  activeField?: Field | null;
+  activeFieldState?: FieldFilterState;
+  fieldTree?: FieldTreeNode;
+  onFiltersChange?: (filters: Filter[]) => void;
+  onMemberSort?: (sortBy: string) => void;
+  onMemberSearch?: (searchTerm: string) => void;
+  onRangeScaleChange?: (scale: string) => void;
+  hideFieldPanel?: boolean;
+  selectByDefault: boolean;
+};
+
 /**
  * Main interactive filtering interface for a particular field.
  */
-function FieldFilter(props) {
+function FieldFilter(props: FieldFilterProps) {
   let className = cx('', props.hideFieldPanel && 'fullWidth');
 
   return (
     <div className={className}>
       {!props.activeField ? (
-        <EmptyField displayName={props.displayName} />
+        <EmptyField displayName={props.displayName || ''} />
       ) : (
         <React.Fragment>
           <h3>
@@ -48,9 +85,9 @@ function FieldFilter(props) {
               props.activeFieldState.summary == null &&
               props.activeFieldState.leafSummaries == null) ||
             props.dataCount == null ? null : isMulti(props.activeField) ? (
-            <MultiFieldFilter {...props} />
+            <MultiFieldFilter {...(props as any)} />
           ) : (
-            <SingleFieldFilter {...props} />
+            <SingleFieldFilter {...(props as any)} />
           )}
         </React.Fragment>
       )}
@@ -58,43 +95,6 @@ function FieldFilter(props) {
   );
 }
 
-const FieldSummary = PropTypes.shape({
-  valueCounts: PropTypes.array.isRequired,
-  internalsCount: PropTypes.number.isRequired,
-  internalsFilteredCount: PropTypes.number.isRequired,
-});
-
-const MultiFieldSummary = PropTypes.arrayOf(
-  PropTypes.shape({
-    term: PropTypes.string.isRequired,
-    valueCounts: PropTypes.array.isRequired,
-    internalsCount: PropTypes.number.isRequired,
-    internalsFilteredCount: PropTypes.number.isRequired,
-  })
-);
-
-FieldFilter.propTypes = {
-  displayName: PropTypes.string,
-  dataCount: PropTypes.number,
-  filteredDataCount: PropTypes.number,
-  filters: PropTypes.array,
-  activeField: PropTypes.object,
-  activeFieldState: PropTypes.shape({
-    loading: PropTypes.boolean,
-    summary: FieldSummary,
-    leafSummaries: MultiFieldSummary,
-    /* member, range, multi specific settings */
-  }),
-
-  onFiltersChange: PropTypes.func,
-  onMemberSort: PropTypes.func,
-  onMemberSearch: PropTypes.func,
-  onRangeScaleChange: PropTypes.func,
-
-  hideFieldPanel: PropTypes.bool,
-  selectByDefault: PropTypes.bool.isRequired,
-};
-
 FieldFilter.defaultProps = {
   displayName: 'Items',
 };
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.tsx
similarity index 59%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.tsx
index a1e1fac7df..a14232f980 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.tsx
@@ -1,5 +1,4 @@
 import { memoize, uniq } from 'lodash';
-import PropTypes from 'prop-types';
 import React, { useLayoutEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { scrollIntoViewIfNeeded } from '../../Utils/DomUtils';
@@ -17,14 +16,35 @@ import {
   isRange,
   findAncestorFields,
 } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import {
+  Field,
+  FieldTreeNode,
+  TreeNode,
+} from '../../Components/AttributeFilter/Types';
+
+interface FieldListProps {
+  autoFocus?: boolean;
+  fieldTree: FieldTreeNode;
+  onActiveFieldChange: (term: string) => void;
+  activeField?: Field | null;
+  valuesMap: Record<string, string[]>;
+}
+
+interface FieldListState {
+  searchTerm: string;
+  expandedNodes: string[];
+}
 
 /**
  * Tree of Fields, used to set the active field.
  */
-export default class FieldList extends React.Component {
-  // eslint-disable-line react/no-deprecated
+export default class FieldList extends React.Component<
+  FieldListProps,
+  FieldListState
+> {
+  treeDomNode?: Element | Text | null;
 
-  constructor(props) {
+  constructor(props: FieldListProps) {
     super(props);
     this.handleCheckboxTreeRef = this.handleCheckboxTreeRef.bind(this);
     this.getNodeId = this.getNodeId.bind(this);
@@ -43,7 +63,7 @@ export default class FieldList extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: FieldListProps) {
     if (
       nextProps.activeField == null ||
       this.props.activeField === nextProps.activeField
@@ -64,15 +84,15 @@ export default class FieldList extends React.Component {
     }
   }
 
-  handleCheckboxTreeRef(component) {
+  handleCheckboxTreeRef(component: any) {
     this.treeDomNode = ReactDOM.findDOMNode(component);
   }
 
-  handleExpansionChange(expandedNodes) {
+  handleExpansionChange(expandedNodes: string[]) {
     this.setState({ expandedNodes });
   }
 
-  handleFieldSelect(node) {
+  handleFieldSelect(node: TreeNode<Field>) {
     this.props.onActiveFieldChange(node.field.term);
     const expandedNodes = Seq.from(this.state.expandedNodes)
       .concat(this._getPathToField(node.field))
@@ -82,19 +102,20 @@ export default class FieldList extends React.Component {
     this.setState({ expandedNodes });
   }
 
-  handleSearchTermChange(searchTerm) {
+  handleSearchTermChange(searchTerm: string) {
     // update search term, then if it is empty, make sure selected field is visible
     this.setState({ searchTerm });
   }
-  getNodeId(node) {
+
+  getNodeId(node: TreeNode<Field>) {
     return node.field.term;
   }
 
-  getNodeChildren(node) {
+  getNodeChildren(node: TreeNode<Field>) {
     return isMulti(node.field) ? [] : node.children;
   }
 
-  getFieldSearchString(node) {
+  getFieldSearchString(node: TreeNode<Field>): string {
     return isMulti(node.field)
       ? preorderSeq(node)
           .map(getNodeSearchString(this.props.valuesMap))
@@ -102,11 +123,11 @@ export default class FieldList extends React.Component {
       : getNodeSearchString(this.props.valuesMap)(node);
   }
 
-  searchPredicate(node, searchTerms) {
+  searchPredicate(node: TreeNode<Field>, searchTerms: string[]) {
     return areTermsInString(searchTerms, this.getFieldSearchString(node));
   }
 
-  _getPathToField(field) {
+  _getPathToField(field: Field | null | undefined): string[] {
     if (field == null) return [];
 
     return findAncestorFields(this.props.fieldTree, field.term)
@@ -114,75 +135,80 @@ export default class FieldList extends React.Component {
       .toArray();
   }
 
-  render() {
-    var { activeField, autoFocus, fieldTree } = this.props;
+  render(): JSX.Element {
+    const { activeField, autoFocus, fieldTree } = this.props;
 
     return (
       <div className="field-list">
-        <CheckboxTree
-          ref={this.handleCheckboxTreeRef}
-          autoFocusSearchBox={autoFocus}
-          tree={fieldTree}
-          expandedList={this.state.expandedNodes}
-          getNodeId={this.getNodeId}
-          getNodeChildren={this.getNodeChildren}
-          onExpansionChange={this.handleExpansionChange}
-          isSelectable={false}
-          isSearchable={true}
-          searchBoxPlaceholder="Find a variable"
-          searchBoxHelp={makeSearchHelpText(
-            'the variables by name or description'
-          )}
-          searchTerm={this.state.searchTerm}
-          onSearchTermChange={this.handleSearchTermChange}
-          searchPredicate={this.searchPredicate}
-          renderNode={(node) => (
-            <FieldNode
-              node={node}
-              searchTerm={this.state.searchTerm}
-              isActive={node.field.term === activeField?.term}
-              handleFieldSelect={this.handleFieldSelect}
-            />
-          )}
-          linksPosition={LinksPosition.Top}
-          styleOverrides={{
-            treeNode: {
-              nodeWrapper: {
-                padding: 0,
+        <CheckboxTree<TreeNode<Field>>
+          {...({
+            ref: this.handleCheckboxTreeRef,
+            autoFocusSearchBox: autoFocus,
+            tree: fieldTree,
+            expandedList: this.state.expandedNodes,
+            getNodeId: this.getNodeId,
+            getNodeChildren: this.getNodeChildren,
+            onExpansionChange: this.handleExpansionChange,
+            isSelectable: false,
+            isSearchable: true,
+            searchBoxPlaceholder: 'Find a variable',
+            searchBoxHelp: makeSearchHelpText(
+              'the variables by name or description'
+            ),
+            searchTerm: this.state.searchTerm,
+            onSearchTermChange: this.handleSearchTermChange,
+            searchPredicate: this.searchPredicate,
+            renderNode: (node: FieldTreeNode) => (
+              <FieldNode
+                node={node}
+                searchTerm={this.state.searchTerm}
+                isActive={node.field.term === activeField?.term}
+                handleFieldSelect={this.handleFieldSelect}
+              />
+            ),
+            linksPosition: LinksPosition.Top,
+            styleOverrides: {
+              treeNode: {
+                nodeWrapper: {
+                  padding: 0,
+                },
               },
             },
-          }}
+          } as any)}
         />
       </div>
     );
   }
 }
 
-FieldList.propTypes = {
-  autoFocus: PropTypes.bool,
-  fieldTree: PropTypes.object.isRequired,
-  onActiveFieldChange: PropTypes.func.isRequired,
-  activeField: PropTypes.object,
-  valuesMap: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string).isRequired)
-    .isRequired,
-};
-
-function getNodeSearchString(valuesMap) {
+function getNodeSearchString(valuesMap: Record<string, string[]>) {
   return function ({
     field: { term, display = '', description = '', variableName = '' },
-  }) {
+  }: TreeNode<Field>): string {
     return `${display} ${description} ${variableName} ${
       valuesMap[term] || ''
     }`.toLowerCase();
   };
 }
 
-function FieldNode({ node, isActive, searchTerm, handleFieldSelect }) {
-  const nodeRef = useRef(null);
+interface FieldNodeProps {
+  node: TreeNode<Field>;
+  isActive: boolean;
+  searchTerm: string;
+  handleFieldSelect: (node: TreeNode<Field>) => void;
+}
+
+function FieldNode({
+  node,
+  isActive,
+  searchTerm,
+  handleFieldSelect,
+}: FieldNodeProps): JSX.Element {
+  const nodeRef = useRef<HTMLAnchorElement>(null);
 
   useLayoutEffect(() => {
     if (isActive && nodeRef.current && nodeRef.current.offsetParent) {
-      scrollIntoViewIfNeeded(nodeRef.current.offsetParent);
+      scrollIntoViewIfNeeded(nodeRef.current.offsetParent as HTMLElement);
     }
   }, [isActive, nodeRef.current, searchTerm]);
 
@@ -213,6 +239,6 @@ function FieldNode({ node, isActive, searchTerm, handleFieldSelect }) {
   );
 }
 
-function getIcon(field) {
+function getIcon(field: Field): string {
   return isRange(field) ? 'bar-chart-o' : isMulti(field) ? 'th-list' : 'list';
 }
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.tsx
similarity index 79%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.tsx
index ca65ece9fc..22ab4a9234 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FilterLegend.tsx
@@ -1,9 +1,20 @@
 import React from 'react';
+import { Field } from './Types';
+
+/**
+ * Props for the FilterLegend component
+ */
+interface FilterLegendProps {
+  displayName?: string;
+  activeField?: Field;
+}
 
 /**
  * Legend used for all filters
  */
-export default function FilterLegend(props) {
+export default function FilterLegend(
+  props: FilterLegendProps
+): React.ReactElement {
   return (
     <div className="filter-param-legend">
       <div>
@@ -11,7 +22,7 @@ export default function FilterLegend(props) {
           <div className="fill"></div>
         </div>
         <div className="label">
-          All {props.displayName} having "{props.activeField.display}"
+          All {props.displayName} having "{props.activeField?.display}"
         </div>
       </div>
       <div>
@@ -26,6 +37,7 @@ export default function FilterLegend(props) {
     </div>
   );
 }
+
 // TODO Either remove the commented code below, or replace using provided total counts
 // const totalCounts = Seq.from(props.distribution)
 //   // FIXME Always filter nulls when they are moved to different section for non-range fields
@@ -51,7 +63,10 @@ export default function FilterLegend(props) {
  */
 // FIXME Remove eslint rule when counts and percentages are figured out
 // eslint-disable-next-line no-unused-vars, require-jsdoc
-function concatCounts(countsA, countsB) {
+function concatCounts(
+  countsA: { count: number; filteredCount: number },
+  countsB: { count: number; filteredCount: number }
+): { count: number; filteredCount: number } {
   return {
     count: countsA.count + countsB.count,
     filteredCount: countsA.filteredCount + countsB.filteredCount,
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.tsx
similarity index 74%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.tsx
index 0a2ab17605..06a36ab861 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/FilterList.tsx
@@ -1,5 +1,4 @@
 import { partial } from 'lodash';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Seq } from '../../Utils/IterableUtils';
 import IconAlt from '../../Components/Icon/IconAlt';
@@ -9,6 +8,21 @@ import {
   shouldAddFilter,
 } from '../../Components/AttributeFilter/AttributeFilterUtils';
 import { postorderSeq } from '../../Utils/TreeUtils';
+import { Filter, FieldTreeNode, Field, MultiFilterValue } from './Types';
+
+interface FilterListProps {
+  onActiveFieldChange: (field: string) => void;
+  onFiltersChange: (filters: Filter[]) => void;
+  fieldTree: FieldTreeNode;
+  filters: Filter[];
+  displayName: string;
+  dataCount?: number;
+  filteredDataCount?: number;
+  hideGlobalCounts: boolean;
+  loadingFilteredCount?: boolean;
+  activeField?: Field;
+  minSelectedCount?: number;
+}
 
 /**
  * List of filters configured by the user.
@@ -16,12 +30,12 @@ import { postorderSeq } from '../../Utils/TreeUtils';
  * Each filter can be used to update the active field
  * or to remove a filter.
  */
-export default class FilterList extends React.Component {
+export default class FilterList extends React.Component<FilterListProps, {}> {
   /**
    * @param {FilterListProps} props
    * @return {React.Component<FilterListProps, void>}
    */
-  constructor(props) {
+  constructor(props: FilterListProps) {
     super(props);
     this.handleFilterSelectClick = this.handleFilterSelectClick.bind(this);
     this.handleFilterRemoveClick = this.handleFilterRemoveClick.bind(this);
@@ -31,62 +45,71 @@ export default class FilterList extends React.Component {
    * @param {Filter} filter
    * @param {Event} event
    */
-  handleFilterSelectClick(filter, containerFilter = filter, event) {
+  handleFilterSelectClick = (
+    filter: Filter,
+    containerFilter: Filter = filter,
+    event: React.MouseEvent<HTMLAnchorElement>
+  ) => {
     event.preventDefault();
     this.props.onActiveFieldChange(containerFilter.field);
-  }
+  };
 
   /**
    * @param {Filter} filter
    * @param {Event} event
    */
-  handleFilterRemoveClick(filter, containerFilter, event) {
+  handleFilterRemoveClick = (
+    filter: Filter,
+    containerFilter: Filter | undefined,
+    event: React.MouseEvent<HTMLSpanElement>
+  ) => {
     event.preventDefault();
     if (containerFilter != null) {
       const otherFilters = this.props.filters.filter(
         (f) => f !== containerFilter
       );
+      const containerValue = containerFilter.value as MultiFilterValue;
       const nextContainerFilter = {
         ...containerFilter,
         value: {
-          ...containerFilter.value,
-          filters: containerFilter.value.filters.filter((f) => f !== filter),
+          ...containerValue,
+          filters: containerValue.filters.filter((f: any) => f !== filter),
         },
-      };
+      } as Filter;
       this.props.onFiltersChange(
-        otherFilters.concat(
-          shouldAddFilter(nextContainerFilter) ? [nextContainerFilter] : []
-        )
+        shouldAddFilter(nextContainerFilter, [], false)
+          ? otherFilters.concat(nextContainerFilter)
+          : otherFilters
       );
     } else {
       this.props.onFiltersChange(
         this.props.filters.filter((f) => f !== filter)
       );
     }
-  }
+  };
 
-  renderFilterItem(filter, containerFilter) {
-    var { fieldTree } = this.props;
-    var handleSelectClick = partial(
+  renderFilterItem(filter: Filter, containerFilter?: Filter): JSX.Element {
+    const { fieldTree } = this.props;
+    const handleSelectClick = partial(
       this.handleFilterSelectClick,
       filter,
       containerFilter
     );
-    var handleRemoveClick = partial(
+    const handleRemoveClick = partial(
       this.handleFilterRemoveClick,
       filter,
       containerFilter
     );
-    var field = postorderSeq(fieldTree)
+    const field = postorderSeq(fieldTree)
       .map((node) => node.field)
       .find((field) => field.term === filter.field);
-    var filterDisplay = getFilterValueDisplay(filter);
+    const filterDisplay = getFilterValueDisplay(filter);
 
     return (
       <div className="filter-item">
         <a
           className="select"
-          onClick={handleSelectClick}
+          onClick={handleSelectClick as any}
           href={'#' + filter.field}
           title={filterDisplay}
         >
@@ -99,7 +122,7 @@ export default class FilterList extends React.Component {
             the encoding is done in the browser */}
         <span
           className="remove"
-          onClick={handleRemoveClick}
+          onClick={handleRemoveClick as any}
           title="remove restriction"
         >
           {String.fromCharCode(215)}
@@ -108,7 +131,7 @@ export default class FilterList extends React.Component {
     );
   }
 
-  render() {
+  render(): JSX.Element {
     const {
       activeField,
       fieldTree,
@@ -136,7 +159,9 @@ export default class FilterList extends React.Component {
       </span>
     );
 
-    const needsMoreCount = minSelectedCount > filteredDataCount;
+    const needsMoreCount = minSelectedCount
+      ? minSelectedCount > (filteredDataCount || 0)
+      : false;
 
     const filtered = hideGlobalCounts ? null : (
       <span
@@ -188,12 +213,12 @@ export default class FilterList extends React.Component {
                     <React.Fragment>
                       <sup className="multiFilter-operation">
                         {getOperationDisplay(
-                          filter.value.operation
+                          (filter.value as any).operation
                         ).toUpperCase()}{' '}
                         {field == null ? filter.field : field.display} filters
                       </sup>
                       <ul className="filter-items">
-                        {filter.value.filters.map((leaf) => (
+                        {(filter.value as any).filters.map((leaf: Filter) => (
                           <li key={leaf.field}>
                             {this.renderFilterItem(leaf, filter)}
                           </li>
@@ -210,17 +235,3 @@ export default class FilterList extends React.Component {
     );
   }
 }
-
-FilterList.propTypes = {
-  onActiveFieldChange: PropTypes.func.isRequired,
-  onFiltersChange: PropTypes.func.isRequired,
-  fieldTree: PropTypes.object.isRequired,
-  filters: PropTypes.array.isRequired,
-  displayName: PropTypes.string.isRequired,
-  dataCount: PropTypes.number,
-  filteredDataCount: PropTypes.number,
-  hideGlobalCounts: PropTypes.bool.isRequired,
-  loadingFilteredCount: PropTypes.bool,
-  activeField: PropTypes.object,
-  minSelectedCount: PropTypes.number,
-};
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.tsx
similarity index 75%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.tsx
index f42ff49a9a..286371be15 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.tsx
@@ -10,7 +10,6 @@ import {
   throttle,
   get,
 } from 'lodash';
-import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { lazy } from '../../Utils/ComponentUtils';
@@ -30,13 +29,54 @@ const DAY = 1000 * 60 * 60 * 24;
 
 const IGNORED_UI_STATE_PROPERTIES = ['loading', 'valid', 'errorMessage'];
 
-var distributionEntryPropType = PropTypes.shape({
-  value: PropTypes.number.isRequired,
-  count: PropTypes.number.isRequired,
-  filteredCount: PropTypes.number.isRequired,
-});
+// Type definitions
+interface DistributionEntry {
+  value: number;
+  count: number;
+  filteredCount: number;
+}
+
+interface UIState {
+  xaxisMin?: number;
+  xaxisMax?: number;
+  yaxisMin?: number;
+  yaxisMax?: number;
+  binSize?: number;
+  binStart?: number;
+  scaleYAxis?: boolean;
+}
+
+interface HistogramProps {
+  distribution: DistributionEntry[];
+  selectedMin?: number | null;
+  selectedMax?: number | null;
+  chartType: 'number' | 'date';
+  timeformat?: string;
+  xaxisLabel?: string;
+  yaxisLabel?: string;
+  truncateYAxis?: boolean;
+  defaultScaleYAxis?: boolean;
+  uiState: UIState;
+  onUiStateChange: (uiState: UIState) => void;
+  onSelected: (range: { min: number | null; max: number | null }) => void;
+  onSelecting: (range: { min: number | null; max: number | null }) => void;
+  onUnselected?: (range: { min: number | null; max: number | null }) => void;
+}
+
+interface HistogramState {
+  uiState: UIState;
+  showSettings: boolean;
+}
+
+interface Transform {
+  display: string;
+  xform: (v: number) => number;
+  inverse: (v: number) => number;
+}
+
+type Transforms = Record<string, Transform>;
 
-const transforms = {
+const transforms: Transforms = {
   none: {
     display: 'None',
     xform: (v) => v,
@@ -63,35 +103,42 @@ const PLOT_SETTINGS_OPEN_KEY = 'wdk/filterParam/plotSettingsOpen';
 
 var Histogram = (function () {
   /** Common histogram component */
-  class LazyHistogram extends React.Component {
-    constructor(props) {
+  class LazyHistogram extends React.Component<HistogramProps, HistogramState> {
+    plot: any;
+    $chart: any;
+    tooltip: any;
+
+    constructor(props: HistogramProps) {
       super(props);
-      this.handleResize = throttle(this.handleResize.bind(this), 100);
-      this.emitStateChange = debounce(this.emitStateChange, 100);
+      this.handleResize = throttle(this.handleResize.bind(this), 100) as any;
+      this.emitStateChange = debounce(this.emitStateChange, 100) as any;
       this.state = {
         uiState: this.getStateFromProps(props),
         showSettings:
           sessionStorage.getItem(PLOT_SETTINGS_OPEN_KEY) !== 'false',
       };
-      this.getRange = memoize(this.getRange);
-      this.getNumFixedDigits = memoize(this.getNumFixedDigits);
-      this.getDefaultBinSize = memoize(this.getDefaultBinSize);
+      this.getRange = memoize(this.getRange) as any;
+      this.getNumFixedDigits = memoize(this.getNumFixedDigits) as any;
+      this.getDefaultBinSize = memoize(this.getDefaultBinSize) as any;
     }
 
     componentDidMount() {
-      $(window).on('resize', this.handleResize);
-      $(ReactDOM.findDOMNode(this))
-        .on('plotselected .chart', this.handlePlotSelected.bind(this))
-        .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
-        .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
-        .on('plothover .chart', this.handlePlotHover.bind(this));
+      ($ as any)(window).on('resize', this.handleResize);
+      const node = ReactDOM.findDOMNode(this);
+      if (node) {
+        ($(node) as any)
+          .on('plotselected .chart', this.handlePlotSelected.bind(this))
+          .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
+          .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
+          .on('plothover .chart', this.handlePlotHover.bind(this));
+      }
 
       this.createPlot();
       this.createTooltip();
       this.drawPlotSelection();
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: HistogramProps) {
       if (
         nextProps.uiState.yaxisMax !== this.state.uiState.yaxisMax ||
         nextProps.uiState.xaxisMin !== this.state.uiState.xaxisMin ||
@@ -105,7 +152,7 @@ var Histogram = (function () {
     /**
      * Conditionally update plot and selection based on props and state.
      */
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps: HistogramProps) {
       if (
         !isEqual(this.props.distribution, prevProps.distribution) ||
         !isEqual(
@@ -131,12 +178,12 @@ var Histogram = (function () {
       if (this.tooltip) this.tooltip.qtip('destroy');
     }
 
-    isProbablity(props) {
+    isProbablity(props: HistogramProps) {
       const { min, max } = this.getRange(props.distribution);
       return min >= 0 && (max === 1 || max === 100);
     }
 
-    getStateFromProps(props) {
+    getStateFromProps(props: HistogramProps): UIState {
       var { xaxisMin, xaxisMax } = this.getXAxisMinMax(props);
       var binStart =
         props.uiState.binStart ?? props.chartType === 'date'
@@ -151,7 +198,8 @@ var Histogram = (function () {
         );
       var { scaleYAxis = props.defaultScaleYAxis, yaxisMin = 0 } =
         props.uiState;
-      xaxisMax = assignBin(binSize, binStart, xaxisMax) + binSize;
+      const assignedBin = assignBin(binSize ?? 0, binStart, xaxisMax ?? 0);
+      xaxisMax = (assignedBin ?? 0) + (binSize ?? 0);
       return {
         yaxisMax,
         xaxisMin,
@@ -163,7 +211,7 @@ var Histogram = (function () {
       };
     }
 
-    getRange(distribution) {
+    getRange(distribution: DistributionEntry[]) {
       return distribution.reduce(
         ({ min, max }, entry) => ({
           min: Math.min(min, entry.value),
@@ -173,11 +221,11 @@ var Histogram = (function () {
       );
     }
 
-    isEveryValueAnInteger(distribution) {
+    isEveryValueAnInteger(distribution: DistributionEntry[]): boolean {
       return distribution.every(({ value }) => Number.isInteger(value));
     }
 
-    getDefaultBinSize(props) {
+    getDefaultBinSize(props: HistogramProps): number {
       if (props.chartType === 'date') return 1;
       const { min, max } = this.getRange(props.distribution);
       if (this.isProbablity(props)) return max / 100;
@@ -194,7 +242,10 @@ var Histogram = (function () {
       return Math.ceil(binSize);
     }
 
-    getXAxisMinMax(props) {
+    getXAxisMinMax(props: HistogramProps): {
+      xaxisMin: number;
+      xaxisMax: number;
+    } {
       const { min, max } = this.getRange(props.distribution);
       var { xaxisMin, xaxisMax } = props.uiState;
       if (xaxisMin == null)
@@ -203,7 +254,10 @@ var Histogram = (function () {
       return { xaxisMin, xaxisMax };
     }
 
-    getYAxisMax(distribution, truncateYAxis) {
+    getYAxisMax(
+      distribution: DistributionEntry[],
+      truncateYAxis: boolean
+    ): number {
       var counts = distribution.map((entry) => entry.count);
       // Reverse sort, then pull out first and second highest values
       var [max, nextMax] = counts.sort((a, b) => (a < b ? 1 : -1));
@@ -214,24 +268,27 @@ var Histogram = (function () {
       return yaxisMax;
     }
 
-    getClampedDistribution(distribution, uiState) {
+    getClampedDistribution(
+      distribution: DistributionEntry[],
+      uiState: UIState
+    ): DistributionEntry[] {
       const { xaxisMin, xaxisMax } = uiState;
       return xaxisMin == null && xaxisMax == null
         ? distribution
         : xaxisMax == null
-        ? distribution.filter((entry) => entry.value >= xaxisMin)
+        ? distribution.filter((entry) => entry.value >= xaxisMin!)
         : xaxisMin == null
-        ? distribution.filter((entry) => entry.value <= xaxisMax)
+        ? distribution.filter((entry) => entry.value <= xaxisMax!)
         : distribution.filter(
-            (entry) => entry.value >= xaxisMin && entry.value <= xaxisMax
+            (entry) => entry.value >= xaxisMin! && entry.value <= xaxisMax!
           );
     }
 
-    getBarWidth(distribution) {
+    getBarWidth(distribution: DistributionEntry[]): number {
       // padding factor
       const padding = 0.75;
       const { xaxisMin, xaxisMax } = this.state.uiState;
-      const length = xaxisMax - xaxisMin;
+      const length = xaxisMax! - xaxisMin!;
       const minWidth = length / 1000;
       const maxWidth = length / 100;
       // For dates, use one day as width
@@ -248,12 +305,16 @@ var Histogram = (function () {
               ? minDistance
               : Math.min(entry.value - prevValue, minDistance),
         }),
-        { prev: null, minDistance: Infinity }
+        { prevValue: null as number | null, minDistance: Infinity }
       );
       return clamp(minDistance * padding, minWidth, maxWidth);
     }
 
-    getBinnedDistribution(binSize, binStart, distribution) {
+    getBinnedDistribution(
+      binSize: number,
+      binStart: number,
+      distribution: DistributionEntry[]
+    ): DistributionEntry[] {
       return createBinnedDistribution(
         this.props.chartType === 'date' ? binSize * DAY : binSize,
         this.props.chartType === 'date' ? binStart * DAY : binStart,
@@ -261,7 +322,9 @@ var Histogram = (function () {
       );
     }
 
-    getSeriesData(distribution) {
+    getSeriesData(
+      distribution: DistributionEntry[]
+    ): Array<{ data: Array<[number, number]>; hoverable?: boolean }> {
       return [
         {
           data: distribution.map((entry) => [entry.value, entry.count]),
@@ -274,7 +337,7 @@ var Histogram = (function () {
       ];
     }
 
-    getNumFixedDigits(distribution) {
+    getNumFixedDigits(distribution: DistributionEntry[]): number {
       return Seq.from(distribution)
         .map((entry) => getNumFixedDigits(entry.value))
         .reduce(Math.max, 0);
@@ -287,12 +350,12 @@ var Histogram = (function () {
       this.drawPlotSelection();
     }
 
-    handlePlotSelected(event, ranges) {
+    handlePlotSelected(event: any, ranges: any) {
       var range = unwrapXaxisRange(ranges);
       this.props.onSelected(range);
     }
 
-    handlePlotSelecting(event, ranges) {
+    handlePlotSelecting(event: any, ranges: any) {
       if (!ranges) return;
       var range = unwrapXaxisRange(ranges);
       this.props.onSelecting(range);
@@ -342,12 +405,16 @@ var Histogram = (function () {
       var { uiState } = this.state;
       var { binSize, binStart, xaxisMin, xaxisMax } = uiState;
       const distribution = binSize
-        ? this.getBinnedDistribution(binSize, binStart, this.props.distribution)
+        ? this.getBinnedDistribution(
+            binSize,
+            binStart ?? 0,
+            this.props.distribution
+          )
         : this.props.distribution;
       const clampedDistribution = binSize
         ? distribution
         : this.getClampedDistribution(distribution, uiState);
-      const useScientificNotation = xaxisMax - xaxisMin < 0.1;
+      const useScientificNotation = xaxisMax! - xaxisMin! < 0.1;
 
       var barWidth = binSize
         ? chartType === 'date'
@@ -359,7 +426,7 @@ var Histogram = (function () {
         chartType === 'date'
           ? { mode: 'time', timeformat: timeformat }
           : {
-              tickFormatter: (value) =>
+              tickFormatter: (value: number) =>
                 useScientificNotation
                   ? value.toExponential(2)
                   : value.toLocaleString(undefined, {
@@ -391,8 +458,8 @@ var Histogram = (function () {
         xaxis: Object.assign(
           {
             tickLength: 0,
-            min: binSize ? xaxisMin : xaxisMin - barWidth,
-            max: binSize ? xaxisMax : xaxisMax + barWidth,
+            min: binSize ? xaxisMin : xaxisMin! - barWidth,
+            max: binSize ? xaxisMax : xaxisMax! + barWidth,
           },
           xaxisBaseOptions
         ),
@@ -416,8 +483,11 @@ var Histogram = (function () {
 
       if (this.plot) this.plot.destroy();
 
-      this.$chart = $(ReactDOM.findDOMNode(this)).find('.chart');
-      this.plot = $.plot(this.$chart, seriesData, plotOptions);
+      const node = ReactDOM.findDOMNode(this);
+      if (node) {
+        this.$chart = ($(node) as any).find('.chart');
+        this.plot = ($ as any).plot(this.$chart, seriesData, plotOptions);
+      }
     }
 
     createTooltip() {
@@ -441,7 +511,7 @@ var Histogram = (function () {
       });
     }
 
-    handlePlotHover(event, pos, item) {
+    handlePlotHover(event: any, pos: any, item: any) {
       var qtipApi = this.tooltip.qtip('api');
 
       if (!item) {
@@ -461,12 +531,12 @@ var Histogram = (function () {
         const barWidthPx = (item.series.bars.barWidth / 2) * pointToPixelFactor;
         var formattedValue =
           this.props.chartType === 'date'
-            ? formatDate(this.props.timeformat, value)
+            ? formatDate(this.props.timeformat ?? 'yyyy-MM-dd', value)
             : formatNumber(value, { useScientificNotation: false });
         var formattedBinEnd =
           this.props.chartType === 'date'
             ? formatDate(
-                this.props.timeformat,
+                this.props.timeformat ?? 'yyyy-MM-dd',
                 value + (this.state.uiState.binSize || 0) * DAY
               )
             : formatNumber(value + (this.state.uiState.binSize || 0), {
@@ -502,35 +572,42 @@ var Histogram = (function () {
       }
     }
 
-    updateUIState(updater) {
+    updateUIState(updater: (uiState: UIState) => UIState) {
       this.setState(
         ({ uiState }) => ({ uiState: updater(uiState) }),
         () => this.emitStateChange(this.state.uiState)
       );
     }
 
-    emitStateChange(uiState) {
+    emitStateChange(uiState: UIState) {
       this.props.onUiStateChange(uiState);
     }
 
     // x-axis settings
     // ---------------
 
-    setXAxisRange(xaxisMin, xaxisMax) {
+    setXAxisRange(xaxisMin: number, xaxisMax: number) {
       this.updateUIState((uiState) => ({ ...uiState, xaxisMin, xaxisMax }));
     }
 
-    setXAxisBinSize(binSize) {
+    setXAxisBinSize(binSize: number) {
       this.setXAxisBinState(this.state.uiState.binStart, binSize);
     }
 
-    setXAxisBinStart(binStart) {
+    setXAxisBinStart(binStart: number) {
       this.setXAxisBinState(binStart, this.state.uiState.binSize);
     }
 
-    setXAxisBinState(binStart, binSize) {
+    setXAxisBinState(
+      binStart: number | undefined,
+      binSize: number | undefined
+    ) {
       const distribution = binSize
-        ? this.getBinnedDistribution(binSize, binStart, this.props.distribution)
+        ? this.getBinnedDistribution(
+            binSize,
+            binStart || 0,
+            this.props.distribution
+          )
         : this.props.distribution;
       const yaxisMax = binSize
         ? Math.max(...distribution.map((entry) => entry.count))
@@ -552,11 +629,11 @@ var Histogram = (function () {
         this.props.chartType === 'date' ? xaxisMin : Math.min(0, xaxisMin);
       const rangeMin = binStart;
       const rangeMax =
-        assignBin(
+        (assignBin(
           binSize,
           binStart,
           xaxisMax === rangeMin ? rangeMin + 1 : xaxisMax
-        ) + binSize;
+        ) ?? 0) + binSize;
       this.setXAxisRange(rangeMin, rangeMax);
       this.setXAxisBinState(binStart, binSize);
     }
@@ -564,22 +641,22 @@ var Histogram = (function () {
     // y-axis settings
     // ---------------
 
-    setYAxisRange(yaxisMin, yaxisMax) {
+    setYAxisRange(yaxisMin: number, yaxisMax: number) {
       this.updateUIState((uiState) => ({ ...uiState, yaxisMin, yaxisMax }));
     }
 
-    setScaleYAxis(scaleYAxis) {
+    setScaleYAxis(scaleYAxis: boolean) {
       this.updateUIState((uiState) => ({ ...uiState, scaleYAxis }));
     }
 
     resetYAxisState() {
       const { binStart, binSize } = this.state.uiState;
       this.setXAxisBinState(binStart, binSize);
-      this.setScaleYAxis(this.props.defaultScaleYAxis);
+      this.setScaleYAxis(this.props.defaultScaleYAxis || false);
       this.updateUIState((uiState) => ({ ...uiState, yaxisMin: 0 }));
     }
 
-    setSettingsOpen(showSettings) {
+    setSettingsOpen(showSettings: boolean) {
       sessionStorage.setItem(
         PLOT_SETTINGS_OPEN_KEY,
         JSON.stringify(Boolean(showSettings))
@@ -615,11 +692,11 @@ var Histogram = (function () {
             inline
             hideReset
             value={{
-              min: formatDate(timeformat, xaxisMin),
-              max: formatDate(timeformat, xaxisMax),
+              min: formatDate(timeformat ?? 'yyyy-MM-dd', xaxisMin ?? 0),
+              max: formatDate(timeformat ?? 'yyyy-MM-dd', xaxisMax ?? 0),
             }}
-            start={formatDate(timeformat, valuesMin)}
-            end={formatDate(timeformat, valuesMax)}
+            start={formatDate(timeformat ?? 'yyyy-MM-dd', valuesMin ?? 0)}
+            end={formatDate(timeformat ?? 'yyyy-MM-dd', valuesMax ?? 0)}
             onChange={(value) =>
               this.setXAxisRange(
                 parseDate(value.min).getTime(),
@@ -631,8 +708,8 @@ var Histogram = (function () {
           <React.Fragment>
             <NumberRangeSelector
               value={{
-                min: Number(xaxisMin.toFixed(numFixedDigits)),
-                max: Number(xaxisMax.toFixed(numFixedDigits)),
+                min: Number(xaxisMin!.toFixed(numFixedDigits)),
+                max: Number(xaxisMax!.toFixed(numFixedDigits)),
               }}
               start={-Infinity}
               end={Infinity}
@@ -646,9 +723,10 @@ var Histogram = (function () {
 
       var yAxisScaleSelector = (
         <NumberRangeSelector
-          value={{ min: yaxisMin, max: yaxisMax }}
+          value={{ min: yaxisMin ?? 0, max: yaxisMax ?? 0 }}
           start={0}
           end={Infinity}
+          step={1}
           onChange={(value) =>
             this.setYAxisRange(Number(value.min), Number(value.max))
           }
@@ -738,7 +816,9 @@ var Histogram = (function () {
                         min={0}
                         value={this.state.uiState.binSize}
                         onFocus={autoSelectOnFocus}
-                        onChange={(e) => this.setXAxisBinSize(eventToNumber(e))}
+                        onChange={(e) =>
+                          this.setXAxisBinSize(eventToNumber(e) ?? 0)
+                        }
                       />
                       <em>
                         {' '}
@@ -778,39 +858,7 @@ var Histogram = (function () {
     }
   }
 
-  LazyHistogram.propTypes = {
-    distribution: PropTypes.arrayOf(distributionEntryPropType).isRequired,
-    selectedMin: PropTypes.number,
-    selectedMax: PropTypes.number,
-    chartType: PropTypes.oneOf(['number', 'date']).isRequired,
-    timeformat: PropTypes.string,
-    xaxisLabel: PropTypes.string,
-    yaxisLabel: PropTypes.string,
-
-    // Controls if truncation logic is applied
-    // to deemphasize outliers
-    truncateYAxis: PropTypes.bool,
-
-    defaultScaleYAxis: PropTypes.bool,
-
-    uiState: PropTypes.shape({
-      xaxisMin: PropTypes.number,
-      xaxisMax: PropTypes.number,
-      yaxisMin: PropTypes.number,
-      yaxisMax: PropTypes.number,
-      binSize: PropTypes.number,
-      binStart: PropTypes.number,
-      scaleYAxis: PropTypes.bool,
-    }),
-
-    onUiStateChange: PropTypes.func,
-
-    onSelected: PropTypes.func,
-    onSelecting: PropTypes.func,
-    onUnselected: PropTypes.func,
-  };
-
-  LazyHistogram.defaultProps = {
+  (LazyHistogram as any).defaultProps = {
     xaxisLabel: 'X-Axis',
     yaxisLabel: 'Y-Axis',
     selectedMin: null,
@@ -821,11 +869,15 @@ var Histogram = (function () {
     onUnselected: noop,
   };
 
-  return lazy(async () => {
+  return lazy<HistogramProps>(async () => {
+    // @ts-ignore - vendored script-loader imports
     await import('!!script-loader!../../../vendored/flot/jquery.flot');
     await Promise.all([
+      // @ts-ignore - vendored script-loader imports
       import('!!script-loader!../../../vendored/flot/jquery.flot.categories'),
+      // @ts-ignore - vendored script-loader imports
       import('!!script-loader!../../../vendored/flot/jquery.flot.selection'),
+      // @ts-ignore - vendored script-loader imports
       import('!!script-loader!../../../vendored/flot/jquery.flot.time'),
     ]);
   })(LazyHistogram);
@@ -833,8 +885,21 @@ var Histogram = (function () {
 
 export default Histogram;
 
-function RangeWarning({ rangeMin, rangeMax, selectionMin, selectionMax }) {
-  if (rangeMin >= selectionMin && rangeMax <= selectionMax) return null;
+interface RangeWarningProps {
+  rangeMin: number;
+  rangeMax: number;
+  selectionMin?: number;
+  selectionMax?: number;
+}
+
+function RangeWarning({
+  rangeMin,
+  rangeMax,
+  selectionMin,
+  selectionMax,
+}: RangeWarningProps) {
+  if (rangeMin >= (selectionMin ?? 0) && rangeMax <= (selectionMax ?? 0))
+    return null;
   return (
     <Tooltip title="Some values are hidden due to your current range selection.">
       <IconAlt fa="exclamation-circle range-warning" />
@@ -846,7 +911,14 @@ function RangeWarning({ rangeMin, rangeMax, selectionMin, selectionMax }) {
  * Reusable histogram field component. The parent component is responsible for
  * preparing the data.
  */
-function unwrapXaxisRange(flotRanges) {
+interface FlotRanges {
+  xaxis: { from: number; to: number };
+}
+
+function unwrapXaxisRange(flotRanges: FlotRanges | null | undefined): {
+  min: number | null;
+  max: number | null;
+} {
   if (flotRanges == null) {
     return { min: null, max: null };
   }
@@ -856,7 +928,7 @@ function unwrapXaxisRange(flotRanges) {
 }
 
 const FIXED_DIGITS_RE = /^(\d*)\.?(\d*)$/;
-function getNumFixedDigits(num) {
+function getNumFixedDigits(num: number): number {
   const matches = FIXED_DIGITS_RE.exec(String(num));
   return matches == null ? 0 : matches[2].length;
 }
@@ -870,7 +942,11 @@ function getNumFixedDigits(num) {
 // - Bar width will be determined by binSize.
 //
 
-function assignBin(binSize, binStart, value) {
+function assignBin(
+  binSize: number,
+  binStart: number,
+  value: number
+): number | undefined {
   if (value < binStart) return;
   const shift = binStart % binSize;
   const shiftedValue = value - shift;
@@ -879,26 +955,38 @@ function assignBin(binSize, binStart, value) {
   return bin + shift;
 }
 
-function createBinnedDistribution(binSize, binStart, distribution) {
-  const binnedObject = distribution.reduce((binnedDist, entry) => {
-    const bin = assignBin(binSize, binStart, entry.value);
-    if (bin == null) return binnedDist;
-    const count = get(binnedDist, [bin, 'count'], 0) + entry.count;
-    const filteredCount =
-      get(binnedDist, [bin, 'filteredCount'], 0) + entry.filteredCount;
-    return Object.assign(binnedDist, { [bin]: { count, filteredCount } });
-  }, {});
+function createBinnedDistribution(
+  binSize: number,
+  binStart: number,
+  distribution: DistributionEntry[]
+): DistributionEntry[] {
+  const binnedObject = distribution.reduce(
+    (
+      binnedDist: Record<number, { count: number; filteredCount: number }>,
+      entry
+    ) => {
+      const bin = assignBin(binSize, binStart, entry.value);
+      if (bin == null) return binnedDist;
+      const count = get(binnedDist, [bin, 'count'], 0) + entry.count;
+      const filteredCount =
+        get(binnedDist, [bin, 'filteredCount'], 0) + entry.filteredCount;
+      return Object.assign(binnedDist, { [bin]: { count, filteredCount } });
+    },
+    {}
+  );
   return Object.entries(binnedObject).map((entry) => ({
     value: Number(entry[0]),
     ...entry[1],
   }));
 }
 
-function eventToNumber(event) {
+function eventToNumber(
+  event: React.ChangeEvent<HTMLInputElement>
+): number | undefined {
   const value = event.target.value.trim();
   return value === '' ? undefined : Number(value);
 }
 
-function autoSelectOnFocus(event) {
+function autoSelectOnFocus(event: React.FocusEvent<HTMLInputElement>) {
   event.target.select();
 }
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.tsx
similarity index 65%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.tsx
index ff2f88acf8..d13758b083 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.tsx
@@ -1,10 +1,70 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { clamp, debounce, get } from 'lodash';
+import { clamp, debounce, get, noop } from 'lodash';
 
 import Histogram from '../../Components/AttributeFilter/Histogram';
 import FilterLegend from '../../Components/AttributeFilter/FilterLegend';
 import UnknownCount from '../../Components/AttributeFilter/UnknownCount';
+import {
+  Field,
+  RangeFilter,
+  OntologyTermSummary,
+  ValueCounts,
+} from '../../Components/AttributeFilter/Types';
+
+/**
+ * Distribution entry type for histogram data
+ */
+interface DistributionEntry {
+  value: number | string | null;
+  count: number;
+  filteredCount: number;
+}
+
+/**
+ * Range value type for min/max values
+ */
+interface RangeValue {
+  min?: number | string | null;
+  max?: number | string | null;
+}
+
+/**
+ * Props for the HistogramField component
+ */
+interface HistogramFieldProps {
+  distribution: DistributionEntry[];
+  toFilterValue: (value: number) => number | string;
+  toHistogramValue: (value: number | string) => number;
+  selectByDefault: boolean;
+  onChange: (
+    activeField: Field,
+    range: RangeValue,
+    includeUnknown: boolean,
+    valueCounts: ValueCounts
+  ) => void;
+  activeField: Field;
+  activeFieldState: {
+    summary: OntologyTermSummary;
+    [key: string]: any;
+  };
+  filter?: RangeFilter;
+  overview: React.ReactNode;
+  displayName: string;
+  unknownCount: number;
+  timeformat?: string;
+  onRangeScaleChange?: (activeField: Field, range: any) => void;
+  histogramTruncateYAxisDefault?: boolean;
+  histogramScaleYAxisDefault?: boolean;
+}
+
+/**
+ * State for the HistogramField component
+ */
+interface HistogramFieldState {
+  includeUnknown: boolean;
+  minInputValue: number | string | null;
+  maxInputValue: number | string | null;
+}
 
 /**
  * Generic Histogram field component
@@ -13,8 +73,20 @@ import UnknownCount from '../../Components/AttributeFilter/UnknownCount';
  * TODO Use bin size for x-axis scale <input> step attribute
  * TODO Interval snapping
  */
-export default class HistogramField extends React.Component {
-  static getHelpContent(props) {
+export default class HistogramField extends React.Component<
+  HistogramFieldProps,
+  HistogramFieldState
+> {
+  convertedDistribution: DistributionEntry[] = [];
+  convertedDistributionRange: { min: number; max: number } = {
+    min: 0,
+    max: 0,
+  };
+  distributionRange: RangeValue = { min: 0, max: 0 };
+
+  updateFilterValueFromSelection!: (range: RangeValue) => void;
+
+  static getHelpContent(props: HistogramFieldProps) {
     return (
       <div>
         Select a range of {props.activeField.display} values with the graph
@@ -37,10 +109,10 @@ export default class HistogramField extends React.Component {
     */
   }
 
-  constructor(props) {
+  constructor(props: HistogramFieldProps) {
     super(props);
     this.updateFilterValueFromSelection = debounce(
-      this.updateFilterValueFromSelection.bind(this),
+      this._updateFilterValueFromSelection.bind(this),
       50
     );
     this.handleMinInputBlur = this.handleMinInputBlur.bind(this);
@@ -61,7 +133,7 @@ export default class HistogramField extends React.Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: HistogramFieldProps) {
     let distributionChanged =
       this.props.distribution !== nextProps.distribution;
     let filterChanged = this.props.filter !== nextProps.filter;
@@ -77,11 +149,15 @@ export default class HistogramField extends React.Component {
     }
   }
 
-  cacheDistributionOperations(props) {
+  cacheDistributionOperations(props: HistogramFieldProps) {
     this.convertedDistribution = props.distribution.map((entry) =>
-      Object.assign({}, entry, { value: props.toHistogramValue(entry.value) })
+      Object.assign({}, entry, {
+        value: entry.value != null ? props.toHistogramValue(entry.value) : 0,
+      })
     );
-    var values = this.convertedDistribution.map((entry) => entry.value);
+    var values = this.convertedDistribution.map(
+      (entry) => entry.value
+    ) as number[];
     var min = Math.min(...values);
     var max = Math.max(...values);
     this.convertedDistributionRange = { min, max };
@@ -91,7 +167,7 @@ export default class HistogramField extends React.Component {
     };
   }
 
-  formatRangeValue(value) {
+  formatRangeValue(value: number | string | null): number | string | null {
     const { min, max } = this.convertedDistributionRange;
     return value
       ? this.props.toFilterValue(
@@ -100,7 +176,7 @@ export default class HistogramField extends React.Component {
       : null;
   }
 
-  handleMinInputChange(event) {
+  handleMinInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ minInputValue: event.target.value });
   }
 
@@ -108,11 +184,11 @@ export default class HistogramField extends React.Component {
     this.updateFilterValueFromState();
   }
 
-  handleMinInputKeyPress(event) {
+  handleMinInputKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') this.updateFilterValueFromState();
   }
 
-  handleMaxInputChange(event) {
+  handleMaxInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ maxInputValue: event.target.value });
   }
 
@@ -120,11 +196,11 @@ export default class HistogramField extends React.Component {
     this.updateFilterValueFromState();
   }
 
-  handleMaxInputKeyPress(event) {
+  handleMaxInputKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
     if (event.key === 'Enter') this.updateFilterValueFromState();
   }
 
-  handleRangeScaleChange(range) {
+  handleRangeScaleChange(range: any) {
     if (this.props.onRangeScaleChange != null) {
       this.props.onRangeScaleChange(this.props.activeField, range);
     }
@@ -136,35 +212,34 @@ export default class HistogramField extends React.Component {
     this.updateFilterValue({ min, max });
   }
 
-  updateFilterValueFromSelection(range) {
-    const min = this.formatRangeValue(range.min);
-    const max = this.formatRangeValue(range.max);
+  _updateFilterValueFromSelection(range: RangeValue) {
+    const min = this.formatRangeValue(range.min ?? null);
+    const max = this.formatRangeValue(range.max ?? null);
     // XXX Snap to actual values?
     this.updateFilterValue({ min, max });
   }
 
-  updateFilterValue(range) {
+  updateFilterValue(range: RangeValue) {
     // only emit change if range differs from filter
     if (this.rangeIsDifferent(range)) this.emitChange(range);
   }
 
-  /**
-   * @param {React.ChangeEvent.<HTMLInputElement>} event
-   */
-  handleUnknownCheckboxChange(event) {
+  handleUnknownCheckboxChange(event: React.ChangeEvent<HTMLInputElement>) {
     const includeUnknown = event.target.checked;
     this.setState({ includeUnknown });
     this.emitChange(get(this.props, 'filter.value'), includeUnknown);
   }
 
-  rangeIsDifferent({ min, max }) {
-    if (this.props.filter == null) return min != null || max != null;
+  rangeIsDifferent(range: RangeValue): boolean {
+    if (this.props.filter == null)
+      return range.min != null || range.max != null;
     return (
-      min !== this.props.filter.value.min || max !== this.props.filter.value.max
+      range.min !== this.props.filter.value.min ||
+      range.max !== this.props.filter.value.max
     );
   }
 
-  emitChange(range, includeUnknown = this.state.includeUnknown) {
+  emitChange(range: any, includeUnknown: boolean = this.state.includeUnknown) {
     this.props.onChange(
       this.props.activeField,
       range,
@@ -216,7 +291,10 @@ export default class HistogramField extends React.Component {
     var selectedMin = min == null ? null : this.props.toHistogramValue(min);
     var selectedMax = max == null ? null : this.props.toHistogramValue(max);
 
-    var selectionTotal = filter && filter.selection && filter.selection.length;
+    var selectionTotal =
+      filter &&
+      (filter as any).selection &&
+      ((filter as any).selection as any).length;
 
     var selection =
       selectionTotal != null ? ' (' + selectionTotal + ' selected) ' : null;
@@ -231,7 +309,7 @@ export default class HistogramField extends React.Component {
               {'Select ' + activeField.display + ' from '}
               <input
                 type="text"
-                placeholder={distMin}
+                placeholder={String(distMin)}
                 value={this.state.minInputValue || ''}
                 onChange={this.handleMinInputChange}
                 onKeyPress={this.handleMinInputKeyPress}
@@ -240,7 +318,7 @@ export default class HistogramField extends React.Component {
               {' to '}
               <input
                 type="text"
-                placeholder={distMax}
+                placeholder={String(distMax)}
                 value={this.state.maxInputValue || ''}
                 onChange={this.handleMaxInputChange}
                 onKeyPress={this.handleMaxInputKeyPress}
@@ -261,20 +339,21 @@ export default class HistogramField extends React.Component {
             </div>
           </div>
           <div>
-            <UnknownCount {...this.props} />
+            <UnknownCount {...(this.props as any)} />
           </div>
         </div>
 
         <Histogram
-          distribution={this.convertedDistribution}
+          distribution={this.convertedDistribution as any}
           onSelected={this.updateFilterValueFromSelection}
+          onSelecting={noop}
           selectedMin={selectedMin}
           selectedMax={selectedMax}
-          chartType={activeField.type}
+          chartType={activeField.type as 'number' | 'date'}
           timeformat={this.props.timeformat}
           xaxisLabel={activeField.display}
           yaxisLabel={displayName}
-          uiState={activeFieldState}
+          uiState={activeFieldState as any}
           onUiStateChange={this.handleRangeScaleChange}
           truncateYAxis={this.props.histogramTruncateYAxisDefault}
           defaultScaleYAxis={this.props.histogramScaleYAxisDefault}
@@ -285,19 +364,3 @@ export default class HistogramField extends React.Component {
     );
   }
 }
-
-HistogramField.propTypes = {
-  distribution: PropTypes.array.isRequired,
-  toFilterValue: PropTypes.func.isRequired,
-  toHistogramValue: PropTypes.func.isRequired,
-  selectByDefault: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  activeField: PropTypes.object.isRequired,
-  activeFieldState: PropTypes.object.isRequired,
-  filter: PropTypes.object,
-  overview: PropTypes.node.isRequired,
-  displayName: PropTypes.string.isRequired,
-  unknownCount: PropTypes.number.isRequired,
-  timeformat: PropTypes.string,
-  onRangeScaleChange: PropTypes.func,
-};
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.tsx
similarity index 65%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.tsx
index 4581ccd909..38628d0614 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/InvalidFilterList.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { isEmpty, map, pick } from 'lodash';
+import { Filter } from './Types';
+
+interface Props {
+  filters: Filter[];
+}
 
 /**
  * List of filters with invalid fields and/or values
  */
-export default function InvalidFilterList(props) {
-  var { filters } = props;
-
+export default function InvalidFilterList({ filters }: Props) {
   if (isEmpty(filters)) return null;
 
   return (
@@ -17,7 +19,10 @@ export default function InvalidFilterList(props) {
       </p>
       <ul>
         {map(filters, (filter) => (
-          <li className="invalid">
+          <li
+            className="invalid"
+            key={`${filter.field}-${JSON.stringify(filter.value)}`}
+          >
             {JSON.stringify(pick(filter, 'field', 'value', 'includeUnknown'))}
           </li>
         ))}
@@ -25,7 +30,3 @@ export default function InvalidFilterList(props) {
     </div>
   );
 }
-
-InvalidFilterList.propTypes = {
-  filters: PropTypes.array,
-};
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.tsx
similarity index 69%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.tsx
index a7dc6bf923..2ea5712f1e 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/MembershipField.tsx
@@ -19,26 +19,112 @@ import { findAncestorNode } from '../../Utils/DomUtils';
 import StackedBar from '../../Components/AttributeFilter/StackedBar';
 import UnknownCount from '../../Components/AttributeFilter/UnknownCount';
 import { toPercentage } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import {
+  Filter,
+  OntologyTermSummary,
+  MemberField,
+  ValueCounts,
+} from '../../Components/AttributeFilter/Types';
 
 const UNKNOWN_ELEMENT = <em>Not specified</em>;
 
-class MembershipField extends React.PureComponent {
-  constructor(props) {
+// Type definitions for MembershipField component
+interface MembershipFieldState {
+  showDisabledTooltip: boolean;
+  tooltipTop?: number;
+  tooltipLeft?: number;
+  top?: undefined;
+  left?: undefined;
+}
+
+interface MembershipFieldProps {
+  activeField: MemberField;
+  activeFieldState: {
+    sort?: {
+      groupBySelected: boolean;
+      [key: string]: any;
+    };
+    summary: OntologyTermSummary;
+  };
+  filter?: Filter | null;
+  onMemberSort?: (field: MemberField, sort: any) => void;
+  displayName: string;
+  filteredCountHeadingPrefix?: string;
+  unfilteredCountHeadingPrefix?: string;
+  showInternalMesaCounts?: boolean;
+  dataCount: number;
+  fillBarColor?: string;
+  fillFilteredBarColor?: string;
+  onChange: (
+    activeField: MemberField,
+    value: any,
+    includeUnknown: boolean,
+    rows: ValueCounts
+  ) => void;
+}
+
+interface MembershipTableState {
+  // MembershipTable doesn't have state, but we need this for class definition
+}
+
+interface MembershipTableProps extends MembershipFieldProps {
+  activeFieldState: {
+    sort?: {
+      groupBySelected: boolean;
+      [key: string]: any;
+    };
+    summary: OntologyTermSummary;
+    currentPage?: number;
+    rowsPerPage?: number;
+    searchTerm?: string;
+    [key: string]: any;
+  };
+  selectByDefault?: boolean;
+  onMemberSearch?: (
+    field: MemberField,
+    searchTerm: string,
+    shouldResetPaging?: boolean
+  ) => void;
+  onMemberChangeCurrentPage?: (field: MemberField, page: number) => void;
+  onMemberChangeRowsPerPage?: (field: MemberField, rowsPerPage: number) => void;
+}
+
+interface ValueCountItem {
+  value: string | number | null;
+  count: number;
+  filteredCount: number;
+}
+
+interface SortEvent {
+  key: string;
+}
+
+class MembershipField extends React.PureComponent<
+  MembershipFieldProps,
+  MembershipFieldState
+> {
+  debouncedMapMouseTargetToTooltipState: any;
+
+  constructor(props: MembershipFieldProps) {
     super(props);
-    this.state = {};
+    this.state = { showDisabledTooltip: false };
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.handleGroupBySelected = this.handleGroupBySelected.bind(this);
-    this.mapMouseTargetToTooltipState = debounce(
-      this.mapMouseTargetToTooltipState,
+    this.debouncedMapMouseTargetToTooltipState = debounce(
+      this.mapMouseTargetToTooltipState.bind(this),
       250
     );
-    this.state = { showDisabledTooltip: false };
   }
 
-  handleMouseOver(event) {
+  handleMouseOver(
+    event: React.MouseEvent<HTMLDivElement> & {
+      target: HTMLElement;
+      originalTarget?: HTMLElement;
+    }
+  ) {
     const { target, originalTarget } = event;
-    this.mapMouseTargetToTooltipState(target, originalTarget);
+    this.debouncedMapMouseTargetToTooltipState(target, originalTarget);
   }
 
   handleMouseLeave() {
@@ -47,16 +133,18 @@ class MembershipField extends React.PureComponent {
       top: undefined,
       left: undefined,
     });
-    this.mapMouseTargetToTooltipState.cancel();
+    this.debouncedMapMouseTargetToTooltipState.cancel();
   }
 
   handleGroupBySelected() {
-    this.props.onMemberSort(
-      this.props.activeField,
-      Object.assign({}, this.props.activeFieldState.sort, {
-        groupBySelected: !this.props.activeFieldState.sort.groupBySelected,
-      })
-    );
+    if (this.props.onMemberSort && this.props.activeFieldState.sort) {
+      this.props.onMemberSort(
+        this.props.activeField,
+        Object.assign({}, this.props.activeFieldState.sort, {
+          groupBySelected: !this.props.activeFieldState.sort.groupBySelected,
+        })
+      );
+    }
   }
 
   isSortEnabled() {
@@ -66,11 +154,19 @@ class MembershipField extends React.PureComponent {
     );
   }
 
-  mapMouseTargetToTooltipState(element, root) {
-    const disabledRow = findAncestorNode(element, isDisabledRow, root);
+  mapMouseTargetToTooltipState(element: HTMLElement, root?: HTMLElement) {
+    const disabledRow = findAncestorNode(
+      element,
+      (node: Node) => isDisabledRow(node as HTMLElement),
+      root
+    );
     const showDisabledTooltip = disabledRow != null;
-    const { top, left } =
-      disabledRow == null ? {} : disabledRow.getBoundingClientRect();
+    const rect =
+      disabledRow == null
+        ? null
+        : (disabledRow as HTMLElement).getBoundingClientRect();
+    const top = rect?.top ?? 0;
+    const left = rect?.left ?? 0;
 
     this.setState({
       showDisabledTooltip,
@@ -93,7 +189,7 @@ class MembershipField extends React.PureComponent {
                 <em>Check items below to apply this filter</em>
               </div>
               <div className="membership-action">
-                <UnknownCount {...this.props} />
+                <UnknownCount {...(this.props as any)} />
               </div>
             </div>
           ) : this.isSortEnabled() ? (
@@ -109,13 +205,15 @@ class MembershipField extends React.PureComponent {
                   onClick={this.handleGroupBySelected}
                 >
                   <Toggle
-                    on={this.props.activeFieldState.sort.groupBySelected}
+                    on={
+                      this.props.activeFieldState.sort?.groupBySelected ?? false
+                    }
                   />{' '}
                   Keep checked values at top
                 </button>
               </div>
               <div className="membership-action">
-                <UnknownCount {...this.props} />
+                <UnknownCount {...(this.props as any)} />
               </div>
             </div>
           ) : null}
@@ -133,36 +231,50 @@ class MembershipField extends React.PureComponent {
             </div>
           )}
 
-          <MembershipTable {...this.props} />
+          <MembershipTable {...(this.props as any)} />
         </div>
       </ErrorBoundary>
     );
   }
 }
 
-MembershipField.defaultProps = {
+(MembershipField as any).defaultProps = {
   filteredCountHeadingPrefix: 'Remaining',
   unfilteredCountHeadingPrefix: '',
   showInternalMesaCounts: false,
 };
 
-function filterBySearchTerm(rows, searchTerm) {
+function filterBySearchTerm(
+  rows: ValueCounts,
+  searchTerm: string
+): ValueCounts {
   if (searchTerm !== '') {
     let re = new RegExp(escapeRegExp(searchTerm), 'i');
-    return rows.filter((entry) => re.test(entry.value));
+    return rows.filter((entry) => re.test(String(entry.value)));
   } else {
     return rows;
   }
 }
-function selectPage(rows, currentPage, rowsPerPage) {
+
+function selectPage(
+  rows: ValueCounts,
+  currentPage: number,
+  rowsPerPage: number
+): ValueCounts {
   return rows.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
 }
 
 /**
  * Membership activeField component
  */
-class MembershipTable extends React.PureComponent {
-  static getHelpContent(props) {
+class MembershipTable extends React.PureComponent<
+  MembershipTableProps,
+  MembershipTableState
+> {
+  memoizedGetKnownValues: any;
+  memoizedIsItemSelected: any;
+
+  static getHelpContent(props: MembershipTableProps) {
     var displayName = props.displayName;
     var fieldDisplay = props.activeField.display;
     return (
@@ -174,7 +286,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  constructor(props) {
+  constructor(props: MembershipTableProps) {
     super(props);
     bindAll(
       this,
@@ -187,7 +299,7 @@ class MembershipTable extends React.PureComponent {
       'handleSort',
       'handleChangeCurrentPage',
       'handleChangeRowsPerPage',
-      'isItemSelected',
+      'isItemSelectedImpl',
       'renderCheckboxCell',
       'renderCheckboxHeading',
       'renderDistributionCell',
@@ -204,46 +316,50 @@ class MembershipTable extends React.PureComponent {
       'toFilterValue',
       'getRows'
     );
-    this.getKnownValues = memoize(this.getKnownValues);
-    this.isItemSelected = memoize(this.isItemSelected);
+    this.memoizedGetKnownValues = memoize(this.getKnownValuesImpl.bind(this));
+    this.memoizedIsItemSelected = memoize(this.isItemSelectedImpl.bind(this));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: MembershipTableProps) {
     if (
       this.props.activeFieldState.summary !== nextProps.activeFieldState.summary
     ) {
-      this.getKnownValues.cache.clear();
+      this.memoizedGetKnownValues.cache.clear();
     }
     if (this.props.filter !== nextProps.filter) {
-      this.isItemSelected.cache.clear();
+      this.memoizedIsItemSelected.cache.clear();
     }
   }
 
-  toFilterValue(value) {
+  toFilterValue(value: any) {
     return this.props.activeField.type === 'string'
       ? String(value)
       : this.props.activeField.type === 'number'
       ? Number(value)
       : this.props.activeField.type === 'date'
-      ? Date(value)
+      ? new Date(value)
       : value;
   }
 
-  getRows() {
+  getRows(): ValueCounts {
     return this.props.activeFieldState.summary.valueCounts;
   }
 
-  getKnownValues() {
+  getKnownValuesImpl() {
     return this.getRows()
       .filter(({ value }) => value != null)
       .map(({ value }) => value);
   }
 
+  getKnownValues() {
+    return this.memoizedGetKnownValues();
+  }
+
   getValuesForFilter() {
     return get(this.props, 'filter.value');
   }
 
-  deriveRowClassName(item) {
+  deriveRowClassName(item: ValueCountItem): string {
     const selectedClassName =
       item.filteredCount > 0 &&
       (this.props.filter == null || this.isItemSelected(item))
@@ -256,26 +372,32 @@ class MembershipTable extends React.PureComponent {
     return `member ${selectedClassName} ${disabledClassName}`;
   }
 
-  isItemSelected(item) {
-    let { filter, selectByDefault } = this.props;
+  isItemSelectedImpl(item: ValueCountItem): boolean {
+    let { filter, selectByDefault = false } = this.props;
 
     return filter == null
-      ? selectByDefault
+      ? selectByDefault ?? false
       : // value is null (ie, unknown) and includeUnknown selected
       item.value == null
       ? filter.includeUnknown
       : // filter.value is null (ie, all known values), or filter.value includes value
-        filter.value == null || filter.value.includes(item.value);
+        filter.value == null ||
+        (Array.isArray(filter.value) &&
+          (filter.value as Array<any>).includes(item.value));
   }
 
-  isSortEnabled() {
+  isItemSelected(item: ValueCountItem): boolean {
+    return this.memoizedIsItemSelected(item);
+  }
+
+  isSortEnabled(): boolean {
     return (
       has(this.props, 'activeFieldState.sort') &&
       isFunction(this.props.onMemberSort)
     );
   }
 
-  isPaginationEnabled() {
+  isPaginationEnabled(): boolean {
     return (
       this.getRows().length > 100 &&
       has(this.props, 'activeFieldState.currentPage') &&
@@ -283,7 +405,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  isSearchEnabled() {
+  isSearchEnabled(): boolean {
     return (
       this.getRows().length > 10 &&
       has(this.props, 'activeFieldState.searchTerm') &&
@@ -291,9 +413,10 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  handleItemClick(item, addItem = !this.isItemSelected(item)) {
+  handleItemClick(item: ValueCountItem, addItem?: boolean) {
     let { selectByDefault } = this.props;
     let { value, filteredCount } = item;
+    const shouldAdd = addItem ?? !this.isItemSelected(item);
 
     if (filteredCount === 0) {
       // Don't do anything since item is "disabled"
@@ -301,7 +424,7 @@ class MembershipTable extends React.PureComponent {
     }
 
     if (value == null) {
-      this.handleUnknownChange(addItem);
+      this.handleUnknownChange(shouldAdd);
     } else {
       const currentFilterValue =
         this.props.filter == null
@@ -309,9 +432,9 @@ class MembershipTable extends React.PureComponent {
             ? this.getKnownValues()
             : []
           : this.getValuesForFilter() || this.getKnownValues();
-      const filterValue = addItem
+      const filterValue = shouldAdd
         ? currentFilterValue.concat(value)
-        : currentFilterValue.filter((v) => v !== value);
+        : currentFilterValue.filter((v: string | number | null) => v !== value);
 
       this.setSelections(
         filterValue.length === this.getKnownValues().length
@@ -321,19 +444,19 @@ class MembershipTable extends React.PureComponent {
     }
   }
 
-  handleRowClick(item) {
+  handleRowClick(item: ValueCountItem) {
     this.handleItemClick(item);
   }
 
-  handleRowSelect(item) {
+  handleRowSelect(item: ValueCountItem) {
     this.handleItemClick(item, true);
   }
 
-  handleRowDeselect(item) {
+  handleRowDeselect(item: ValueCountItem) {
     this.handleItemClick(item, false);
   }
 
-  handleUnknownChange(addUnknown) {
+  handleUnknownChange(addUnknown: boolean) {
     this.setSelections(this.getValuesForFilter() ?? [], addUnknown);
   }
 
@@ -367,7 +490,7 @@ class MembershipTable extends React.PureComponent {
       // Values in the search results that are selectable
       const selectableResultValues = filterBySearchTerm(
         selectableRows,
-        searchTerm
+        searchTerm as string
       ).map((row) => row.value);
       const [selectedResultValues, unselectedResultValues] = partition(
         selectableResultValues,
@@ -384,50 +507,60 @@ class MembershipTable extends React.PureComponent {
     }
   }
 
-  handleSort({ key: columnKey }, direction) {
+  handleSort({ key: columnKey }: SortEvent, direction: string) {
     let nextSort = { columnKey, direction };
     let sort = Object.assign({}, this.props.activeFieldState.sort, nextSort);
-    this.props.onMemberSort(this.props.activeField, sort);
+    if (this.props.onMemberSort) {
+      this.props.onMemberSort(this.props.activeField, sort);
+    }
   }
 
-  handleSearchTermChange(searchTerm) {
+  handleSearchTermChange(searchTerm: string) {
     // When we are not on page 1, we need to determine if our currentPage position remains viable
     // or if it should get reset to page 1 (see note in TableFilter.tsx's handleSearch callback definition)
-    if (this.props.activeFieldState.currentPage !== 1) {
+    if ((this.props.activeFieldState.currentPage ?? 1) !== 1) {
       const numberOfFilteredRows = filterBySearchTerm(
         this.getRows(),
         searchTerm
       ).length;
       const shouldResetPaging =
         numberOfFilteredRows <=
-        this.props.activeFieldState.rowsPerPage *
-          (this.props.activeFieldState.currentPage - 1);
-      this.props.onMemberSearch(
-        this.props.activeField,
-        searchTerm,
-        shouldResetPaging
-      );
+        (this.props.activeFieldState.rowsPerPage ?? 50) *
+          ((this.props.activeFieldState.currentPage ?? 1) - 1);
+      if (this.props.onMemberSearch) {
+        this.props.onMemberSearch(
+          this.props.activeField,
+          searchTerm,
+          shouldResetPaging
+        );
+      }
+    }
+    if (this.props.onMemberSearch) {
+      this.props.onMemberSearch(this.props.activeField, searchTerm);
     }
-    this.props.onMemberSearch(this.props.activeField, searchTerm);
   }
 
-  handleChangeCurrentPage(newCurrentPage) {
-    this.props.onMemberChangeCurrentPage(
-      this.props.activeField,
-      newCurrentPage
-    );
+  handleChangeCurrentPage(newCurrentPage: number) {
+    if (this.props.onMemberChangeCurrentPage) {
+      this.props.onMemberChangeCurrentPage(
+        this.props.activeField,
+        newCurrentPage
+      );
+    }
   }
 
-  handleChangeRowsPerPage(newRowsPerPage) {
-    this.props.onMemberChangeRowsPerPage(
-      this.props.activeField,
-      newRowsPerPage
-    );
+  handleChangeRowsPerPage(newRowsPerPage: number) {
+    if (this.props.onMemberChangeRowsPerPage) {
+      this.props.onMemberChangeRowsPerPage(
+        this.props.activeField,
+        newRowsPerPage
+      );
+    }
   }
 
   setSelections(
-    value,
-    includeUnknown = get(this.props, 'filter.includeUnknown', false)
+    value: any,
+    includeUnknown: boolean = get(this.props, 'filter.includeUnknown', false)
   ) {
     this.props.onChange(
       this.props.activeField,
@@ -457,13 +590,15 @@ class MembershipTable extends React.PureComponent {
         type="checkbox"
         disabled={availableItems.length === 0}
         checked={showChecked}
-        ref={(el) => el && (el.indeterminate = showIndeterminate)}
+        ref={(el: HTMLInputElement | null) =>
+          el && (el.indeterminate = showIndeterminate)
+        }
         onChange={this.handleSelectAll}
       />
     );
   }
 
-  renderCheckboxCell({ row }) {
+  renderCheckboxCell({ row }: { row: ValueCountItem }) {
     const isChecked = this.isItemSelected(row);
     const isDisabled = row.filteredCount === 0;
     const onClick = () =>
@@ -495,7 +630,7 @@ class MembershipTable extends React.PureComponent {
         }}
       >
         <RealTimeSearchBox
-          searchTerm={this.props.activeFieldState.searchTerm}
+          searchTerm={this.props.activeFieldState.searchTerm || ''}
           placeholderText="Find items"
           onSearchTermChange={this.handleSearchTermChange}
         />
@@ -503,13 +638,13 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderValueCell({ value }) {
+  renderValueCell({ value }: { value: string | number | null }) {
     return (
       <div>{value == null ? UNKNOWN_ELEMENT : safeHtml(String(value))}</div>
     );
   }
 
-  renderCountHeading1(qualifier) {
+  renderCountHeading1(qualifier: string) {
     return (
       <div
         style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}
@@ -530,7 +665,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderCountHeading2(internalsCount) {
+  renderCountHeading2(internalsCount: number) {
     return (
       <div>
         {internalsCount.toLocaleString()}
@@ -543,7 +678,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderCountCell(value, internalsCount) {
+  renderCountCell(value: number, internalsCount: number | null | undefined) {
     return (
       <div>
         {value.toLocaleString()}
@@ -568,7 +703,9 @@ class MembershipTable extends React.PureComponent {
   }
 
   renderFilteredCountHeading1() {
-    return this.renderCountHeading1(this.props.filteredCountHeadingPrefix);
+    return this.renderCountHeading1(
+      this.props.filteredCountHeadingPrefix || ''
+    );
   }
 
   renderFilteredCountHeading2() {
@@ -577,7 +714,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderFilteredCountCell({ value }) {
+  renderFilteredCountCell({ value }: { value: number }) {
     return this.renderCountCell(
       value,
       this.props.activeFieldState.summary.internalsFilteredCount
@@ -585,7 +722,9 @@ class MembershipTable extends React.PureComponent {
   }
 
   renderUnfilteredCountHeading1() {
-    return this.renderCountHeading1(this.props.unfilteredCountHeadingPrefix);
+    return this.renderCountHeading1(
+      this.props.unfilteredCountHeadingPrefix || ''
+    );
   }
 
   renderUnfilteredCountHeading2() {
@@ -594,14 +733,14 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderUnfilteredCountCell({ value }) {
+  renderUnfilteredCountCell({ value }: { value: number }) {
     return this.renderCountCell(
       value,
       this.props.activeFieldState.summary.internalsCount
     );
   }
 
-  renderDistributionCell({ row }) {
+  renderDistributionCell({ row }: { row: ValueCountItem }) {
     return (
       <StackedBar
         count={row.count}
@@ -616,7 +755,7 @@ class MembershipTable extends React.PureComponent {
     );
   }
 
-  renderPrecentageCell({ row }) {
+  renderPrecentageCell({ row }: { row: ValueCountItem }) {
     return (
       <small title={`Remaining "${row.value}" / All "${row.value}"`}>
         ({Math.round((row.filteredCount / row.count) * 100)}%)
@@ -628,8 +767,12 @@ class MembershipTable extends React.PureComponent {
     var useSort = this.isSortEnabled();
     var useSearch = this.isSearchEnabled();
     var usePagination = this.isPaginationEnabled();
-    const { currentPage, rowsPerPage, searchTerm, ...uiStateOther } =
-      this.props.activeFieldState;
+    const {
+      currentPage = 1,
+      rowsPerPage = 50,
+      searchTerm = '',
+      ...uiStateOther
+    } = this.props.activeFieldState;
 
     const rows = this.getRows();
     let filteredRows = this.getRows();
@@ -714,7 +857,11 @@ class MembershipTable extends React.PureComponent {
             headingStyle: { minWidth: '12em' },
             inline: true,
             sortable: useSort,
-            wrapCustomHeadings: ({ headingRowIndex }) => headingRowIndex === 0,
+            wrapCustomHeadings: ({
+              headingRowIndex,
+            }: {
+              headingRowIndex: number;
+            }) => headingRowIndex === 0,
             renderHeading: useSearch
               ? [this.renderValueHeading, this.renderValueHeadingSearch]
               : this.renderValueHeading,
@@ -735,7 +882,11 @@ class MembershipTable extends React.PureComponent {
                 value
               </div>
             ),
-            wrapCustomHeadings: ({ headingRowIndex }) => headingRowIndex === 0,
+            wrapCustomHeadings: ({
+              headingRowIndex,
+            }: {
+              headingRowIndex: number;
+            }) => headingRowIndex === 0,
             renderHeading:
               this.props.activeFieldState.summary.internalsFilteredCount != null
                 ? [
@@ -756,7 +907,11 @@ class MembershipTable extends React.PureComponent {
                 value
               </div>
             ),
-            wrapCustomHeadings: ({ headingRowIndex }) => headingRowIndex === 0,
+            wrapCustomHeadings: ({
+              headingRowIndex,
+            }: {
+              headingRowIndex: number;
+            }) => headingRowIndex === 0,
             renderHeading:
               this.props.activeFieldState.summary.internalsCount != null
                 ? [
@@ -801,6 +956,6 @@ class MembershipTable extends React.PureComponent {
 export default MembershipField;
 
 /** @param {HTMLElement} element */
-function isDisabledRow(element) {
+function isDisabledRow(element: HTMLElement): boolean {
   return element.classList.contains('member__disabled');
 }
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.tsx
similarity index 66%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.tsx
index a4e61b5602..95d2cd10a2 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/MultiFieldFilter.tsx
@@ -15,21 +15,83 @@ import {
 } from '../../Components/AttributeFilter/AttributeFilterUtils';
 import { preorderSeq } from '../../Utils/TreeUtils';
 import Banner from '@veupathdb/coreui/lib/components/banners/Banner';
+import {
+  Field,
+  Filter,
+  FieldTreeNode,
+  OntologyTermSummary,
+  ValueCounts,
+  MultiFilterValue,
+} from '../../Components/AttributeFilter/Types';
 
 const cx = makeClassNameHelper('wdk-MultiFieldFilter');
 
-const getCountType = curry((countType, summary, value) =>
-  get(
-    summary.valueCounts.find((count) => count.value === value),
-    countType,
-    NaN
-  )
+/**
+ * Props for the MultiFieldFilter component
+ */
+interface MultiFieldFilterProps {
+  activeField: Field;
+  activeFieldState: {
+    searchTerm?: string;
+    leafSummaries: OntologyTermSummary[];
+    sort?: {
+      columnKey: string;
+      direction: 'asc' | 'desc';
+    };
+    [key: string]: any;
+  };
+  filters: Filter[];
+  fieldTree: FieldTreeNode;
+  displayName: string;
+  dataCount: number;
+  fillBarColor?: string;
+  fillFilteredBarColor?: string;
+  selectByDefault: boolean;
+  onFiltersChange: (filters: Filter[]) => void;
+  onMemberSort: (
+    field: Field,
+    sort: { columnKey: string; direction: string }
+  ) => void;
+  onMemberSearch: (field: Field, searchTerm: string) => void;
+}
+
+/**
+ * State for the MultiFieldFilter component
+ */
+interface MultiFieldFilterState {
+  operation: 'union' | 'intersect';
+}
+
+/**
+ * Type for row data used in Mesa table
+ */
+interface TableRow {
+  summary: OntologyTermSummary;
+  value?: string | number | null;
+  filter?: Filter;
+  isSelected?: boolean;
+  isLast?: boolean;
+}
+
+const getCountType = curry(
+  (countType: string, summary: OntologyTermSummary, value: any) =>
+    get(
+      summary.valueCounts.find((count) => count.value === value),
+      countType,
+      NaN
+    )
 );
 const getCount = getCountType('count');
 const getFilteredCount = getCountType('filteredCount');
 
-export default class MultiFieldFilter extends React.Component {
-  constructor(props) {
+/**
+ * Component for filtering multiple fields with intersection/union operations
+ */
+export default class MultiFieldFilter extends React.Component<
+  MultiFieldFilterProps,
+  MultiFieldFilterState
+> {
+  constructor(props: MultiFieldFilterProps) {
     super(props);
     bindAll(this, [
       'deriveRowClassName',
@@ -44,89 +106,100 @@ export default class MultiFieldFilter extends React.Component {
     this.state = { operation: 'intersect' };
   }
 
-  getFieldByTerm(term) {
+  getFieldByTerm(term: string): Field | undefined {
     return preorderSeq(this.props.fieldTree)
-      .map((node) => node.field)
-      .find((field) => field.term === term);
+      .map((node: any) => node.field)
+      .find((field: Field) => field.term === term);
   }
   // Event handlers
 
   // Invoke callback with filters array
-  handleLeafFilterChange(field, value, includeUnknown, valueCounts) {
+  handleLeafFilterChange(
+    field: Field,
+    value: any,
+    includeUnknown: boolean,
+    valueCounts: ValueCounts
+  ): void {
     const multiFilter = this.getOrCreateFilter(this.props, this.state);
-    const leafFilter = {
+    const leafFilter: Filter = {
       field: field.term,
-      type: field.type,
+      type: field.type || '',
       isRange: isRange(field),
       value,
       includeUnknown,
-    };
-    const otherLeafFilters = multiFilter.value.filters.filter(
-      (filter) => filter.field !== field.term
-    );
+    } as Filter;
+    const otherLeafFilters = (
+      multiFilter.value as MultiFilterValue
+    ).filters.filter((filter) => filter.field !== field.term);
     const shouldAdd = shouldAddFilter(
       leafFilter,
       valueCounts,
       this.props.selectByDefault
     );
-    const filter = {
+    const filter: Filter = {
       ...multiFilter,
       value: {
-        ...multiFilter.value,
-        filters: otherLeafFilters.concat(shouldAdd ? [leafFilter] : []),
+        ...(multiFilter.value as MultiFilterValue),
+        filters: otherLeafFilters.concat(shouldAdd ? [leafFilter as any] : []),
       },
-    };
+    } as Filter;
     const otherFilters = this.props.filters.filter(
-      (filter) => filter.field !== this.props.activeField.term
+      (f) => f.field !== this.props.activeField.term
     );
     const nextFilters = otherFilters.concat(
-      filter.value.filters.length > 0 ? [filter] : []
+      (filter.value as MultiFilterValue).filters.length > 0 ? [filter] : []
     );
 
     this.props.onFiltersChange(nextFilters);
   }
 
-  handleTableSort(column, direction) {
+  handleTableSort(column: any, direction: string): void {
     this.props.onMemberSort(this.props.activeField, {
       columnKey: column.key,
       direction,
     });
   }
 
-  setOperation(operation) {
+  setOperation(operation: 'union' | 'intersect'): void {
     this.setState({ operation });
     const filter = this.getOrCreateFilter(this.props, this.state);
-    if (filter.value.filters.length > 0) {
+    if ((filter.value as MultiFilterValue).filters.length > 0) {
       const otherFilters = this.props.filters.filter(
-        (filter) => filter.field !== this.props.activeField.term
+        (f) => f.field !== this.props.activeField.term
       );
       const nextFilters = otherFilters.concat([
-        { ...filter, value: { ...filter.value, operation } },
+        {
+          ...filter,
+          value: { ...(filter.value as MultiFilterValue), operation },
+        } as Filter,
       ]);
       this.props.onFiltersChange(nextFilters);
     }
   }
 
-  getOrCreateFilter(props, state) {
-    const { term: field, type, isRange } = props.activeField;
+  getOrCreateFilter(
+    props: MultiFieldFilterProps,
+    state: MultiFieldFilterState
+  ): Filter {
+    const { term: field, type, isRange: isFieldRange } = props.activeField;
     const filter = props.filters.find(
-      (filter) => filter.field === props.activeField.term
+      (f) => f.field === props.activeField.term
     );
     return filter != null
       ? filter
-      : {
+      : ({
           field,
           type,
-          isRange,
+          isRange: isFieldRange,
           value: {
             operation: state.operation,
             filters: [],
           },
           includeUnknown: false, // not sure we need this for multi filter
-        };
+        } as Filter);
   }
 
-  deriveRowClassName(row) {
+  deriveRowClassName(row: TableRow): string {
     return cx(
       'Row',
       row.value == null ? 'summary' : 'value',
@@ -144,11 +217,11 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  renderDisplayHeadingName() {
+  renderDisplayHeadingName(): string {
     return this.props.activeField.display;
   }
 
-  renderDisplayHeadingSearch() {
+  renderDisplayHeadingSearch(): React.ReactNode {
     return (
       <div
         style={{
@@ -163,7 +236,7 @@ export default class MultiFieldFilter extends React.Component {
         <RealTimeSearchBox
           searchTerm={this.props.activeFieldState.searchTerm}
           placeholderText="Find items"
-          onSearchTermChange={(searchTerm) =>
+          onSearchTermChange={(searchTerm: string) =>
             this.props.onMemberSearch(this.props.activeField, searchTerm)
           }
         />
@@ -171,18 +244,24 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  renderDisplayCell({ row }) {
+  renderDisplayCell({ row }: { row: TableRow }): React.ReactNode {
+    const displayField =
+      row.value == null ? this.getFieldByTerm(row.summary.term) : null;
     return (
       <div className={cx('ValueContainer')}>
-        <div>
-          {row.value == null && this.getFieldByTerm(row.summary.term).display}
-        </div>
+        <div>{row.value == null && displayField && displayField.display}</div>
         <div>{this.renderRowValue(row)}</div>
       </div>
     );
   }
 
-  renderCountCell({ key, row }) {
+  renderCountCell({
+    key,
+    row,
+  }: {
+    key: string;
+    row: TableRow;
+  }): React.ReactNode {
     const internalsCount =
       key === 'count'
         ? row.summary.internalsCount
@@ -205,7 +284,7 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  renderDistributionCell({ row }) {
+  renderDistributionCell({ row }: { row: TableRow }): React.ReactNode {
     const unknownCount = this.props.dataCount - row.summary.internalsCount;
     const notAll = row.value == null;
     let percent = 0;
@@ -249,7 +328,7 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  renderPercentCell({ row }) {
+  renderPercentCell({ row }: { row: TableRow }): React.ReactNode {
     return (
       row.value != null && (
         <small>
@@ -264,16 +343,16 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  renderRowValue(row) {
+  renderRowValue(row: TableRow): React.ReactNode {
     const { value, filter, summary, isSelected } = row;
     if (value == null) return null;
-    const filterValue = get(filter, 'value', []);
-    const handleChange = (event) =>
+    const filterValue = get(filter, 'value', []) as any[];
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
       this.handleLeafFilterChange(
-        this.getFieldByTerm(summary.term),
+        this.getFieldByTerm(summary.term)!,
         event.target.checked
           ? [value].concat(filterValue)
-          : filterValue.filter((item) => item !== value),
+          : filterValue.filter((item: any) => item !== value),
         false,
         summary.valueCounts
       );
@@ -285,14 +364,12 @@ export default class MultiFieldFilter extends React.Component {
     );
   }
 
-  render() {
+  render(): React.ReactNode {
     const { searchTerm = '' } = this.props.activeFieldState;
     const searchRe = new RegExp(escapeRegExp(searchTerm), 'i');
     const filter = this.getOrCreateFilter(this.props, this.state);
     const leafFilters = get(
-      this.props.filters.find(
-        (filter) => filter.field === this.props.activeField.term
-      ),
+      this.props.filters.find((f) => f.field === this.props.activeField.term),
       'value.filters',
       []
     );
@@ -306,29 +383,32 @@ export default class MultiFieldFilter extends React.Component {
       (summary) => summary.internalsCount === 0
     );
 
-    const rows = Seq.from(this.props.activeFieldState.leafSummaries).flatMap(
-      (summary) => [
+    const rows: TableRow[] = Seq.from(this.props.activeFieldState.leafSummaries)
+      .flatMap((summary) => [
         {
           summary,
           filter: filtersByField[summary.term],
-        },
-        ...summary.valueCounts.map((data, index) => ({
-          summary,
-          value: data.value,
-          filter: filtersByField[summary.term],
-          isSelected: get(filtersByField, [summary.term, 'value'], []).includes(
-            data.value
-          ),
-          isLast: index === summary.valueCounts.length - 1,
-        })),
-      ]
-    );
+        } as TableRow,
+        ...summary.valueCounts.map(
+          (data, index) =>
+            ({
+              summary,
+              value: data.value,
+              filter: filtersByField[summary.term],
+              isSelected: (
+                get(filtersByField, [summary.term, 'value'], []) as any[]
+              ).includes(data.value as any),
+              isLast: index === summary.valueCounts.length - 1,
+            } as TableRow)
+        ),
+      ])
+      .toArray();
 
     const filteredRows = rows.filter(({ summary }) =>
       findAncestorFields(this.props.fieldTree, summary.term)
-        .dropWhile((field) => field.term !== this.props.activeField.term)
+        .dropWhile((field: any) => field.term !== this.props.activeField.term)
         .drop(1)
-        .some((field) => searchRe.test(field.display))
+        .some((field: any) => searchRe.test(field.display))
     );
 
     return (
@@ -348,9 +428,14 @@ export default class MultiFieldFilter extends React.Component {
           Find {this.props.displayName} with{' '}
           <select
             value={
-              this.getOrCreateFilter(this.props, this.state).value.operation
+              (
+                this.getOrCreateFilter(this.props, this.state)
+                  .value as MultiFilterValue
+              ).operation
+            }
+            onChange={(e) =>
+              this.setOperation(e.target.value as 'union' | 'intersect')
             }
-            onChange={(e) => this.setOperation(e.target.value)}
           >
             <option value="union">{getOperationDisplay('union')}</option>
             <option value="intersect">
@@ -371,14 +456,14 @@ export default class MultiFieldFilter extends React.Component {
           eventHandlers={{
             onSort: this.handleTableSort,
           }}
-          rows={rows.toArray()}
-          filteredRows={filteredRows.toArray()}
+          rows={rows}
+          filteredRows={filteredRows}
           columns={[
             {
               key: 'display',
               sortable: true,
               // width: '40%',
-              wrapCustomHeadings: ({ headingRowIndex }) =>
+              wrapCustomHeadings: ({ headingRowIndex }: any) =>
                 headingRowIndex === 0,
               renderHeading: [
                 this.renderDisplayHeadingName,
@@ -399,7 +484,7 @@ export default class MultiFieldFilter extends React.Component {
                   and that have the given value
                 </div>
               ),
-              wrapCustomHeadings: ({ headingRowIndex }) =>
+              wrapCustomHeadings: ({ headingRowIndex }: any) =>
                 headingRowIndex === 0,
               name: (
                 <div style={{ textAlign: 'center' }}>
@@ -419,7 +504,7 @@ export default class MultiFieldFilter extends React.Component {
                   that have the given value
                 </div>
               ),
-              wrapCustomHeadings: ({ headingRowIndex }) =>
+              wrapCustomHeadings: ({ headingRowIndex }: any) =>
                 headingRowIndex === 0,
               name: (
                 <div style={{ textAlign: 'center' }}>
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.tsx
similarity index 71%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.tsx
index 0189e1fe6e..a7bce126ea 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/NumberField.tsx
@@ -3,6 +3,12 @@ import { partition } from 'lodash';
 
 import { formatNumber } from '../../Components/AttributeFilter/AttributeFilterUtils';
 import HistogramField from '../../Components/AttributeFilter/HistogramField';
+import {
+  Field,
+  RangeFilter,
+  OntologyTermSummary,
+  ValueCounts,
+} from '../../Components/AttributeFilter/Types';
 
 // the data distribution is stored in knownDist, an array of n objects (n distinctive values)
 // each object has 3 properties { count, filteredCount, value }
@@ -13,15 +19,45 @@ import HistogramField from '../../Components/AttributeFilter/HistogramField';
 
 const MAX_DECIMALS = 3;
 
+/**
+ * Distribution entry type for number data
+ */
+interface DistributionEntry {
+  value: number | string | null;
+  count: number;
+  filteredCount: number;
+}
+
+/**
+ * Props for the NumberField component
+ */
+interface NumberFieldProps {
+  activeField: Field;
+  activeFieldState: {
+    summary: OntologyTermSummary;
+    [key: string]: any;
+  };
+  filter?: RangeFilter;
+  onChange: (
+    activeField: Field,
+    range: any,
+    includeUnknown: boolean,
+    valueCounts: ValueCounts
+  ) => void;
+  displayName: string;
+  selectByDefault?: boolean;
+  [key: string]: any;
+}
+
 /**
  * Number field component
  */
-export default class NumberField extends React.Component {
-  static getHelpContent(props) {
-    return HistogramField.getHelpContent(props);
+export default class NumberField extends React.Component<NumberFieldProps> {
+  static getHelpContent(props: NumberFieldProps) {
+    return (HistogramField as any).getHelpContent(props);
   }
 
-  constructor(props) {
+  constructor(props: NumberFieldProps) {
     super(props);
     this.toHistogramValue = this.toHistogramValue.bind(this);
     this.toFilterValue = this.toFilterValue.bind(this);
@@ -31,7 +67,7 @@ export default class NumberField extends React.Component {
   // E.g., S = '-'
   // A potential solution is to use strings for state and to
   // convert to Number when needed
-  parseValue(value) {
+  parseValue(value: string | number): number {
     switch (typeof value) {
       case 'string':
         return Number(value);
@@ -40,7 +76,7 @@ export default class NumberField extends React.Component {
     }
   }
 
-  toHistogramValue(value) {
+  toHistogramValue(value: number | string): number {
     return Number(value);
     // The following code causes some data to be not included in a range.
     // If this proves to have a negative impact on the UI, we will need
@@ -52,11 +88,11 @@ export default class NumberField extends React.Component {
     // return integerPart + decimalPart;
   }
 
-  toFilterValue(value) {
+  toFilterValue(value: number | string): number | string {
     return value;
   }
 
-  numericDataMedian(arr) {
+  numericDataMedian(arr: number[]): number {
     let mid = Math.floor(arr.length / 2);
     let nums = [...arr].sort((a, b) => a - b);
     return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
@@ -73,16 +109,16 @@ export default class NumberField extends React.Component {
       return entry.filteredCount + sum;
     }, 0);
     var sum = knownDist.reduce(function (sum, entry) {
-      return entry.value * entry.filteredCount + sum;
+      return (entry.value as number) * entry.filteredCount + sum;
     }, 0);
     var values = knownDist
       .filter((entry) => entry.filteredCount > 0)
-      .map((entry) => entry.value);
+      .map((entry) => entry.value as number);
     var distMin = Math.min(...values);
     var distMax = Math.max(...values);
     var distAvg = sum / size;
     var median = this.numericDataMedian(
-      knownDist.flatMap((x) => Array(x.filteredCount).fill(x.value))
+      knownDist.flatMap((x) => Array(x.filteredCount).fill(x.value as number))
     );
     var unknownCount = unknownDist.reduce((sum, entry) => sum + entry.count, 0);
     var overview = (
@@ -100,7 +136,7 @@ export default class NumberField extends React.Component {
 
     return (
       <HistogramField
-        {...this.props}
+        {...(this.props as any)}
         distribution={knownDist}
         unknownCount={unknownCount}
         toFilterValue={this.toFilterValue}
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.jsx
deleted file mode 100644
index 044bf7d451..0000000000
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { wrappable } from '../../Utils/ComponentUtils';
-
-import FieldList from '../../Components/AttributeFilter/FieldList';
-import FilterList from '../../Components/AttributeFilter/FilterList';
-import FieldFilter from '../../Components/AttributeFilter/FieldFilter';
-
-/**
- * Filtering UI for server-side filtering.
- */
-function ServerSideAttributeFilter(props) {
-  var { displayName, fieldTree, hideFilterPanel, hideFieldPanel } = props;
-
-  if (fieldTree == null) {
-    return <h3>Data is not available for {displayName}.</h3>;
-  }
-
-  return (
-    <div style={{ overflowX: 'auto', marginRight: '1em' }}>
-      {hideFilterPanel || <FilterList {...props} />}
-
-      {/* Main selection UI */}
-      <div className="filters ui-helper-clearfix">
-        {hideFieldPanel || (
-          <FieldList
-            autoFocus={props.autoFocus}
-            fieldTree={props.fieldTree}
-            onActiveFieldChange={props.onActiveFieldChange}
-            activeField={props.activeField}
-            valuesMap={props.valuesMap}
-          />
-        )}
-        <FieldFilter {...props} />
-      </div>
-    </div>
-  );
-}
-
-const fieldTreePropType = PropTypes.shape({
-  field: FieldFilter.propTypes.activeField.isRequired,
-  // use a function below to allow for recursive prop type
-  children: PropTypes.arrayOf((...args) => fieldTreePropType(...args))
-    .isRequired,
-});
-
-ServerSideAttributeFilter.propTypes = {
-  // options
-  displayName: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  hideFilterPanel: PropTypes.bool,
-  hideFieldPanel: PropTypes.bool,
-  hideGlobalCounts: PropTypes.bool,
-  selectByDefault: PropTypes.bool, // affects UI state for when no filter is applied
-  minSelectedCount: PropTypes.number,
-  histogramScaleYAxisDefault: PropTypes.bool,
-  histogramTruncateYAxisDefault: PropTypes.bool,
-
-  // state
-  fieldTree: fieldTreePropType,
-  filters: PropTypes.array.isRequired,
-  valuesMap: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string).isRequired)
-    .isRequired,
-  dataCount: PropTypes.number,
-  filteredDataCount: PropTypes.number,
-  loadingFilteredCount: PropTypes.bool,
-
-  activeField: FieldFilter.propTypes.activeField,
-  activeFieldState: FieldFilter.propTypes.activeFieldState,
-
-  // not sure if these belong here
-  isLoading: PropTypes.bool,
-
-  // event handlers
-  onActiveFieldChange: PropTypes.func.isRequired,
-  onFiltersChange: PropTypes.func.isRequired,
-  onMemberSort: PropTypes.func.isRequired,
-  onMemberSearch: PropTypes.func.isRequired,
-  onRangeScaleChange: PropTypes.func.isRequired,
-};
-
-ServerSideAttributeFilter.defaultProps = {
-  displayName: 'Items',
-  hideFilterPanel: false,
-  hideFieldPanel: false,
-  hideGlobalCounts: false,
-  selectByDefault: false,
-  histogramScaleYAxisDefault: true,
-  histogramTruncateYAxisDefault: false,
-};
-
-export default wrappable(ServerSideAttributeFilter);
-
-export function withOptions(options) {
-  return function ServerSideAttributeFilterWithOptions(props) {
-    return <ServerSideAttributeFilter {...options} {...props} />;
-  };
-}
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.tsx b/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.tsx
new file mode 100644
index 0000000000..be297c80aa
--- /dev/null
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/ServerSideAttributeFilter.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { wrappable } from '../../Utils/ComponentUtils';
+
+import FieldList from '../../Components/AttributeFilter/FieldList';
+import FilterList from '../../Components/AttributeFilter/FilterList';
+import FieldFilter from '../../Components/AttributeFilter/FieldFilter';
+import {
+  FieldTreeNode,
+  Filter,
+  Field,
+} from '../../Components/AttributeFilter/Types';
+
+/**
+ * Props for the ServerSideAttributeFilter component
+ */
+type ServerSideAttributeFilterProps = {
+  // options
+  displayName?: string;
+  autoFocus?: boolean;
+  hideFilterPanel?: boolean;
+  hideFieldPanel?: boolean;
+  hideGlobalCounts?: boolean;
+  selectByDefault?: boolean; // affects UI state for when no filter is applied
+  minSelectedCount?: number;
+  histogramScaleYAxisDefault?: boolean;
+  histogramTruncateYAxisDefault?: boolean;
+
+  // state
+  fieldTree?: FieldTreeNode;
+  filters: Filter[];
+  valuesMap: Record<string, string[]>;
+  dataCount?: number;
+  filteredDataCount?: number;
+  loadingFilteredCount?: boolean;
+
+  activeField?: Field | null;
+  activeFieldState?: {
+    loading?: boolean;
+    summary?: any;
+    leafSummaries?: any[];
+    errorMessage?: string;
+    [key: string]: any;
+  };
+
+  // not sure if these belong here
+  isLoading?: boolean;
+
+  // event handlers
+  onActiveFieldChange: (fieldTerm: string) => void;
+  onFiltersChange: (filters: Filter[]) => void;
+  onMemberSort: (sortBy: string) => void;
+  onMemberSearch: (searchTerm: string) => void;
+  onRangeScaleChange: (scale: string) => void;
+};
+
+/**
+ * Filtering UI for server-side filtering.
+ */
+function ServerSideAttributeFilter(props: ServerSideAttributeFilterProps) {
+  const { displayName, fieldTree, hideFilterPanel, hideFieldPanel } = props;
+
+  if (fieldTree == null) {
+    return <h3>Data is not available for {displayName}.</h3>;
+  }
+
+  return (
+    <div style={{ overflowX: 'auto', marginRight: '1em' }}>
+      {hideFilterPanel || (
+        <FilterList
+          onActiveFieldChange={props.onActiveFieldChange}
+          onFiltersChange={props.onFiltersChange}
+          fieldTree={fieldTree}
+          filters={props.filters}
+          displayName={props.displayName || 'Items'}
+          dataCount={props.dataCount}
+          filteredDataCount={props.filteredDataCount}
+          hideGlobalCounts={props.hideGlobalCounts || false}
+          loadingFilteredCount={props.loadingFilteredCount}
+          activeField={props.activeField ?? undefined}
+          minSelectedCount={props.minSelectedCount}
+        />
+      )}
+
+      {/* Main selection UI */}
+      <div className="filters ui-helper-clearfix">
+        {hideFieldPanel || (
+          <FieldList
+            autoFocus={props.autoFocus}
+            fieldTree={fieldTree!}
+            onActiveFieldChange={props.onActiveFieldChange}
+            activeField={props.activeField}
+            valuesMap={props.valuesMap}
+          />
+        )}
+        <FieldFilter
+          {...props}
+          selectByDefault={props.selectByDefault ?? false}
+        />
+      </div>
+    </div>
+  );
+}
+
+ServerSideAttributeFilter.defaultProps = {
+  displayName: 'Items',
+  hideFilterPanel: false,
+  hideFieldPanel: false,
+  hideGlobalCounts: false,
+  selectByDefault: false,
+  histogramScaleYAxisDefault: true,
+  histogramTruncateYAxisDefault: false,
+};
+
+export default wrappable(ServerSideAttributeFilter);
+
+export function withOptions(options: Partial<ServerSideAttributeFilterProps>) {
+  return function ServerSideAttributeFilterWithOptions(
+    props: ServerSideAttributeFilterProps
+  ) {
+    return <ServerSideAttributeFilter {...options} {...props} />;
+  };
+}
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.tsx
similarity index 64%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.tsx
index 5120330639..16d8ea1a5f 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/SingleFieldFilter.tsx
@@ -9,9 +9,34 @@ import {
   isRange,
   shouldAddFilter,
 } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import {
+  Field,
+  Filter,
+  OntologyTermSummary,
+  ValueCounts,
+} from '../../Components/AttributeFilter/Types';
+
+/**
+ * Props for the SingleFieldFilter component
+ */
+interface SingleFieldFilterProps {
+  activeField?: Field | null;
+  activeFieldState?: {
+    summary: OntologyTermSummary;
+    [key: string]: any;
+  } | null;
+  filters: Filter[];
+  onFiltersChange: (filters: Filter[]) => void;
+  selectByDefault: boolean;
+  [key: string]: any; // Allow additional props to be passed through
+}
 
-export default class SingleFieldFilter extends React.Component {
-  constructor(props) {
+/**
+ * Component for filtering a single field with appropriate filter UI
+ * Selects the right filter component based on field type and range
+ */
+export default class SingleFieldFilter extends React.Component<SingleFieldFilterProps> {
+  constructor(props: SingleFieldFilterProps) {
     super(props);
     this.handleFieldFilterChange = this.handleFieldFilterChange.bind(this);
   }
@@ -21,14 +46,19 @@ export default class SingleFieldFilter extends React.Component {
    * @param {any} value Filter value
    * @param {boolean} includeUnknown Indicate if items with an unknown value for the field should be included.
    */
-  handleFieldFilterChange(field, value, includeUnknown, valueCounts) {
-    const filter = {
+  handleFieldFilterChange(
+    field: Field,
+    value: any,
+    includeUnknown: boolean,
+    valueCounts: ValueCounts
+  ): void {
+    const filter: Filter = {
       field: field.term,
-      type: field.type,
+      type: field.type || '',
       isRange: isRange(field),
       value,
       includeUnknown,
-    };
+    } as Filter;
     const filters = this.props.filters.filter((f) => f.field !== field.term);
     this.props.onFiltersChange(
       shouldAddFilter(filter, valueCounts, this.props.selectByDefault)
@@ -37,7 +67,7 @@ export default class SingleFieldFilter extends React.Component {
     );
   }
 
-  render() {
+  render(): React.ReactNode {
     const { activeField, activeFieldState, filters } = this.props;
 
     const FieldDetail =
@@ -62,10 +92,11 @@ export default class SingleFieldFilter extends React.Component {
 
     const restProps = omit(this.props, ['filters']);
 
+    const Component = FieldDetail as any;
     return (
-      FieldDetail && (
+      Component && (
         <React.Fragment>
-          <FieldDetail
+          <Component
             filter={filter}
             onChange={this.handleFieldFilterChange}
             {...restProps}
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.tsx
similarity index 51%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.tsx
index b19871bb5f..f278c70b2e 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/StackedBar.tsx
@@ -1,7 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
-export default function StackedBar(props) {
+type Props = {
+  /** The count of matching records */
+  count: number;
+
+  /** The count of filtered records */
+  filteredCount: number;
+
+  /** The total population size used for percentage calculations */
+  populationSize: number;
+
+  /** Color for the main bar fill. Defaults to '#aaaaaa' */
+  fillBarColor?: string;
+
+  /** Color for the filtered bar fill. Defaults to '#DA7272' */
+  fillFilteredBarColor?: string;
+};
+
+/**
+ * A stacked bar visualization showing count and filteredCount as percentages
+ * of the total populationSize
+ */
+export default function StackedBar(props: Props) {
   // Set bar colors
   const fillBarColor = props.fillBarColor || '#aaaaaa';
   const fillFilteredBarColor = props.fillFilteredBarColor || '#DA7272';
@@ -25,9 +45,3 @@ export default function StackedBar(props) {
     </div>
   );
 }
-
-StackedBar.propTypes = {
-  count: PropTypes.number.isRequired,
-  filteredCount: PropTypes.number.isRequired,
-  populationSize: PropTypes.number.isRequired,
-};
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Types.ts b/packages/libs/wdk-client/src/Components/AttributeFilter/Types.ts
index 6e32f69692..755a03a9fa 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/Types.ts
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/Types.ts
@@ -9,6 +9,8 @@ interface BaseField {
   display: string;
   parent?: string;
   isRange?: boolean;
+  description?: string;
+  variableName?: string;
 }
 
 export interface StringMemberField extends BaseField {
@@ -147,6 +149,7 @@ export type ValueCounts = Array<{
 }>;
 
 export type OntologyTermSummary = {
+  term: string;
   valueCounts: ValueCounts;
   internalsCount: number;
   internalsFilteredCount: number;
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.tsx
similarity index 66%
rename from packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.jsx
rename to packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.tsx
index ec25e818a5..038efa1818 100644
--- a/packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.jsx
+++ b/packages/libs/wdk-client/src/Components/AttributeFilter/UnknownCount.tsx
@@ -1,7 +1,16 @@
 import React from 'react';
 import { toPercentage } from '../../Components/AttributeFilter/AttributeFilterUtils';
+import { OntologyTermSummary } from '../../Components/AttributeFilter/Types';
 
-export default function UnknownCount(props) {
+interface UnknownCountProps {
+  activeFieldState: {
+    summary: OntologyTermSummary;
+  };
+  dataCount: number;
+  displayName: string;
+}
+
+export default function UnknownCount(props: UnknownCountProps) {
   const { activeFieldState, dataCount, displayName } = props;
   return (
     <div className="unknown-count">
diff --git a/packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.jsx b/packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.tsx
similarity index 71%
rename from packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.jsx
rename to packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.tsx
index 1b991da585..515e0dada0 100644
--- a/packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.jsx
+++ b/packages/libs/wdk-client/src/Components/CheckboxTree/AccordionButton.tsx
@@ -1,7 +1,16 @@
 import React from 'react';
 
-export default class AccordionButton extends React.Component {
-  constructor(props) {
+interface AccordionButtonProps {
+  toggleExpansion: (node: any) => void;
+  node: any;
+  expanded: boolean;
+}
+
+export default class AccordionButton extends React.Component<
+  AccordionButtonProps,
+  {}
+> {
+  constructor(props: AccordionButtonProps) {
     super(props);
     // hard bind the handleExpansion functions to the Accordion Button object
     this.handleExpansion = this.handleExpansion.bind(this);
diff --git a/packages/libs/wdk-client/src/Components/Display/Sticky.jsx b/packages/libs/wdk-client/src/Components/Display/Sticky.jsx
deleted file mode 100644
index c8a93392e1..0000000000
--- a/packages/libs/wdk-client/src/Components/Display/Sticky.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-class Sticky extends React.Component {
-  constructor(props) {
-    super(props);
-    this.updateIsFixed = this.updateIsFixed.bind(this);
-    this.state = { isFixed: false, height: null, width: null };
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
-    window.addEventListener('scroll', this.updateIsFixed, { passive: true });
-    window.addEventListener('wheel', this.updateIsFixed, { passive: true });
-    window.addEventListener('resize', this.updateIsFixed, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.updateIsFixed, { passive: true });
-    window.removeEventListener('wheel', this.updateIsFixed, { passive: true });
-    window.removeEventListener('resize', this.updateIsFixed, { passive: true });
-  }
-
-  // Set position to fixed if top is above threshold, otherwise
-  // set position to absolute.
-  updateIsFixed() {
-    // See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
-    let rect = this.node.getBoundingClientRect();
-    if (rect.top < 0 && this.state.isFixed === false) {
-      let contentNode = this.node.children[0];
-      let contentRect = contentNode.getBoundingClientRect();
-      this.setState({
-        isFixed: true,
-        height: rect.height,
-        width: contentRect.width,
-      });
-    } else if (rect.top >= 0 && this.state.isFixed === true) {
-      this.setState({
-        isFixed: false,
-        height: null,
-        width: null,
-      });
-    }
-  }
-
-  render() {
-    return (
-      // This node is used to track scroll position
-      <div style={{ height: this.state.height }}>
-        {this.props.children(this.state)}
-      </div>
-    );
-  }
-}
-
-Sticky.propTypes = {
-  children: PropTypes.func.isRequired,
-};
-
-export default Sticky;
diff --git a/packages/libs/wdk-client/src/Components/Display/Sticky.tsx b/packages/libs/wdk-client/src/Components/Display/Sticky.tsx
new file mode 100644
index 0000000000..b719e6436e
--- /dev/null
+++ b/packages/libs/wdk-client/src/Components/Display/Sticky.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+  children: (state: State) => React.ReactNode;
+}
+
+interface State {
+  isFixed: boolean;
+  height: number | null;
+  width: number | null;
+}
+
+class Sticky extends React.Component<Props, State> {
+  node: Element | Text | null = null;
+
+  constructor(props: Props) {
+    super(props);
+    this.updateIsFixed = this.updateIsFixed.bind(this);
+    this.state = { isFixed: false, height: null, width: null };
+  }
+
+  componentDidMount() {
+    this.node = ReactDOM.findDOMNode(this);
+    window.addEventListener('scroll', this.updateIsFixed, {
+      passive: true,
+    } as any);
+    window.addEventListener('wheel', this.updateIsFixed, {
+      passive: true,
+    } as any);
+    window.addEventListener('resize', this.updateIsFixed, {
+      passive: true,
+    } as any);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.updateIsFixed, {
+      passive: true,
+    } as any);
+    window.removeEventListener('wheel', this.updateIsFixed, {
+      passive: true,
+    } as any);
+    window.removeEventListener('resize', this.updateIsFixed, {
+      passive: true,
+    } as any);
+  }
+
+  // Set position to fixed if top is above threshold, otherwise
+  // set position to absolute.
+  updateIsFixed = () => {
+    // See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+    if (this.node instanceof Element) {
+      let rect = this.node.getBoundingClientRect();
+      if (rect.top < 0 && this.state.isFixed === false) {
+        let contentNode = this.node.children[0];
+        let contentRect = contentNode.getBoundingClientRect();
+        this.setState({
+          isFixed: true,
+          height: rect.height,
+          width: contentRect.width,
+        });
+      } else if (rect.top >= 0 && this.state.isFixed === true) {
+        this.setState({
+          isFixed: false,
+          height: null,
+          width: null,
+        });
+      }
+    }
+  };
+
+  render() {
+    return (
+      // This node is used to track scroll position
+      <div style={{ height: this.state.height ?? undefined }}>
+        {this.props.children(this.state)}
+      </div>
+    );
+  }
+}
+
+export default Sticky;
diff --git a/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.jsx b/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.jsx
deleted file mode 100644
index 46693c0a7c..0000000000
--- a/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import * as DateUtils from '../../Utils/DateUtils';
-import DateSelector from '../../Components/InputControls/DateSelector';
-import { makeClassNameHelper } from '../../Utils/ComponentUtils';
-
-import '../../Components/InputControls/wdk-DateRangeSelector.scss';
-
-const cx = makeClassNameHelper('wdk-DateRangeSelector');
-
-class DateRangeSelector extends React.Component {
-  constructor(props) {
-    super(props);
-
-    let { start, end } = props;
-
-    start = DateUtils.isValidDateString(start)
-      ? DateUtils.parseDate(start)
-      : DateUtils.getEpochStart();
-
-    end = DateUtils.isValidDateString(end)
-      ? DateUtils.parseDate(end)
-      : DateUtils.getEpochEnd();
-
-    this.state = { start, end };
-    this.handleReset = this.handleReset.bind(this);
-    this.handleMinValueChange = this.handleMinValueChange.bind(this);
-    this.handleMaxValueChange = this.handleMaxValueChange.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let { start, end } = nextProps;
-    start =
-      start === this.props.start
-        ? this.state.start
-        : DateUtils.isValidDateString(start)
-        ? DateUtils.parseDate(start)
-        : DateUtils.getEpochStart();
-    end =
-      end === this.props.end
-        ? this.state.end
-        : DateUtils.isValidDateString(end)
-        ? DateUtils.parseDate(end)
-        : DateUtils.getEpochEnd();
-    this.setState({ start, end });
-  }
-
-  handleMinValueChange(min) {
-    let { onChange, value } = this.props;
-    let { max } = value;
-    if (onChange) onChange({ min, max });
-  }
-
-  handleMaxValueChange(max) {
-    let { onChange, value } = this.props;
-    let { min } = value;
-    if (onChange) onChange({ min, max });
-  }
-
-  handleReset() {
-    let { onChange } = this.props;
-    let { start, end } = this.state;
-    start = DateUtils.formatDateObject(start);
-    end = DateUtils.formatDateObject(end);
-    if (onChange) onChange({ min: start, max: end });
-  }
-
-  render() {
-    let {
-      value: { min, max },
-      required = false,
-      inline = false,
-      hideReset = false,
-    } = this.props;
-    let { start, end } = this.state;
-
-    start = DateUtils.formatDateObject(start);
-    end = DateUtils.formatDateObject(end);
-
-    let alreadyDefault = start === min && end === max;
-
-    return (
-      <div className={cx('', inline ? 'inline' : 'grid')}>
-        <div className={cx('--Label', 'from')}>
-          <label>from</label>
-        </div>
-        <div className={cx('--Control', 'from')}>
-          <DateSelector
-            start={start}
-            end={end}
-            value={min}
-            onChange={this.handleMinValueChange}
-            required={required}
-          />
-        </div>
-        <div className={cx('--Label', 'to')}>
-          <label>to</label>
-        </div>
-        <div className={cx('--Control', 'to')}>
-          <DateSelector
-            start={start}
-            end={end}
-            value={max}
-            onChange={this.handleMaxValueChange}
-            required={required}
-          />
-        </div>
-        {!hideReset && (
-          <div className={cx('--Control', 'reset')}>
-            <button
-              type="button"
-              disabled={alreadyDefault}
-              className="link"
-              onClick={this.handleReset}
-            >
-              Reset to Defaults
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-DateRangeSelector.propTypes = {
-  value: PropTypes.shape({
-    min: PropTypes.string.isRequired,
-    max: PropTypes.string.isRequired,
-  }),
-  start: PropTypes.string,
-  end: PropTypes.string,
-  onChange: PropTypes.func,
-  // both default to false
-  inline: PropTypes.bool,
-  hideReset: PropTypes.bool,
-  required: PropTypes.bool,
-};
-
-export default DateRangeSelector;
diff --git a/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.tsx b/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.tsx
new file mode 100644
index 0000000000..4097a2377e
--- /dev/null
+++ b/packages/libs/wdk-client/src/Components/InputControls/DateRangeSelector.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+
+import * as DateUtils from '../../Utils/DateUtils';
+import DateSelector from '../../Components/InputControls/DateSelector';
+import { makeClassNameHelper } from '../../Utils/ComponentUtils';
+
+import '../../Components/InputControls/wdk-DateRangeSelector.scss';
+
+const cx = makeClassNameHelper('wdk-DateRangeSelector');
+
+interface DateRangeValue {
+  min: string;
+  max: string;
+}
+
+interface DateRangeSelectorProps {
+  value: DateRangeValue;
+  start?: string;
+  end?: string;
+  onChange?: (value: DateRangeValue) => void;
+  inline?: boolean;
+  hideReset?: boolean;
+  required?: boolean;
+}
+
+interface DateRangeSelectorState {
+  start: DateUtils.DateObject;
+  end: DateUtils.DateObject;
+}
+
+class DateRangeSelector extends React.Component<
+  DateRangeSelectorProps,
+  DateRangeSelectorState
+> {
+  constructor(props: DateRangeSelectorProps) {
+    super(props);
+
+    let { start, end } = props;
+
+    const startStr =
+      start && DateUtils.isValidDateString(start)
+        ? DateUtils.formatDateObject(DateUtils.parseDate(start))
+        : DateUtils.formatDateObject(DateUtils.getEpochStart());
+
+    const endStr =
+      end && DateUtils.isValidDateString(end)
+        ? DateUtils.formatDateObject(DateUtils.parseDate(end))
+        : DateUtils.formatDateObject(DateUtils.getEpochEnd());
+
+    this.state = {
+      start: DateUtils.parseDate(startStr),
+      end: DateUtils.parseDate(endStr),
+    };
+    this.handleReset = this.handleReset.bind(this);
+    this.handleMinValueChange = this.handleMinValueChange.bind(this);
+    this.handleMaxValueChange = this.handleMaxValueChange.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: DateRangeSelectorProps) {
+    let { start, end } = nextProps;
+    const startStr =
+      start === this.props.start
+        ? DateUtils.formatDateObject(this.state.start)
+        : start && DateUtils.isValidDateString(start)
+        ? start
+        : DateUtils.formatDateObject(DateUtils.getEpochStart());
+    const endStr =
+      end === this.props.end
+        ? DateUtils.formatDateObject(this.state.end)
+        : end && DateUtils.isValidDateString(end)
+        ? end
+        : DateUtils.formatDateObject(DateUtils.getEpochEnd());
+    this.setState({
+      start: DateUtils.parseDate(startStr),
+      end: DateUtils.parseDate(endStr),
+    });
+  }
+
+  handleMinValueChange = (min: string) => {
+    const { onChange, value } = this.props;
+    const { max } = value;
+    if (onChange) onChange({ min, max });
+  };
+
+  handleMaxValueChange = (max: string) => {
+    const { onChange, value } = this.props;
+    const { min } = value;
+    if (onChange) onChange({ min, max });
+  };
+
+  handleReset = () => {
+    const { onChange } = this.props;
+    const { start, end } = this.state;
+    const startFormatted = DateUtils.formatDateObject(start);
+    const endFormatted = DateUtils.formatDateObject(end);
+    if (onChange) onChange({ min: startFormatted, max: endFormatted });
+  };
+
+  render() {
+    const {
+      value: { min, max },
+      required = false,
+      inline = false,
+      hideReset = false,
+    } = this.props;
+    const { start, end } = this.state;
+
+    const startFormatted = DateUtils.formatDateObject(start);
+    const endFormatted = DateUtils.formatDateObject(end);
+
+    const alreadyDefault = startFormatted === min && endFormatted === max;
+
+    return (
+      <div className={cx('', inline ? 'inline' : 'grid')}>
+        <div className={cx('--Label', 'from')}>
+          <label>from</label>
+        </div>
+        <div className={cx('--Control', 'from')}>
+          <DateSelector
+            start={startFormatted}
+            end={endFormatted}
+            value={min}
+            onChange={this.handleMinValueChange}
+            required={required}
+          />
+        </div>
+        <div className={cx('--Label', 'to')}>
+          <label>to</label>
+        </div>
+        <div className={cx('--Control', 'to')}>
+          <DateSelector
+            start={startFormatted}
+            end={endFormatted}
+            value={max}
+            onChange={this.handleMaxValueChange}
+            required={required}
+          />
+        </div>
+        {!hideReset && (
+          <div className={cx('--Control', 'reset')}>
+            <button
+              type="button"
+              disabled={alreadyDefault}
+              className="link"
+              onClick={this.handleReset}
+            >
+              Reset to Defaults
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default DateRangeSelector;
diff --git a/packages/libs/wdk-client/src/Components/InputControls/DateSelector.jsx b/packages/libs/wdk-client/src/Components/InputControls/DateSelector.tsx
similarity index 67%
rename from packages/libs/wdk-client/src/Components/InputControls/DateSelector.jsx
rename to packages/libs/wdk-client/src/Components/InputControls/DateSelector.tsx
index 70c76a9911..46872fc170 100644
--- a/packages/libs/wdk-client/src/Components/InputControls/DateSelector.jsx
+++ b/packages/libs/wdk-client/src/Components/InputControls/DateSelector.tsx
@@ -1,24 +1,42 @@
 import React from 'react';
 import * as DateUtils from '../../Utils/DateUtils';
+import { DateObject } from '../../Utils/DateUtils';
 
 import '../../Components/InputControls/wdk-DateSelector.scss';
 import Select from '../../Components/InputControls/SingleSelect';
 
-class DateSelector extends React.Component {
-  constructor(props) {
+interface Props {
+  value?: string;
+  start?: string;
+  end?: string;
+  onChange?: (value: string) => void;
+  required?: boolean;
+}
+
+interface State {
+  year: number;
+  month: number;
+  day: number;
+  value?: string;
+  start: DateObject;
+  end: DateObject;
+}
+
+class DateSelector extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
-    let { value, start, end } = props;
+    let { value, start: startProp, end: endProp } = props;
 
-    let { year, month, day } = DateUtils.isValidDateString(value)
-      ? DateUtils.parseDate(value)
-      : { year: currentYear, month: 1, day: 1 };
+    let { year, month, day } = DateUtils.isValidDateString(value || '')
+      ? DateUtils.parseDate(value || '')
+      : { year: DateUtils.currentYear, month: 1, day: 1 };
 
-    start = DateUtils.isValidDateString(start)
-      ? DateUtils.parseDate(start)
+    const start = DateUtils.isValidDateString(startProp || '')
+      ? DateUtils.parseDate(startProp || '')
       : DateUtils.getEpochStart();
 
-    end = DateUtils.isValidDateString(end)
-      ? DateUtils.parseDate(end)
+    const end = DateUtils.isValidDateString(endProp || '')
+      ? DateUtils.parseDate(endProp || '')
       : DateUtils.getEpochEnd();
 
     let initial = JSON.stringify([year, month, day]);
@@ -39,7 +57,7 @@ class DateSelector extends React.Component {
     this.componentWillReceiveProps = this.componentWillReceiveProps.bind(this);
   }
 
-  handleYearChange(year) {
+  handleYearChange(year: number): void {
     year = year * 1;
     let { month, day, start, end } = this.state;
     ({ year, month, day } = DateUtils.conformDateToBounds(
@@ -49,10 +67,10 @@ class DateSelector extends React.Component {
 
     let result = DateUtils.formatDate(year, month, day);
     if (!DateUtils.isValidDateString(result)) return;
-    if ('onChange' in this.props) this.props.onChange(result);
+    if ('onChange' in this.props) this.props.onChange?.(result);
   }
 
-  handleMonthChange(month) {
+  handleMonthChange(month: number): void {
     month = month * 1;
     let { year, day, start, end } = this.state;
     ({ year, month, day } = DateUtils.conformDateToBounds(
@@ -62,10 +80,10 @@ class DateSelector extends React.Component {
 
     let result = DateUtils.formatDate(year, month, day);
     if (!DateUtils.isValidDateString(result)) return;
-    if ('onChange' in this.props) this.props.onChange(result);
+    if ('onChange' in this.props) this.props.onChange?.(result);
   }
 
-  handleDayChange(day) {
+  handleDayChange(day: number): void {
     day = day * 1;
     let { year, month, start, end } = this.state;
     ({ year, month, day } = DateUtils.conformDateToBounds(
@@ -75,45 +93,46 @@ class DateSelector extends React.Component {
 
     let result = DateUtils.formatDate(year, month, day);
     if (!DateUtils.isValidDateString(result)) return;
-    if ('onChange' in this.props) this.props.onChange(result);
+    if ('onChange' in this.props) this.props.onChange?.(result);
   }
 
-  componentWillReceiveProps(nextProps) {
-    let { value, start, end } = nextProps;
+  componentWillReceiveProps(nextProps: Props): void {
+    let { value, start: startProp, end: endProp } = nextProps;
     if (value && value === this.props.value && this.state.value) return; // No change
-    let { year, month, day } = DateUtils.parseDate(value);
+    let { year, month, day } = DateUtils.parseDate(value || '');
 
-    start =
-      start === this.props.start
+    const start =
+      startProp === this.props.start
         ? this.state.start
-        : DateUtils.isValidDateString(start)
-        ? DateUtils.parseDate(start)
+        : DateUtils.isValidDateString(startProp || '')
+        ? DateUtils.parseDate(startProp || '')
         : DateUtils.getEpochStart();
-    end =
-      end === this.props.end
+    const end =
+      endProp === this.props.end
         ? this.state.end
-        : DateUtils.isValidDateString(end)
-        ? DateUtils.parseDate(end)
+        : DateUtils.isValidDateString(endProp || '')
+        ? DateUtils.parseDate(endProp || '')
         : DateUtils.getEpochEnd();
 
-    if (!DateUtils.isValidDateString(value)) {
+    if (!DateUtils.isValidDateString(value || '')) {
       let message;
       if (this.state.value) {
         message = `<DateSelector> received an invalid {value} property. `;
         message += `Falling back to existing valid value.`;
         message += `Provide a {value} prop with a valid 'YYYY-MM-DD' formatted date.`;
-        return console.warn(message);
+        console.warn(message);
+        return;
       } else {
         message = `<DateSelector> received an invalid initial {value} property. `;
         message += `Provide a {value} prop with a valid 'YYYY-MM-DD' formatted date.`;
-        return new Error(message);
+        throw new Error(message);
       }
     }
 
     this.setState({ value, year, month, day, start, end });
   }
 
-  render() {
+  render(): React.ReactNode {
     let { value, onChange, required = false } = this.props;
     let { year, month, day, start, end } = this.state;
 
@@ -147,21 +166,21 @@ class DateSelector extends React.Component {
           value={year.toString()}
           name="yearSelection"
           items={yearOptions}
-          onChange={this.handleYearChange}
+          onChange={(value: string) => this.handleYearChange(Number(value))}
           required={required}
         />
         <Select
           value={month.toString()}
           name="monthSelection"
           items={monthOptions}
-          onChange={this.handleMonthChange}
+          onChange={(value: string) => this.handleMonthChange(Number(value))}
           required={required}
         />
         <Select
           value={day.toString()}
           name="daySelection"
           items={dayOptions}
-          onChange={this.handleDayChange}
+          onChange={(value: string) => this.handleDayChange(Number(value))}
           required={required}
         />
       </div>
diff --git a/packages/libs/wdk-client/src/Components/Layout/Main.jsx b/packages/libs/wdk-client/src/Components/Layout/Main.tsx
similarity index 67%
rename from packages/libs/wdk-client/src/Components/Layout/Main.jsx
rename to packages/libs/wdk-client/src/Components/Layout/Main.tsx
index a31df88c37..5c7bd92b0e 100644
--- a/packages/libs/wdk-client/src/Components/Layout/Main.jsx
+++ b/packages/libs/wdk-client/src/Components/Layout/Main.tsx
@@ -1,7 +1,12 @@
 import React, { Component } from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
-class Main extends Component {
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+class Main extends Component<Props> {
   render() {
     return <div className={this.props.className}>{this.props.children}</div>;
   }
diff --git a/packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.jsx b/packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.tsx
similarity index 83%
rename from packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.jsx
rename to packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.tsx
index 76761c0eb5..8311d12a9d 100644
--- a/packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.jsx
+++ b/packages/libs/wdk-client/src/Components/Overlays/Modal/Modal.tsx
@@ -4,7 +4,12 @@ import '../../../Components/Overlays/Modal/Modal.scss';
 import { BodyLayer } from '@veupathdb/coreui/lib/components/Mesa';
 import { useBodyScrollManager } from '../../../Components/Overlays/BodyScrollManager';
 
-function Modal(props) {
+type Props = {
+  when?: boolean;
+  wrapperClass?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function Modal(props: Props) {
   const { when, wrapperClass, ...otherProps } = props;
   const active = typeof when === 'undefined' ? true : when;
   const wrapperClassName =
diff --git a/packages/libs/wdk-client/src/Components/Overlays/Modal/index.js b/packages/libs/wdk-client/src/Components/Overlays/Modal/index.ts
similarity index 100%
rename from packages/libs/wdk-client/src/Components/Overlays/Modal/index.js
rename to packages/libs/wdk-client/src/Components/Overlays/Modal/index.ts
diff --git a/packages/libs/wdk-client/src/Components/WebServicesHelp/WebServicesHelp.tsx b/packages/libs/wdk-client/src/Components/WebServicesHelp/WebServicesHelp.tsx
index 2fcd0da564..71696cb020 100644
--- a/packages/libs/wdk-client/src/Components/WebServicesHelp/WebServicesHelp.tsx
+++ b/packages/libs/wdk-client/src/Components/WebServicesHelp/WebServicesHelp.tsx
@@ -90,7 +90,7 @@ export default function (props: Props) {
             Build the <em>report</em> component of the GET or POST request
           </div>
           <div className={cx('--ReportPartInstructions')}>
-            <DownloadFormContainer {...props} />
+            <DownloadFormContainer {...(props as any)} />
           </div>
         </div>
         <GeneratedRequests
diff --git a/packages/libs/wdk-client/src/Controllers/DownloadFormController.tsx b/packages/libs/wdk-client/src/Controllers/DownloadFormController.tsx
index 81218c9892..7be165f42b 100644
--- a/packages/libs/wdk-client/src/Controllers/DownloadFormController.tsx
+++ b/packages/libs/wdk-client/src/Controllers/DownloadFormController.tsx
@@ -102,7 +102,7 @@ class DownloadFormController extends PageController<Props> {
     };
     return (
       <DownloadFormContainer
-        {...formProps}
+        {...(formProps as any)}
         includeTitle={this.props.ownProps.includeTitle ?? true}
         includeSubmit={this.props.ownProps.includeSubmit ?? true}
         includeSelector={this.props.ownProps.includeSelector}
diff --git a/packages/libs/wdk-client/src/Controllers/FavoritesController.tsx b/packages/libs/wdk-client/src/Controllers/FavoritesController.tsx
index 49521c864d..5f913d12e5 100644
--- a/packages/libs/wdk-client/src/Controllers/FavoritesController.tsx
+++ b/packages/libs/wdk-client/src/Controllers/FavoritesController.tsx
@@ -15,14 +15,11 @@ import {
   undeleteFavorites,
   loadFavoritesList,
 } from '../Actions/FavoritesActions';
-import _FavoritesList from '../Views/Favorites/FavoritesList';
+import FavoritesList from '../Views/Favorites/FavoritesList';
 import { State } from '../StoreModules/FavoritesListStoreModule';
 import { GlobalData } from '../StoreModules/GlobalData';
 import { RootState } from '../Core/State/Types';
 
-// FIXME Convert FavoritesList to TypeScript
-const FavoritesList: any = _FavoritesList;
-
 // Named map of ActionCreator functions that will be passed
 // as dispatchProps via `connect` below
 const ActionCreators = {
@@ -88,10 +85,12 @@ class FavoritesListController extends PageController<Props> {
 
     return (
       <FavoritesList
-        {...stateProps}
-        favoritesEvents={dispatchProps}
-        searchBoxPlaceholder="Search Favorites..."
-        searchBoxHelp="All table columns will be searched"
+        {...({
+          ...stateProps,
+          favoritesEvents: dispatchProps,
+          searchBoxPlaceholder: 'Search Favorites...',
+          searchBoxHelp: 'All table columns will be searched',
+        } as any)}
       />
     );
   }
diff --git a/packages/libs/wdk-client/src/Controllers/UserPasswordChangeController.tsx b/packages/libs/wdk-client/src/Controllers/UserPasswordChangeController.tsx
index 4909a63e04..45b27a64e4 100644
--- a/packages/libs/wdk-client/src/Controllers/UserPasswordChangeController.tsx
+++ b/packages/libs/wdk-client/src/Controllers/UserPasswordChangeController.tsx
@@ -30,7 +30,17 @@ class UserPasswordChangeController extends PageController<MergedProps> {
   }
 
   renderView() {
-    return <ChangePasswordForm {...this.props} />;
+    const { user, passwordForm, formStatus, errorMessage, userEvents } =
+      this.props;
+    return (
+      <ChangePasswordForm
+        user={user}
+        passwordForm={passwordForm}
+        formStatus={formStatus}
+        errorMessage={errorMessage}
+        userEvents={userEvents}
+      />
+    );
   }
 }
 
diff --git a/packages/libs/wdk-client/src/Core/main.js b/packages/libs/wdk-client/src/Core/main.ts
similarity index 79%
rename from packages/libs/wdk-client/src/Core/main.js
rename to packages/libs/wdk-client/src/Core/main.ts
index dff4736b0c..2c0b100e53 100644
--- a/packages/libs/wdk-client/src/Core/main.js
+++ b/packages/libs/wdk-client/src/Core/main.ts
@@ -3,9 +3,9 @@
 // import css files
 import '../Core/Style/index.scss';
 
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, History } from 'history';
 import { identity, isString } from 'lodash';
-import { createElement } from 'react';
+import { createElement, ReactElement } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import * as Components from '../Components';
 import { ClientPluginRegistryEntry } from '../Utils/ClientPlugin'; // eslint-disable-line no-unused-vars
@@ -21,7 +21,9 @@ import wdkRoutes from '../Core/routes';
 import defaultPluginConfig from '../Core/pluginConfig';
 
 import storeModules from '../StoreModules';
-import { createWdkStore } from '../Core/Store';
+import { createWdkStore, EpicDependencies } from '../Core/Store';
+import { Middleware, Store } from 'redux';
+import { Location } from 'history';
 
 /**
  * Initialize the application.
@@ -53,7 +55,26 @@ import { createWdkStore } from '../Core/Store';
  * @param {ClientPluginRegistryEntry<unknown>[]} [options.pluginConfig]
  * @param {ReduxMiddleware[]} [options.additionalMiddleware]
  */
-export function initialize(options) {
+export function initialize(options: {
+  requireLogin?: boolean;
+  rootUrl: string;
+  rootElement: string | HTMLElement;
+  endpoint: string;
+  retainContainerContent?: boolean;
+  wrapRoutes?: (routes: any) => any;
+  wrapStoreModules?: (modules: any) => any;
+  wrapWdkDependencies?: (deps: EpicDependencies) => EpicDependencies;
+  wrapWdkService?: (service: any) => any;
+  onLocationChange?: (location: Location) => void;
+  pluginConfig?: ClientPluginRegistryEntry<unknown>[];
+  additionalMiddleware?: Middleware[];
+}): {
+  wdkService: any;
+  paramValueStore: any;
+  store: Store;
+  history: History;
+  pluginConfig: ClientPluginRegistryEntry<unknown>[];
+} {
   let {
     requireLogin = false,
     rootUrl,
@@ -80,7 +101,7 @@ export function initialize(options) {
 
   // define the elements of the Flux architecture
 
-  let history =
+  let history: History =
     location.pathname.startsWith(rootUrl) && !retainContainerContent
       ? createBrowserHistory({ basename: rootUrl })
       : createMockHistory({ basename: rootUrl });
@@ -88,11 +109,11 @@ export function initialize(options) {
   let paramValueStore = getParamValueStoreInstance(endpoint, wdkService);
   let transitioner = getTransitioner(history);
 
-  let wdkDependencies = wrapWdkDependencies({
+  let wdkDependencies: EpicDependencies = wrapWdkDependencies({
     paramValueStore,
     transitioner,
     wdkService,
-  });
+  }) as EpicDependencies;
 
   let store = createWdkStore(
     wrapStoreModules(storeModules),
@@ -105,18 +126,18 @@ export function initialize(options) {
 
   // render the root element once page has completely loaded
   document.addEventListener('DOMContentLoaded', function () {
-    let container =
+    let container: HTMLElement | null =
       rootElement instanceof HTMLElement
         ? rootElement
         : rootElement
-        ? document.querySelector(rootElement)
-        : undefined;
-    let handleLocationChange = (location) => {
+        ? (document.querySelector(rootElement) as HTMLElement | null)
+        : null;
+    let handleLocationChange = (location: Location) => {
       if (onLocationChange) onLocationChange(location);
       store.dispatch(updateLocation(location));
     };
     if (container != null) {
-      let applicationElement = createElement(Root, {
+      let applicationElement: ReactElement = createElement(Root, {
         requireLogin,
         rootUrl,
         store,
@@ -129,7 +150,7 @@ export function initialize(options) {
       });
       const root = ReactDOMClient.createRoot(container);
       root.render(applicationElement);
-    } else if (__DEV__) {
+    } else if (typeof __DEV__ !== 'undefined' && __DEV__) {
       console.debug(
         'Could not resolve rootElement %o. Application will not render automatically.',
         rootElement
@@ -152,13 +173,15 @@ export function initialize(options) {
  *
  * @param {Object} componentWrappers
  */
-export function wrapComponents(componentWrappers) {
+export function wrapComponents(
+  componentWrappers: Record<string, (component: any) => any>
+): void {
   for (let key in componentWrappers) {
     // look in Components for class by this name
-    let Component = Components[key];
+    let Component = (Components as Record<string, any>)[key];
     // if not found, look in Controllers
     if (Component == null) {
-      Component = Controllers[key];
+      Component = (Controllers as Record<string, any>)[key];
     }
     // if still not found, warn and skip
     if (Component == null) {
diff --git a/packages/libs/wdk-client/src/Utils/DateUtils.ts b/packages/libs/wdk-client/src/Utils/DateUtils.ts
index 682bdf20d6..844942e6e4 100755
--- a/packages/libs/wdk-client/src/Utils/DateUtils.ts
+++ b/packages/libs/wdk-client/src/Utils/DateUtils.ts
@@ -8,13 +8,13 @@
  *    duh, obvious
  **/
 
-interface DateObject {
+export interface DateObject {
   day: number;
   month: number;
   year: number;
 }
 
-interface DateRangeObject {
+export interface DateRangeObject {
   start: DateObject;
   end: DateObject;
 }
diff --git a/packages/libs/wdk-client/src/Utils/IterableUtils.ts b/packages/libs/wdk-client/src/Utils/IterableUtils.ts
index ec6c4238bb..9e028dd575 100644
--- a/packages/libs/wdk-client/src/Utils/IterableUtils.ts
+++ b/packages/libs/wdk-client/src/Utils/IterableUtils.ts
@@ -60,7 +60,7 @@ export class Seq<T> {
   }
 
   static of<T>(...values: T[]) {
-    return (values.length === 0 ? Seq.empty() : new Seq(values)) as Seq<T>;
+    return values.length === 0 ? Seq.empty<T>() : new Seq(values);
   }
 
   static from<T>(iterable: Iterable<T>) {
@@ -233,7 +233,7 @@ export class Seq<T> {
     const groupMap = this.reduce((map: Map<S, T[]>, entry: T) => {
       const key = fn(entry);
       if (!map.has(key)) map.set(key, []);
-      const group: T[] = map.get(key) as T[];
+      const group = map.get(key)!;
       group.push(entry);
       return map;
     }, new Map<S, T[]>());
diff --git a/packages/libs/wdk-client/src/Utils/Operations.tsx b/packages/libs/wdk-client/src/Utils/Operations.tsx
index b05691c413..02bbff825e 100644
--- a/packages/libs/wdk-client/src/Utils/Operations.tsx
+++ b/packages/libs/wdk-client/src/Utils/Operations.tsx
@@ -210,7 +210,9 @@ export const useCompatibleOperatorMetadata = (
       return undefined;
     }
 
-    const compatibleOperatorMetadata = binaryOperations.reduce(
+    const compatibleOperatorMetadata = binaryOperations.reduce<
+      Record<string, OperatorMetadata>
+    >(
       (
         memo,
         {
@@ -245,7 +247,7 @@ export const useCompatibleOperatorMetadata = (
 
         const newMetadataEntries =
           operationQuestion &&
-          parameterValues.reduce(
+          parameterValues.reduce<Record<string, OperatorMetadata>>(
             (memo, itemValue) => ({
               ...memo,
               [itemValue]: {
@@ -257,7 +259,7 @@ export const useCompatibleOperatorMetadata = (
                 reviseOperatorParamConfiguration,
               },
             }),
-            {} as Record<string, OperatorMetadata>
+            {}
           );
 
         return {
@@ -265,7 +267,7 @@ export const useCompatibleOperatorMetadata = (
           ...newMetadataEntries,
         };
       },
-      {} as Record<string, OperatorMetadata>
+      {}
     );
 
     return compatibleOperatorMetadata;
@@ -326,27 +328,30 @@ export const useReviseOperatorConfigs = (
   const reviseOperatorConfigsWithoutIgnore = useMemo(
     () =>
       operatorMetadata &&
-      binaryOperations.reduce((memo, { baseClassName, operatorMenuGroup }) => {
-        return operatorMenuGroup.items.some(
-          (menuItem) => !operatorMetadata[menuItem.value]
-        )
-          ? memo
-          : [
-              ...memo,
-              {
-                name: operatorMenuGroup.name,
-                display: operatorMenuGroup.display,
-                items: operatorMenuGroup.items.map((menuItem) => ({
-                  display: menuItem.radioDisplay(stepALabel, stepBLabel),
-                  iconClassName: cxOperator(
-                    `--${baseClassName}`,
-                    toUpper(menuItem.value)
-                  ),
-                  value: menuItem.value,
-                })),
-              },
-            ];
-      }, [] as ReviseOperatorMenuGroup[]),
+      binaryOperations.reduce<ReviseOperatorMenuGroup[]>(
+        (memo, { baseClassName, operatorMenuGroup }) => {
+          return operatorMenuGroup.items.some(
+            (menuItem) => !operatorMetadata[menuItem.value]
+          )
+            ? memo
+            : [
+                ...memo,
+                {
+                  name: operatorMenuGroup.name,
+                  display: operatorMenuGroup.display,
+                  items: operatorMenuGroup.items.map((menuItem) => ({
+                    display: menuItem.radioDisplay(stepALabel, stepBLabel),
+                    iconClassName: cxOperator(
+                      `--${baseClassName}`,
+                      toUpper(menuItem.value)
+                    ),
+                    value: menuItem.value,
+                  })),
+                },
+              ];
+        },
+        []
+      ),
     [binaryOperations, operatorMetadata]
   );
 
@@ -488,12 +493,14 @@ export const useSelectedAddStepFormComponent = (
   const operationFormsByName = useMemo(
     () =>
       menuConfigs &&
-      menuConfigs.reduce(
+      menuConfigs.reduce<
+        Record<string, React.ComponentType<AddStepOperationFormProps>>
+      >(
         (memo, { addStepFormComponents }) => ({
           ...memo,
           ...addStepFormComponents,
         }),
-        {} as Record<string, React.ComponentType<AddStepOperationFormProps>>
+        {}
       ),
     [menuConfigs]
   );
diff --git a/packages/libs/wdk-client/src/Utils/WdkModel.ts b/packages/libs/wdk-client/src/Utils/WdkModel.ts
index 84f93c4134..8d46923bc5 100644
--- a/packages/libs/wdk-client/src/Utils/WdkModel.ts
+++ b/packages/libs/wdk-client/src/Utils/WdkModel.ts
@@ -49,6 +49,7 @@ export interface Reporter {
   description?: string;
   isInReport: boolean;
   scopes: string[];
+  newBuild?: string;
 }
 
 interface ParameterBase extends NamedModelEntity {
@@ -318,6 +319,7 @@ export interface AttributeField extends NamedModelEntity {
   isSortable: boolean;
   isRemovable: boolean;
   isDisplayable: boolean;
+  isPrimary?: boolean;
   type?: string;
   truncateTo: number;
   formats: Reporter[];
diff --git a/packages/libs/wdk-client/src/Views/Answer/Answer.jsx b/packages/libs/wdk-client/src/Views/Answer/Answer.tsx
similarity index 53%
rename from packages/libs/wdk-client/src/Views/Answer/Answer.jsx
rename to packages/libs/wdk-client/src/Views/Answer/Answer.tsx
index 39658c46bd..afb17eb197 100644
--- a/packages/libs/wdk-client/src/Views/Answer/Answer.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/Answer.tsx
@@ -1,6 +1,13 @@
-import { orderBy, uniq } from 'lodash';
-import React, { useMemo, useState, useCallback } from 'react';
-import { withRouter } from 'react-router';
+import { orderBy, uniq, ListIteratee } from 'lodash';
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  FC,
+  ReactNode,
+  FormEvent,
+} from 'react';
+import { withRouter, RouteComponentProps } from 'react-router';
 import Icon from '../../Components/Icon/IconAlt';
 import { Mesa, MesaState } from '@veupathdb/coreui/lib/components/Mesa';
 import Dialog from '../../Components/Overlays/Dialog';
@@ -9,8 +16,59 @@ import AttributeSelector from '../../Views/Answer/AnswerAttributeSelector';
 import AnswerFilter from '../../Views/Answer/AnswerFilter';
 import AnswerTableCell from '../../Views/Answer/AnswerTableCell';
 import '../../Views/Answer/wdk-Answer.scss';
+import {
+  AttributeField,
+  RecordClass,
+  RecordInstance,
+  Question,
+  AttributeValue,
+  LinkAttributeValue,
+} from '../../Utils/WdkModel';
+import { DisplayInfo, Sorting } from '../../Actions/AnswerActions';
 
-function Answer(props) {
+interface TableAction {
+  key: string;
+  display: ReactNode;
+}
+
+interface CellContentProps {
+  value: AttributeValue;
+  attribute: AttributeField;
+  record: RecordInstance;
+  recordClass: RecordClass;
+}
+
+interface RenderCellProps extends CellContentProps {
+  CellContent: React.ComponentType<CellContentProps>;
+}
+
+interface RowClassNameProps {
+  record: RecordInstance;
+  recordClass: RecordClass;
+}
+
+interface AnswerProps extends RouteComponentProps {
+  question: Question;
+  recordClass: RecordClass;
+  displayInfo: DisplayInfo;
+  meta: {
+    totalCount: number;
+    responseCount: number;
+  };
+  records: RecordInstance[];
+  allAttributes: AttributeField[];
+  visibleAttributes: AttributeField[];
+  onSort: (sorting: Sorting[]) => void;
+  onMoveColumn: (columnName: string, newIndex: number) => void;
+  onChangeColumns: (attributes: AttributeField[]) => void;
+  renderCellContent?: (props: RenderCellProps) => ReactNode;
+  deriveRowClassName?: (props: RowClassNameProps) => string | undefined;
+  customSortBys?: Record<string, ListIteratee<RecordInstance>[]>;
+  additionalActions?: TableAction[];
+  useStickyFirstNColumns?: number;
+}
+
+const Answer: FC<AnswerProps> = (props) => {
   const { question, recordClass, displayInfo, additionalActions } = props;
 
   const tableState = useTableState(props);
@@ -23,22 +81,32 @@ function Answer(props) {
       <div className="wdk-AnswerDescription">{recordClass.description}</div>
       <div className="wdk-Answer">
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <AnswerFilter {...props} />
-          <AnswerCount {...props} />
+          <AnswerFilter {...(props as any)} />
+          <AnswerCount {...(props as any)} />
           <div style={{ flex: 1, textAlign: 'right' }}>
             {additionalActions?.map(({ key, display }) => (
               <React.Fragment key={key}>{display}</React.Fragment>
             ))}
-            <AttributePopup {...props} />
+            <AttributePopup {...(props as any)} />
           </div>
         </div>
         <Mesa state={tableState} />
       </div>
     </div>
   );
+};
+
+interface AnswerCountProps {
+  recordClass: RecordClass;
+  meta: {
+    totalCount: number;
+    responseCount: number;
+  };
+  records: RecordInstance[];
+  displayInfo: DisplayInfo;
 }
 
-function AnswerCount(props) {
+const AnswerCount: FC<AnswerCountProps> = (props) => {
   const { recordClass, meta, records, displayInfo } = props;
   const { displayNamePlural } = recordClass;
   const { pagination } = displayInfo;
@@ -55,29 +123,35 @@ function AnswerCount(props) {
       Showing {countPhrase} {displayNamePlural}
     </p>
   );
+};
+
+interface AttributePopupProps {
+  allAttributes: AttributeField[];
+  visibleAttributes: AttributeField[];
+  onChangeColumns: (attributes: AttributeField[]) => void;
 }
 
-function AttributePopup(props) {
+const AttributePopup: FC<AttributePopupProps> = (props) => {
   const { allAttributes, visibleAttributes, onChangeColumns } = props;
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedAttributes, setSelectedAttributes] = useState(
+  const [selectedAttributes, setSelectedAttributes] = useState<string[]>(
     visibleAttributes.map((attr) => attr.name)
   );
   const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
   const handleAttributeSelectorSubmit = useCallback(
-    (event) => {
+    (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       event.stopPropagation();
-      const nextVisibleAttributes = selectedAttributes.map((attrName) =>
-        allAttributes.find((attr) => attr.name === attrName)
-      );
+      const nextVisibleAttributes = selectedAttributes
+        .map((attrName) => allAttributes.find((attr) => attr.name === attrName))
+        .filter((attr): attr is AttributeField => attr !== undefined);
       onChangeColumns(nextVisibleAttributes);
       setIsOpen(false);
     },
     [allAttributes, onChangeColumns, selectedAttributes, setIsOpen]
   );
   const toggleSelectedAttribute = useCallback(
-    (attributeName, isVisible) => {
+    (attributeName: string, isVisible: boolean) => {
       const nextSelectedAttributes = isVisible
         ? uniq([...selectedAttributes, attributeName])
         : selectedAttributes.filter((attrName) => attrName !== attributeName);
@@ -106,9 +180,37 @@ function AttributePopup(props) {
       </Dialog>
     </>
   );
+};
+
+interface MesaColumn {
+  key: string;
+  helpText?: string;
+  name: string;
+  sortable: boolean;
+  primary: boolean;
+  moveable: boolean;
+  renderCell: (cellData: { row: RecordInstance }) => ReactNode;
 }
 
-function useTableState(props) {
+interface MesaOptions {
+  useStickyFirstNColumns?: number;
+  deriveRowClassName?: (record: RecordInstance) => string | undefined;
+  [key: string]: any;
+}
+
+interface MesaUIState {
+  sort: {
+    columnKey: string | null;
+    direction: string;
+  } | null;
+}
+
+interface MesaEventHandlers {
+  onSort: (column: { key: string }, direction: string) => void;
+  onColumnReorder: (colKey: string, newIndex: number) => void;
+}
+
+function useTableState(props: AnswerProps) {
   const {
     records,
     onSort,
@@ -118,22 +220,22 @@ function useTableState(props) {
     displayInfo,
     renderCellContent,
     deriveRowClassName,
-    customSortBys,
+    customSortBys = {},
     useStickyFirstNColumns,
   } = props;
 
   const columns = useMemo(
     () =>
-      visibleAttributes.map((attribute) => {
+      visibleAttributes.map((attribute): MesaColumn => {
         return {
           key: attribute.name,
           helpText: attribute.help,
           name: attribute.displayName,
           sortable: attribute.isSortable,
-          primary: attribute.isPrimary,
+          primary: attribute.isPrimary ?? false,
           moveable: true,
           renderCell: ({ row: record }) => {
-            const cellProps = {
+            const cellProps: CellContentProps = {
               attribute,
               record,
               recordClass,
@@ -148,7 +250,7 @@ function useTableState(props) {
           },
         };
       }),
-    [renderCellContent, visibleAttributes]
+    [renderCellContent, visibleAttributes, recordClass]
   );
 
   const options = useMemo(
@@ -158,9 +260,10 @@ function useTableState(props) {
       tableBodyMaxHeight: '70vh',
       deriveRowClassName:
         deriveRowClassName &&
-        ((record) => deriveRowClassName({ recordClass, record })),
+        ((record: RecordInstance) =>
+          deriveRowClassName({ recordClass, record })),
     }),
-    [deriveRowClassName]
+    [deriveRowClassName, useStickyFirstNColumns, recordClass]
   );
 
   const { sorting } = displayInfo;
@@ -181,24 +284,26 @@ function useTableState(props) {
 
   const rows = useMemo(() => {
     const sortingAttribute = visibleAttributes.find(
-      (attribute) => attribute.name === sorting[0].attributeName
+      (attribute) => attribute.name === sorting[0]?.attributeName
     );
     const sortKeys = makeSortKeys(
       sortingAttribute ? sortingAttribute : visibleAttributes[0],
       customSortBys
     );
     const sortDirections = sortKeys.map(
-      (_) => sorting[0].direction.toLowerCase() || 'asc'
-    );
+      (_) => sorting[0]?.direction.toLowerCase() || 'asc'
+    ) as ('asc' | 'desc')[];
     return orderBy(records, sortKeys, sortDirections);
   }, [records, sorting, visibleAttributes, customSortBys]);
 
   const eventHandlers = useMemo(
     () => ({
-      onSort({ key }, direction) {
-        onSort([{ attributeName: key, direction }]);
+      onSort({ key }: { key: string }, direction: string) {
+        onSort([
+          { attributeName: key, direction: direction as 'ASC' | 'DESC' },
+        ]);
       },
-      onColumnReorder: (colKey, newIndex) => {
+      onColumnReorder: (colKey: string, newIndex: number) => {
         const currentIndex = columns.findIndex((col) => col.key === colKey);
         if (currentIndex < 0) return;
         if (newIndex < currentIndex) newIndex++;
@@ -224,44 +329,64 @@ function useTableState(props) {
   );
 }
 
-function makeSortKeys(sortingAttribute, customSortBys = {}) {
+function makeSortKeys(
+  sortingAttribute: AttributeField,
+  customSortBys: Record<string, ListIteratee<RecordInstance>[]> = {}
+): ListIteratee<RecordInstance>[] {
   if (customSortBys[sortingAttribute.name] != null) {
     return customSortBys[sortingAttribute.name];
   } else if (sortingAttribute.type === 'number') {
     return [
-      (record) =>
+      (record: RecordInstance) =>
         castValue(
           record.attributes[sortingAttribute.name] &&
-            record.attributes[sortingAttribute.name].replace(/,/g, '')
+            typeof record.attributes[sortingAttribute.name] === 'string'
+            ? (record.attributes[sortingAttribute.name] as string).replace(
+                /,/g,
+                ''
+              )
+            : record.attributes[sortingAttribute.name]
         ),
     ];
   } else if (sortingAttribute.type === 'link') {
     return [
-      (record) =>
-        castValue(
-          record.attributes[sortingAttribute.name] &&
-            record.attributes[sortingAttribute.name].displayText
-        ),
+      (record: RecordInstance) => {
+        const attrValue = record.attributes[sortingAttribute.name];
+        return castValue(
+          attrValue &&
+            typeof attrValue === 'object' &&
+            attrValue !== null &&
+            'displayText' in attrValue
+            ? (attrValue as LinkAttributeValue).displayText
+            : attrValue
+        );
+      },
     ];
   } else {
     return [
-      (record) => {
-        if (record.attributes[sortingAttribute.name] === null) {
+      (record: RecordInstance) => {
+        const attrValue = record.attributes[sortingAttribute.name];
+        if (attrValue === null) {
           // return a string from the smallest UTF-16
           return String.fromCharCode(0);
-        } else {
+        } else if (typeof attrValue === 'string') {
           // compare strings as lowercase to normalize the sorting behavior
-          return record.attributes[sortingAttribute.name].toLowerCase();
+          return attrValue.toLowerCase();
+        } else {
+          return attrValue;
         }
       },
     ];
   }
 }
 
-function castValue(value) {
+function castValue(
+  value: AttributeValue | string | null | undefined
+): number | string {
   if (value == null) return Number.NEGATIVE_INFINITY;
-  const numberValue = Number(value);
-  return Number.isNaN(numberValue) ? value : numberValue;
+  const stringValue = typeof value === 'string' ? value : String(value);
+  const numberValue = Number(stringValue);
+  return Number.isNaN(numberValue) ? stringValue : numberValue;
 }
 
 export default wrappable(withRouter(Answer));
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.tsx
similarity index 80%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.tsx
index db44933c2b..1e7d98c65b 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerAttributeSelector.tsx
@@ -1,11 +1,19 @@
-import React from 'react';
+import React, { FormEvent } from 'react';
+import { AttributeField } from '../../Utils/WdkModel';
+
+interface Props {
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  allAttributes: AttributeField[];
+  selectedAttributes: string[];
+  onChange: (attributeName: string, isChecked: boolean) => void;
+}
 
 function AttributeSelector({
   onSubmit,
   allAttributes,
   selectedAttributes,
   onChange,
-}) {
+}: Props) {
   return (
     <form onSubmit={onSubmit}>
       <div className="wdk-AnswerTable-AttributeSelectorButtonWrapper">
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.tsx
similarity index 71%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerFilter.tsx
index 75515a7dae..367d59322c 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.tsx
@@ -4,23 +4,56 @@ import ReactDOM from 'react-dom';
 import { HelpTrigger } from '@veupathdb/coreui/lib/components/Mesa';
 import { Tooltip } from '@veupathdb/coreui';
 import { wrappable } from '../../Utils/ComponentUtils';
+import {
+  RecordClass,
+  Question,
+  AttributeField,
+  TableField,
+} from '../../Utils/WdkModel';
+import { DisplayInfo } from '../../Actions/AnswerActions';
 import AnswerFilterSelector from '../../Views/Answer/AnswerFilterSelector';
 
 // concatenate each item in items with arr
-function addToArray(arr, item) {
+function addToArray(arr: string[], item: string): string[] {
   return arr.concat(item);
 }
 
-function removeFromArray(arr, item) {
+function removeFromArray(arr: string[], item: string): string[] {
   return arr.filter(function (a) {
     return a !== item;
   });
 }
 
-class AnswerFilter extends React.Component {
-  constructor(props) {
+interface AnswerFilterProps {
+  recordClass: RecordClass;
+  question: Question;
+  filterTerm: string;
+  displayInfo: DisplayInfo;
+  filterAttributes: string[];
+  filterTables: string[];
+  onFilter: (
+    filterTerm: string,
+    filterAttributes: string[],
+    filterTables: string[]
+  ) => void;
+}
+
+interface AnswerFilterState {
+  showFilterFieldSelector: boolean;
+  filterAttributes: string[];
+  filterTables: string[];
+}
+
+class AnswerFilter extends React.Component<
+  AnswerFilterProps,
+  AnswerFilterState
+> {
+  filterInputRef: React.RefObject<HTMLInputElement>;
+
+  constructor(props: AnswerFilterProps) {
     super(props);
 
+    this.filterInputRef = React.createRef();
     this.toggleFilterFieldSelector = this.toggleFilterFieldSelector.bind(this);
     this.handleFilter = debounce(this.handleFilter.bind(this), 300);
     this.toggleAttribute = this.toggleAttribute.bind(this);
@@ -36,7 +69,10 @@ class AnswerFilter extends React.Component {
     };
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(
+    prevProps: AnswerFilterProps,
+    prevState: AnswerFilterState
+  ): void {
     let { filterAttributes, filterTables } = this.state;
     if (
       filterAttributes !== prevState.filterAttributes ||
@@ -46,19 +82,22 @@ class AnswerFilter extends React.Component {
     }
   }
 
-  toggleFilterFieldSelector() {
+  toggleFilterFieldSelector(): void {
     this.setState({
       showFilterFieldSelector: !this.state.showFilterFieldSelector,
     });
   }
 
-  handleFilter() {
-    let value = ReactDOM.findDOMNode(this.refs.filterInput).value;
+  handleFilter(): void {
+    const inputElement = this.filterInputRef.current;
+    if (!inputElement) return;
+
+    let value = inputElement.value;
     let { filterAttributes, filterTables } = this.state;
     this.props.onFilter(value, filterAttributes, filterTables);
   }
 
-  toggleAttribute(e) {
+  toggleAttribute(e: React.ChangeEvent<HTMLInputElement>): void {
     let attr = e.target.value;
     let op = e.target.checked ? addToArray : removeFromArray;
     this.setState({
@@ -66,7 +105,7 @@ class AnswerFilter extends React.Component {
     });
   }
 
-  toggleTable(e) {
+  toggleTable(e: React.ChangeEvent<HTMLInputElement>): void {
     let table = e.target.value;
     let op = e.target.checked ? addToArray : removeFromArray;
     this.setState({
@@ -74,21 +113,21 @@ class AnswerFilter extends React.Component {
     });
   }
 
-  selectAll(e) {
+  selectAll(e: React.MouseEvent<HTMLAnchorElement>): void {
     let { attributes, tables } = this.props.recordClass;
     this.setState({
-      filterAttributes: attributes.map((a) => a.name),
-      filterTables: tables.map((t) => t.name),
+      filterAttributes: attributes.map((a: AttributeField) => a.name),
+      filterTables: tables.map((t: TableField) => t.name),
     });
     e.preventDefault();
   }
 
-  clearAll(e) {
+  clearAll(e: React.MouseEvent<HTMLAnchorElement>): void {
     this.setState({ filterAttributes: [], filterTables: [] });
     e.preventDefault();
   }
 
-  render() {
+  render(): React.ReactNode {
     let { filterAttributes, filterTables, showFilterFieldSelector } =
       this.state;
     let { recordClass, question, filterTerm, displayInfo } = this.props;
@@ -138,15 +177,17 @@ class AnswerFilter extends React.Component {
     );
     let attributes = recordClass.attributes
       .concat(question.dynamicAttributes)
-      .filter((attr) => displayInfo.attributes.includes(attr.name));
-    let tables = recordClass.tables.filter((table) =>
+      .filter((attr: AttributeField) =>
+        displayInfo.attributes.includes(attr.name)
+      );
+    let tables = recordClass.tables.filter((table: TableField) =>
       displayInfo.tables.includes(table.name)
     );
 
     return (
       <div className="wdk-Answer-filter">
         <input
-          ref="filterInput"
+          ref={this.filterInputRef}
           className="wdk-Answer-filterInput"
           defaultValue={filterTerm}
           placeholder={`Search ${displayNamePlural}`}
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.tsx
similarity index 57%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.tsx
index 1737b6fef8..d5c39179b4 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.tsx
@@ -2,9 +2,34 @@ import { includes } from 'lodash';
 import React, { Component } from 'react';
 import TabbableContainer from '../../Components/Display/TabbableContainer';
 import { wrappable } from '../../Utils/ComponentUtils';
+import { AttributeField, TableField } from '../../Utils/WdkModel';
+
+/** Field with name and displayName properties */
+interface FilterField {
+  name: string;
+  displayName: string;
+}
+
+/** Props for AnswerFilterSelector component */
+interface AnswerFilterSelectorProps {
+  open: boolean;
+  onClose: () => void;
+  attributes: AttributeField[];
+  tables: TableField[];
+  filterAttributes: string[];
+  filterTables: string[];
+  selectAll: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  clearAll: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  toggleAttribute: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  toggleTable: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
 
 /** Filter text input */
-function renderFilterField(field, isChecked, handleChange) {
+function renderFilterField(
+  field: FilterField,
+  isChecked: boolean,
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+) {
   return (
     <div key={field.name}>
       <label>
@@ -23,17 +48,20 @@ function renderFilterField(field, isChecked, handleChange) {
 const ANSWER_FILTER_CLASSNAME = 'wdk-Answer-filterFieldSelector';
 
 /** Record fields to match filter expression against */
-class AnswerFilterSelector extends Component {
-  constructor(props) {
+class AnswerFilterSelector extends Component<AnswerFilterSelectorProps> {
+  handleKeyPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  handleDocumentClick: (e: MouseEvent) => void;
+
+  constructor(props: AnswerFilterSelectorProps) {
     super(props);
-    this.handleKeyPress = (e) => {
+    this.handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (e.key === 'Escape') {
         this.props.onClose();
       }
     };
-    this.handleDocumentClick = (e) => {
+    this.handleDocumentClick = (e: MouseEvent) => {
       // close if the click target is not contained by this node
-      if (!e.target.closest(`.${ANSWER_FILTER_CLASSNAME}`)) {
+      if (!(e.target as Element).closest(`.${ANSWER_FILTER_CLASSNAME}`)) {
         this.props.onClose();
       }
     };
@@ -41,18 +69,30 @@ class AnswerFilterSelector extends Component {
 
   componentDidMount() {
     if (this.props.open) {
-      document.addEventListener('click', this.handleDocumentClick);
+      document.addEventListener(
+        'click',
+        this.handleDocumentClick as EventListener
+      );
     }
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener(
+      'click',
+      this.handleDocumentClick as EventListener
+    );
   }
 
   componentDidUpdate() {
-    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener(
+      'click',
+      this.handleDocumentClick as EventListener
+    );
     if (this.props.open) {
-      document.addEventListener('click', this.handleDocumentClick);
+      document.addEventListener(
+        'click',
+        this.handleDocumentClick as EventListener
+      );
     }
   }
 
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerTable.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerTable.tsx
similarity index 73%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerTable.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerTable.tsx
index c469c31f01..b093435889 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerTable.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerTable.tsx
@@ -1,10 +1,16 @@
 import { pick, property } from 'lodash';
-import PropTypes from 'prop-types';
 import React from 'react';
-import { withRouter } from 'react-router';
-import DataTable from '../../Components/DataTable/DataTable';
+import { withRouter, RouteComponentProps } from 'react-router';
+import DataTable from '@veupathdb/coreui/lib/components/Mesa/Ui/DataTable';
 import Dialog from '../../Components/Overlays/Dialog';
 import { wrappable } from '../../Utils/ComponentUtils';
+import {
+  AttributeField,
+  RecordClass,
+  RecordInstance,
+} from '../../Utils/WdkModel';
+import { DisplayInfo, Sorting } from '../../Actions/AnswerActions';
+import { History, Location } from 'history';
 
 /**
  * Generic table with UI features:
@@ -31,7 +37,14 @@ import { wrappable } from '../../Utils/ComponentUtils';
  */
 function noop() {}
 
-function AttributeSelector(props) {
+interface AttributeSelectorProps {
+  allAttributes: AttributeField[];
+  selectedAttributes: AttributeField[];
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  onChange: (attributeName: string, isVisible: boolean) => void;
+}
+
+function AttributeSelector(props: AttributeSelectorProps) {
   return (
     <form onSubmit={props.onSubmit}>
       <div className="wdk-AnswerTable-AttributeSelectorButtonWrapper">
@@ -69,8 +82,45 @@ function AttributeSelector(props) {
   );
 }
 
-class AnswerTable extends React.Component {
-  constructor(props) {
+interface AnswerTableProps extends RouteComponentProps {
+  meta: any;
+  displayInfo: DisplayInfo;
+  records: RecordInstance[];
+  recordClass: RecordClass;
+  allAttributes: AttributeField[];
+  visibleAttributes: AttributeField[];
+  height: number;
+  history: History;
+  onSort?: (sorting: Sorting[]) => void;
+  onMoveColumn?: (columnName: string, newPosition: number) => void;
+  onChangeColumns?: (attributes: AttributeField[]) => void;
+  onNewPage?: (offset: number, numRecords: number) => void;
+  onRecordClick?: () => void;
+}
+
+interface DataTableColumn extends AttributeField {
+  isDisplayable: boolean;
+}
+
+interface DataTableRow {
+  [key: string]: any;
+}
+
+interface DataTableSortingEntry {
+  name: string;
+  direction: 'ASC' | 'DESC';
+}
+
+interface AnswerTableState {
+  columns: DataTableColumn[];
+  data: DataTableRow[];
+  sorting: DataTableSortingEntry[];
+  pendingVisibleAttributes: AttributeField[];
+  attributeSelectorOpen: boolean;
+}
+
+class AnswerTable extends React.Component<AnswerTableProps, AnswerTableState> {
+  constructor(props: AnswerTableProps) {
     super(props);
     this.handleSort = this.handleSort.bind(this);
     this.handleOpenAttributeSelectorClick =
@@ -96,7 +146,7 @@ class AnswerTable extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: AnswerTableProps) {
     this.setState({
       pendingVisibleAttributes: nextProps.visibleAttributes,
     });
@@ -124,11 +174,12 @@ class AnswerTable extends React.Component {
     }
   }
 
-  handleSort(datatableSorting) {
-    this.props.onSort(
+  handleSort(datatableSorting: DataTableSortingEntry[]) {
+    const onSort = this.props.onSort || noop;
+    onSort(
       datatableSorting.map((entry) => ({
         attributeName: entry.name,
-        direction: entry.direction,
+        direction: entry.direction as 'ASC' | 'DESC',
       }))
     );
   }
@@ -143,10 +194,11 @@ class AnswerTable extends React.Component {
     this.setState(this._getInitialAttributeSelectorState());
   }
 
-  handleAttributeSelectorSubmit(e) {
+  handleAttributeSelectorSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     e.stopPropagation();
-    this.props.onChangeColumns(this.state.pendingVisibleAttributes);
+    const onChangeColumns = this.props.onChangeColumns || noop;
+    onChangeColumns(this.state.pendingVisibleAttributes);
     this.setState({
       attributeSelectorOpen: false,
     });
@@ -155,7 +207,7 @@ class AnswerTable extends React.Component {
   /**
    * Filter unchecked checkboxes and map to attributes
    */
-  togglePendingAttribute(attributeName, isVisible) {
+  togglePendingAttribute(attributeName: string, isVisible: boolean) {
     let pending = new Set(
       this.state.pendingVisibleAttributes.map((attr) => attr.name)
     );
@@ -215,23 +267,7 @@ class AnswerTable extends React.Component {
   }
 }
 
-AnswerTable.propTypes = {
-  meta: PropTypes.object.isRequired,
-  displayInfo: PropTypes.object.isRequired,
-  records: PropTypes.array.isRequired,
-  recordClass: PropTypes.object.isRequired,
-  allAttributes: PropTypes.array.isRequired,
-  visibleAttributes: PropTypes.array.isRequired,
-  height: PropTypes.number.isRequired,
-  history: PropTypes.object.isRequired,
-  onSort: PropTypes.func,
-  onMoveColumn: PropTypes.func,
-  onChangeColumns: PropTypes.func,
-  onNewPage: PropTypes.func,
-  onRecordClick: PropTypes.func,
-};
-
-AnswerTable.defaultProps = {
+(AnswerTable as any).defaultProps = {
   onSort: noop,
   onMoveColumn: noop,
   onChangeColumns: noop,
@@ -242,7 +278,11 @@ AnswerTable.defaultProps = {
 export default wrappable(withRouter(AnswerTable));
 
 /** Convert records array to DataTable format */
-function getDataFromRecords(records, recordClass, history) {
+function getDataFromRecords(
+  records: RecordInstance[],
+  recordClass: RecordClass,
+  history: History
+): DataTableRow[] {
   let attributeNames = recordClass.attributes
     .filter((attr) => attr.isDisplayable)
     .map((attr) => attr.name);
@@ -253,14 +293,14 @@ function getDataFromRecords(records, recordClass, history) {
       pathname: `/record/${recordClass.urlSegment}/${record.id
         .map(property('value'))
         .join('/')}`,
-    });
+    } as Location);
     trimmedAttrs.primary_key = `<a href="${recordUrl}">${trimmedAttrs.primary_key}</a>`;
     return trimmedAttrs;
   });
 }
 
 /** Convert sorting to DataTable format */
-function getDataTableSorting(wdkSorting) {
+function getDataTableSorting(wdkSorting: Sorting[]): DataTableSortingEntry[] {
   return wdkSorting.map((entry) => ({
     name: entry.attributeName,
     direction: entry.direction,
@@ -268,7 +308,10 @@ function getDataTableSorting(wdkSorting) {
 }
 
 /** Convert attributes to DataTable format */
-function setVisibilityFlag(attributes, visibleAttributes) {
+function setVisibilityFlag(
+  attributes: AttributeField[],
+  visibleAttributes: AttributeField[]
+): DataTableColumn[] {
   let visibleSet = new Set(visibleAttributes);
   return attributes
     .filter((attr) => attr.isDisplayable)
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.tsx
similarity index 58%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.tsx
index 33d7a8f5cb..5dc5adbe7f 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerTableCell.tsx
@@ -1,17 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import RecordLink from '../../Views/Records/RecordLink';
 import { renderAttributeValue, wrappable } from '../../Utils/ComponentUtils';
+import {
+  AttributeValue,
+  AttributeField,
+  RecordInstance,
+  RecordClass,
+} from '../../Utils/WdkModel';
 
 // FIXME Remove hardcoded name and lookup from recordClass
-let primaryKeyName = 'primary_key';
+const primaryKeyName = 'primary_key';
 
-function AnswerTableCell(props) {
+interface AnswerTableCellProps {
+  value: AttributeValue;
+  attribute: AttributeField;
+  record: RecordInstance;
+  recordClass: RecordClass;
+  className?: string;
+}
+
+function AnswerTableCell(props: AnswerTableCellProps): JSX.Element | null {
   if (props.value == null) {
     return null;
   }
 
-  let { value, attribute, record, recordClass } = props;
+  const { value, attribute, record, recordClass } = props;
 
   if (attribute.name === primaryKeyName) {
     return (
@@ -28,12 +41,4 @@ function AnswerTableCell(props) {
   }
 }
 
-AnswerTableCell.propTypes = {
-  // TODO Put reusable propTypes in a module
-  value: PropTypes.string,
-  attribute: PropTypes.object.isRequired,
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-};
-
 export default wrappable(AnswerTableCell);
diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.tsx
similarity index 56%
rename from packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.jsx
rename to packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.tsx
index aac55616df..c99816bff5 100644
--- a/packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/AnswerTableHeader.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { wrappable } from '../../Utils/ComponentUtils';
+import { AttributeField } from '../../Utils/WdkModel';
 
-function AnswerTableHeader(props) {
+interface AnswerTableHeaderProps {
+  descriptor: AttributeField;
+}
+
+function AnswerTableHeader(props: AnswerTableHeaderProps): JSX.Element {
   let {
     descriptor: { help, displayName },
   } = props;
   return <span title={help || ''}>{displayName}</span>;
 }
 
-AnswerTableHeader.propTypes = {
-  descriptor: PropTypes.object.isRequired,
-};
-
 export default wrappable(AnswerTableHeader);
diff --git a/packages/libs/wdk-client/src/Views/Favorites/FavoritesList.jsx b/packages/libs/wdk-client/src/Views/Favorites/FavoritesList.tsx
similarity index 69%
rename from packages/libs/wdk-client/src/Views/Favorites/FavoritesList.jsx
rename to packages/libs/wdk-client/src/Views/Favorites/FavoritesList.tsx
index df58edb5fb..184509e0ba 100644
--- a/packages/libs/wdk-client/src/Views/Favorites/FavoritesList.jsx
+++ b/packages/libs/wdk-client/src/Views/Favorites/FavoritesList.tsx
@@ -1,7 +1,8 @@
 import { escape } from 'lodash';
-import React, { Component } from 'react';
-import { withRouter } from 'react-router';
+import React, { Component, CSSProperties, ReactNode } from 'react';
+import { withRouter, RouteComponentProps } from 'react-router';
 import BannerList from '@veupathdb/coreui/lib/components/banners/BannerList';
+import { BannerProps } from '@veupathdb/coreui/lib/components/banners/Banner';
 import Icon from '../../Components/Icon/IconAlt';
 import TextArea from '../../Components/InputControls/TextArea';
 import TextBox from '../../Components/InputControls/TextBox';
@@ -13,13 +14,77 @@ import {
 import RealTimeSearchBox from '../../Components/SearchBox/RealTimeSearchBox';
 import { wrappable } from '../../Utils/ComponentUtils';
 import RecordLink from '../../Views/Records/RecordLink';
+import { Favorite, RecordClass } from '../../Utils/WdkModel';
+import { User } from '../../Utils/WdkUser';
 import '../../Views/Favorites/wdk-Favorites.scss';
 
+interface Banner extends BannerProps {
+  id: string;
+}
+
+interface EditCoordinates {
+  row: number;
+  column: number;
+}
+
+interface FavoritesEvents {
+  searchTerm: (value: string) => void;
+  updateSelection: (payload: {
+    selectIds?: number[];
+    deselectIds?: number[];
+  }) => void;
+  sortColumn: (key: string, direction: string) => void;
+  filterByType: (type: string | null) => void;
+  editCell: (payload: {
+    coordinates: EditCoordinates;
+    key: string;
+    value: string;
+    rowData: Favorite;
+  }) => void;
+  changeCell: (value: string) => void;
+  saveCellData: (tableState: any, favorite: Favorite) => void;
+  cancelCellEdit: () => void;
+  deleteFavorites: (tableState: any, favorites: Favorite[]) => void;
+  undeleteFavorites: (tableState: any, favorites: Favorite[]) => void;
+}
+
+interface Props extends RouteComponentProps<any> {
+  tableState: any;
+  tableSelection: number[];
+  favoritesLoading: boolean;
+  loadError: Error | null;
+  existingFavorite: Partial<Favorite>;
+  editCoordinates: EditCoordinates | Record<string, never>;
+  editValue: string;
+  searchText: string;
+  filterByType: string | null;
+  deletedFavorite: Favorite | null;
+  user: User;
+  recordClasses: RecordClass[];
+  searchBoxPlaceholder: string;
+  searchBoxHelp: string;
+  favoritesEvents: FavoritesEvents;
+  favoriteIds?: number[];
+}
+
+interface State {
+  banners: Banner[];
+}
+
+interface CellRendererProps {
+  key: string;
+  value: any;
+  row: Favorite;
+  rowIndex?: number;
+  columnIndex?: number;
+  column: any;
+}
+
 /**
  * Provides the favorites listing page.  The component relies entirely on its properties.
  */
-class FavoritesList extends Component {
-  constructor(props) {
+class FavoritesList extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.renderIdCell = this.renderIdCell.bind(this);
@@ -58,12 +123,12 @@ class FavoritesList extends Component {
     this.state = { banners: [] };
   }
 
-  createDeletedBanner(selection) {
+  createDeletedBanner(selection: Favorite[]): void {
     if (!selection || !selection.length) return;
     const { banners } = this.state;
     const bannerId = selection.map((s) => s.displayName).join('-');
 
-    const output = {
+    const output: Banner = {
       id: bannerId,
       type: 'success',
       message: null,
@@ -106,21 +171,21 @@ class FavoritesList extends Component {
     this.setState({ banners });
   }
 
-  handleBannerClose(index, banner) {
+  handleBannerClose(index: number, banner: Banner): void {
     const { banners } = this.state;
     banners.splice(index, 1);
     this.setState({ banners });
   }
 
-  handleSearchTermChange(value) {
+  handleSearchTermChange(value: string): void {
     const { favoritesEvents } = this.props;
     favoritesEvents.searchTerm(value);
   }
 
-  renderEmptyState() {
+  renderEmptyState(): ReactNode {
     const { searchText } = this.props;
     const isSearching = searchText && searchText.length;
-    const wrapperStyle = {
+    const wrapperStyle: CSSProperties = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
@@ -128,7 +193,7 @@ class FavoritesList extends Component {
       justifyContent: 'center',
     };
 
-    const iconStyle = {
+    const iconStyle: CSSProperties = {
       fontSize: '80px',
     };
 
@@ -152,55 +217,79 @@ class FavoritesList extends Component {
     );
   }
 
-  countFavoritesByType() {
+  countFavoritesByType(): Record<string, number> {
     const { recordClasses, tableState } = this.props;
     const rows = MesaState.getRows(tableState);
-    const counts = rows.reduce((tally, { recordClassName }) => {
-      if (tally[recordClassName])
-        tally[recordClassName] = tally[recordClassName] + 1;
-      else tally[recordClassName] = 1;
-      return tally;
-    }, {});
+    const counts = rows.reduce(
+      (tally: Record<string, number>, { recordClassName }: Favorite) => {
+        if (tally[recordClassName])
+          tally[recordClassName] = tally[recordClassName] + 1;
+        else tally[recordClassName] = 1;
+        return tally;
+      },
+      {}
+    );
     return counts;
   }
 
   //  RENDERERS ===============================================================
 
-  renderIdCell({ key, value, row, column }) {
-    const { recordClassName, primaryKey, displayName } = row;
+  renderIdCell({ key, value, row, column }: CellRendererProps): ReactNode {
+    const { recordClassName, primaryKey, displayName } = row as Favorite;
     const recordClass = this.getRecordClassByName(recordClassName);
-    const style = { whiteSpace: 'normal', wordWrap: 'break-word' };
+    const style: CSSProperties = {
+      whiteSpace: 'normal',
+      wordWrap: 'break-word',
+    };
     return (
       <div style={style}>
-        <RecordLink recordClass={recordClass} recordId={primaryKey}>
-          {displayName}
-        </RecordLink>
+        {recordClass ? (
+          <RecordLink recordClass={recordClass} recordId={primaryKey}>
+            {displayName}
+          </RecordLink>
+        ) : (
+          displayName
+        )}
       </div>
     );
   }
 
-  renderGroupCell({ key, value, row, rowIndex, columnIndex, column }) {
+  renderGroupCell({
+    key,
+    value,
+    row,
+    rowIndex,
+    columnIndex,
+    column,
+  }: CellRendererProps): ReactNode {
     const { editCoordinates, editValue } = this.props;
-    const normalStyle = { display: 'flex', whiteSpace: 'normal' };
-    const editStyle = {
+    const normalStyle: CSSProperties = {
+      display: 'flex',
+      whiteSpace: 'normal',
+    };
+    const editStyle: CSSProperties = {
       marginLeft: 'auto',
       paddingRight: '1em',
       cursor: 'pointer',
     };
     const isBeingEdited =
       editCoordinates &&
-      editCoordinates.row === rowIndex &&
-      editCoordinates.column === columnIndex;
+      'row' in editCoordinates &&
+      'column' in editCoordinates &&
+      (editCoordinates as EditCoordinates).row === rowIndex &&
+      (editCoordinates as EditCoordinates).column === columnIndex;
 
     return isBeingEdited ? (
       <div className="editor-cell">
         <TextBox
           value={editValue}
-          onKeyPress={(e) => this.handleEnterKey(e, column.key)}
-          onChange={(newValue) => this.handleCellChange(newValue)}
-          autoComplete={true}
-          maxLength="50"
-          size="5"
+          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
+            this.handleEnterKey(e, column.key)
+          }
+          onChange={(newValue: string) => this.handleCellChange(newValue)}
+          autoComplete="on"
+          maxLength={50}
+          size={5}
         />
         <Icon
           fa="check-circle action-icon save-icon"
@@ -223,7 +312,13 @@ class FavoritesList extends Component {
         <div style={editStyle}>
           <a
             onClick={() =>
-              this.handleEditClick(rowIndex, columnIndex, key, row, value)
+              this.handleEditClick(
+                rowIndex || 0,
+                columnIndex || 0,
+                key,
+                row,
+                value
+              )
             }
             className="edit-link"
             title="Edit This Favorite's Project Grouping"
@@ -235,33 +330,45 @@ class FavoritesList extends Component {
     );
   }
 
-  renderTypeCell({ key, value, row, column }) {
-    let type = this.getRecordClassByName(value);
-    type = type ? type.displayName : 'Unknown';
+  renderTypeCell({ key, value, row, column }: CellRendererProps): ReactNode {
+    let recordClass = this.getRecordClassByName(value);
+    let type = recordClass ? recordClass.displayName : 'Unknown';
     return <div>{type}</div>;
   }
 
-  renderNoteCell({ key, value, row, rowIndex, column, columnIndex }) {
+  renderNoteCell({
+    key,
+    value,
+    row,
+    rowIndex,
+    column,
+    columnIndex,
+  }: CellRendererProps): ReactNode {
     const { editCoordinates, editValue } = this.props;
-    const editContainerStyle = { display: 'flex', whiteSpace: 'normal' };
-    const editStyle = {
+    const editContainerStyle: CSSProperties = {
+      display: 'flex',
+      whiteSpace: 'normal',
+    };
+    const editStyle: CSSProperties = {
       marginLeft: 'auto',
       paddingRight: '1em',
       cursor: 'pointer',
     };
     const isBeingEdited =
       editCoordinates &&
-      editCoordinates.row === rowIndex &&
-      editCoordinates.column === columnIndex;
+      'row' in editCoordinates &&
+      'column' in editCoordinates &&
+      (editCoordinates as EditCoordinates).row === rowIndex &&
+      (editCoordinates as EditCoordinates).column === columnIndex;
 
     return isBeingEdited ? (
       <div className="editor-cell">
         <TextArea
           value={editValue}
-          onChange={(newValue) => this.handleCellChange(newValue)}
-          maxLength="200"
-          cols="50"
-          rows="4"
+          onChange={(newValue: string) => this.handleCellChange(newValue)}
+          maxLength={200}
+          cols={50}
+          rows={4}
         />
         <Icon
           fa="check-circle action-icon save-icon"
@@ -284,7 +391,13 @@ class FavoritesList extends Component {
         <div style={editStyle}>
           <a
             onClick={() =>
-              this.handleEditClick(rowIndex, columnIndex, key, row, value)
+              this.handleEditClick(
+                rowIndex || 0,
+                columnIndex || 0,
+                key,
+                row,
+                value
+              )
             }
             className="edit-link"
             title="Edit This Favorite's Project Grouping"
@@ -296,23 +409,25 @@ class FavoritesList extends Component {
     );
   }
 
-  renderCountSummary() {
+  renderCountSummary(): ReactNode {
     const counts = this.countFavoritesByType();
-    const recordClasses = Object.keys(counts);
-    const output = recordClasses.map((recordClass, idx) => {
-      let type = this.getRecordClassByName(recordClass);
-      let name = type ? type.displayNamePlural : 'Unknown';
+    const recordClassNames = Object.keys(counts);
+    const output = recordClassNames.map((recordClassName, idx) => {
+      let recordClass = this.getRecordClassByName(recordClassName);
+      let name = recordClass ? recordClass.displayNamePlural : 'Unknown';
       let { filterByType } = this.props;
       let className =
         'Favorites-GroupCount ' +
-        (filterByType && filterByType === recordClass ? 'active' : 'inactive');
+        (filterByType && filterByType === recordClassName
+          ? 'active'
+          : 'inactive');
       return (
         <span
-          onClick={() => this.handleTypeFilterClick(recordClass)}
+          onClick={() => this.handleTypeFilterClick(recordClassName)}
           className={className}
           key={idx}
         >
-          {name}: {counts[recordClass]}
+          {name}: {counts[recordClassName]}
         </span>
       );
     });
@@ -322,33 +437,33 @@ class FavoritesList extends Component {
 
   // Table event handlers =====================================================
 
-  onRowSelect({ id }) {
+  onRowSelect({ id }: { id: number }): void {
     const { favoritesEvents } = this.props;
     const { updateSelection } = favoritesEvents;
     updateSelection({ selectIds: [id] });
   }
 
-  onRowDeselect({ id }) {
+  onRowDeselect({ id }: { id: number }): void {
     const { favoritesEvents } = this.props;
     const { updateSelection } = favoritesEvents;
     updateSelection({ deselectIds: [id] });
   }
 
-  onMultipleRowSelect(rows) {
+  onMultipleRowSelect(rows: Favorite[]): void {
     const { favoritesEvents } = this.props;
     const ids = rows.map((row) => row.id);
     const { updateSelection } = favoritesEvents;
     updateSelection({ selectIds: ids });
   }
 
-  onMultipleRowDeselect(rows) {
+  onMultipleRowDeselect(rows: Favorite[]): void {
     const { favoritesEvents } = this.props;
     const ids = rows.map((row) => row.id);
     const { updateSelection } = favoritesEvents;
     updateSelection({ deselectIds: ids });
   }
 
-  onSort({ key }, direction) {
+  onSort({ key }: { key: string }, direction: string): void {
     const { favoritesEvents } = this.props;
     const { sortColumn } = favoritesEvents;
     sortColumn(key, direction);
@@ -356,13 +471,13 @@ class FavoritesList extends Component {
 
   // Table config generators =================================================
 
-  getTableActions() {
+  getTableActions(): any[] {
     const { favoritesEvents, tableState } = this.props;
     const { deleteFavorites } = favoritesEvents;
     return [
       {
         selectionRequired: true,
-        element(selection) {
+        element(selection: Favorite[]) {
           return (
             <button className="btn btn-error">
               <Icon fa="trash" /> Remove{' '}
@@ -374,7 +489,7 @@ class FavoritesList extends Component {
             </button>
           );
         },
-        callback: (selection) => {
+        callback: (selection: Favorite[]) => {
           deleteFavorites(tableState, selection);
           this.createDeletedBanner(selection);
         },
@@ -382,7 +497,7 @@ class FavoritesList extends Component {
     ];
   }
 
-  getTableOptions() {
+  getTableOptions(): any {
     const { searchBoxPlaceholder, tableSelection } = this.props;
 
     return {
@@ -392,13 +507,13 @@ class FavoritesList extends Component {
       tableBodyMaxHeight: 'calc(100vh - 80px)',
       renderEmptyState: this.renderEmptyState,
       searchPlaceholder: searchBoxPlaceholder,
-      isRowSelected({ id }) {
+      isRowSelected({ id }: { id: number }) {
         return tableSelection.includes(id);
       },
     };
   }
 
-  getTableColumns() {
+  getTableColumns(): any[] {
     const { renderIdCell, renderTypeCell, renderNoteCell, renderGroupCell } =
       this;
     return [
@@ -437,7 +552,7 @@ class FavoritesList extends Component {
     ];
   }
 
-  getTableEventHandlers() {
+  getTableEventHandlers(): any {
     const {
       onSort,
       onRowSelect,
@@ -454,7 +569,7 @@ class FavoritesList extends Component {
     };
   }
 
-  render() {
+  render(): ReactNode {
     let { banners } = this.state;
     let {
       recordClasses,
@@ -494,8 +609,6 @@ class FavoritesList extends Component {
       rows.length && !filteredRows.length ? 'search' : null
     );
 
-    const CountSummary = this.renderCountSummary;
-
     if (!recordClasses) return null;
     if (user.isGuest)
       return (
@@ -504,11 +617,18 @@ class FavoritesList extends Component {
         </div>
       );
 
+    const bannerProps: BannerProps[] = banners.map(({ id, ...rest }) => rest);
+
     return (
       <div className="wdk-Favorites">
         <h1 className="page-title">Favorites</h1>
-        <CountSummary />
-        <BannerList onClose={this.handleBannerClose} banners={banners} />
+        {this.renderCountSummary()}
+        <BannerList
+          onClose={(index, banner) =>
+            this.handleBannerClose(index, banners[index])
+          }
+          banners={bannerProps}
+        />
         <Mesa state={tableState}>
           <RealTimeSearchBox
             className="favorites-search-field"
@@ -523,7 +643,7 @@ class FavoritesList extends Component {
     );
   }
 
-  handleTypeFilterClick(recordType) {
+  handleTypeFilterClick(recordType: string): void {
     const { filterByType, favoritesEvents } = this.props;
     const active = recordType === filterByType;
     favoritesEvents.filterByType(active ? null : recordType);
@@ -539,7 +659,13 @@ class FavoritesList extends Component {
    * @param cellData
    * @private
    */
-  handleEditClick(rowIndex, columnIndex, dataKey, rowData, cellData) {
+  handleEditClick(
+    rowIndex: number,
+    columnIndex: number,
+    dataKey: string,
+    rowData: Favorite,
+    cellData: any
+  ): void {
     this.props.favoritesEvents.editCell({
       coordinates: {
         row: rowIndex,
@@ -556,7 +682,7 @@ class FavoritesList extends Component {
    * @param value - edited value
    * @private
    */
-  handleCellChange(value) {
+  handleCellChange(value: string): void {
     this.props.favoritesEvents.changeCell(value);
   }
 
@@ -567,13 +693,13 @@ class FavoritesList extends Component {
    * @param dataKey - the property of the favorite that was edited (group or note here)
    * @private
    */
-  handleCellSave(dataKey) {
+  handleCellSave(dataKey: string): void {
     const { tableState, editValue, existingFavorite, favoritesEvents } =
       this.props;
     const favorite = Object.assign({}, existingFavorite, {
       [dataKey]: editValue,
     });
-    favoritesEvents.saveCellData(tableState, favorite);
+    favoritesEvents.saveCellData(tableState, favorite as Favorite);
   }
 
   /**
@@ -581,7 +707,7 @@ class FavoritesList extends Component {
    * in-line edit form, which can alter row height, the CellMeasure cache is cleared.
    * @private
    */
-  handleCellCancel() {
+  handleCellCancel(): void {
     this.props.favoritesEvents.cancelCellEdit();
   }
 
@@ -591,28 +717,31 @@ class FavoritesList extends Component {
    * @param e - Keypress event
    * @param dataKey - cell data key to pass along for saving
    **/
-  handleEnterKey(e, dataKey) {
+  handleEnterKey(
+    e: React.KeyboardEvent<HTMLInputElement>,
+    dataKey: string
+  ): void {
     if (e.key !== 'Enter' || !dataKey) return;
     this.handleCellSave(dataKey);
   }
 
-  handleRowDelete(row) {
+  handleRowDelete(row: Favorite): void {
     const { tableState, favoritesEvents } = this.props;
     favoritesEvents.deleteFavorites(tableState, [row]);
     this.onRowDeselect(row);
   }
 
-  handleUndoDelete(row) {
+  handleUndoDelete(row: Favorite): void {
     const { tableState, favoritesEvents } = this.props;
     favoritesEvents.undeleteFavorites(tableState, [row]);
   }
 
-  handleBulkUndoDelete(rows) {
+  handleBulkUndoDelete(rows: Favorite[]): void {
     const { tableState, favoritesEvents } = this.props;
     favoritesEvents.undeleteFavorites(tableState, rows);
   }
 
-  getDataKeyTooltip(dataKey) {
+  getDataKeyTooltip(dataKey: string): string {
     switch (dataKey) {
       case 'display':
         return 'This links back to your favorite';
@@ -627,10 +756,10 @@ class FavoritesList extends Component {
     }
   }
 
-  getRecordClassByName(recordClassName) {
+  getRecordClassByName(recordClassName: string): RecordClass | undefined {
     let { recordClasses } = this.props;
     return recordClasses.find(({ fullName }) => fullName === recordClassName);
   }
 }
 
-export default wrappable(withRouter(FavoritesList));
+export default wrappable(withRouter(FavoritesList as any));
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordActionLink.jsx b/packages/libs/wdk-client/src/Views/Records/RecordActionLink.tsx
similarity index 54%
rename from packages/libs/wdk-client/src/Views/Records/RecordActionLink.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordActionLink.tsx
index 5dc5103bee..63e794f668 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordActionLink.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordActionLink.tsx
@@ -1,17 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Link from '../../Components/Link/Link';
 import { wrappable } from '../../Utils/ComponentUtils';
+import { RecordClass, RecordInstance } from '../../Utils/WdkModel';
 
-let RecordActionLink = (props) => {
-  let className = 'wdk-RecordActionLink ' + props.className;
-  let LinkComponent = props.external ? 'a' : Link;
-  let linkProps = {
+interface RecordActionLinkProps {
+  record: RecordInstance;
+  recordClass: RecordClass;
+  className?: string;
+  iconClassName?: string;
+  onClick?: () => void;
+  href?: string;
+  label?: string;
+  showLabel?: boolean;
+  external?: boolean;
+}
+
+const RecordActionLink: React.FC<RecordActionLinkProps> = (props) => {
+  const className = 'wdk-RecordActionLink ' + (props.className || '');
+  const LinkComponent = props.external ? 'a' : Link;
+  const linkProps = {
     [props.external ? 'href' : 'to']: props.href,
     title: props.label,
     className: className,
     onClick: props.onClick,
   };
+
   return (
     <LinkComponent {...linkProps}>
       {props.showLabel ? props.label : ''} <i className={props.iconClassName} />
@@ -19,17 +32,6 @@ let RecordActionLink = (props) => {
   );
 };
 
-RecordActionLink.propTypes = {
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  iconClassName: PropTypes.string,
-  onClick: PropTypes.func,
-  href: PropTypes.string,
-  label: PropTypes.string,
-  showLabel: PropTypes.bool,
-};
-
 RecordActionLink.defaultProps = {
   href: '#',
   external: false,
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.jsx b/packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.tsx
similarity index 60%
rename from packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.tsx
index 3f1d03846a..31de6465fc 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordAttributes/RecordAttribute.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { renderAttributeValue, wrappable } from '../../../Utils/ComponentUtils';
+import {
+  RecordInstance,
+  AttributeField,
+  RecordClass,
+} from '../../../Utils/WdkModel';
+
+interface RecordAttributeProps {
+  attribute: AttributeField;
+  record: RecordInstance;
+  recordClass: RecordClass;
+}
 
 /** Attribute value */
-function RecordAttribute(props) {
+function RecordAttribute(props: RecordAttributeProps) {
   const { record, attribute } = props;
   const value = record.attributes[attribute.name];
   if (value == null) return <em>No data available</em>;
   return renderAttributeValue(record.attributes[attribute.name], null, 'div');
 }
 
-RecordAttribute.propTypes = {
-  attribute: PropTypes.object.isRequired,
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-};
-
 export default wrappable(RecordAttribute);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordHeading.jsx b/packages/libs/wdk-client/src/Views/Records/RecordHeading.tsx
similarity index 58%
rename from packages/libs/wdk-client/src/Views/Records/RecordHeading.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordHeading.tsx
index c1df45f56c..5b2568d675 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordHeading.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordHeading.tsx
@@ -1,10 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+import { RecordClass, RecordInstance } from '../../Utils/WdkModel';
 import { safeHtml, wrappable } from '../../Utils/ComponentUtils';
 import RecordActionLink from '../../Views/Records/RecordActionLink';
 
-let RecordHeading = (props) => {
-  let {
+export interface HeaderAction {
+  className?: string;
+  iconClassName?: string;
+  onClick?: () => void;
+  href?: string;
+  label?: string;
+  showLabel?: boolean;
+  external?: boolean;
+}
+
+export interface RecordHeadingProps {
+  record: RecordInstance;
+  recordClass: RecordClass;
+  headerActions: HeaderAction[];
+  displayName?: ReactNode;
+}
+
+const RecordHeading: React.FC<RecordHeadingProps> = (props) => {
+  const {
     record,
     recordClass,
     headerActions,
@@ -30,10 +47,4 @@ let RecordHeading = (props) => {
   );
 };
 
-RecordHeading.propTypes = {
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-  headerActions: PropTypes.arrayOf(PropTypes.object),
-};
-
 export default wrappable(RecordHeading);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordLink.jsx b/packages/libs/wdk-client/src/Views/Records/RecordLink.jsx
deleted file mode 100644
index 277c751166..0000000000
--- a/packages/libs/wdk-client/src/Views/Records/RecordLink.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from '../../Components/Link/Link';
-import { wrappable } from '../../Utils/ComponentUtils';
-
-let idPartPropType = PropTypes.shape({
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-});
-
-function RecordLink(props) {
-  let { recordClass, recordId } = props;
-  let pkValues = recordId.map((p) => p.value).join('/');
-
-  return (
-    <Link to={`/record/${recordClass.urlSegment}/${pkValues}`}>
-      {props.children}
-    </Link>
-  );
-}
-
-RecordLink.propTypes = {
-  recordId: PropTypes.arrayOf(idPartPropType).isRequired,
-  recordClass: PropTypes.object.isRequired,
-};
-
-export default wrappable(RecordLink);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordLink.tsx b/packages/libs/wdk-client/src/Views/Records/RecordLink.tsx
new file mode 100644
index 0000000000..85e2647b0d
--- /dev/null
+++ b/packages/libs/wdk-client/src/Views/Records/RecordLink.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import Link from '../../Components/Link/Link';
+import { wrappable } from '../../Utils/ComponentUtils';
+import { RecordClass, PrimaryKey } from '../../Utils/WdkModel';
+
+interface RecordLinkProps {
+  recordId: PrimaryKey;
+  recordClass: RecordClass;
+  children?: ReactNode;
+  className?: string;
+}
+
+function RecordLink(props: RecordLinkProps) {
+  let { recordClass, recordId, className } = props;
+  let pkValues = recordId.map((p) => p.value).join('/');
+
+  return (
+    <Link
+      to={`/record/${recordClass.urlSegment}/${pkValues}`}
+      className={className}
+    >
+      {props.children}
+    </Link>
+  );
+}
+
+export default wrappable(RecordLink);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.jsx b/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.tsx
similarity index 69%
rename from packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.tsx
index d5fd20098a..9a9c203a86 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainCategorySection.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import RecordAttributeSection from '../../../Views/Records/RecordAttributes/RecordAttributeSection';
 import RecordTableSection from '../../../Views/Records/RecordTable/RecordTableSection';
@@ -8,13 +7,31 @@ import {
   getId,
   getTargetType,
   getDisplayName,
+  CategoryTreeNode,
+  IndividualNode,
 } from '../../../Utils/CategoryUtils';
+import { RecordInstance, RecordClass } from '../../../Utils/WdkModel';
+import { TableState } from '../../../StoreModules/RecordStoreModule';
+
+export interface Props {
+  category: CategoryTreeNode;
+  depth: number;
+  enumeration: string;
+  isCollapsed: boolean;
+  onSectionToggle: (categoryId: string, isVisible: boolean) => void;
+  record: RecordInstance;
+  recordClass: RecordClass;
+  tableStates: Record<string, TableState>;
+  updateTableState: (tableName: string, tableState: TableState) => void;
+  requestPartialRecord: (request: any) => void;
+  children?: React.ReactElement;
+}
 
 /**
  * Content for a node of a record category tree, or a record field.
  */
-class RecordMainCategorySection extends React.PureComponent {
-  constructor(props) {
+class RecordMainCategorySection extends React.PureComponent<Props> {
+  constructor(props: Props) {
     super(props);
     this.toggleCollapse = this.toggleCollapse.bind(this);
   }
@@ -50,7 +67,7 @@ class RecordMainCategorySection extends React.PureComponent {
       case 'attribute':
         return (
           <RecordAttributeSection
-            attribute={category.wdkReference}
+            attribute={(category as IndividualNode).wdkReference as any}
             ontologyProperties={category.properties}
             record={record}
             recordClass={recordClass}
@@ -60,13 +77,14 @@ class RecordMainCategorySection extends React.PureComponent {
           />
         );
 
-      case 'table':
+      case 'table': {
+        const individualCategory = category as IndividualNode;
         return (
           <RecordTableSection
-            table={category.wdkReference}
-            tableState={tableStates[category.wdkReference.name]}
+            table={individualCategory.wdkReference as any}
+            tableState={tableStates[individualCategory.wdkReference.name]}
             updateTableState={(tableState) =>
-              updateTableState(category.wdkReference.name, tableState)
+              updateTableState(individualCategory.wdkReference.name, tableState)
             }
             ontologyProperties={category.properties}
             record={record}
@@ -76,11 +94,12 @@ class RecordMainCategorySection extends React.PureComponent {
             requestPartialRecord={requestPartialRecord}
           />
         );
+      }
 
       default: {
         let id = getId(category);
         let categoryName = getDisplayName(category);
-        let Header = 'h' + Math.min(depth + 2, 6);
+        let Header = ('h' + Math.min(depth + 2, 6)) as keyof React.ReactHTML;
         let headerContent = (
           <span>
             {categoryName}
@@ -94,11 +113,12 @@ class RecordMainCategorySection extends React.PureComponent {
           </span>
         );
         if (depth === 0) {
+          const HeaderElement = Header as any;
           return (
             <>
-              <Header id={id} className="wdk-RecordSectionHeader">
+              <HeaderElement id={id} className="wdk-RecordSectionHeader">
                 {headerContent}
-              </Header>
+              </HeaderElement>
               <div className="wdk-RecordSectionChildren">{children}</div>
             </>
           );
@@ -120,15 +140,4 @@ class RecordMainCategorySection extends React.PureComponent {
   }
 }
 
-RecordMainCategorySection.propTypes = {
-  category: PropTypes.object.isRequired,
-  depth: PropTypes.number.isRequired,
-  enumeration: PropTypes.string.isRequired,
-  isCollapsed: PropTypes.bool.isRequired,
-  onSectionToggle: PropTypes.func.isRequired,
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-  children: PropTypes.element,
-};
-
 export default wrappable(RecordMainCategorySection);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.jsx b/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.tsx
similarity index 70%
rename from packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.tsx
index 2b5e66bd1e..ede587a07c 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordMain/RecordMainSection.tsx
@@ -1,14 +1,29 @@
-import PropTypes from 'prop-types';
 import { flowRight } from 'lodash';
 import React from 'react';
 import RecordMainCategorySection from '../../../Views/Records/RecordMain/RecordMainCategorySection';
 import { pure, wrappable } from '../../../Utils/ComponentUtils';
-import { getId, getLabel } from '../../../Utils/CategoryUtils';
+import { getId, getLabel, CategoryTreeNode } from '../../../Utils/CategoryUtils';
+import { RecordInstance, RecordClass } from '../../../Utils/WdkModel';
+import { TableState } from '../../../StoreModules/RecordStoreModule';
+import { PartialRecordRequest } from '../../../Views/Records/RecordUtils';
+
+interface RecordMainSectionProps {
+  depth?: number;
+  record: RecordInstance;
+  recordClass: RecordClass;
+  tableStates: Record<string, TableState>;
+  updateTableState: (tableName: string, tableState: TableState) => void;
+  categories: CategoryTreeNode[] | null;
+  collapsedSections: string[];
+  parentEnumeration?: string;
+  onSectionToggle: (categoryId: string, isVisible: boolean) => void;
+  requestPartialRecord: (request: PartialRecordRequest) => void;
+}
 
 /** @type {React.FunctionComponent} */
-let RecordMainSection$;
+let RecordMainSection$: React.FunctionComponent<RecordMainSectionProps>;
 
-const RecordMainSection = ({
+const RecordMainSection: React.FC<RecordMainSectionProps> = ({
   depth = 0,
   record,
   recordClass,
@@ -63,17 +78,6 @@ const RecordMainSection = ({
     </>
   );
 
-RecordMainSection.propTypes = {
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-  tableStates: PropTypes.object.isRequired,
-  categories: PropTypes.array.isRequired,
-  collapsedSections: PropTypes.array.isRequired,
-  onSectionToggle: PropTypes.func.isRequired,
-  depth: PropTypes.number,
-  parentEnumeration: PropTypes.string,
-};
-
 // Append `$` so we can refer to this component recursively. We want to reserve
 // the normal name `RecordMainSection` for the inner function for debugging purposes.
 RecordMainSection$ = flowRight(wrappable, pure)(RecordMainSection);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.jsx b/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.tsx
similarity index 72%
rename from packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.tsx
index 0492e21c11..e7f933a9f9 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationItem.tsx
@@ -1,15 +1,32 @@
 import React, { useMemo } from 'react';
 import { makeClassNameHelper, wrappable } from '../../../Utils/ComponentUtils';
-import { getId, getDisplayName } from '../../../Utils/CategoryUtils';
+import {
+  getId,
+  getDisplayName,
+  CategoryTreeNode,
+  isIndividual,
+} from '../../../Utils/CategoryUtils';
 
 import { preorderSeq } from '../../../Utils/TreeUtils';
 
 let cx = makeClassNameHelper('wdk-RecordNavigationItem');
 
-let RecordNavigationItem = ({ node, activeSection, onSectionToggle }) => {
+interface RecordNavigationItemProps {
+  node: CategoryTreeNode;
+  activeSection: string;
+  onSectionToggle: (id: string, value?: boolean) => void;
+  path?: string[];
+  checked?: boolean;
+}
+
+let RecordNavigationItem = ({
+  node,
+  activeSection,
+  onSectionToggle,
+}: RecordNavigationItemProps) => {
   let id = getId(node);
   let displayName = getDisplayName(node);
-  let isField = node.wdkReference != null;
+  let isField = isIndividual(node) && node.wdkReference != null;
 
   let isActive = useMemo(
     () => preorderSeq(node).some((node) => getId(node) === activeSection),
@@ -40,7 +57,7 @@ let RecordNavigationItem = ({ node, activeSection, onSectionToggle }) => {
         }
 
         const navSectionIsExpanded =
-          event.target.closest('li')?.querySelector('ul') != null;
+          event.currentTarget.closest('li')?.querySelector('ul') != null;
 
         // Prevent nav section toggle if the corresponding section is not active
         // and the nav section is expanded.
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.jsx b/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.jsx
deleted file mode 100644
index 8539c52fb3..0000000000
--- a/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
-import { includes, stubTrue } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import CategoriesCheckboxTree from '../../../Components/CheckboxTree/CategoriesCheckboxTree';
-import { getId } from '../../../Utils/CategoryUtils';
-import { safeHtml, wrappable } from '../../../Utils/ComponentUtils';
-import RecordNavigationItem from '../../../Views/Records/RecordNavigation/RecordNavigationItem';
-
-/** Navigation panel for record page */
-class RecordNavigationSection extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleSearchTermChange = this.handleSearchTermChange.bind(this);
-    this.state = { activeCategory: null };
-  }
-
-  handleSearchTermChange(term) {
-    this.props.onNavigationQueryChange(term);
-  }
-
-  render() {
-    let {
-      activeSection,
-      categoryTree,
-      collapsedSections,
-      heading,
-      navigationQuery,
-      navigationCategoriesExpanded,
-      onNavigationCategoryExpansionChange,
-      onSectionToggle,
-      visibilityFilter = stubTrue,
-      visibilityToggle,
-    } = this.props;
-
-    return (
-      <div className="wdk-RecordNavigationSection">
-        <div className="wdk-RecordNavigationSectionHeader">
-          {safeHtml(heading, null, 'h1')}
-          {visibilityToggle}
-        </div>
-        <CategoriesCheckboxTree
-          disableHelp
-          visibilityFilter={visibilityFilter}
-          searchBoxPlaceholder="Search section names..."
-          tree={categoryTree}
-          leafType="section"
-          isSelectable={false}
-          expandedBranches={navigationCategoriesExpanded}
-          onUiChange={onNavigationCategoryExpansionChange}
-          searchTerm={navigationQuery}
-          onSearchTermChange={this.handleSearchTermChange}
-          renderNode={(node, path) => (
-            <RecordNavigationItem
-              node={node}
-              path={path}
-              activeSection={activeSection}
-              onSectionToggle={onSectionToggle}
-              checked={!includes(collapsedSections, getId(node))}
-            />
-          )}
-          linksPosition={LinksPosition.Top}
-          styleOverrides={{
-            treeSection: {
-              ul: {
-                padding: '0 0 0 1em',
-              },
-            },
-            treeNode: {
-              nodeWrapper: {
-                alignItems: 'center',
-              },
-            },
-          }}
-        />
-      </div>
-    );
-  }
-}
-
-RecordNavigationSection.propTypes = {
-  collapsedSections: PropTypes.array,
-  onSectionToggle: PropTypes.func,
-  heading: PropTypes.node,
-};
-
-RecordNavigationSection.defaultProps = {
-  onSectionToggle: function noop() {},
-  heading: 'Contents',
-};
-
-export default wrappable(RecordNavigationSection);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.tsx b/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.tsx
new file mode 100644
index 0000000000..fc4ae3f31b
--- /dev/null
+++ b/packages/libs/wdk-client/src/Views/Records/RecordNavigation/RecordNavigationSection.tsx
@@ -0,0 +1,114 @@
+import { LinksPosition } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
+import { includes, stubTrue } from 'lodash';
+import React from 'react';
+import CategoriesCheckboxTree from '../../../Components/CheckboxTree/CategoriesCheckboxTree';
+import { CategoryTreeNode, getId } from '../../../Utils/CategoryUtils';
+import {
+  safeHtml,
+  wrappable,
+  ComponentWrapper,
+} from '../../../Utils/ComponentUtils';
+import RecordNavigationItem from '../../../Views/Records/RecordNavigation/RecordNavigationItem';
+
+/** Navigation panel for record page */
+interface RecordNavigationSectionProps {
+  activeSection: string;
+  categoryTree: CategoryTreeNode;
+  collapsedSections: string[];
+  heading?: React.ReactNode;
+  navigationQuery: string;
+  navigationCategoriesExpanded: string[];
+  onNavigationCategoryExpansionChange: (ids: string[]) => void;
+  onNavigationQueryChange: (term: string) => void;
+  onSectionToggle?: (id: string, value?: boolean) => void;
+  visibilityFilter?: (node: CategoryTreeNode) => boolean;
+  visibilityToggle?: React.ReactNode;
+}
+
+interface RecordNavigationSectionState {
+  activeCategory: null | string;
+}
+
+class RecordNavigationSection extends React.PureComponent<
+  RecordNavigationSectionProps,
+  RecordNavigationSectionState
+> {
+  static defaultProps: Partial<RecordNavigationSectionProps> = {
+    onSectionToggle: () => {},
+    heading: 'Contents',
+  };
+
+  constructor(props: RecordNavigationSectionProps) {
+    super(props);
+    this.handleSearchTermChange = this.handleSearchTermChange.bind(this);
+    this.state = { activeCategory: null };
+  }
+
+  handleSearchTermChange(term: string): void {
+    this.props.onNavigationQueryChange(term);
+  }
+
+  render(): React.ReactNode {
+    let {
+      activeSection,
+      categoryTree,
+      collapsedSections,
+      heading,
+      navigationQuery,
+      navigationCategoriesExpanded,
+      onNavigationCategoryExpansionChange,
+      onSectionToggle,
+      visibilityFilter = stubTrue,
+      visibilityToggle,
+    } = this.props;
+
+    return (
+      <div className="wdk-RecordNavigationSection">
+        <div className="wdk-RecordNavigationSectionHeader">
+          {safeHtml(heading as string, null, 'h1')}
+          {visibilityToggle}
+        </div>
+        <CategoriesCheckboxTree
+          {...({
+            disableHelp: true,
+            visibilityFilter,
+            searchBoxPlaceholder: 'Search section names...',
+            tree: categoryTree,
+            leafType: 'section',
+            isSelectable: false,
+            expandedBranches: navigationCategoriesExpanded,
+            onUiChange: onNavigationCategoryExpansionChange,
+            searchTerm: navigationQuery,
+            onSearchTermChange: this.handleSearchTermChange,
+            renderNode: (node: any, path: any) => (
+              <RecordNavigationItem
+                node={node}
+                path={path}
+                activeSection={activeSection}
+                onSectionToggle={onSectionToggle || (() => {})}
+                checked={!includes(collapsedSections, getId(node))}
+              />
+            ),
+            linksPosition: LinksPosition.Top,
+            styleOverrides: {
+              treeSection: {
+                ul: {
+                  padding: '0 0 0 1em',
+                },
+              },
+              treeNode: {
+                nodeWrapper: {
+                  alignItems: 'center',
+                },
+              },
+            },
+          } as any)}
+        />
+      </div>
+    );
+  }
+}
+
+export default wrappable<RecordNavigationSectionProps>(
+  RecordNavigationSection
+) as unknown as ComponentWrapper<RecordNavigationSectionProps>;
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.tsx
similarity index 59%
rename from packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.tsx
index fc2869da98..203a9636ed 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.tsx
@@ -1,7 +1,6 @@
 import { chunk, property, orderBy, toLower, uniqueId } from 'lodash';
-import React, { Component } from 'react';
-import { createSelector } from 'reselect';
-import PropTypes from 'prop-types';
+import React, { Component, ReactNode } from 'react';
+import { createSelector, Selector } from 'reselect';
 import { RecordFilter } from './RecordFilter';
 import {
   renderAttributeValue,
@@ -13,16 +12,27 @@ import {
   Mesa,
   Utils as MesaUtils,
 } from '@veupathdb/coreui/lib/components/Mesa';
+import type {
+  MesaColumn,
+  MesaStateProps,
+} from '@veupathdb/coreui/lib/components/Mesa/types';
 import {
   areTermsInStringRegexString,
   parseSearchQueryString,
 } from '../../../Utils/SearchUtils';
 import { ErrorBoundary } from '../../../Controllers';
 import { stripHTML } from '../../../Utils/DomUtils';
+import {
+  TableField,
+  RecordClass,
+  AttributeField,
+  AttributeValue,
+  LinkAttributeValue,
+} from '../../../Utils/WdkModel';
 import './RecordTable.css';
 
 // NOTE: This is very hacky because the model is not reliably providing column or sort types
-const mapSortType = (val) => {
+const mapSortType = (val: any): string => {
   if (!isNaN(parseFloat(val)) && isFinite(val)) {
     return 'number';
   }
@@ -35,16 +45,32 @@ const mapSortType = (val) => {
 // max columns for list mode
 const maxColumns = 4;
 
-const getColumns = (tableField) => tableField.attributes.map((attr) => attr);
+const getColumns = (tableField: TableField): AttributeField[] =>
+  tableField.attributes.map((attr) => attr);
 
-const getDisplayableAttributes = (tableField) =>
+const getDisplayableAttributes = (tableField: TableField): AttributeField[] =>
   tableField.attributes.filter((attr) => attr.isDisplayable);
 
-const getOrderedData = (tableValue, tableField, sortIndexMap) => {
+interface SortItem {
+  itemName: string;
+  direction: string;
+}
+
+// Enhanced TableField with clientSortSpec property at runtime
+interface TableFieldWithSort extends TableField {
+  clientSortSpec?: SortItem[];
+}
+
+const getOrderedData = (
+  tableValue: Record<string, AttributeValue>[],
+  tableField: TableFieldWithSort,
+  sortIndexMap: WeakMap<Record<string, AttributeValue>, number>
+): Record<string, AttributeValue>[] => {
   const orderedRows = orderBy(
     tableValue,
-    tableField.clientSortSpec.map(property('itemName')),
-    tableField.clientSortSpec.map(property('direction')).map(toLower)
+    tableField.clientSortSpec?.map((spec) => spec.itemName) ?? [],
+    (tableField.clientSortSpec?.map((spec) => spec.direction.toLowerCase()) ??
+      []) as ('asc' | 'desc')[]
   );
 
   // Store sort indices in WeakMap without mutating row objects
@@ -55,23 +81,85 @@ const getOrderedData = (tableValue, tableField, sortIndexMap) => {
   return orderedRows;
 };
 
+// Extended MesaColumn to include sortType property used in RecordTable
+interface RecordTableColumn extends MesaColumn<Record<string, AttributeValue>> {
+  sortType?: string;
+}
+
+interface SortState {
+  columnKey?: string;
+  direction: string;
+}
+
+interface RecordTableState {
+  searchTerm: string;
+  selectedColumnFilters: string[];
+  sort: SortState;
+}
+
+interface OrthoTableOptions {
+  isRowSelected: (row: any) => boolean;
+  [key: string]: any;
+}
+
+interface OrthoTableEventHandlers {
+  [key: string]: any;
+}
+
+interface OrthoTableProps {
+  groupBySelected?: boolean;
+  options: OrthoTableOptions & any;
+  eventHandlers: OrthoTableEventHandlers;
+  actions?: any;
+}
+
+interface RecordTableProps {
+  value: Record<string, AttributeValue>[];
+  table: TableFieldWithSort;
+  childRow?: string | React.ComponentType<{ rowIndex: number; rowData: any }>;
+  expandedRows?: number[];
+  onExpandedRowsChange?: (rows: number[]) => void;
+  className?: string;
+  onDraw?: () => void;
+  searchTerm?: string;
+  onSearchTermChange?: (searchTerm: string) => void;
+  record?: any;
+  recordClass: RecordClass;
+  ontologyProperties?: any;
+  orthoTableProps?: OrthoTableProps;
+}
+
 /**
  * Renders a record table
  */
-class RecordTable extends Component {
-  constructor(props) {
+class RecordTable extends Component<RecordTableProps, RecordTableState> {
+  private sortIndexMap: WeakMap<Record<string, AttributeValue>, number>;
+  private getColumns: Selector<RecordTableProps, AttributeField[]>;
+  private getDisplayableAttributes: Selector<
+    RecordTableProps,
+    AttributeField[]
+  >;
+  private getOrderedData: Selector<
+    RecordTableProps,
+    Record<string, AttributeValue>[]
+  >;
+
+  constructor(props: RecordTableProps) {
     super(props);
     // Instance-level WeakMap to store sort indices without mutating row objects
     this.sortIndexMap = new WeakMap();
 
-    this.getColumns = createSelector((props) => props.table, getColumns);
+    this.getColumns = createSelector(
+      (props: RecordTableProps) => props.table,
+      getColumns
+    );
     this.getDisplayableAttributes = createSelector(
-      (props) => props.table,
+      (props: RecordTableProps) => props.table,
       getDisplayableAttributes
     );
     this.getOrderedData = createSelector(
-      (props) => props.value,
-      (props) => props.table,
+      (props: RecordTableProps) => props.value,
+      (props: RecordTableProps) => props.table,
       (tableValue, tableField) =>
         getOrderedData(tableValue, tableField, this.sortIndexMap)
     );
@@ -86,26 +174,32 @@ class RecordTable extends Component {
     };
   }
 
-  onSort(column, direction) {
-    const columnKey = column.key;
+  onSort(
+    column: MesaColumn<Record<string, AttributeValue>>,
+    direction: string
+  ): void {
+    const columnKey = column.key as string;
     this.setState((state) => ({ ...state, sort: { columnKey, direction } }));
   }
 
-  onSearchTermChange(searchTerm) {
+  onSearchTermChange(searchTerm: string): void {
     this.setState((state) => ({
       ...state,
       searchTerm,
     }));
   }
 
-  onColumnFilterChange(selectedColumnFilters) {
+  onColumnFilterChange(selectedColumnFilters: string[]): void {
     this.setState((state) => ({
       ...state,
       selectedColumnFilters,
     }));
   }
 
-  wrappedChildRow(rowIndex, rowData) {
+  wrappedChildRow(
+    rowIndex: number,
+    rowData: Record<string, AttributeValue>
+  ): ReactNode {
     const { childRow: ChildRow } = this.props;
     if (!ChildRow) return;
     const content =
@@ -125,7 +219,7 @@ class RecordTable extends Component {
     );
   }
 
-  render() {
+  render(): ReactNode {
     const { value, childRow, expandedRows, onExpandedRowsChange, className } =
       this.props;
     const { sort } = this.state;
@@ -139,7 +233,7 @@ class RecordTable extends Component {
       : undefined;
 
     // Manipulate columns to match properties expected in Mesa
-    const mesaReadyColumns = columns
+    const mesaReadyColumns: RecordTableColumn[] = columns
       // NOTE: prefer to change ortho's clustalInput columns to not be displayable
       .filter((c) => c.isDisplayable && c.name !== 'clustalInput')
       .map((c) => {
@@ -161,7 +255,12 @@ class RecordTable extends Component {
         const nonNullDataValue =
           nonNullDataObject != null
             ? type === 'link'
-              ? nonNullDataObject[name]['displayText']
+              ? typeof nonNullDataObject[name] === 'object' &&
+                nonNullDataObject[name] !== null &&
+                'displayText' in nonNullDataObject[name]
+                ? (nonNullDataObject[name] as { displayText?: string })
+                    .displayText
+                : ''
               : nonNullDataObject[name]
             : undefined;
         const sortType =
@@ -186,7 +285,7 @@ class RecordTable extends Component {
 
     // Manipulate rows to match Mesa properties; this really only pertains to the
     // link properties that differ between DataTable and Mesa
-    const mesaReadyRows = data.map((d, index) => {
+    const mesaReadyRows: Record<string, any>[] = data.map((d, index) => {
       const columnsWithLinks = mesaReadyColumns.filter(
         (c) => c.key in d && 'type' in c && c.type === 'link'
       );
@@ -196,10 +295,10 @@ class RecordTable extends Component {
         return d; // Return original object unchanged
       }
 
-      let newData = { ...d };
+      let newData: Record<string, any> = { ...d };
       columnsWithLinks.forEach((col) => {
         const linkPropertyName = col.key;
-        const linkObject = d[linkPropertyName];
+        const linkObject = d[linkPropertyName] as LinkAttributeValue | null;
         newData = {
           ...newData,
           [linkPropertyName]: {
@@ -217,44 +316,44 @@ class RecordTable extends Component {
     );
     const sortType = columnToSort?.sortType ?? 'text';
 
-    const preSortedMesaRows =
+    const preSortedMesaRows: Record<string, any>[] =
       sort?.columnKey == null
         ? mesaReadyRows
         : orderBy(
             mesaReadyRows,
             (row) => {
               const { columnKey } = sort;
-              const isLinkType = columnToSort.type === 'link';
+              const isLinkType = columnToSort!.type === 'link';
               if (sortType === 'number' && isLinkType) {
-                return row[columnKey]['text'] === ''
+                return row[columnKey!]['text'] === ''
                   ? -Infinity
-                  : Number(row[columnKey]['text']);
+                  : Number(row[columnKey!]['text']);
               }
               if (sortType === 'number') {
-                return row[columnKey] == null
+                return row[columnKey!] == null
                   ? -Infinity
-                  : Number(row[columnKey]);
+                  : Number(row[columnKey!]);
               }
-              if (columnToSort.type === 'link') {
-                return row[columnKey]['text'];
+              if (columnToSort!.type === 'link') {
+                return row[columnKey!]['text'];
               }
               if (sortType === 'htmlText') {
-                return stripHTML(row[columnKey]).toLowerCase().trim();
+                return stripHTML(row[columnKey!]).toLowerCase().trim();
               }
-              return row[columnKey] == null
+              return row[columnKey!] == null
                 ? ''
-                : row[columnKey].toLowerCase().trim();
+                : row[columnKey!].toLowerCase().trim();
             },
-            [sort.direction]
+            [sort.direction.toLowerCase() as 'asc' | 'desc']
           );
 
-    const sortedMesaRows =
-      isOrthologTableWithData && this.props.orthoTableProps.groupBySelected
+    const sortedMesaRows: Record<string, any>[] =
+      isOrthologTableWithData && this.props.orthoTableProps!.groupBySelected
         ? preSortedMesaRows.sort((a, b) => {
             const aSelected =
-              this.props.orthoTableProps.options.isRowSelected(a);
+              this.props.orthoTableProps!.options.isRowSelected(a);
             const bSelected =
-              this.props.orthoTableProps.options.isRowSelected(b);
+              this.props.orthoTableProps!.options.isRowSelected(b);
             return aSelected && bSelected
               ? 0
               : aSelected
@@ -273,51 +372,63 @@ class RecordTable extends Component {
           this.state.selectedColumnFilters.includes(attr.name)
         )
       : displayableAttributes;
-    const filteredRows = sortedMesaRows.filter((row) => {
-      return searchableAttributes.some((attr) =>
-        regex.test(row[attr.name]?.text ?? row[attr.name])
-      );
+    const filteredRows: Record<string, any>[] = sortedMesaRows.filter((row) => {
+      return searchableAttributes.some((attr) => {
+        const value = row[attr.name];
+        const searchValue =
+          typeof value === 'object' && value !== null && 'text' in value
+            ? (value as { text: string }).text
+            : value;
+        return regex.test(searchValue);
+      });
     });
 
-    const tableState = {
+    const tableState: MesaStateProps<Record<string, AttributeValue>, string> = {
       rows: sortedMesaRows,
-      columns: mesaReadyColumns,
+      columns: mesaReadyColumns as MesaColumn<
+        Record<string, AttributeValue>,
+        string
+      >[],
       filteredRows: this.state.searchTerm.length ? filteredRows : undefined,
       eventHandlers: {
         onSort: this.onSort,
         onExpandedRowsChange,
         ...(isOrthologTableWithData
-          ? { ...this.props.orthoTableProps.eventHandlers }
+          ? { ...this.props.orthoTableProps!.eventHandlers }
           : {}),
       },
       uiState: {
-        sort: this.state.sort,
+        sort: {
+          columnKey: this.state.sort.columnKey ?? '',
+          direction: this.state.sort.direction as 'asc' | 'desc',
+        },
         expandedRows,
         filteredRowCount: mesaReadyRows.length - filteredRows.length,
         ...(isOrthologTableWithData &&
-        this.props.orthoTableProps.groupBySelected != null
-          ? { groupBySelected: this.props.orthoTableProps.groupBySelected }
+        this.props.orthoTableProps!.groupBySelected != null
+          ? { groupBySelected: this.props.orthoTableProps!.groupBySelected }
           : {}),
       },
       options: {
         toolbar: isOrthologTableWithData ? false : true,
         childRow: childRow ? this.wrappedChildRow : undefined,
         className: 'wdk-DataTableContainer',
-        getRowId: (rowData) => this.sortIndexMap.get(rowData),
+        getRowId: (rowData: Record<string, any>) =>
+          this.sortIndexMap.get(rowData),
         showCount: mesaReadyRows.length > 2,
         ...(isOrthologTableWithData
           ? {
-              ...this.props.orthoTableProps.options,
+              ...this.props.orthoTableProps!.options,
               selectColumnHeadingDetails: {
-                heading: clustalInputRow.displayName,
-                helpText: clustalInputRow.help,
+                heading: clustalInputRow!.displayName,
+                helpText: clustalInputRow!.help,
               },
             }
           : {}),
       },
       ...(isOrthologTableWithData
         ? {
-            actions: this.props.orthoTableProps.actions,
+            actions: this.props.orthoTableProps!.actions,
           }
         : {}),
     };
@@ -368,16 +479,4 @@ class RecordTable extends Component {
   }
 }
 
-RecordTable.propTypes = {
-  value: PropTypes.array.isRequired,
-  table: PropTypes.object.isRequired,
-  childRow: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  expandedRows: PropTypes.arrayOf(PropTypes.number),
-  onExpandedRowsChange: PropTypes.func,
-  className: PropTypes.string,
-  onDraw: PropTypes.func,
-  searchTerm: PropTypes.string,
-  onSearchTermChange: PropTypes.func,
-};
-
-export default wrappable(pure(RecordTable));
+export default wrappable(pure(RecordTable as any));
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.tsx
similarity index 73%
rename from packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.tsx
index 2351870a9b..6015c57c91 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.tsx
@@ -1,8 +1,18 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { safeHtml, wrappable } from '../../../Utils/ComponentUtils';
+import {
+  RecordClass,
+  RecordInstance,
+  TableField,
+} from '../../../Utils/WdkModel';
 
-const containerStyle = {
+interface RecordTableDescriptionProps {
+  table: TableField;
+  record: RecordInstance;
+  recordClass: RecordClass;
+}
+
+const containerStyle: React.CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
   borderLeft: '.2em solid #79a3d7',
@@ -13,10 +23,11 @@ const containerStyle = {
   marginBottom: '1em',
 };
 
-function RecordTableDescription(props) {
+function RecordTableDescription(props: RecordTableDescriptionProps) {
   const { description } = props.table;
-  const [isOverflowing, setIsOverflowing] = useState(undefined);
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] =
+    useState<boolean | undefined>(undefined);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   if (!description) return null;
 
@@ -25,7 +36,7 @@ function RecordTableDescription(props) {
       {safeHtml(
         description,
         {
-          ref: (el) => {
+          ref: (el: HTMLDivElement | null) => {
             if (el == null || isOverflowing != null) {
               return;
             }
@@ -63,10 +74,4 @@ function RecordTableDescription(props) {
   );
 }
 
-RecordTableDescription.propTypes = {
-  table: PropTypes.object.isRequired,
-  record: PropTypes.object.isRequired,
-  recordClass: PropTypes.object.isRequired,
-};
-
 export default wrappable(RecordTableDescription);
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableSection.tsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableSection.tsx
index c65cd820b4..e440f450ab 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableSection.tsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableSection.tsx
@@ -76,10 +76,7 @@ function RecordTableSection(props: Props) {
     >
       <ErrorBoundary>
         <RecordTableDescription
-          ontologyProperties={ontologyProperties}
-          table={table}
-          record={record}
-          recordClass={recordClass}
+          {...({ ontologyProperties, table, record, recordClass } as any)}
         />
         {isError ? (
           <p style={{ color: 'darkred', fontStyle: 'italic' }}>
@@ -89,21 +86,20 @@ function RecordTableSection(props: Props) {
           <p>Loading...</p>
         ) : (
           <RecordTable
-            className={className}
-            value={value}
-            table={table}
-            // @ts-ignore
-            record={record}
-            recordClass={recordClass}
-            expandedRows={tableState.expandedRows}
-            searchTerm={tableState.searchTerm}
-            ontologyProperties={ontologyProperties}
-            onExpandedRowsChange={(expandedRows) =>
-              updateTableState({ ...tableState, expandedRows })
-            }
-            onSearchTermChange={(searchTerm) =>
-              updateTableState({ ...tableState, searchTerm })
-            }
+            {...({
+              className,
+              value,
+              table,
+              record,
+              recordClass,
+              expandedRows: tableState.expandedRows,
+              searchTerm: tableState.searchTerm,
+              ontologyProperties,
+              onExpandedRowsChange: (expandedRows: number[]) =>
+                updateTableState({ ...tableState, expandedRows }),
+              onSearchTermChange: (searchTerm: string) =>
+                updateTableState({ ...tableState, searchTerm }),
+            } as any)}
           />
         )}
       </ErrorBoundary>
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx b/packages/libs/wdk-client/src/Views/Records/RecordUI.tsx
similarity index 58%
rename from packages/libs/wdk-client/src/Views/Records/RecordUI.jsx
rename to packages/libs/wdk-client/src/Views/Records/RecordUI.tsx
index e2b7ec1a2e..9bf16a5f78 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordUI.tsx
@@ -9,14 +9,48 @@ import { postorderSeq, preorderSeq } from '../../Utils/TreeUtils';
 import RecordHeading from '../../Views/Records/RecordHeading';
 import RecordMainSection from '../../Views/Records/RecordMain/RecordMainSection';
 import RecordNavigationSection from '../../Views/Records/RecordNavigation/RecordNavigationSection';
+import { RecordInstance, RecordClass } from '../../Utils/WdkModel';
+import { CategoryTreeNode } from '../../Utils/CategoryUtils';
+import { PartialRecordRequest } from '../../Views/Records/RecordUtils';
+import { TableState } from '../../StoreModules/RecordStoreModule';
+import { HeaderAction } from '../../Views/Records/RecordHeading';
 
 import '../../Views/Records/Record.css';
 
+interface RecordUIState {
+  activeSectionId: string | null;
+}
+
+interface RecordUIProps {
+  record: RecordInstance;
+  recordClass: RecordClass;
+  headerActions: HeaderAction[];
+  navigationVisible: boolean;
+  ownProps: {
+    compressedUI: boolean;
+  };
+  categoryTree: CategoryTreeNode;
+  collapsedSections: string[];
+  navigationQuery: string;
+  navigationExpanded: boolean;
+  navigationCategoriesExpanded: string[];
+  tableStates: Record<string, TableState>;
+  updateTableState: (tableName: string, tableState: TableState) => void;
+  updateSectionVisibility: (categoryId: string, isVisible: boolean) => void;
+  updateNavigationVisibility: (visible: boolean) => void;
+  updateNavigationCategoryExpansion: (ids: string[]) => void;
+  updateNavigationQuery: (term: string) => void;
+  requestPartialRecord: (request: PartialRecordRequest) => void;
+}
+
 /**
  * Renders the main UI for the WDK Record page.
  */
-class RecordUI extends Component {
-  constructor(props) {
+class RecordUI extends Component<RecordUIProps, RecordUIState> {
+  recordMainSectionNode: any = null;
+  activeSectionTop: number | null = null;
+
+  constructor(props: RecordUIProps) {
     super(props);
 
     this._updateActiveSection = this._updateActiveSection.bind(this);
@@ -34,12 +68,12 @@ class RecordUI extends Component {
     };
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this._scrollToActiveSection(true);
     this.monitorActiveSection();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: RecordUIProps): void {
     let recordChanged = prevProps.record !== this.props.record;
     if (recordChanged) {
       this._scrollToActiveSection(
@@ -48,36 +82,36 @@ class RecordUI extends Component {
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.unmonitorActiveSection();
   }
 
-  monitorActiveSection() {
+  monitorActiveSection(): void {
     window.addEventListener('scroll', this._updateActiveSection, {
       passive: true,
-    });
+    } as any);
   }
 
-  unmonitorActiveSection() {
+  unmonitorActiveSection(): void {
     window.removeEventListener('scroll', this._updateActiveSection, {
       passive: true,
-    });
+    } as any);
   }
 
-  getHeaderOffset() {
+  getHeaderOffset(): number {
     const headerOffsetString = getComputedStyle(document.body).getPropertyValue(
       '--page-offset-top'
     );
     return parseInt(headerOffsetString) || 0;
   }
 
-  _updateActiveSection() {
+  _updateActiveSection = (): void => {
     let headerOffsetPx = this.getHeaderOffset();
     let activeElement = preorderSeq(this.props.categoryTree)
       .map((node) => document.getElementById(getId(node)))
       .filter((el) => el != null)
       .findLast((el) => {
-        let rect = el.getBoundingClientRect();
+        let rect = el!.getBoundingClientRect();
         return Math.floor(rect.top) <= headerOffsetPx;
       });
     let activeSectionId = get(activeElement, 'id');
@@ -85,27 +119,27 @@ class RecordUI extends Component {
     // keep track of the activeElement's top value. This helps to determine if
     // the page's scroll position needs to be updated, when the record data is
     // updated.
-    this.activeSectionTop = activeElement?.getBoundingClientRect().top;
+    this.activeSectionTop = activeElement?.getBoundingClientRect().top ?? null;
 
     if (activeSectionId !== this.state.activeSectionId) {
-      this.setState({ activeSectionId }, () => {
+      this.setState({ activeSectionId: activeSectionId ?? null }, () => {
         this._updateUrl(this.state.activeSectionId);
       });
     }
-  }
+  };
 
-  _updateUrl(activeSection) {
+  _updateUrl = (activeSection: string | null): void => {
     let hash = activeSection ? `#${activeSection}` : '';
-    let newUrl = new URL(hash, location);
+    let newUrl = new URL(hash, location.href);
     try {
-      history.replaceState(null, null, newUrl);
+      history.replaceState(null, '', newUrl.href);
     } catch (error) {
       console.error('Could not replace history state', newUrl);
       console.error(error);
     }
-  }
+  };
 
-  _scrollToActiveSection(isFirstLoadForRecordId) {
+  _scrollToActiveSection(isFirstLoadForRecordId: boolean): void {
     const targetId = location.hash.slice(1);
     const targetNode = document.getElementById(targetId);
 
@@ -118,12 +152,13 @@ class RecordUI extends Component {
     );
 
     if (targetNode != null && sectionNode != null) {
+      const sectionId = (sectionNode as HTMLElement).id;
       if (isFirstLoadForRecordId) {
         // open the target section
-        this.props.updateSectionVisibility(sectionNode.id, true);
+        this.props.updateSectionVisibility(sectionId, true);
         const ancestorCategoryNodes = getAncestors(
           this.props.categoryTree,
-          sectionNode.id
+          sectionId
         ).slice(1);
         const ancestorNodeId = ancestorCategoryNodes.map(getId);
         this.props.updateNavigationCategoryExpansion(ancestorNodeId);
@@ -144,7 +179,7 @@ class RecordUI extends Component {
     }
   }
 
-  render() {
+  render(): React.ReactNode {
     let classNames = classnames(
       'wdk-RecordContainer',
       'wdk-RecordContainer__' + this.props.recordClass.fullName,
@@ -189,27 +224,27 @@ class RecordUI extends Component {
           <div className="wdk-RecordSidebar">
             {this.props.navigationVisible ? (
               <RecordNavigationSection
-                visibilityToggle={visibilityToggle}
-                heading={this.props.record.displayName}
-                record={this.props.record}
-                recordClass={this.props.recordClass}
-                categoryTree={this.props.categoryTree}
-                collapsedSections={this.props.collapsedSections}
-                activeSection={this.state.activeSectionId}
-                navigationQuery={this.props.navigationQuery}
-                navigationExpanded={this.props.navigationExpanded}
-                navigationCategoriesExpanded={
-                  this.props.navigationCategoriesExpanded
-                }
-                onSectionToggle={this.props.updateSectionVisibility}
-                onNavigationVisibilityChange={
-                  this.props.updateNavigationVisibility
-                }
-                onNavigationCategoryExpansionChange={
-                  this.props.updateNavigationCategoryExpansion
-                }
-                onNavigationQueryChange={this.props.updateNavigationQuery}
-                requestPartialRecord={this.props.requestPartialRecord}
+                {...({
+                  visibilityToggle,
+                  heading: this.props.record.displayName,
+                  record: this.props.record,
+                  recordClass: this.props.recordClass,
+                  categoryTree: this.props.categoryTree,
+                  collapsedSections: this.props.collapsedSections,
+                  activeSection: this.state.activeSectionId ?? '',
+                  navigationQuery: this.props.navigationQuery,
+                  navigationExpanded: this.props.navigationExpanded,
+                  navigationCategoriesExpanded:
+                    this.props.navigationCategoriesExpanded,
+                  onSectionToggle: (id: string, value?: boolean) =>
+                    this.props.updateSectionVisibility(id, value ?? false),
+                  onNavigationVisibilityChange:
+                    this.props.updateNavigationVisibility,
+                  onNavigationCategoryExpansionChange:
+                    this.props.updateNavigationCategoryExpansion,
+                  onNavigationQueryChange: this.props.updateNavigationQuery,
+                  requestPartialRecord: this.props.requestPartialRecord,
+                } as any)}
               />
             ) : (
               visibilityToggle
@@ -217,15 +252,17 @@ class RecordUI extends Component {
           </div>
           <div className="wdk-RecordMain">
             <RecordMainSection
-              ref={(c) => (this.recordMainSectionNode = findDOMNode(c))}
-              record={this.props.record}
-              recordClass={this.props.recordClass}
-              categories={this.props.categoryTree.children}
-              collapsedSections={this.props.collapsedSections}
-              onSectionToggle={this.props.updateSectionVisibility}
-              requestPartialRecord={this.props.requestPartialRecord}
-              tableStates={this.props.tableStates}
-              updateTableState={this.props.updateTableState}
+              {...({
+                ref: (c: any) => (this.recordMainSectionNode = findDOMNode(c)),
+                record: this.props.record,
+                recordClass: this.props.recordClass,
+                categories: this.props.categoryTree.children,
+                collapsedSections: this.props.collapsedSections,
+                onSectionToggle: this.props.updateSectionVisibility,
+                requestPartialRecord: this.props.requestPartialRecord,
+                tableStates: this.props.tableStates,
+                updateTableState: this.props.updateTableState,
+              } as any)}
             />
           </div>
         </div>
diff --git a/packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.jsx b/packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.tsx
similarity index 60%
rename from packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.jsx
rename to packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.tsx
index 88676429de..94712763c8 100644
--- a/packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.jsx
+++ b/packages/libs/wdk-client/src/Views/ReporterForm/DownloadForm.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 import WdkServiceJsonReporterForm from '../../Views/ReporterForm/WdkServiceJsonReporterForm';
 
-let DownloadForm = (props) => <WdkServiceJsonReporterForm {...props} />;
+type Props = Record<string, any>;
+
+const DownloadForm: React.FC<Props> = (props) => (
+  <WdkServiceJsonReporterForm {...(props as any)} />
+);
 
 export default wrappable(DownloadForm);
diff --git a/packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.jsx b/packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.tsx
similarity index 60%
rename from packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.jsx
rename to packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.tsx
index b5f5e84be3..62a3435237 100644
--- a/packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.jsx
+++ b/packages/libs/wdk-client/src/Views/ReporterForm/DownloadFormContainer.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import { WdkStatusIcon } from '../../Components/Icon/WdkStatusIcon';
 import RadioList from '../../Components/InputControls/RadioList';
 import {
@@ -7,14 +7,25 @@ import {
   safeHtml,
 } from '../../Utils/ComponentUtils';
 import DownloadForm from '../../Views/ReporterForm/DownloadForm';
+import { Reporter, RecordClass, FilterValueArray } from '../../Utils/WdkModel';
+import { ResultType } from '../../Utils/WdkResult';
 
-let NO_REPORTER_SELECTED = '_none_';
+const NO_REPORTER_SELECTED = '_none_';
 
-let ReporterSelect = (props) => {
-  let { reporters, selected, onChange } = props;
+interface ReporterSelectProps {
+  reporters: Reporter[];
+  selected: string | null;
+  onChange: (value: string) => void;
+}
+
+const ReporterSelect = (props: ReporterSelectProps): JSX.Element => {
+  const { reporters, selected, onChange } = props;
   if (reporters.length < 2) return <noscript />;
-  let nestedDivStyle = { display: 'inline-block', verticalAlign: 'top' };
-  let items = reporters.map((reporter) => ({
+  const nestedDivStyle = {
+    display: 'inline-block',
+    verticalAlign: 'top' as const,
+  };
+  const items = reporters.map((reporter) => ({
     value: reporter.name,
     display: (
       <>
@@ -33,13 +44,21 @@ let ReporterSelect = (props) => {
         </span>
       </div>
       <div style={nestedDivStyle}>
-        <RadioList items={items} value={selected} onChange={onChange} />
+        <RadioList
+          items={items}
+          value={selected ?? undefined}
+          onChange={onChange}
+        />
       </div>
     </div>
   );
 };
 
-function getTitle(scope, resultType, recordClass) {
+function getTitle(
+  scope: string | null,
+  resultType: ResultType,
+  recordClass: RecordClass
+): ReactNode {
   switch (scope) {
     case 'results':
       switch (resultType.type) {
@@ -91,21 +110,42 @@ function getTitle(scope, resultType, recordClass) {
   }
 }
 
-class DownloadFormContainer extends Component {
-  constructor(props) {
+interface DownloadFormContainerProps {
+  scope: string | null;
+  resultType: ResultType | null;
+  availableReporters: Reporter[];
+  selectedReporter: string | null;
+  recordClass: RecordClass;
+  selectReporter: (value: string) => void;
+  submitForm: (
+    resultType: ResultType,
+    selectedReporter: string,
+    formState: any,
+    viewFilters?: FilterValueArray
+  ) => Promise<void>;
+  includeTitle?: boolean;
+  includeSubmit?: boolean;
+  includeSelector?: boolean;
+  [key: string]: any;
+}
+
+class DownloadFormContainer extends Component<DownloadFormContainerProps> {
+  constructor(props: DownloadFormContainerProps) {
     super(props);
     this.onSubmit = this.onSubmit.bind(this);
   }
 
   // create parameterless form submission function for forms to use
-  async onSubmit() {
-    let { submitForm, resultType, selectedReporter, formState, viewFilters } =
+  async onSubmit(): Promise<void> {
+    const { submitForm, resultType, selectedReporter, formState, viewFilters } =
       this.props;
-    await submitForm(resultType, selectedReporter, formState, viewFilters);
+    if (selectedReporter && resultType) {
+      await submitForm(resultType, selectedReporter, formState, viewFilters);
+    }
   }
 
-  render() {
-    let {
+  render(): JSX.Element {
+    const {
       scope,
       resultType,
       availableReporters,
@@ -118,17 +158,18 @@ class DownloadFormContainer extends Component {
     } = this.props;
 
     // create page title element
-    let title = getTitle(scope, resultType, recordClass);
+    const title = resultType && getTitle(scope, resultType, recordClass);
 
     // filter props we don't want to send to the child form
-    let formProps = filterOutProps(this.props, [
+    const formProps = filterOutProps(this.props, [
       'selectReporter',
       'submitForm',
     ]);
 
     // incoming store value of null indicates no format currently selected
-    if (selectedReporter == null) {
-      selectedReporter = NO_REPORTER_SELECTED;
+    let currentSelectedReporter = selectedReporter;
+    if (currentSelectedReporter == null) {
+      currentSelectedReporter = NO_REPORTER_SELECTED;
     }
 
     return (
@@ -142,7 +183,7 @@ class DownloadFormContainer extends Component {
         {includeSelector && (
           <ReporterSelect
             reporters={availableReporters}
-            selected={selectedReporter}
+            selected={currentSelectedReporter}
             onChange={selectReporter}
           />
         )}
diff --git a/packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.jsx b/packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.tsx
similarity index 57%
rename from packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.jsx
rename to packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.tsx
index 078910cbaf..6cf7743c98 100644
--- a/packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.jsx
+++ b/packages/libs/wdk-client/src/Views/ReporterForm/PrimaryKeySpan.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 
-let PrimaryKeySpan = (props) => {
+interface PrimaryKeySpanProps {
+  primaryKeyString: string;
+}
+
+const PrimaryKeySpan: React.FC<PrimaryKeySpanProps> = (props) => {
   return <span>{props.primaryKeyString}</span>;
 };
 
diff --git a/packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.jsx b/packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.tsx
similarity index 55%
rename from packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.jsx
rename to packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.tsx
index d845e4bbfa..bffa62e0e7 100644
--- a/packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.jsx
+++ b/packages/libs/wdk-client/src/Views/ReporterForm/ReporterCheckboxList.tsx
@@ -1,13 +1,21 @@
 import React from 'react';
 import { wrappable } from '../../Utils/ComponentUtils';
 import CheckboxList from '../../Components/InputControls/CheckboxList';
+import { NamedModelEntity } from '../../Utils/WdkModel';
 
-let ReporterCheckboxList = (props) => {
-  let { title, onChange, fields, selectedFields } = props;
-  if (fields.length == 0) {
+interface ReporterCheckboxListProps {
+  title: string;
+  onChange: (value: string[]) => void;
+  fields: NamedModelEntity[];
+  selectedFields: string[];
+}
+
+const ReporterCheckboxList: React.FC<ReporterCheckboxListProps> = (props) => {
+  const { title, onChange, fields, selectedFields } = props;
+  if (fields.length === 0) {
     return <noscript />;
   }
-  let mappedFields = fields.map((val) => ({
+  const mappedFields = fields.map((val) => ({
     value: val.name,
     display: val.displayName,
   }));
diff --git a/packages/libs/wdk-client/src/Views/SiteMap/SiteMap.jsx b/packages/libs/wdk-client/src/Views/SiteMap/SiteMap.tsx
similarity index 74%
rename from packages/libs/wdk-client/src/Views/SiteMap/SiteMap.jsx
rename to packages/libs/wdk-client/src/Views/SiteMap/SiteMap.tsx
index 05f8ae3e21..bbe1f1189d 100644
--- a/packages/libs/wdk-client/src/Views/SiteMap/SiteMap.jsx
+++ b/packages/libs/wdk-client/src/Views/SiteMap/SiteMap.tsx
@@ -25,7 +25,7 @@
  *   align: String,
  *   isSortable: Boolean,
  *   isRemovable: Boolean,
- *   type: String (comes from “type” property of attribute tag),
+ *   type: String (comes from "type" property of attribute tag),
  *   category: String,
  *   truncateTo: Integer,
  *   isDisplayable: Boolean,
@@ -58,7 +58,11 @@ import Link from '../../Components/Link/Link';
 import CheckboxTree, {
   LinksPosition,
 } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
-import { getNodeChildren, getPropertyValue } from '../../Utils/OntologyUtils';
+import {
+  getNodeChildren,
+  getPropertyValue,
+  OntologyNode,
+} from '../../Utils/OntologyUtils';
 import {
   getTargetType,
   getRefName,
@@ -66,14 +70,46 @@ import {
   getDescription,
   getNodeId,
   getId,
+  isIndividual,
+  CategoryTreeNode,
 } from '../../Utils/CategoryUtils';
 import { areTermsInString, makeSearchHelpText } from '../../Utils/SearchUtils';
+import { SiteMapOntology } from '../../Actions/SiteMapActions';
+
+/**
+ * Data structure for node information used by search and display
+ */
+interface NodeData {
+  id?: string;
+  targetType?: string;
+  siteMapSpecial?: string;
+  ontologyParent?: string;
+  recordClassDisplayName?: string;
+  name?: string;
+  displayName?: string;
+  description?: string;
+}
+
+/**
+ * Props for the SiteMap component
+ */
+interface SiteMapProps {
+  tree?: SiteMapOntology;
+  expandedList: string[];
+  searchText: string;
+  siteMapActions: {
+    updateExpanded: (expandedList: string[]) => void;
+    setSearchText: (searchText: string) => void;
+  };
+}
 
 /**
  * Displays site map page, basically just a custom expandable tree
  */
-let SiteMap = (props) => {
-  let treeProps = {
+const SiteMap: React.FC<SiteMapProps> = (props) => {
+  if (!props.tree) return null;
+
+  const treeProps = {
     tree: props.tree,
     getNodeId: getNodeId,
     getNodeChildren: getNodeChildren,
@@ -106,8 +142,8 @@ let SiteMap = (props) => {
  * Collects relevant data from the node, used by the search predicate and the
  * display component.
  */
-let getNodeData = (node) => {
-  let data = {};
+const getNodeData = (node: CategoryTreeNode): NodeData => {
+  const data: NodeData = {};
   data.id = getId(node);
   data.targetType = getTargetType(node);
   data.siteMapSpecial = getPropertyValue('SiteMapSpecial', node);
@@ -117,8 +153,8 @@ let getNodeData = (node) => {
     node
   );
   data.name = getRefName(node);
-  if (node.wdkReference) {
-    let tt = data.targetType === 'search' ? '' : ' (' + data.targetType + ')';
+  if (isIndividual(node)) {
+    const tt = data.targetType === 'search' ? '' : ' (' + data.targetType + ')';
     data.displayName = node.wdkReference.displayName + tt;
     data.description = node.wdkReference.description;
   } else if (data.targetType === 'track') {
@@ -135,22 +171,25 @@ let getNodeData = (node) => {
 /**
  * Defines how to search for site-map nodes
  */
-let siteMapSearchPredicate = (node, searchQueryTerms) => {
-  let data = getNodeData(node);
-  let strings = [
+const siteMapSearchPredicate = (
+  node: CategoryTreeNode,
+  searchQueryTerms: string[]
+): boolean => {
+  const data = getNodeData(node);
+  const strings = [
     data.recordClassDisplayName,
     data.displayName /* , data.description */,
   ];
-  let searchableString = strings.join();
-  let flag = areTermsInString(searchQueryTerms, searchableString);
+  const searchableString = strings.join();
+  const flag = areTermsInString(searchQueryTerms, searchableString);
   return flag;
 };
 
 /**
  * Defines how to display site-map nodes
  */
-let renderSiteMapNode = (node) => {
-  let data = getNodeData(node);
+const renderSiteMapNode = (node: CategoryTreeNode): React.ReactElement => {
+  const data = getNodeData(node);
 
   if (data.targetType === 'search') {
     return (
@@ -164,7 +203,7 @@ let renderSiteMapNode = (node) => {
     );
   }
   if (data.siteMapSpecial) {
-    if (data.displayName.match(/ Page$/)) {
+    if (data.displayName?.match(/ Page$/)) {
       return (
         <Link to={'/record/gene/PF3D7_1133400#' + data.ontologyParent}>
           <span title={data.description}>{data.displayName}</span>
diff --git a/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.jsx b/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.jsx
deleted file mode 100644
index ea75452b4a..0000000000
--- a/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import { wrappable } from '../../Utils/ComponentUtils';
-
-/**
- * This React component is a placeholder for any application specific properties that may have added by the overriding application.
- * @type {*|Function}
- */
-function ApplicationSpecificProperties() {
-  return null;
-}
-
-ApplicationSpecificProperties.propTypes = {
-  /** The user object to be modified */
-  user: PropTypes.object.isRequired,
-
-  /** The on change handler for user profile properties inputs */
-  onPropertyChange: PropTypes.func.isRequired,
-
-  /** An array of the user properties configured in WDK model */
-  propDefs: PropTypes.array.isRequired,
-
-  /** The on change handler for preference changes */
-  onPreferenceChange: PropTypes.func.isRequired,
-};
-
-export default wrappable(ApplicationSpecificProperties);
diff --git a/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.tsx b/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.tsx
new file mode 100644
index 0000000000..7971bdba73
--- /dev/null
+++ b/packages/libs/wdk-client/src/Views/User/ApplicationSpecificProperties.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { wrappable } from '../../Utils/ComponentUtils';
+import { User, UserPreferences } from '../../Utils/WdkUser';
+import { ServiceConfig } from '../../Service/ServiceBase';
+import { UserProfileFormData } from '../../StoreModules/UserProfileStoreModule';
+
+/**
+ * Type for user profile property definitions, extending the service configuration
+ * with optional custom properties
+ */
+type UserProfileProperty = ServiceConfig['userProfileProperties'][number] & {
+  suggestText?: string;
+  isMultiLine?: boolean;
+};
+
+/**
+ * Props for the ApplicationSpecificProperties component
+ */
+interface ApplicationSpecificPropertiesProps {
+  /** The user object to be modified */
+  user: UserProfileFormData;
+
+  /** The on change handler for user profile properties inputs */
+  onPropertyChange: (
+    field: string,
+    submitAfterChange?: boolean
+  ) => (value: any) => void;
+
+  /** An array of the user properties configured in WDK model */
+  propDefs: UserProfileProperty[];
+
+  /** The on change handler for preference changes */
+  onPreferenceChange: (prefs: UserPreferences) => void;
+}
+
+/**
+ * This React component is a placeholder for any application specific properties that may have added by the overriding application.
+ */
+const ApplicationSpecificProperties: FC<ApplicationSpecificPropertiesProps> =
+  () => {
+    return null;
+  };
+
+export default wrappable(ApplicationSpecificProperties);
diff --git a/packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.jsx b/packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.tsx
similarity index 53%
rename from packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.jsx
rename to packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.tsx
index a43df07fb2..ae93f46ce0 100644
--- a/packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.jsx
+++ b/packages/libs/wdk-client/src/Views/User/Password/ChangePasswordForm.tsx
@@ -1,30 +1,73 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { wrappable, getChangeHandler } from '../../../Utils/ComponentUtils';
+import { wrappable } from '../../../Utils/ComponentUtils';
 import { SaveButton } from '@veupathdb/coreui/lib/components/buttons';
 import TextBox from '../../../Components/InputControls/TextBox';
 import { alert } from '../../../Utils/Platform';
+import { User } from '../../../Utils/WdkUser';
+import { FormStatus } from '../../../Actions/UserActions';
+
+interface PasswordForm {
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+interface UserEvents {
+  updateChangePasswordForm: (form: PasswordForm) => void;
+  savePassword: (oldPassword: string, newPassword: string) => void;
+}
+
+interface ChangePasswordFormProps {
+  /** User object */
+  user?: User;
+
+  /** Contains values for form input fields */
+  passwordForm: PasswordForm;
+
+  /** Contains current status of the form */
+  formStatus: FormStatus;
+
+  /** Contains a message for the user if status is 'error' */
+  errorMessage?: string;
+
+  /** Object containing event handler functions */
+  userEvents: UserEvents;
+}
+
+interface PasswordFieldProps {
+  name: 'oldPassword' | 'newPassword' | 'confirmPassword';
+  display: string;
+  passwordForm: PasswordForm;
+  userEvents: UserEvents;
+}
+
+const PasswordField: React.FC<PasswordFieldProps> = ({
+  name,
+  display,
+  passwordForm,
+  userEvents,
+}) => {
+  const handleChange = (newValue: string) => {
+    userEvents.updateChangePasswordForm({
+      ...passwordForm,
+      [name]: newValue,
+    });
+  };
 
-let PasswordField = (props) => {
-  let { name, display, passwordForm, userEvents } = props;
   return (
     <div style={{ margin: '5px' }}>
       <label>{display}:</label>
       <TextBox
         type="password"
         value={passwordForm[name]}
-        onChange={getChangeHandler(
-          name,
-          userEvents.updateChangePasswordForm,
-          passwordForm
-        )}
+        onChange={handleChange}
       />
     </div>
   );
 };
 
-function formValid(passwordForm) {
-  let { oldPassword, newPassword, confirmPassword } = passwordForm;
+function formValid(passwordForm: PasswordForm): boolean {
+  const { oldPassword, newPassword, confirmPassword } = passwordForm;
   if (newPassword == '') {
     alert('Uh oh!', 'New password must be non-empty.  Please try again.');
     return false;
@@ -35,17 +78,21 @@ function formValid(passwordForm) {
   return true;
 }
 
-let ChangePasswordForm = (props) => {
-  let submitHandler = function (e) {
-    e.preventDefault();
-    let form = props.passwordForm;
+const ChangePasswordForm: React.FC<ChangePasswordFormProps> = (props) => {
+  const handleSubmit = function (): void {
+    const form = props.passwordForm;
     if (formValid(form)) {
       props.userEvents.savePassword(form.oldPassword, form.newPassword);
     }
   };
+
+  const submitHandler = function (e: React.FormEvent<HTMLFormElement>): void {
+    e.preventDefault();
+    handleSubmit();
+  };
   return (
     <div style={{ margin: '0 2em' }}>
-      {props.user.isGuest ? (
+      {!props.user || props.user.isGuest ? (
         <div>You must first log on to change your password.</div>
       ) : (
         <div>
@@ -54,26 +101,30 @@ let ChangePasswordForm = (props) => {
             <form
               className="wdk-UserProfile-profileForm"
               name="userPasswordForm"
+              onSubmit={submitHandler}
             >
               <PasswordField
                 name="oldPassword"
                 display="Old Password"
-                {...props}
+                passwordForm={props.passwordForm}
+                userEvents={props.userEvents}
               />
               <PasswordField
                 name="newPassword"
                 display="New Password"
-                {...props}
+                passwordForm={props.passwordForm}
+                userEvents={props.userEvents}
               />
               <PasswordField
                 name="confirmPassword"
                 display="Confirm Password"
-                {...props}
+                passwordForm={props.passwordForm}
+                userEvents={props.userEvents}
               />
               <div style={{ marginLeft: '115px' }}>
                 <SaveButton
                   formStatus={props.formStatus}
-                  onPress={submitHandler}
+                  onPress={handleSubmit}
                   customText={{
                     save: 'Submit',
                   }}
@@ -87,31 +138,4 @@ let ChangePasswordForm = (props) => {
   );
 };
 
-ChangePasswordForm.propTypes = {
-  /** User object */
-  user: PropTypes.object.isRequired,
-
-  /** Contains values for form input fields */
-  passwordForm: PropTypes.shape({
-    oldPassword: PropTypes.string.isRequired,
-    newPassword: PropTypes.string.isRequired,
-    confirmPassword: PropTypes.string.isRequired,
-  }),
-
-  /** Contains current status of the form */
-  formStatus: PropTypes.string.isRequired, // Values: [ 'new', 'pending', 'success', 'error' ]
-
-  /** Contains a message for the user if status is 'error' */
-  errorMessage: PropTypes.string,
-
-  /** Object containing event handler functions */
-  userEvents: PropTypes.shape({
-    /** Called with the new form state object when a form input changes */
-    updateChangePasswordForm: PropTypes.func.isRequired,
-
-    /** Called when the user clicks the submit button */
-    savePassword: PropTypes.func.isRequired,
-  }),
-};
-
 export default wrappable(ChangePasswordForm);
diff --git a/packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.jsx b/packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.tsx
similarity index 77%
rename from packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.jsx
rename to packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.tsx
index 3a8b56a203..5899e2ec43 100644
--- a/packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.jsx
+++ b/packages/libs/wdk-client/src/Views/User/Password/UserPasswordReset.tsx
@@ -1,18 +1,28 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { wrappable } from '../../../Utils/ComponentUtils';
 import TextBox from '../../../Components/InputControls/TextBox';
 
+interface Props {
+  /** current email typed in textbox */
+  emailText: string;
+
+  /** message to be shown to the user */
+  message?: string;
+
+  /** event handler to call when textbox content changes */
+  updatePasswordResetEmail: (emailText: string) => void;
+
+  /** event handler to call when form is submitted */
+  submitPasswordReset: (emailText: string) => void;
+}
+
 /**
  * This React stateless function provides a link to the password change form inside a password change fieldset
- * @param props
- * @returns {XML}
- * @constructor
  */
-const UserPasswordReset = (props) => {
+const UserPasswordReset: React.FC<Props> = (props) => {
   let { emailText, message, updatePasswordResetEmail, submitPasswordReset } =
     props;
-  let submitHandler = (event) => {
+  let submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     submitPasswordReset(emailText);
   };
@@ -37,18 +47,4 @@ const UserPasswordReset = (props) => {
   );
 };
 
-UserPasswordReset.propTypes = {
-  /** current email typed in textbox */
-  emailText: PropTypes.string.isRequired,
-
-  /** message to be shown to the user */
-  message: PropTypes.string,
-
-  /** event handler to call when textbox content changes */
-  updatePasswordResetEmail: PropTypes.func.isRequired,
-
-  /** event handler to call when form is submitted */
-  submitPasswordReset: PropTypes.func.isRequired,
-};
-
 export default wrappable(UserPasswordReset);
diff --git a/packages/libs/wdk-client/src/index.d.ts b/packages/libs/wdk-client/src/index.d.ts
index c917e38cc2..0edf1d3830 100644
--- a/packages/libs/wdk-client/src/index.d.ts
+++ b/packages/libs/wdk-client/src/index.d.ts
@@ -7,3 +7,5 @@ declare module '*.png' {
   const content: string;
   export default content;
 }
+
+declare const __DEV__: boolean | undefined;