diff --git a/mathesar_ui/.eslintrc.cjs b/mathesar_ui/.eslintrc.cjs
index 2ec3f77086..6b30ababfa 100644
--- a/mathesar_ui/.eslintrc.cjs
+++ b/mathesar_ui/.eslintrc.cjs
@@ -30,6 +30,7 @@ module.exports = {
   rules: {
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'no-console': ['warn', { allow: ['error'] }],
+    'generator-star-spacing': 'off',
     'no-continue': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/ban-ts-comment': [
diff --git a/mathesar_ui/package-lock.json b/mathesar_ui/package-lock.json
index c475073dd1..cd79da17a9 100644
--- a/mathesar_ui/package-lock.json
+++ b/mathesar_ui/package-lock.json
@@ -13,7 +13,7 @@
         "dayjs": "^1.11.5",
         "fast-diff": "^1.2.0",
         "flatpickr": "^4.6.13",
-        "iter-tools": "^7.4.0",
+        "iter-tools": "^7.5.3",
         "js-cookie": "^3.0.1",
         "papaparse": "^5.4.1",
         "perfect-scrollbar": "^1.5.5",
@@ -5728,9 +5728,9 @@
       "dev": true
     },
     "node_modules/iter-tools": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/iter-tools/-/iter-tools-7.4.0.tgz",
-      "integrity": "sha512-twcHD87GOpbnfFmOtEQMcZuJzBCViNaYx4//70KkkjFcQTkKcUfcuni5G5dfO4Uyb80KIsWnVGZ4vvkpmYCNQQ==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/iter-tools/-/iter-tools-7.5.3.tgz",
+      "integrity": "sha512-iEcHpgM9cn6tsI5MewqxyEega9KPbIDytQTEnu6c0MtlQQhQFofssYuRqxCarZgUdzliepRZPwwwflE4wAIjaA==",
       "dependencies": {
         "@babel/runtime": "^7.12.1"
       }
diff --git a/mathesar_ui/package.json b/mathesar_ui/package.json
index e2dae02a4c..e6ab0e021c 100644
--- a/mathesar_ui/package.json
+++ b/mathesar_ui/package.json
@@ -56,7 +56,7 @@
     "dayjs": "^1.11.5",
     "fast-diff": "^1.2.0",
     "flatpickr": "^4.6.13",
-    "iter-tools": "^7.4.0",
+    "iter-tools": "^7.5.3",
     "js-cookie": "^3.0.1",
     "papaparse": "^5.4.1",
     "perfect-scrollbar": "^1.5.5",
diff --git a/mathesar_ui/src/component-library/common/actions/slider.ts b/mathesar_ui/src/component-library/common/actions/slider.ts
index 695a591db0..8a929d3b01 100644
--- a/mathesar_ui/src/component-library/common/actions/slider.ts
+++ b/mathesar_ui/src/component-library/common/actions/slider.ts
@@ -128,6 +128,8 @@ export default function slider(
   }
 
   function start(e: MouseEvent | TouchEvent) {
+    e.stopPropagation();
+    e.preventDefault();
     opts.onStart();
     startingValue = opts.getStartingValue();
     startingPosition = getPosition(e, opts.axis);
diff --git a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
index 609c156ecd..d442984ad0 100644
--- a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
+++ b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
@@ -32,6 +32,15 @@ export default class ImmutableSet<T> {
     return this.getNewInstance(set);
   }
 
+  /**
+   * @returns a new ImmutableSet that contains only the items that are present
+   * in both this set and the other set. The order of the items in the returned
+   * set is taken from this set (not the supplied set).
+   */
+  intersect(other: { has: (v: T) => boolean }): this {
+    return this.getNewInstance([...this].filter((v) => other.has(v)));
+  }
+
   without(itemOrItems: T | T[]): this {
     const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
     const set = new Set(this.set);
diff --git a/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts b/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
index 24938eb957..3d20add0d6 100644
--- a/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
+++ b/mathesar_ui/src/component-library/common/utils/__tests__/ImmutableSet.test.ts
@@ -20,3 +20,15 @@ test('union', () => {
   expect(a.union(empty).valuesArray()).toEqual([2, 7, 13, 19, 5]);
   expect(empty.union(a).valuesArray()).toEqual([2, 7, 13, 19, 5]);
 });
+
+test('intersect', () => {
+  const a = new ImmutableSet([2, 7, 13, 19, 5]);
+  const b = new ImmutableSet([23, 13, 3, 2]);
+  const empty = new ImmutableSet<number>();
+  expect(a.intersect(a).valuesArray()).toEqual([2, 7, 13, 19, 5]);
+  expect(a.intersect(b).valuesArray()).toEqual([2, 13]);
+  expect(b.intersect(a).valuesArray()).toEqual([13, 2]);
+  expect(a.intersect(empty).valuesArray()).toEqual([]);
+  expect(empty.intersect(a).valuesArray()).toEqual([]);
+  expect(empty.intersect(empty).valuesArray()).toEqual([]);
+});
diff --git a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
index 564ca257ee..41d9390317 100644
--- a/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
+++ b/mathesar_ui/src/components/cell-fabric/CellFabric.svelte
@@ -4,17 +4,9 @@
   This component is meant to be common for tables, queries, and for import preview
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
   import type { HorizontalAlignment } from './data-types/components/typeDefinitions';
   import type { CellColumnFabric } from './types';
 
-  type CustomEvents = {
-    onSelectionStart: { e: MouseEvent };
-    onMouseEnterCellWhileSelection: { e: MouseEvent };
-  };
-  const dispatch = createEventDispatcher<CustomEvents>();
-
   export let columnFabric: CellColumnFabric;
   export let value: unknown;
   export let recordSummary: string | undefined = undefined;
@@ -22,7 +14,6 @@
     | ((recordId: string, recordSummary: string) => void)
     | undefined = undefined;
   export let isActive = false;
-  export let isSelectedInRange = false;
   export let disabled = false;
   export let showAsSkeleton = false;
   export let horizontalAlignment: HorizontalAlignment | undefined = undefined;
@@ -31,18 +22,11 @@
   export let isIndependentOfSheet = false;
   export let showTruncationPopover = false;
   export let canViewLinkedEntities = true;
+  export let lightText = false;
 
   $: ({ cellComponentAndProps } = columnFabric);
   $: ({ component } = cellComponentAndProps);
   $: props = cellComponentAndProps.props as Record<string, unknown>;
-
-  function handleMouseDown(e: MouseEvent) {
-    dispatch('onSelectionStart', { e });
-  }
-
-  function handleMouseEnter(e: MouseEvent) {
-    dispatch('onMouseEnterCellWhileSelection', { e });
-  }
 </script>
 
 <div
@@ -50,15 +34,13 @@
   data-column-identifier={columnFabric.id}
   class:show-as-skeleton={showAsSkeleton}
   class:is-independent={isIndependentOfSheet}
-  on:mousedown={handleMouseDown}
-  on:mouseenter={handleMouseEnter}
+  class:light-text={lightText}
 >
   <svelte:component
     this={component}
     {...props}
     {columnFabric}
     {isActive}
-    {isSelectedInRange}
     {disabled}
     {isIndependentOfSheet}
     {horizontalAlignment}
@@ -70,9 +52,7 @@
     {canViewLinkedEntities}
     bind:value
     on:movementKeyDown
-    on:activate
     on:update
-    on:mouseenter
   />
 
   <div class="loader">
@@ -118,4 +98,7 @@
   .cell-fabric:not(.show-as-skeleton) .loader {
     display: none;
   }
+  .light-text {
+    color: var(--cell-text-color-processing);
+  }
 </style>
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
index 775f060aff..f8b4b71c4b 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/CellWrapper.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
 
   import CellBackground from '@mathesar/components/CellBackground.svelte';
   import type { ValueComparisonOutcome } from '@mathesar-component-library/types';
 
   import type { HorizontalAlignment } from './typeDefinitions';
 
+  const dispatch = createEventDispatcher();
+
   export let element: HTMLElement | undefined = undefined;
   export let isActive = false;
-  export let isSelectedInRange = false;
   export let disabled = false;
   export let mode: 'edit' | 'default' = 'default';
   export let multiLineTruncate = false;
@@ -26,58 +27,28 @@
    */
   export let horizontalAlignment: HorizontalAlignment = 'left';
 
-  let isFocused = false;
-
-  function shouldAutoFocus(
-    _isActive: boolean,
-    _mode: 'edit' | 'default',
-  ): boolean {
-    if (!_isActive) {
-      // Don't auto-focus inactive cells
-      return false;
-    }
-    if (_mode === 'edit') {
-      // Don't auto-focus cells in edit mode
-      return false;
-    }
+  /**
+   * This function exists to ensure that the cell is focused after the user
+   * moves from edit mode to default mode via pressing Enter.
+   */
+  function autoFocus() {
     if (!element) {
       // Can't focus if we haven't mounted an element yet
-      return false;
-    }
-    if (element.contains(document.activeElement)) {
-      // Don't auto-focus if the cell contains another element that is already
-      // focused (e.g. an input).
-      return false;
+      return;
     }
-    return true;
-  }
-
-  async function handleStateChange(
-    _isActive: boolean,
-    _mode: 'edit' | 'default',
-  ) {
-    await tick();
-    if (shouldAutoFocus(_isActive, _mode)) {
-      element?.focus();
+    if (!element.contains(document.activeElement)) {
+      // Only auto-focus when the cell contains another element that is already
+      // focused (e.g. an input). If the user moves from edit mode to default
+      // mode via clicking on some UI element outside sheet, then we _don't_
+      // want to focus the cell. We want to keep the focus on the other UI
+      // element that they clicked.
+      return;
     }
-  }
-  $: void handleStateChange(isActive, mode);
-
-  function handleFocus() {
-    isFocused = true;
-    // Note: you might think we ought to automatically activate the cell at this
-    // point to ensure that we don't have any cells which are focused but not
-    // active. I tried this and it caused bugs with selecting columns and rows
-    // via header cells. I didn't want to spend time tracking them down because
-    // we are planning to refactor the cell selection logic soon anyway. It
-    // doesn't _seem_ like we have any code which focuses the cell without
-    // activating it, but it would be nice to eventually build a better
-    // guarantee into the codebase which prevents cells from being focused
-    // without being activated.
+    element.focus();
   }
 
-  function handleBlur() {
-    isFocused = false;
+  $: if (mode === 'default') {
+    autoFocus();
   }
 
   function handleCopy(e: ClipboardEvent) {
@@ -91,12 +62,21 @@
       e.stopPropagation();
     }
   }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (mode === 'edit') {
+      // In edit mode we want to capture mousedown events and prevent them from
+      // propagating to the sheet where mousedown events are used to select
+      // cells. Without this call, clicking inside a cell input would cause the
+      // cell to exit edit mode.
+      e.stopPropagation();
+    }
+    dispatch('mousedown', e);
+  }
 </script>
 
 <div
   class="cell-wrapper"
-  class:is-active={isActive}
-  class:is-focused={isFocused}
   class:disabled
   class:is-edit-mode={mode === 'edit'}
   class:truncate={multiLineTruncate && !isIndependentOfSheet}
@@ -105,20 +85,20 @@
   class:exact-match={valueComparisonOutcome === 'exactMatch'}
   class:substring-match={valueComparisonOutcome === 'substringMatch'}
   class:no-match={valueComparisonOutcome === 'noMatch'}
+  data-active-cell={isActive ? '' : undefined}
   bind:this={element}
   on:click
   on:dblclick
-  on:mousedown
+  on:mousedown={handleMouseDown}
+  on:mouseup
   on:mouseenter
+  on:mouseleave
   on:keydown
   on:copy={handleCopy}
-  on:focus={handleFocus}
-  on:blur={handleBlur}
   tabindex={-1}
   {...$$restProps}
 >
   {#if mode !== 'edit'}
-    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelectedInRange} />
     <CellBackground
       color="var(--cell-background-color)"
       when={valueComparisonOutcome !== 'noMatch'}
@@ -144,11 +124,11 @@
       text-align: right;
     }
 
-    &.is-active {
+    &[data-active-cell] {
       box-shadow: 0 0 0 2px var(--slate-300);
       border-radius: 2px;
 
-      &.is-focused {
+      &:focus {
         box-shadow: 0 0 0 2px var(--sky-700);
       }
     }
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
index b90bff0edc..c96d4119af 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/SteppedInputCell.svelte
@@ -22,7 +22,6 @@
   type Props = CellTypeProps<Value>;
 
   export let isActive: Props['isActive'];
-  export let isSelectedInRange: Props['isSelectedInRange'];
   export let value: Props['value'];
   export let disabled: Props['disabled'];
   export let multiLineTruncate = false;
@@ -144,23 +143,15 @@
     resetEditMode();
   }
 
-  function handleMouseDown() {
-    if (!isActive) {
-      dispatch('activate');
-    }
-  }
-
   onMount(initLastSavedValue);
 </script>
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
   {disabled}
   bind:element={cellRef}
   on:dblclick={setModeToEdit}
   on:keydown={handleKeyDown}
-  on:mousedown={handleMouseDown}
   on:mouseenter
   mode={isEditMode ? 'edit' : 'default'}
   {multiLineTruncate}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts b/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
index 6caae49d45..1aa6dac858 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/__tests__/SteppedInputCell.test.ts
@@ -5,7 +5,7 @@ import SteppedInputCell from '../SteppedInputCell.svelte';
 
 const requiredProps = {
   isActive: false,
-  isSelectedInRange: false,
+  isSelected: false,
   disabled: false,
 };
 
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
index 7882714912..eeab9a7ca8 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/array/ArrayCell.svelte
@@ -14,7 +14,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -36,22 +35,14 @@
         break;
     }
   }
-
-  function handleMouseDown() {
-    if (!isActive) {
-      dispatch('activate');
-    }
-  }
 </script>
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
   on:keydown={handleWrapperKeyDown}
-  on:mousedown={handleMouseDown}
 >
   <CellValue {value}>
     {#if isDefinedNonNullable(value)}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
index fa7fb382f1..3a4b8c79fb 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/checkbox/CheckboxCell.svelte
@@ -12,7 +12,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -20,7 +19,7 @@
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
 
   let cellRef: HTMLElement;
-  let isFirstActivated = false;
+  let shouldToggleOnMouseUp = false;
 
   $: valueComparisonOutcome = compareWholeValues(searchValue, value);
 
@@ -51,19 +50,18 @@
     }
   }
 
-  function checkAndToggle(e: Event) {
-    if (!disabled && isActive && e.target === cellRef && !isFirstActivated) {
-      value = !value;
-      dispatchUpdate();
-    }
-    isFirstActivated = false;
-    cellRef?.focus();
+  function handleMouseDown() {
+    shouldToggleOnMouseUp = isActive;
   }
 
-  function handleMouseDown() {
-    if (!isActive) {
-      isFirstActivated = true;
-      dispatch('activate');
+  function handleMouseLeave() {
+    shouldToggleOnMouseUp = false;
+  }
+
+  function handleMouseUp() {
+    if (!disabled && isActive && shouldToggleOnMouseUp) {
+      value = !value;
+      dispatchUpdate();
     }
   }
 </script>
@@ -71,14 +69,14 @@
 <CellWrapper
   bind:element={cellRef}
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   {valueComparisonOutcome}
   on:mouseenter
+  on:mouseleave={handleMouseLeave}
   on:keydown={handleWrapperKeyDown}
-  on:click={checkAndToggle}
   on:mousedown={handleMouseDown}
+  on:mouseup={handleMouseUp}
 >
   {#if value === undefined}
     <Default />
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
index 68cd21e284..100e0567cb 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/date-time/DateTimeCell.svelte
@@ -7,7 +7,6 @@
   type $$Props = DateTimeCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -23,7 +22,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   highlightSubstringMatches={false}
   {isIndependentOfSheet}
@@ -32,7 +30,6 @@
   let:handleInputKeydown
   formatValue={formatForDisplay}
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
index aba9dc1f70..d1e86ee950 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/formatted-input/FormattedInputCell.svelte
@@ -7,7 +7,6 @@
   type $$Props = FormattedInputCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -24,7 +23,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
@@ -33,7 +31,6 @@
   let:handleInputKeydown
   formatValue={formatForDisplay}
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
index 91d013a31e..499be0c43a 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordCell.svelte
@@ -23,7 +23,6 @@
 
   export let isActive: $$Props['isActive'];
   export let columnFabric: $$Props['columnFabric'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let searchValue: $$Props['searchValue'] = undefined;
   export let recordSummary: $$Props['recordSummary'] = undefined;
@@ -96,7 +95,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
index 3752025c2b..69d8058e83 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte
@@ -24,7 +24,7 @@
   interface $$Props
     extends Omit<
       LinkedRecordCellProps,
-      'isActive' | 'isSelectedInRange' | 'isProcessing' | 'isIndependentOfSheet'
+      'isActive' | 'isSelected' | 'isProcessing' | 'isIndependentOfSheet'
     > {
     class?: string;
     id?: string;
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
index a6c63969fa..b4ec04d224 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/money/MoneyCell.svelte
@@ -7,7 +7,6 @@
   type $$Props = MoneyCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -20,7 +19,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -31,7 +29,6 @@
   let:handleInputKeydown
   on:movementKeyDown
   on:mouseenter
-  on:activate
   on:update
 >
   <MoneyCellInput
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
index ec4eca6442..905c048d4e 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/number/NumberCell.svelte
@@ -10,7 +10,6 @@
   type $$Props = NumberCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'];
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -24,7 +23,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   {showTruncationPopover}
@@ -34,7 +32,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
index 66992bef9d..b9423580f2 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/primary-key/PrimaryKeyCell.svelte
@@ -14,7 +14,6 @@
   const dispatch = createEventDispatcher();
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let tableId: $$Props['tableId'];
@@ -29,10 +28,6 @@
     e.stopPropagation();
   }
 
-  function handleValueMouseDown() {
-    dispatch('activate');
-  }
-
   function handleKeyDown(e: KeyboardEvent) {
     switch (e.key) {
       case 'Tab':
@@ -53,7 +48,6 @@
 
 <CellWrapper
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {isIndependentOfSheet}
   on:mouseenter
@@ -64,7 +58,7 @@
     class="primary-key-cell"
     class:is-independent-of-sheet={isIndependentOfSheet}
   >
-    <span class="value" on:mousedown={handleValueMouseDown}>
+    <span class="value">
       {#if value === undefined}
         <Default />
       {:else}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
index 951dd24e45..9d003c4ad7 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/select/SingleSelectCell.svelte
@@ -26,7 +26,6 @@
   const id = getGloballyUniqueId();
 
   export let isActive: DefinedProps['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: DefinedProps['value'] = undefined;
   export let disabled: DefinedProps['disabled'];
   export let isIndependentOfSheet: $$Props['isIndependentOfSheet'];
@@ -115,7 +114,6 @@
     aria-controls={id}
     aria-haspopup="listbox"
     {isActive}
-    {isSelectedInRange}
     {disabled}
     {isIndependentOfSheet}
     on:mousedown={handleMouseDown}
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
index 0bfc11f7bf..031035bdd5 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textarea/TextAreaCell.svelte
@@ -8,7 +8,6 @@
   type $$Props = TextAreaCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -34,7 +33,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -43,7 +41,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
index a5ef92f5c5..317a8b1b62 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/textbox/TextBoxCell.svelte
@@ -7,7 +7,6 @@
   type $$Props = TextBoxCellProps;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -21,7 +20,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -29,7 +27,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
index b91fa59169..9897637c48 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/typeDefinitions.ts
@@ -33,7 +33,6 @@ export type CellValueFormatter<T> = (
 export interface CellTypeProps<Value> {
   value: Value | null | undefined;
   isActive: boolean;
-  isSelectedInRange: boolean;
   disabled: boolean;
   searchValue?: unknown;
   isProcessing: boolean;
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
index 006dc48e2e..a51b54278d 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
+++ b/mathesar_ui/src/components/cell-fabric/data-types/components/uri/UriCell.svelte
@@ -13,7 +13,6 @@
   type $$Props = CellTypeProps<string>;
 
   export let isActive: $$Props['isActive'];
-  export let isSelectedInRange: $$Props['isSelectedInRange'];
   export let value: $$Props['value'] = undefined;
   export let disabled: $$Props['disabled'];
   export let searchValue: $$Props['searchValue'] = undefined;
@@ -24,7 +23,6 @@
 <SteppedInputCell
   bind:value
   {isActive}
-  {isSelectedInRange}
   {disabled}
   {searchValue}
   {isIndependentOfSheet}
@@ -32,7 +30,6 @@
   let:handleInputBlur
   let:handleInputKeydown
   on:movementKeyDown
-  on:activate
   on:mouseenter
   on:update
 >
diff --git a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
new file mode 100644
index 0000000000..659a4859d9
--- /dev/null
+++ b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+
+  import type { SelectedCellData } from './cellInspectorUtils';
+
+  export let selectedCellData: SelectedCellData;
+
+  $: ({ activeCellData } = selectedCellData);
+
+  // TODO:
+  //
+  // - Add two collapsible sections: "Active Cell" and "Selected Cells". This
+  //   will require some refactoring of the collapsible sections code to do this
+  //   cleanly. Ideally we should extract that code out from the table inspector
+  //   and Data Explorer inspector and put it here.
+  //
+  // - Utilize `selectedCellData.selectionData` to display the count of
+  //   selected cells.
+  //
+  // - Add other computed aggregate values for the selected cells, such as
+  //   average, sum, etc.
+</script>
+
+<div class="cell-inspector">
+  {#if activeCellData}
+    {@const { column, value, recordSummary } = activeCellData}
+    <section class="active-cell">
+      <header class="header">{$_('content')}</header>
+      <div class="content">
+        {#if column}
+          <CellFabric
+            isIndependentOfSheet={true}
+            disabled={true}
+            columnFabric={column}
+            {value}
+            {recordSummary}
+          />
+        {/if}
+      </div>
+    </section>
+  {:else}
+    {$_('select_cell_view_properties')}
+  {/if}
+</div>
+
+<style>
+  .cell-inspector {
+    padding: var(--size-x-small);
+  }
+  .header {
+    font-weight: 500;
+  }
+  .content {
+    white-space: pre-wrap;
+    border: 1px solid var(--slate-300);
+    padding: var(--size-xx-small);
+    border-radius: var(--border-radius-m);
+    margin-top: var(--size-x-small);
+  }
+</style>
diff --git a/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts b/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
new file mode 100644
index 0000000000..b493f92069
--- /dev/null
+++ b/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
@@ -0,0 +1,16 @@
+import type { CellColumnFabric } from '@mathesar/components/cell-fabric/types';
+
+interface ActiveCellData {
+  column: CellColumnFabric;
+  value: unknown;
+  recordSummary?: string;
+}
+
+interface SelectionData {
+  cellCount: number;
+}
+
+export interface SelectedCellData {
+  activeCellData?: ActiveCellData;
+  selectionData: SelectionData;
+}
diff --git a/mathesar_ui/src/components/sheet/README.md b/mathesar_ui/src/components/sheet/README.md
index 711552011a..ec8340cbe1 100644
--- a/mathesar_ui/src/components/sheet/README.md
+++ b/mathesar_ui/src/components/sheet/README.md
@@ -1,9 +1,16 @@
-This is a placeholder directory for the Sheet component which is meant to be implemented for use with Tables, Views and Data Explorer.
-
-- This would be a lower-order component.
-- It would encapsulate:
-  - Rows
-  - Cells
-- It will _not_ include column headers.
-- It would be a pure component and will _not_ hardcode requests from within the component.
-  - They would be made on the parent components utilizing the Sheet component using callbacks, events and/or by exposing a Sheet API through slot.
+# Sheet
+
+The Sheet components help us display things in a spreadsheet-like format for the table page and the data explorer.
+
+## `data-sheet-element` values
+
+We use the `data-sheet-element` HTML attribute for CSS styling and JS functionality. The values are:
+
+- `header-row`: The top most row of the sheet. It contains the column header cells.
+- `data-row`: Used for the remaining rows, including (for now) non-standard ones like grouping headers which don't contain data.
+- `positionable-cell`: Cells that span multiple columns or are taken out of regular flow e.g. "New records" message, grouping headers, etc.
+- `origin-cell`: The cell in the top-left corner of the sheet.
+- `column-header-cell`: Contains the column names.
+- `new-column-cell`: Contains the `+` button for adding a new column.
+- `row-header-cell`: Contains the row numbers.
+- `data-cell`: Regular data cells.
diff --git a/mathesar_ui/src/components/sheet/Sheet.svelte b/mathesar_ui/src/components/sheet/Sheet.svelte
index 14e24a6954..29cb469587 100644
--- a/mathesar_ui/src/components/sheet/Sheet.svelte
+++ b/mathesar_ui/src/components/sheet/Sheet.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
   import { writable } from 'svelte/store';
 
   import type { ClipboardHandler } from '@mathesar/stores/clipboard';
   import { getClipboardHandlerStoreFromContext } from '@mathesar/stores/clipboard';
+  import { getModifierKeyCombo } from '@mathesar/utils/pointerUtils';
   import { ImmutableMap } from '@mathesar-component-library/types';
 
+  import {
+    type SheetCellDetails,
+    beginSelection,
+    findContainingSheetCell,
+  } from './selection';
+  import type SheetSelectionStore from './selection/SheetSelectionStore';
   import {
     DEFAULT_COLUMN_WIDTH,
     calculateColumnStyleMapAndRowWidth,
+    focusActiveCell,
     setSheetContext,
   } from './utils';
 
@@ -22,6 +31,8 @@
   export let hasBorder = false;
   export let hasPaddingRight = false;
   export let clipboardHandler: ClipboardHandler | undefined = undefined;
+  export let selection: SheetSelectionStore | undefined = undefined;
+  export let onCellSelectionStart: (c: SheetCellDetails) => void = () => {};
 
   export let getColumnIdentifier: (
     c: SheetColumnType,
@@ -35,6 +46,8 @@
   export let columnWidths: ImmutableMap<SheetColumnIdentifierKey, number> =
     new ImmutableMap();
 
+  export let sheetElement: HTMLElement | undefined = undefined;
+
   $: ({ columnStyleMap, rowWidth } = calculateColumnStyleMapAndRowWidth(
     columns,
     getColumnIdentifier,
@@ -74,12 +87,14 @@
     },
   };
 
+  const selectionInProgress = writable(false);
   const stores = {
     columnStyleMap: writable(columnStyleMap),
     rowWidth: writable(rowWidth),
     horizontalScrollOffset: writable(horizontalScrollOffset),
     scrollOffset: writable(scrollOffset),
     paddingRight: writable(paddingRight),
+    selectionInProgress,
   };
 
   // Setting these values in stores for reactivity in context
@@ -115,6 +130,56 @@
   function disableClipboard() {
     clipboardHandlerStore?.set(undefined);
   }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (!selection) return;
+    if (!sheetElement) return;
+
+    const target = e.target as HTMLElement;
+    const targetCell = findContainingSheetCell(target);
+    if (!targetCell) return;
+
+    const startingCell: SheetCellDetails | undefined = (() => {
+      const modifierKeyCombo = getModifierKeyCombo(e);
+      if (modifierKeyCombo === '') return targetCell;
+      if (modifierKeyCombo === 'Shift') {
+        if (!$selection) return undefined;
+        const { activeCellId } = $selection;
+        if (!activeCellId) return undefined;
+        return { type: 'data-cell', cellId: activeCellId };
+      }
+      return undefined;
+    })();
+    if (!startingCell) return;
+
+    // If we're selecting cells, then we need to prevent this mouse event from
+    // inadvertently setting clicked elements to become focused. If they get
+    // focused then there can be race conditions which (sometimes) prevent the
+    // active cell within the selection from becoming focused. For example, this
+    // problem can happen when clicking on column header cells to select all
+    // cells in the column.
+    e.preventDefault();
+
+    beginSelection({
+      selection,
+      sheetElement,
+      startingCell,
+      targetCell,
+      selectionInProgress,
+    });
+
+    if (startingCell === targetCell) {
+      onCellSelectionStart(targetCell);
+    }
+  }
+
+  onMount(() =>
+    selection?.on('focus', async () => {
+      if (!sheetElement) return;
+      await tick();
+      focusActiveCell(sheetElement);
+    }),
+  );
 </script>
 
 <div
@@ -122,10 +187,12 @@
   class:has-border={hasBorder}
   class:uses-virtual-list={usesVirtualList}
   class:set-to-row-width={restrictWidthToRowWidth}
+  class:selection-in-progress={$selectionInProgress}
   {style}
-  on:click
+  on:mousedown={handleMouseDown}
   on:focusin={enableClipboard}
   on:focusout={disableClipboard}
+  bind:this={sheetElement}
 >
   {#if columns.length}
     <slot />
@@ -140,10 +207,11 @@
     --z-index__sheet__column-resizer: 2;
     --z-index__sheet__active-cell: 3;
     --z-index__sheet__row-header-cell: 4;
-    --z-index__sheet__group-header: 5;
-    --z-index__sheet__new-record-message: 6;
-    --z-index__sheet__horizontal-scrollbar: 7;
-    --z-index__sheet__vertical-scrollbar: 8;
+    --z-index__sheet__positionable-cell: 5;
+    --z-index__sheet__column-header-cell: 6;
+    --z-index__sheet__origin-cell: 7;
+    --z-index__sheet__horizontal-scrollbar: 8;
+    --z-index__sheet__vertical-scrollbar: 9;
 
     --virtual-list-horizontal-scrollbar-z-index: var(
       --z-index__sheet__horizontal-scrollbar
@@ -169,34 +237,12 @@
       min-width: 100%;
     }
 
-    :global([data-sheet-element='cell']) {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      border-bottom: var(--cell-border-horizontal);
-      border-right: var(--cell-border-vertical);
-      left: 0;
-      top: 0;
-      height: 100%;
-    }
-
-    :global([data-sheet-element='cell'][data-cell-static='true']) {
-      position: sticky;
-      z-index: var(--z-index__sheet__row-header-cell);
-    }
-
-    :global([data-sheet-element='cell'][data-cell-control='true']) {
-      font-size: var(--text-size-x-small);
-      padding: 0 1.5rem;
-      justify-content: center;
-      color: var(--color-text-muted);
-      display: inline-flex;
-      align-items: center;
-      height: 100%;
+    :global([data-sheet-element='data-row']) {
+      transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
     }
 
-    :global([data-sheet-element='row']) {
-      transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+    &.selection-in-progress :global(*) {
+      cursor: default;
     }
   }
 </style>
diff --git a/mathesar_ui/src/components/sheet/SheetCell.svelte b/mathesar_ui/src/components/sheet/SheetCell.svelte
deleted file mode 100644
index fb70966943..0000000000
--- a/mathesar_ui/src/components/sheet/SheetCell.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { getSheetContext } from './utils';
-
-  type SheetColumnIdentifierKey = $$Generic;
-
-  const { stores } = getSheetContext();
-  const { columnStyleMap } = stores;
-
-  export let columnIdentifierKey: SheetColumnIdentifierKey;
-
-  $: styleMap = $columnStyleMap.get(columnIdentifierKey);
-
-  export let isStatic = false;
-  export let isControlCell = false;
-
-  $: htmlAttributes = {
-    'data-sheet-element': 'cell',
-    'data-cell-static': isStatic ? true : undefined,
-    'data-cell-control': isControlCell ? true : undefined,
-  };
-</script>
-
-<slot {htmlAttributes} style={styleMap?.styleString} />
diff --git a/mathesar_ui/src/components/sheet/SheetCellResizer.svelte b/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
index 09e9c9dc50..e53d19f1ea 100644
--- a/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
+++ b/mathesar_ui/src/components/sheet/SheetCellResizer.svelte
@@ -5,16 +5,19 @@
 
   type SheetColumnIdentifierKey = $$Generic;
 
-  const { api } = getSheetContext<SheetColumnIdentifierKey>();
+  const { api, stores } = getSheetContext<SheetColumnIdentifierKey>();
 
   export let minColumnWidth = 50;
   export let columnIdentifierKey: SheetColumnIdentifierKey;
 
   let isResizing = false;
+
+  $: ({ selectionInProgress } = stores);
 </script>
 
 <div
   class="column-resizer"
+  class:selection-in-progress={$selectionInProgress}
   class:is-resizing={isResizing}
   use:slider={{
     getStartingValue: () => api.getColumnWidth(columnIdentifierKey),
@@ -54,4 +57,7 @@
   .column-resizer:not(:hover):not(.is-resizing) .indicator {
     display: none;
   }
+  .column-resizer.selection-in-progress {
+    display: none;
+  }
 </style>
diff --git a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
index 26bcd2a853..c499ed0d47 100644
--- a/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
+++ b/mathesar_ui/src/components/sheet/SheetClipboardHandler.ts
@@ -1,45 +1,44 @@
 import * as Papa from 'papaparse';
-import { get } from 'svelte/store';
 
-import SheetSelection, {
-  isCellSelected,
-} from '@mathesar/components/sheet/SheetSelection';
 import type { AbstractTypeCategoryIdentifier } from '@mathesar/stores/abstract-types/types';
 import type { ClipboardHandler } from '@mathesar/stores/clipboard';
-import type {
-  ProcessedColumn,
-  RecordRow,
-  RecordSummariesForSheet,
-} from '@mathesar/stores/table-data';
-import type { QueryRow } from '@mathesar/systems/data-explorer/QueryRunner';
-import type { ProcessedQueryOutputColumn } from '@mathesar/systems/data-explorer/utils';
+import type { RecordSummariesForSheet } from '@mathesar/stores/table-data';
 import type { ReadableMapLike } from '@mathesar/typeUtils';
 import { labeledCount } from '@mathesar/utils/languageUtils';
-import { ImmutableSet, type MakeToast } from '@mathesar-component-library';
+import type { ImmutableSet } from '@mathesar-component-library';
 
 const MIME_PLAIN_TEXT = 'text/plain';
 const MIME_MATHESAR_SHEET_CLIPBOARD =
   'application/x-vnd.mathesar-sheet-clipboard';
 
-/** Keys are row ids, values are records */
-type IndexedRecords = Map<number, Record<string, unknown>>;
+/**
+ * A column which allows the cells in it to be copied.
+ */
+interface CopyableColumn {
+  abstractType: { identifier: AbstractTypeCategoryIdentifier };
+  formatCellValue: (
+    cellValue: unknown,
+    recordSummaries?: RecordSummariesForSheet,
+  ) => string | null | undefined;
+}
 
-function getRawCellValue<
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
->(
-  indexedRecords: IndexedRecords,
-  rowId: number,
-  columnId: Column['id'],
-): unknown {
-  return indexedRecords.get(rowId)?.[String(columnId)];
+/**
+ * This is the stuff we need to know from the sheet in order to copy the content
+ * of cells to the clipboard.
+ */
+interface CopyingContext {
+  /** Keys are row ids, values are records */
+  rowsMap: Map<string, Record<string, unknown>>;
+  columnsMap: ReadableMapLike<string, CopyableColumn>;
+  recordSummaries: RecordSummariesForSheet;
+  selectedRowIds: ImmutableSet<string>;
+  selectedColumnIds: ImmutableSet<string>;
 }
 
-function getFormattedCellValue<
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
->(
+function getFormattedCellValue(
   rawCellValue: unknown,
-  columnsMap: ReadableMapLike<Column['id'], Column>,
-  columnId: Column['id'],
+  columnsMap: CopyingContext['columnsMap'],
+  columnId: string,
   recordSummaries: RecordSummariesForSheet,
 ): string {
   if (rawCellValue === undefined || rawCellValue === null) {
@@ -88,70 +87,37 @@ export interface StructuredCell {
   formatted: string;
 }
 
-interface SheetClipboardHandlerDeps<
-  Row extends QueryRow | RecordRow,
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
-> {
-  selection: SheetSelection<Row, Column>;
-  toast: MakeToast;
-  getRows(): Row[];
-  getColumnsMap(): ReadableMapLike<Column['id'], Column>;
-  getRecordSummaries(): RecordSummariesForSheet;
+interface Dependencies {
+  getCopyingContext(): CopyingContext;
+  showToastInfo(msg: string): void;
 }
 
-export class SheetClipboardHandler<
-  Row extends QueryRow | RecordRow,
-  Column extends ProcessedQueryOutputColumn | ProcessedColumn,
-> implements ClipboardHandler
-{
-  private readonly deps: SheetClipboardHandlerDeps<Row, Column>;
+export class SheetClipboardHandler implements ClipboardHandler {
+  private readonly deps: Dependencies;
 
-  constructor(deps: SheetClipboardHandlerDeps<Row, Column>) {
+  constructor(deps: Dependencies) {
     this.deps = deps;
   }
 
-  private getColumnIds(cells: ImmutableSet<string>) {
-    return this.deps.selection.getSelectedUniqueColumnsId(
-      cells,
-      // We don't care about the columns selected when the table is empty,
-      // because we only care about cells selected that have content.
-      new ImmutableSet(),
-    );
-  }
-
-  private getRowIds(cells: ImmutableSet<string>) {
-    return this.deps.selection.getSelectedUniqueRowsId(cells);
-  }
-
   private getCopyContent(): { structured: string; tsv: string } {
-    const cells = get(this.deps.selection.selectedCells);
-    const indexedRecords = new Map(
-      this.deps.getRows().map((r) => [r.rowIndex, r.record]),
-    );
-    const columns = this.deps.getColumnsMap();
-    const recordSummaries = this.deps.getRecordSummaries();
-
+    const context = this.deps.getCopyingContext();
     const tsvRows: string[][] = [];
     const structuredRows: StructuredCell[][] = [];
-    for (const rowId of this.getRowIds(cells)) {
+    for (const rowId of context.selectedRowIds) {
       const tsvRow: string[] = [];
       const structuredRow: StructuredCell[] = [];
-      for (const columnId of this.getColumnIds(cells)) {
-        const column = columns.get(columnId);
-        if (!isCellSelected(cells, { rowIndex: rowId }, { id: columnId })) {
-          // Ignore cells that are not selected.
-          continue;
-        }
+      for (const columnId of context.selectedColumnIds) {
+        const column = context.columnsMap.get(columnId);
         if (!column) {
           // Ignore cells with no associated column. This should never happen.
           continue;
         }
-        const rawCellValue = getRawCellValue(indexedRecords, rowId, columnId);
+        const rawCellValue = context.rowsMap.get(rowId)?.[columnId];
         const formattedCellValue = getFormattedCellValue(
           rawCellValue,
-          columns,
+          context.columnsMap,
           columnId,
-          recordSummaries,
+          context.recordSummaries,
         );
         const type = column.abstractType.identifier;
         structuredRow.push({
@@ -164,7 +130,9 @@ export class SheetClipboardHandler<
       tsvRows.push(tsvRow);
       structuredRows.push(structuredRow);
     }
-    this.deps.toast.info(`Copied ${labeledCount(cells.size, 'cells')}.`);
+    const cellCount =
+      context.selectedRowIds.size * context.selectedColumnIds.size;
+    this.deps.showToastInfo(`Copied ${labeledCount(cellCount, 'cells')}.`);
     return {
       structured: JSON.stringify(structuredRows),
       tsv: serializeTsv(tsvRows),
diff --git a/mathesar_ui/src/components/sheet/SheetHeader.svelte b/mathesar_ui/src/components/sheet/SheetHeader.svelte
index c2b98dff0e..7922e277e8 100644
--- a/mathesar_ui/src/components/sheet/SheetHeader.svelte
+++ b/mathesar_ui/src/components/sheet/SheetHeader.svelte
@@ -42,7 +42,7 @@
 
 <div
   bind:this={headerRef}
-  data-sheet-element="header"
+  data-sheet-element="header-row"
   class:inherit-font-style={inheritFontStyle}
 >
   <div style:width="{$rowWidth}px">
@@ -51,7 +51,7 @@
 </div>
 
 <style lang="scss">
-  [data-sheet-element='header'] {
+  [data-sheet-element='header-row'] {
     min-width: 100%;
     position: relative;
     flex-grow: 0;
@@ -66,16 +66,8 @@
       height: var(--sheet-header-height, 32px);
     }
 
-    :global([data-sheet-element='cell']) {
-      border-bottom: none;
-      background: var(--slate-100);
-      font-size: var(--text-size-small);
-      font-weight: 500;
-      overflow: hidden;
-    }
-
     &.inherit-font-style {
-      :global([data-sheet-element='cell']) {
+      :global([data-sheet-element='column-header-cell']) {
         font-size: inherit;
         font-weight: inherit;
       }
diff --git a/mathesar_ui/src/components/sheet/SheetRow.svelte b/mathesar_ui/src/components/sheet/SheetRow.svelte
index 09d930b6fc..cc3cfb65e7 100644
--- a/mathesar_ui/src/components/sheet/SheetRow.svelte
+++ b/mathesar_ui/src/components/sheet/SheetRow.svelte
@@ -20,8 +20,7 @@
   $: styleString = calculateStyle(style, $rowWidth);
 
   const htmlAttributes = {
-    'data-sheet-element': 'row',
-    'data-sheet-section': 'body',
+    'data-sheet-element': 'data-row',
   };
 </script>
 
diff --git a/mathesar_ui/src/components/sheet/SheetSelection.ts b/mathesar_ui/src/components/sheet/SheetSelection.ts
deleted file mode 100644
index 7d198698f9..0000000000
--- a/mathesar_ui/src/components/sheet/SheetSelection.ts
+++ /dev/null
@@ -1,729 +0,0 @@
-import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
-
-import { ImmutableSet, WritableSet } from '@mathesar-component-library';
-
-export interface SelectionColumn {
-  id: number | string;
-}
-
-export interface SelectionRow {
-  rowIndex: number;
-}
-
-// TODO: Select active cell using primary key instead of index
-// Checkout scenarios with pk consisting multiple columns
-export interface ActiveCell {
-  rowIndex: number;
-  columnId: number | string;
-}
-
-enum Direction {
-  Up = 'up',
-  Down = 'down',
-  Left = 'left',
-  Right = 'right',
-}
-
-function getDirection(event: KeyboardEvent): Direction | undefined {
-  const { key } = event;
-  const shift = event.shiftKey;
-  switch (true) {
-    case shift && key === 'Tab':
-      return Direction.Left;
-    case shift:
-      return undefined;
-    case key === 'ArrowUp':
-      return Direction.Up;
-    case key === 'ArrowDown':
-      return Direction.Down;
-    case key === 'ArrowLeft':
-      return Direction.Left;
-    case key === 'ArrowRight':
-    case key === 'Tab':
-      return Direction.Right;
-    default:
-      return undefined;
-  }
-}
-
-function getHorizontalDelta(direction: Direction): number {
-  switch (direction) {
-    case Direction.Left:
-      return -1;
-    case Direction.Right:
-      return 1;
-    default:
-      return 0;
-  }
-}
-
-function getVerticalDelta(direction: Direction): number {
-  switch (direction) {
-    case Direction.Up:
-      return -1;
-    case Direction.Down:
-      return 1;
-    default:
-      return 0;
-  }
-}
-
-export function isCellActive(
-  activeCell: ActiveCell,
-  row: SelectionRow,
-  column: SelectionColumn,
-): boolean {
-  return (
-    activeCell &&
-    activeCell?.columnId === column.id &&
-    activeCell.rowIndex === row.rowIndex
-  );
-}
-
-// TODO: Create a common utility action to handle active element based scroll
-function scrollToElement(htmlElement: HTMLElement | null): void {
-  const activeRow = htmlElement?.parentElement;
-  const container = document.querySelector('[data-sheet-body-element="list"]');
-  if (!container || !activeRow) {
-    return;
-  }
-  // Vertical scroll
-  if (
-    activeRow.offsetTop + activeRow.clientHeight + 40 >
-    container.scrollTop + container.clientHeight
-  ) {
-    const offsetValue: number =
-      container.getBoundingClientRect().bottom -
-      activeRow.getBoundingClientRect().bottom -
-      40;
-    container.scrollTop -= offsetValue;
-  } else if (activeRow.offsetTop - 30 < container.scrollTop) {
-    container.scrollTop = activeRow.offsetTop - 30;
-  }
-
-  // Horizontal scroll
-  if (
-    htmlElement.offsetLeft + activeRow.clientWidth + 30 >
-    container.scrollLeft + container.clientWidth
-  ) {
-    const offsetValue: number =
-      container.getBoundingClientRect().right -
-      htmlElement.getBoundingClientRect().right -
-      30;
-    container.scrollLeft -= offsetValue;
-  } else if (htmlElement.offsetLeft - 30 < container.scrollLeft) {
-    container.scrollLeft = htmlElement.offsetLeft - 30;
-  }
-}
-
-export function scrollBasedOnActiveCell(): void {
-  const activeCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-active',
-  );
-  scrollToElement(activeCell);
-}
-
-export function scrollBasedOnSelection(): void {
-  const selectedCell: HTMLElement | null = document.querySelector(
-    '[data-sheet-element="cell"].is-selected',
-  );
-  scrollToElement(selectedCell);
-}
-
-type SelectionBounds = {
-  startRowIndex: number;
-  endRowIndex: number;
-  startColumnId: number | string;
-  endColumnId: number | string;
-};
-
-type Cell<Row extends SelectionRow, Column extends SelectionColumn> = [
-  Row,
-  Column,
-];
-
-const ROW_COLUMN_SEPARATOR = '-';
-
-/**
- * Creates Unique identifier for a cell using rowIndex and columnId
- * Storing this identifier instead of an object {rowIndex: number, columnId: number}
- * enables easier usage of the Set data type & faster equality checks
- */
-const createSelectedCellIdentifier = (
-  { rowIndex }: Pick<SelectionRow, 'rowIndex'>,
-  { id }: Pick<SelectionColumn, 'id'>,
-): string => `${rowIndex}${ROW_COLUMN_SEPARATOR}${id}`;
-
-export const isRowSelected = (
-  selectedCells: ImmutableSet<string>,
-  row: SelectionRow,
-): boolean =>
-  selectedCells
-    .valuesArray()
-    .some((cell) => cell.startsWith(`${row.rowIndex}-`));
-
-export const isColumnSelected = (
-  selectedCells: ImmutableSet<string>,
-  columnsSelectedWhenTheTableIsEmpty: ImmutableSet<SelectionColumn['id']>,
-  column: Pick<SelectionColumn, 'id'>,
-): boolean =>
-  columnsSelectedWhenTheTableIsEmpty.has(column.id) ||
-  selectedCells.valuesArray().some((cell) => cell.endsWith(`-${column.id}`));
-
-export const isCellSelected = (
-  selectedCells: ImmutableSet<string>,
-  row: Pick<SelectionRow, 'rowIndex'>,
-  column: Pick<SelectionColumn, 'id'>,
-): boolean => selectedCells.has(createSelectedCellIdentifier(row, column));
-
-// The following function is similar to splitting the string with max_split = 1.
-// input "a-b-c" => output "b-c"
-// input "a-b" => output "b"
-function splitWithLimit(str: string): string {
-  const tokens = str.split(ROW_COLUMN_SEPARATOR);
-  return tokens.slice(1).join(ROW_COLUMN_SEPARATOR);
-}
-
-function getSelectedColumnId(selectedCell: string): SelectionColumn['id'] {
-  const columnId = splitWithLimit(selectedCell);
-  const numericalColumnId = Number(columnId);
-  if (Number.isNaN(numericalColumnId)) {
-    return columnId;
-  }
-  return numericalColumnId;
-}
-
-export function getSelectedRowIndex(selectedCell: string): number {
-  return Number(selectedCell.split(ROW_COLUMN_SEPARATOR)[0]);
-}
-
-export default class SheetSelection<
-  Row extends SelectionRow,
-  Column extends SelectionColumn,
-> {
-  private getColumns: () => Column[];
-
-  private getColumnOrder: () => string[] | number[];
-
-  private getRows: () => Row[];
-
-  // max index is inclusive
-  private getMaxSelectionRowIndex: () => number;
-
-  activeCell: Writable<ActiveCell | undefined>;
-
-  private selectionBounds: SelectionBounds | undefined;
-
-  private activeCellUnsubscriber: Unsubscriber;
-
-  selectedCells: WritableSet<string>;
-
-  /**
-   * When the table has a non-zero number of rows, we store the user's selection
-   * in the `selectedCells` store. But when the table has no rows (and thus no
-   * cells) we still need a way to select columns to configure the data types,
-   * so we use this store as a workaround. More elegant solutions are being
-   * discussed in [1732][1].
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1732
-   */
-  columnsSelectedWhenTheTableIsEmpty: WritableSet<Column['id']>;
-
-  freezeSelection: boolean;
-
-  selectionInProgress: Writable<boolean>;
-
-  constructor(args: {
-    getColumns: () => Column[];
-    getColumnOrder: () => string[] | number[];
-    getRows: () => Row[];
-    getMaxSelectionRowIndex: () => number;
-  }) {
-    this.selectedCells = new WritableSet<string>();
-    this.columnsSelectedWhenTheTableIsEmpty = new WritableSet<Column['id']>();
-    this.getColumns = args.getColumns;
-    this.getColumnOrder = args.getColumnOrder;
-    this.getRows = args.getRows;
-    this.getMaxSelectionRowIndex = args.getMaxSelectionRowIndex;
-    this.freezeSelection = false;
-    this.selectionInProgress = writable<boolean>(false);
-    this.activeCell = writable<ActiveCell | undefined>(undefined);
-
-    /**
-     * TODO:
-     * - This adds a document level event listener for each selection
-     * store instance, and the listener doesn't seem to get removed.
-     * - Refactor this logic and avoid such listeners within the store instance.
-     */
-    // This event terminates the cell selection process
-    // specially useful when selecting multiple cells
-    // Adding this on document to enable boundry cells selection
-    // when the user drags the mouse out of the table view
-    document.addEventListener('mouseup', () => {
-      this.onEndSelection();
-    });
-
-    // Keep active cell and selected cell in sync
-    this.activeCellUnsubscriber = this.activeCell.subscribe((activeCell) => {
-      if (activeCell) {
-        const activeCellRow = this.getRows().find(
-          (row) => row.rowIndex === activeCell.rowIndex,
-        );
-        const activeCellColumn = this.getColumns().find(
-          (column) => column.id === activeCell.columnId,
-        );
-        if (activeCellRow && activeCellColumn) {
-          /**
-           * This handles the very rare edge case
-           * when the user starts the selection using mouse
-           * but before ending(mouseup event)
-           * she change the active cell using keyboard
-           */
-          this.selectionBounds = undefined;
-          this.selectMultipleCells([[activeCellRow, activeCellColumn]]);
-        } else {
-          // We need to unselect the Selected cells
-          // when navigating Placeholder cells
-          this.resetSelection();
-        }
-      } else {
-        this.resetSelection();
-      }
-    });
-  }
-
-  onStartSelection(row: SelectionRow, column: SelectionColumn): void {
-    if (this.freezeSelection) {
-      return;
-    }
-
-    this.selectionInProgress.set(true);
-    // Initialize the bounds of the selection
-    this.selectionBounds = {
-      startColumnId: column.id,
-      endColumnId: column.id,
-      startRowIndex: row.rowIndex,
-      endRowIndex: row.rowIndex,
-    };
-
-    const cells = this.getIncludedCells(this.selectionBounds);
-    this.selectMultipleCells(cells);
-  }
-
-  onMouseEnterCellWhileSelection(
-    row: SelectionRow,
-    column: SelectionColumn,
-  ): void {
-    const { rowIndex } = row;
-    const { id } = column;
-
-    // If there is no selection start cell,
-    // this means the selection was never initiated
-    if (!this.selectionBounds || this.freezeSelection) {
-      return;
-    }
-
-    this.selectionBounds.endRowIndex = rowIndex;
-    this.selectionBounds.endColumnId = id;
-    const cells = this.getIncludedCells(this.selectionBounds);
-    this.selectMultipleCells(cells);
-  }
-
-  onEndSelection(): void {
-    if (this.selectionBounds) {
-      const cells = this.getIncludedCells(this.selectionBounds);
-      this.selectMultipleCells(cells);
-      this.selectionBounds = undefined;
-    }
-    this.selectionInProgress.set(false);
-  }
-
-  selectAndActivateFirstCellIfExists(): void {
-    const firstRow = this.getRows()[0];
-    const firstColumn = this.getColumns()[0];
-    if (firstRow && firstColumn) {
-      this.selectMultipleCells([[firstRow, firstColumn]]);
-      this.activateCell(firstRow, firstColumn);
-    }
-  }
-
-  selectAndActivateFirstDataEntryCellInLastRow(): void {
-    const currentRows = this.getRows();
-    const currentColumns = this.getColumns();
-    if (currentRows.length > 0 && currentColumns.length > 1) {
-      this.activateCell(currentRows[currentRows.length - 1], currentColumns[1]);
-    }
-  }
-
-  getIncludedCells(selectionBounds: SelectionBounds): Cell<Row, Column>[] {
-    const { startRowIndex, endRowIndex, startColumnId, endColumnId } =
-      selectionBounds;
-    const minRowIndex = Math.min(startRowIndex, endRowIndex);
-    const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-
-    const columnOrder = this.getColumnOrder();
-
-    const startOrderIndex = columnOrder.findIndex((id) => id === startColumnId);
-    const endOrderIndex = columnOrder.findIndex((id) => id === endColumnId);
-
-    const minColumnPosition = Math.min(startOrderIndex, endOrderIndex);
-    const maxColumnPosition = Math.max(startOrderIndex, endOrderIndex);
-    const columnOrderSelected = columnOrder.slice(
-      minColumnPosition,
-      maxColumnPosition + 1,
-    );
-
-    const columns = this.getColumns();
-
-    const cells: Cell<Row, Column>[] = [];
-    this.getRows().forEach((row) => {
-      const { rowIndex } = row;
-      if (rowIndex >= minRowIndex && rowIndex <= maxRowIndex) {
-        columnOrderSelected.forEach((columnId) => {
-          const column = columns.find((c) => c.id === columnId);
-          if (column) {
-            cells.push([row, column]);
-          }
-        });
-      }
-    });
-
-    return cells;
-  }
-
-  private selectMultipleCells(cells: Array<Cell<Row, Column>>) {
-    const identifiers = cells.map(([row, column]) =>
-      createSelectedCellIdentifier(row, column),
-    );
-    this.selectedCells.reconstruct(identifiers);
-  }
-
-  resetSelection(): void {
-    this.selectionBounds = undefined;
-    this.columnsSelectedWhenTheTableIsEmpty.clear();
-    this.selectedCells.clear();
-  }
-
-  isCompleteColumnSelected(column: Pick<Column, 'id'>): boolean {
-    if (this.getRows().length) {
-      return (
-        this.columnsSelectedWhenTheTableIsEmpty.getHas(column.id) ||
-        this.getRows().every((row) =>
-          isCellSelected(get(this.selectedCells), row, column),
-        )
-      );
-    }
-    return this.columnsSelectedWhenTheTableIsEmpty.getHas(column.id);
-  }
-
-  private isCompleteRowSelected(row: Pick<Row, 'rowIndex'>): boolean {
-    const columns = this.getColumns();
-    return (
-      columns.length > 0 &&
-      columns.every((column) =>
-        isCellSelected(get(this.selectedCells), row, column),
-      )
-    );
-  }
-
-  isAnyColumnCompletelySelected(): boolean {
-    const selectedCellsArray = get(this.selectedCells).valuesArray();
-    const checkedColumns: (number | string)[] = [];
-
-    for (const cell of selectedCellsArray) {
-      const columnId = getSelectedColumnId(cell);
-      if (!checkedColumns.includes(columnId)) {
-        if (this.isCompleteColumnSelected({ id: columnId })) {
-          return true;
-        }
-        checkedColumns.push(columnId);
-      }
-    }
-
-    return false;
-  }
-
-  isAnyRowCompletelySelected(): boolean {
-    const selectedCellsArray = get(this.selectedCells).valuesArray();
-    const checkedRows: number[] = [];
-
-    for (const cell of selectedCellsArray) {
-      const rowIndex = getSelectedRowIndex(cell);
-      if (!checkedRows.includes(rowIndex)) {
-        if (this.isCompleteRowSelected({ rowIndex })) {
-          return true;
-        }
-        checkedRows.push(rowIndex);
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Modifies the selected cells, forming a new selection by maintaining the
-   * currently selected rows but altering the selected columns to match the
-   * supplied columns.
-   */
-  intersectSelectedRowsWithGivenColumns(columns: Column[]): void {
-    const selectedRows = this.getSelectedUniqueRowsId(
-      new ImmutableSet(this.selectedCells.getValues()),
-    );
-    const cells: Cell<Row, Column>[] = [];
-    columns.forEach((column) => {
-      selectedRows.forEach((rowIndex) => {
-        const row = this.getRows()[rowIndex];
-        cells.push([row, column]);
-      });
-    });
-
-    this.selectMultipleCells(cells);
-  }
-
-  /**
-   * Use this only for programmatic selection
-   *
-   * Prefer: onColumnSelectionStart when
-   * selection is done using
-   * user interactions
-   */
-  toggleColumnSelection(column: Column): boolean {
-    const isCompleteColumnSelected = this.isCompleteColumnSelected(column);
-    this.activateCell({ rowIndex: 0 }, column);
-
-    if (isCompleteColumnSelected) {
-      this.resetSelection();
-      return false;
-    }
-
-    const rows = this.getRows();
-
-    if (rows.length === 0) {
-      this.resetSelection();
-      this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-      return true;
-    }
-
-    const cells: Cell<Row, Column>[] = [];
-    rows.forEach((row) => {
-      cells.push([row, column]);
-    });
-
-    // Clearing the selection
-    // since we do not have cmd+click to select
-    // disjointed cells
-    this.resetSelection();
-    this.selectMultipleCells(cells);
-    return true;
-  }
-
-  /**
-   * Use this only for programmatic selection
-   *
-   * Prefer: onRowSelectionStart when
-   * selection is done using
-   * user interactions
-   */
-  toggleRowSelection(row: Row): void {
-    const isCompleteRowSelected = this.isCompleteRowSelected(row);
-
-    if (isCompleteRowSelected) {
-      // Clear the selection - deselect the row
-      this.resetSelection();
-    } else {
-      const cells: Cell<Row, Column>[] = [];
-      this.getColumns().forEach((column) => {
-        cells.push([row, column]);
-      });
-
-      // Clearing the selection
-      // since we do not have cmd+click to select
-      // disjointed cells
-      this.resetSelection();
-      this.selectMultipleCells(cells);
-    }
-  }
-
-  onColumnSelectionStart(column: Column): boolean {
-    if (!this.isCompleteColumnSelected(column)) {
-      this.activateCell({ rowIndex: 0 }, { id: column.id });
-      const rows = this.getRows();
-
-      if (rows.length === 0) {
-        this.resetSelection();
-        this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-        return true;
-      }
-
-      this.onStartSelection(rows[0], column);
-      this.onMouseEnterCellWhileSelection(rows[rows.length - 1], column);
-    }
-    return true;
-  }
-
-  onMouseEnterColumnHeaderWhileSelection(column: Column): boolean {
-    const rows = this.getRows();
-
-    if (rows.length === 0) {
-      this.resetSelection();
-      this.columnsSelectedWhenTheTableIsEmpty.add(column.id);
-      return true;
-    }
-
-    this.onMouseEnterCellWhileSelection(rows[rows.length - 1], column);
-    return true;
-  }
-
-  onRowSelectionStart(row: Row): boolean {
-    const columns = this.getColumns();
-    const columnOrder = this.getColumnOrder();
-
-    if (!columns.length) {
-      // Not possible to have tables without columns
-    }
-
-    const startColumnId = columnOrder[0];
-    const endColumnId = columnOrder[columnOrder.length - 1];
-    const startColumn = columns.find((c) => c.id === startColumnId);
-    const endColumn = columns.find((c) => c.id === endColumnId);
-
-    if (startColumn && endColumn) {
-      this.activateCell(row, startColumn);
-      this.onStartSelection(row, startColumn);
-      this.onMouseEnterCellWhileSelection(row, endColumn);
-    }
-
-    return true;
-  }
-
-  onMouseEnterRowHeaderWhileSelection(row: Row): boolean {
-    const columns = this.getColumns();
-
-    if (!columns.length) {
-      // Not possible to have tables without columns
-    }
-
-    const endColumn = columns[columns.length - 1];
-    this.onMouseEnterCellWhileSelection(row, endColumn);
-    return true;
-  }
-
-  resetActiveCell(): void {
-    this.activeCell.set(undefined);
-  }
-
-  activateCell(row: Pick<Row, 'rowIndex'>, column: Pick<Column, 'id'>): void {
-    this.activeCell.set({
-      rowIndex: row.rowIndex,
-      columnId: column.id,
-    });
-  }
-
-  focusCell(row: Pick<Row, 'rowIndex'>, column: Pick<Column, 'id'>): void {
-    const cellsInTheColumn = document.querySelectorAll(
-      `[data-column-identifier="${column.id}"]`,
-    );
-    const targetCell = cellsInTheColumn.item(row.rowIndex);
-    (targetCell?.querySelector('.cell-wrapper') as HTMLElement)?.focus();
-  }
-
-  private getAdjacentCell(
-    activeCell: ActiveCell,
-    direction: Direction,
-  ): ActiveCell | undefined {
-    const columnOrder = this.getColumnOrder();
-
-    const rowIndex = (() => {
-      const delta = getVerticalDelta(direction);
-      if (delta === 0) {
-        return activeCell.rowIndex;
-      }
-      const minRowIndex = 0;
-      const maxRowIndex = this.getMaxSelectionRowIndex();
-      const newRowIndex = activeCell.rowIndex + delta;
-      if (newRowIndex < minRowIndex || newRowIndex > maxRowIndex) {
-        return undefined;
-      }
-      return newRowIndex;
-    })();
-    if (rowIndex === undefined) {
-      return undefined;
-    }
-
-    const columnId = (() => {
-      const delta = getHorizontalDelta(direction);
-      if (delta === 0) {
-        return activeCell.columnId;
-      }
-      if (activeCell.columnId) {
-        const index = columnOrder.findIndex((id) => id === activeCell.columnId);
-        const targetId = columnOrder[index + delta];
-        return targetId;
-      }
-      return '';
-    })();
-    if (!columnId) {
-      return undefined;
-    }
-    return { rowIndex, columnId };
-  }
-
-  handleKeyEventsOnActiveCell(key: KeyboardEvent): 'moved' | undefined {
-    const direction = getDirection(key);
-    if (!direction) {
-      return undefined;
-    }
-    let moved = false;
-    this.activeCell.update((activeCell) => {
-      if (!activeCell) {
-        return undefined;
-      }
-      const adjacentCell = this.getAdjacentCell(activeCell, direction);
-      if (adjacentCell) {
-        moved = true;
-        return adjacentCell;
-      }
-      return activeCell;
-    });
-
-    return moved ? 'moved' : undefined;
-  }
-
-  activateFirstCellInSelectedColumn() {
-    const activeCell = get(this.activeCell);
-    if (activeCell) {
-      this.activateCell({ rowIndex: 0 }, { id: activeCell.columnId });
-    }
-  }
-
-  /**
-   * This method does not utilize class properties inorder
-   * to make it reactive during component usage.
-   *
-   * It is placed within the class inorder to make use of
-   * class types
-   */
-  getSelectedUniqueColumnsId(
-    selectedCells: ImmutableSet<string>,
-    columnsSelectedWhenTheTableIsEmpty: ImmutableSet<Column['id']>,
-  ): Column['id'][] {
-    const setOfUniqueColumnIds = new Set([
-      ...[...selectedCells].map(getSelectedColumnId),
-      ...columnsSelectedWhenTheTableIsEmpty,
-    ]);
-    return Array.from(setOfUniqueColumnIds);
-  }
-
-  getSelectedUniqueRowsId(
-    selectedCells: ImmutableSet<string>,
-  ): Row['rowIndex'][] {
-    const setOfUniqueRowIndex = new Set([
-      ...[...selectedCells].map(getSelectedRowIndex),
-    ]);
-    return Array.from(setOfUniqueRowIndex);
-  }
-
-  destroy(): void {
-    this.activeCellUnsubscriber();
-  }
-}
diff --git a/mathesar_ui/src/components/sheet/cellIds.ts b/mathesar_ui/src/components/sheet/cellIds.ts
new file mode 100644
index 0000000000..c39c1077d9
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cellIds.ts
@@ -0,0 +1,32 @@
+import { map } from 'iter-tools';
+
+import { cartesianProduct } from '@mathesar/utils/iterUtils';
+
+export function makeCellId(rowId: string, columnId: string): string {
+  return JSON.stringify([rowId, columnId]);
+}
+
+export function parseCellId(cellId: string): {
+  rowId: string;
+  columnId: string;
+} {
+  try {
+    const [rowId, columnId] = JSON.parse(cellId) as unknown[];
+    if (typeof rowId !== 'string' || typeof columnId !== 'string') {
+      throw new Error();
+    }
+    return { rowId, columnId };
+  } catch {
+    throw new Error(`Unable to parse cell id: ${cellId}.`);
+  }
+}
+
+export function makeCells(
+  rowIds: Iterable<string>,
+  columnIds: Iterable<string>,
+): Iterable<string> {
+  return map(
+    ([rowId, columnId]) => makeCellId(rowId, columnId),
+    cartesianProduct(rowIds, columnIds),
+  );
+}
diff --git a/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
new file mode 100644
index 0000000000..9ca66fbe19
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetColumnCreationCell.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type ColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div data-sheet-element="new-column-cell" style={$style}>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='new-column-cell'] {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-bottom: none;
+    background: var(--slate-100);
+    font-size: var(--text-size-small);
+    font-weight: 500;
+    overflow: hidden;
+    padding: 0 0.2rem;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte
new file mode 100644
index 0000000000..0feba78d76
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetColumnHeaderCell.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type SheetColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: SheetColumnIdentifierKey;
+
+  const style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div
+  data-sheet-element="column-header-cell"
+  data-column-identifier={columnIdentifierKey}
+  style={$style}
+>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='column-header-cell'] {
+    position: absolute;
+    z-index: var(--z-index__sheet__column-header-cell);
+    display: flex;
+    align-items: center;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-right: var(--cell-border-vertical);
+    border-bottom: none;
+    background: var(--slate-100);
+    font-size: var(--text-size-small);
+    font-weight: 500;
+    overflow: hidden;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
new file mode 100644
index 0000000000..bdfb54f38f
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetDataCell.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import CellBackground from '@mathesar/components/CellBackground.svelte';
+
+  import type SheetSelection from '../selection/SheetSelection';
+
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type SheetColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: SheetColumnIdentifierKey;
+  export let cellSelectionId: string | undefined = undefined;
+  export let selection: SheetSelection | undefined = undefined;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
+  $: ({ isActive, isSelected, hasSelectionBackground } = (() => {
+    if (!selection || !cellSelectionId) {
+      return {
+        isActive: false,
+        isSelected: false,
+        hasSelectionBackground: false,
+      };
+    }
+    const selected = selection.cellIds.has(cellSelectionId);
+    return {
+      isActive: selection.activeCellId === cellSelectionId,
+      isSelected: selected,
+      hasSelectionBackground: selected && selection.cellIds.size > 1,
+    };
+  })());
+</script>
+
+<div
+  data-sheet-element="data-cell"
+  data-cell-selection-id={cellSelectionId}
+  data-cell-active={isActive ? '' : undefined}
+  data-cell-selected={isSelected ? '' : undefined}
+  style={$style}
+>
+  {#if hasSelectionBackground}
+    <CellBackground color="rgba(14, 101, 235, 0.1)" when={isSelected} />
+  {/if}
+  <slot {isActive} {isSelected} />
+</div>
+
+<style>
+  [data-sheet-element='data-cell'] {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    left: 0;
+    top: 0;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none; /* Safari */
+    background: var(--cell-bg-color-base);
+  }
+
+  [data-cell-active] {
+    z-index: var(--z-index__sheet__active-cell);
+    border-color: transparent;
+    min-height: 100%;
+    height: auto;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
new file mode 100644
index 0000000000..7af9d9748b
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetOriginCell.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type ColumnIdentifierKey = $$Generic;
+
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div data-sheet-element="origin-cell" style={$style}>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='origin-cell'] {
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: var(--z-index__sheet__origin-cell);
+    height: 100%;
+    border-right: var(--cell-border-vertical);
+    border-bottom: none;
+    background: var(--slate-100);
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
similarity index 74%
rename from mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
rename to mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
index 4cc8fe18ee..eda77ca02e 100644
--- a/mathesar_ui/src/components/sheet/SheetPositionableCell.svelte
+++ b/mathesar_ui/src/components/sheet/cells/SheetPositionableCell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ColumnPosition } from './utils';
-  import { getSheetContext } from './utils';
+  import type { ColumnPosition } from '../utils';
+  import { getSheetContext } from '../utils';
 
   const { stores } = getSheetContext();
   const { columnStyleMap } = stores;
@@ -25,13 +25,16 @@
   }
 
   $: style = calculateStyle($columnStyleMap, index, columnSpan);
-
-  export let isStatic = false;
-
-  $: htmlAttributes = {
-    'data-sheet-element': 'cell',
-    'data-cell-static': isStatic ? true : undefined,
-  };
 </script>
 
-<slot {htmlAttributes} {style} />
+<div data-sheet-element="positionable-cell" {style}>
+  <slot />
+</div>
+
+<style>
+  [data-sheet-element='positionable-cell'] {
+    position: absolute;
+    top: 0;
+    height: 100%;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
new file mode 100644
index 0000000000..2409c6a1e3
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/SheetRowHeaderCell.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { getSheetCellStyle } from './sheetCellUtils';
+
+  type ColumnIdentifierKey = $$Generic;
+
+  export let rowSelectionId: string;
+  export let columnIdentifierKey: ColumnIdentifierKey;
+
+  $: style = getSheetCellStyle(columnIdentifierKey);
+</script>
+
+<div
+  data-sheet-element="row-header-cell"
+  data-row-selection-id={rowSelectionId}
+  style={$style}
+>
+  <slot />
+</div>
+
+<style lang="scss">
+  [data-sheet-element='row-header-cell'] {
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: var(--z-index__sheet__row-header-cell);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: var(--cell-border-horizontal);
+    border-right: var(--cell-border-vertical);
+    font-size: var(--text-size-x-small);
+    padding: 0 1.5rem;
+    color: var(--color-text-muted);
+    cursor: default;
+  }
+</style>
diff --git a/mathesar_ui/src/components/sheet/cells/index.ts b/mathesar_ui/src/components/sheet/cells/index.ts
new file mode 100644
index 0000000000..2fd6716ac2
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/index.ts
@@ -0,0 +1,7 @@
+export { default as SheetColumnHeaderCell } from './SheetColumnHeaderCell.svelte';
+export { default as SheetDataCell } from './SheetDataCell.svelte';
+export { default as SheetColumnCreationCell } from './SheetColumnCreationCell.svelte';
+export { default as SheetOriginCell } from './SheetOriginCell.svelte';
+export { default as SheetPositionableCell } from './SheetPositionableCell.svelte';
+export { default as SheetRowHeaderCell } from './SheetRowHeaderCell.svelte';
+export * from './sheetCellUtils';
diff --git a/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts b/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts
new file mode 100644
index 0000000000..0049923d5d
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/cells/sheetCellUtils.ts
@@ -0,0 +1,14 @@
+import { type Readable, derived } from 'svelte/store';
+
+import { getSheetContext } from '../utils';
+
+export function getSheetCellStyle<ColumnIdentifierKey>(
+  columnIdentifierKey: ColumnIdentifierKey,
+): Readable<string | undefined> {
+  const { stores } = getSheetContext();
+  const { columnStyleMap } = stores;
+  return derived(columnStyleMap, (map) => {
+    const columnPosition = map.get(columnIdentifierKey);
+    return columnPosition?.styleString;
+  });
+}
diff --git a/mathesar_ui/src/components/sheet/index.ts b/mathesar_ui/src/components/sheet/index.ts
index cc67f1275b..e541c3f139 100644
--- a/mathesar_ui/src/components/sheet/index.ts
+++ b/mathesar_ui/src/components/sheet/index.ts
@@ -1,17 +1,11 @@
 export { default as Sheet } from './Sheet.svelte';
 export { default as SheetHeader } from './SheetHeader.svelte';
-export { default as SheetCell } from './SheetCell.svelte';
-export { default as SheetPositionableCell } from './SheetPositionableCell.svelte';
 export { default as SheetCellResizer } from './SheetCellResizer.svelte';
 export { default as SheetVirtualRows } from './SheetVirtualRows.svelte';
 export { default as SheetRow } from './SheetRow.svelte';
-export { default as SheetSelection } from './SheetSelection';
 export {
-  isColumnSelected,
-  isRowSelected,
-  isCellSelected,
-  getSelectedRowIndex,
-  isCellActive,
   scrollBasedOnActiveCell,
   scrollBasedOnSelection,
-} from './SheetSelection';
+} from './sheetScrollingUtils';
+
+export * from './cells';
diff --git a/mathesar_ui/src/components/sheet/selection/Direction.ts b/mathesar_ui/src/components/sheet/selection/Direction.ts
new file mode 100644
index 0000000000..b53704f378
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Direction.ts
@@ -0,0 +1,28 @@
+export enum Direction {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+export function getColumnOffset(direction: Direction): number {
+  switch (direction) {
+    case Direction.Left:
+      return -1;
+    case Direction.Right:
+      return 1;
+    default:
+      return 0;
+  }
+}
+
+export function getRowOffset(direction: Direction): number {
+  switch (direction) {
+    case Direction.Up:
+      return -1;
+    case Direction.Down:
+      return 1;
+    default:
+      return 0;
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/Plane.ts b/mathesar_ui/src/components/sheet/selection/Plane.ts
new file mode 100644
index 0000000000..5a39907614
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Plane.ts
@@ -0,0 +1,227 @@
+import { makeCellId, makeCells, parseCellId } from '../cellIds';
+
+import { Direction, getColumnOffset, getRowOffset } from './Direction';
+import Series from './Series';
+
+/**
+ * This describes the different kinds of cells that can be adjacent to a given
+ * cell in a particular direction.
+ */
+export type AdjacentCell =
+  | {
+      type: 'dataCell';
+      cellId: string;
+    }
+  | {
+      type: 'placeholderCell';
+      cellId: string;
+    }
+  | {
+      type: 'none';
+    };
+
+function noAdjacentCell(): AdjacentCell {
+  return { type: 'none' };
+}
+
+function adjacentDataCell(cellId: string): AdjacentCell {
+  return { type: 'dataCell', cellId };
+}
+
+function adjacentPlaceholderCell(cellId: string): AdjacentCell {
+  return { type: 'placeholderCell', cellId };
+}
+
+/**
+ * A Plane is like a coordinate system for a sheet. We can query it to find the
+ * ids of cells within certain bounding rectangles.
+ *
+ * The Plane can also have a "placeholder row", which is a row at the bottom of
+ * the sheet that provides a visual cue to the user that they can add more rows.
+ * It never contains any data, but we allow the user to move the active cell
+ * into the placeholder row in order to easily add more rows.
+ *
+ * The term "Flexible" is used in methods to indicate that it will gracefully
+ * handle ids of cells within the placeholder row.
+ */
+export default class Plane {
+  readonly rowIds: Series<string>;
+
+  readonly columnIds: Series<string>;
+
+  readonly placeholderRowId: string | undefined;
+
+  constructor(
+    rowIds: Series<string> = new Series(),
+    columnIds: Series<string> = new Series(),
+    placeholderRowId?: string,
+  ) {
+    this.rowIds = rowIds;
+    this.columnIds = columnIds;
+    this.placeholderRowId = placeholderRowId;
+  }
+
+  /**
+   * @returns the row id that should be used to represent the given row id in
+   * the plane. If the given row id is the placeholder row id, then the last
+   * row id in the plane will be returned. Otherwise, the given row id will be
+   * returned.
+   */
+  private normalizeFlexibleRowId(rowId: string): string | undefined {
+    if (rowId === this.placeholderRowId) {
+      return this.rowIds.last;
+    }
+    return rowId;
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane. This does not
+   * include header cells or placeholder cells.
+   */
+  allDataCells(): Iterable<string> {
+    return makeCells(this.rowIds, this.columnIds);
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given rows. This does not include header cells.
+   *
+   * If either of the provided rows are placeholder rows, then the last data row
+   * will be used in their place. This ensures that the selection is made only
+   * of data rows, and will never include the placeholder row, even if a user
+   * drags to select it.
+   */
+  dataCellsInFlexibleRowRange(
+    rowIdA: string,
+    rowIdB: string,
+  ): Iterable<string> {
+    const a = this.normalizeFlexibleRowId(rowIdA);
+    if (a === undefined) {
+      return [];
+    }
+    const b = this.normalizeFlexibleRowId(rowIdB);
+    if (b === undefined) {
+      return [];
+    }
+    return makeCells(this.rowIds.range(a, b), this.columnIds);
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given columns. This does not include header cells or
+   * placeholder cells.
+   */
+  dataCellsInColumnRange(
+    columnIdA: string,
+    columnIdB: string,
+  ): Iterable<string> {
+    return makeCells(this.rowIds, this.columnIds.range(columnIdA, columnIdB));
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are in or
+   * between the two given cell. This does not include header cells.
+   *
+   * If either of the provided cells are placeholder cells, then cells in the
+   * last row and last column will be used in their place. This ensures that the
+   * selection is made only of data cells, and will never include the
+   * placeholder cell, even if a user drags to select it.
+   */
+  dataCellsInFlexibleCellRange(
+    cellIdA: string,
+    cellIdB: string,
+  ): Iterable<string> {
+    const cellA = parseCellId(cellIdA);
+    const cellB = parseCellId(cellIdB);
+    return this.dataCellsInFlexibleRowColumnRange(
+      cellA.rowId,
+      cellB.rowId,
+      cellA.columnId,
+      cellB.columnId,
+    );
+  }
+
+  /**
+   * @returns an iterable of all the data cells in the plane that are within the
+   * rectangle bounded by the given rows and columns. This does not include
+   * header cells.
+   *
+   * If either of the provided rowIds are placeholder cells, then cells in the
+   * last row and last column will be used in their place. This ensures that the
+   * selection is made only of data cells, and will never include the
+   * placeholder cell, even if a user drags to select it.
+   */
+  dataCellsInFlexibleRowColumnRange(
+    flexibleRowIdA: string,
+    flexibleRowIdB: string,
+    columnIdA: string,
+    columnIdB: string,
+  ): Iterable<string> {
+    const rowIdA = this.normalizeFlexibleRowId(flexibleRowIdA);
+    if (rowIdA === undefined) {
+      return [];
+    }
+    const rowIdB = this.normalizeFlexibleRowId(flexibleRowIdB);
+    if (rowIdB === undefined) {
+      return [];
+    }
+    const rowIds = this.rowIds.range(rowIdA, rowIdB);
+    const columnIds = this.columnIds.range(columnIdA, columnIdB);
+    return makeCells(rowIds, columnIds);
+  }
+
+  getAdjacentCell(cellId: string, direction: Direction): AdjacentCell {
+    const cell = parseCellId(cellId);
+
+    const columnOffset = getColumnOffset(direction);
+    const newColumnId = this.columnIds.offset(cell.columnId, columnOffset);
+    if (newColumnId === undefined) {
+      return noAdjacentCell();
+    }
+
+    if (cell.rowId === this.placeholderRowId) {
+      if (direction === Direction.Up) {
+        const lastRowId = this.rowIds.last;
+        if (lastRowId === undefined) {
+          // Can't go up from the placeholder row if there are no data rows
+          return noAdjacentCell();
+        }
+        // Move up from the placeholder row into the last data row
+        return adjacentDataCell(makeCellId(lastRowId, newColumnId));
+      }
+      if (direction === Direction.Down) {
+        // Can't go down from the placeholder row
+        return noAdjacentCell();
+      }
+      // Move laterally within the placeholder row
+      return adjacentPlaceholderCell(makeCellId(cell.rowId, newColumnId));
+    }
+
+    const rowOffset = getRowOffset(direction);
+    const newRowId = this.rowIds.offset(cell.rowId, rowOffset);
+    if (newRowId === undefined) {
+      if (direction === Direction.Down) {
+        if (this.placeholderRowId === undefined) {
+          // Can't go down from the last data row if there is no placeholder row
+          return noAdjacentCell();
+        }
+        const newCellId = makeCellId(this.placeholderRowId, newColumnId);
+        // Move down from the last data row into the placeholder row
+        return adjacentPlaceholderCell(newCellId);
+      }
+      // Can't move up from the first data row
+      return noAdjacentCell();
+    }
+
+    // Normal movement from one data cell to another data cell
+    return adjacentDataCell(makeCellId(newRowId, newColumnId));
+  }
+
+  get hasResultRows(): boolean {
+    return this.rowIds.length > 0;
+  }
+
+  get hasPlaceholder(): boolean {
+    return this.placeholderRowId !== undefined;
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/Series.ts b/mathesar_ui/src/components/sheet/selection/Series.ts
new file mode 100644
index 0000000000..1f4c070280
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/Series.ts
@@ -0,0 +1,150 @@
+import { filter, findBest, firstHighest, firstLowest } from 'iter-tools';
+
+import { ImmutableMap } from '@mathesar-component-library';
+
+/**
+ * A Series is an immutable ordered collection of unique values with methods
+ * that provide efficient access to _ranges_ of those values.
+ */
+export default class Series<Value> {
+  private readonly values: Value[];
+
+  /** Maps the id value to its index */
+  private readonly indexLookup: ImmutableMap<Value, number>;
+
+  /**
+   * @throws Error if duplicate values are provided
+   */
+  constructor(values: Value[] = []) {
+    this.values = values;
+    this.indexLookup = new ImmutableMap(
+      values.map((value, index) => [value, index]),
+    );
+    if (new Set(values).size !== values.length) {
+      throw new Error('Duplicate values are not allowed within a Series.');
+    }
+  }
+
+  getIndex(value: Value): number | undefined {
+    return this.indexLookup.get(value);
+  }
+
+  get length(): number {
+    return this.values.length;
+  }
+
+  /**
+   * Return an iterator of all values between the two provided values,
+   * inclusive. Iteration occurs in the order stored. The two provided values
+   * may be present in any order.
+   *
+   * @throws an Error if either value is not present in the sequence
+   */
+  range(a: Value, b: Value): Iterable<Value> {
+    const aIndex = this.getIndex(a);
+    const bIndex = this.getIndex(b);
+
+    if (aIndex === undefined || bIndex === undefined) {
+      throw new Error('Id value not found within sequence.');
+    }
+
+    const startIndex = Math.min(aIndex, bIndex);
+    const endIndex = Math.max(aIndex, bIndex);
+
+    return this.values.slice(startIndex, endIndex + 1);
+  }
+
+  /**
+   * Get the value at a specific index.
+   */
+  at(index: number): Value | undefined {
+    return this.values[index];
+  }
+
+  get first(): Value | undefined {
+    return this.at(0);
+  }
+
+  get last(): Value | undefined {
+    return this.at(this.values.length - 1);
+  }
+
+  has(value: Value): boolean {
+    return this.getIndex(value) !== undefined;
+  }
+
+  /**
+   * This method is used for `min` and `max`, but could potentially be used for
+   * other things too.
+   *
+   * @param comparator Corresponds to the [iter-tools comparators][1]
+   *
+   * [1]:
+   * https://github.com/iter-tools/iter-tools/blob/d7.5/API.md#compare-values-and-return-true-or-false
+   */
+  best(
+    values: Iterable<Value>,
+    comparator: (best: number, v: number) => boolean,
+  ): Value | undefined {
+    const validValues = filter((v) => this.has(v), values);
+    return findBest(comparator, (v) => this.getIndex(v) ?? 0, validValues);
+  }
+
+  /**
+   * Of all the supplied values, return the value that is the lowest as ordered
+   * within the series. If no such value is present, then `undefined` will
+   * be returned.
+   */
+  min(values: Iterable<Value>): Value | undefined {
+    return this.best(values, firstLowest);
+  }
+
+  /**
+   * Of all the supplied values, return the value that is the highest as ordered
+   * within the series. If no such value is present, then `undefined` will be
+   * returned.
+   */
+  max(values: Iterable<Value>): Value | undefined {
+    return this.best(values, firstHighest);
+  }
+
+  /**
+   * @returns the value positioned relative to the given value by the given
+   * offset. If the offset is 0, the given value will be returned. If the offset
+   * is positive, the returned value will be that many positions _after_ the
+   * given value. If no such value is present, then `undefined` will be
+   * returned.
+   */
+  offset(value: Value, offset: number): Value | undefined {
+    if (offset === 0) {
+      return this.has(value) ? value : undefined;
+    }
+    const index = this.getIndex(value);
+    if (index === undefined) {
+      return undefined;
+    }
+    return this.values[index + offset];
+  }
+
+  /**
+   * This is similar to `offset`, but accepts an iterable of values and treats
+   * them as a unified block to be collapsed into one value. When `offset` is
+   * positive, the returned value will be that many positions _after_ the last
+   * value in the block. If no such value is present, then `undefined` will be
+   * returned. If offset is zero, then `undefined` will be returned.
+   */
+  collapsedOffset(values: Iterable<Value>, offset: number): Value | undefined {
+    if (offset === 0) {
+      return undefined;
+    }
+    const outerValue = offset > 0 ? this.max(values) : this.min(values);
+    if (outerValue === undefined) {
+      return undefined;
+    }
+    return this.offset(outerValue, offset);
+  }
+
+  [Symbol.iterator](): Iterator<Value> {
+    return this.values[Symbol.iterator]();
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelection.ts b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
new file mode 100644
index 0000000000..de1039b2bb
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelection.ts
@@ -0,0 +1,484 @@
+import { execPipe, filter, first, map } from 'iter-tools';
+
+import { match } from '@mathesar/utils/patternMatching';
+import { ImmutableSet, assertExhaustive } from '@mathesar-component-library';
+
+import { makeCellId, makeCells, parseCellId } from '../cellIds';
+
+import {
+  type Basis,
+  basisFromDataCells,
+  basisFromEmptyColumns,
+  basisFromOneDataCell,
+  basisFromPlaceholderCell,
+  basisFromZeroEmptyColumns,
+  emptyBasis,
+} from './basis';
+import { Direction, getColumnOffset } from './Direction';
+import Plane from './Plane';
+import {
+  type SheetCellDetails,
+  fitSelectedValuesToSeriesTransformation,
+} from './selectionUtils';
+
+function getFullySelectedColumnIds(
+  plane: Plane,
+  basis: Basis,
+): ImmutableSet<string> {
+  if (basis.type === 'dataCells') {
+    // The logic within this branch is somewhat complex because:
+    // - We might want to support non-rectangular selections someday.
+    // - For performance, we want to avoid iterating over all the selected
+    //   cells.
+
+    const selectedRowCount = basis.rowIds.size;
+    const availableRowCount = plane.rowIds.length;
+    if (selectedRowCount < availableRowCount) {
+      // Performance heuristic. If the number of selected rows is less than the
+      // total number of rows, we can assume that no column exist in which all
+      // rows are selected.
+      return new ImmutableSet();
+    }
+
+    const selectedColumnCount = basis.columnIds.size;
+    const selectedCellCount = basis.cellIds.size;
+    const avgCellsSelectedPerColumn = selectedCellCount / selectedColumnCount;
+    if (avgCellsSelectedPerColumn === availableRowCount) {
+      // Performance heuristic. We know that no column can have more cells
+      // selected than the number of rows. Thus, if the average number of cells
+      // selected per column is equal to the number of rows, then we know that
+      // all selected columns are fully selected.
+      return basis.columnIds;
+    }
+
+    // This is the worst-case scenario, performance-wise, which is why we try to
+    // return early before hitting this branch. This case will only happen when
+    // we have a mix of fully selected columns and partially selected columns.
+    // This case should be rare because most (maybe all?) selections are
+    // rectangular.
+    const countSelectedCellsPerColumn = new Map<string, number>();
+    for (const cellId of basis.cellIds) {
+      const { columnId } = parseCellId(cellId);
+      const count = countSelectedCellsPerColumn.get(columnId) ?? 0;
+      countSelectedCellsPerColumn.set(columnId, count + 1);
+    }
+    const fullySelectedColumnIds = execPipe(
+      countSelectedCellsPerColumn,
+      filter(([, count]) => count === availableRowCount),
+      map(([id]) => id),
+    );
+    return new ImmutableSet(fullySelectedColumnIds);
+  }
+
+  if (basis.type === 'emptyColumns') {
+    return basis.columnIds;
+  }
+
+  if (basis.type === 'placeholderCell') {
+    return new ImmutableSet();
+  }
+
+  if (basis.type === 'empty') {
+    return new ImmutableSet();
+  }
+
+  return assertExhaustive(basis.type);
+}
+
+/**
+ * This is an immutable data structure which fully represents the state of a
+ * selection selection of cells along with the Plane in which they were
+ * selected.
+ *
+ * We store the Plane here so to make it possible to provide methods on
+ * `SheetSelection` instances which return new mutations of the selection that
+ * are still valid within the Plane.
+ */
+export default class SheetSelection {
+  private readonly plane: Plane;
+
+  private readonly basis: Basis;
+
+  /** Ids of columns in which _all_ data cells are selected */
+  fullySelectedColumnIds: ImmutableSet<string>;
+
+  constructor(plane: Plane = new Plane(), basis: Basis = emptyBasis()) {
+    this.plane = plane;
+    this.basis = basis;
+    // TODO validate that basis is valid within plane. For example, remove
+    // selected cells from the basis that do not occur within the plane.
+
+    this.fullySelectedColumnIds = getFullySelectedColumnIds(
+      this.plane,
+      this.basis,
+    );
+  }
+
+  get activeCellId(): string | undefined {
+    return this.basis.activeCellId;
+  }
+
+  get cellIds(): ImmutableSet<string> {
+    return this.basis.cellIds;
+  }
+
+  /** Ids of rows which are at least _partially_ selected */
+  get rowIds(): ImmutableSet<string> {
+    return this.basis.rowIds;
+  }
+
+  /** Ids of columns which are at least _partially_ selected */
+  get columnIds(): ImmutableSet<string> {
+    return this.basis.columnIds;
+  }
+
+  private withBasis(basis: Basis): SheetSelection {
+    return new SheetSelection(this.plane, basis);
+  }
+
+  /**
+   * @returns a new selection with all cells selected. The active cell will be
+   * the cell in the first row and first column.
+   */
+  ofAllDataCells(): SheetSelection {
+    if (!this.plane.hasResultRows) {
+      return this.withBasis(basisFromZeroEmptyColumns());
+    }
+    return this.withBasis(basisFromDataCells(this.plane.allDataCells()));
+  }
+
+  /**
+   * @returns a new selection with the cell in the first row and first column
+   * selected.
+   */
+  ofFirstDataCell(): SheetSelection {
+    const firstCellId = first(this.plane.allDataCells());
+    if (firstCellId === undefined) {
+      return this.withBasis(basisFromZeroEmptyColumns());
+    }
+    return this.withBasis(basisFromDataCells([firstCellId]));
+  }
+
+  /**
+   * @returns a new selection formed by selecting the one cell that we think
+   * users are most likely to want selected after choosing to add a new record.
+   *
+   * We use the last row because that's where we add new records. If there is
+   * only one column, then we select the first cell in that column. Otherwise,
+   * we select the cell in the second column (because we assume the first column
+   * is probably a PK column which can't accept data entry.)
+   */
+  ofNewRecordDataEntryCell(): SheetSelection {
+    const rowId = this.plane.rowIds.last;
+    if (!rowId) return this;
+    const columnId = this.plane.columnIds.at(1) ?? this.plane.columnIds.first;
+    if (!columnId) return this;
+    return this.ofOneCell(makeCellId(rowId, columnId));
+  }
+
+  /**
+   * @returns a new selection with all rows selected between (and including) the
+   * provided rows.
+   *
+   * If either of the provided rows are placeholder rows, then the last data row
+   * will be used in their place. This ensures that the selection is made only
+   * of data rows, and will never include the placeholder row, even if a user
+   * drags to select it.
+   */
+  ofRowRange(rowIdA: string, rowIdB: string): SheetSelection {
+    return this.withBasis(
+      basisFromDataCells(
+        this.plane.dataCellsInFlexibleRowRange(rowIdA, rowIdB),
+        makeCellId(rowIdA, this.plane.columnIds.first ?? ''),
+      ),
+    );
+  }
+
+  /**
+   * @returns a new selection of all data cells in all columns between the
+   * provided columnIds, inclusive.
+   */
+  ofColumnRange(columnIdA: string, columnIdB: string): SheetSelection {
+    const newBasis = this.plane.rowIds.first
+      ? basisFromDataCells(
+          this.plane.dataCellsInColumnRange(columnIdA, columnIdB),
+          makeCellId(this.plane.rowIds.first, columnIdA),
+        )
+      : basisFromEmptyColumns(this.plane.columnIds.range(columnIdA, columnIdB));
+    return this.withBasis(newBasis);
+  }
+
+  /**
+   * @returns a new selection of all data cells in the intersection of the
+   * provided rows and columns.
+   */
+  ofRowColumnIntersection(
+    rowIds: Iterable<string>,
+    columnIds: Iterable<string>,
+  ): SheetSelection {
+    return this.withBasis(basisFromDataCells(makeCells(rowIds, columnIds)));
+  }
+
+  /**
+   * @returns a new selection formed by the rectangle between the provided
+   * cells, inclusive.
+   *
+   * If either of the provided cells are in the placeholder row, then the cell
+   * in the last data row will be used in its place. This ensures that the
+   * selection is made only of data cells, and will never include cells in the
+   * placeholder row, even if a user drags to select a cell in it.
+   */
+  ofDataCellRange(cellIdA: string, cellIdB: string): SheetSelection {
+    return this.withBasis(
+      basisFromDataCells(
+        this.plane.dataCellsInFlexibleCellRange(cellIdA, cellIdB),
+        cellIdA,
+      ),
+    );
+  }
+
+  ofSheetCellRange(
+    startingCell: SheetCellDetails,
+    endingCell: SheetCellDetails,
+  ): SheetSelection {
+    // Nullish coalescing is safe here since we know we'll have a first row and
+    // first column in the cases where we're selecting things.
+    const firstRow = () => this.plane.rowIds.first ?? '';
+    const firstColumn = () => this.plane.columnIds.first ?? '';
+
+    return match(startingCell, 'type', {
+      'data-cell': ({ cellId: startingCellId }) => {
+        const endingCellId = match(endingCell, 'type', {
+          'data-cell': (b) => b.cellId,
+          'column-header-cell': (b) => makeCellId(firstRow(), b.columnId),
+          'row-header-cell': (b) => makeCellId(b.rowId, firstColumn()),
+        });
+        return this.ofDataCellRange(startingCellId, endingCellId);
+      },
+
+      'column-header-cell': ({ columnId: startingColumnId }) => {
+        const endingColumnId = match(endingCell, 'type', {
+          'data-cell': (b) => parseCellId(b.cellId).columnId,
+          'column-header-cell': (b) => b.columnId,
+          'row-header-cell': () => firstColumn(),
+        });
+        return this.ofColumnRange(startingColumnId, endingColumnId);
+      },
+
+      'row-header-cell': ({ rowId: startingRowId }) => {
+        const endingRowId = match(endingCell, 'type', {
+          'data-cell': (b) => parseCellId(b.cellId).rowId,
+          'column-header-cell': () => firstRow(),
+          'row-header-cell': (b) => b.rowId,
+        });
+        return this.ofRowRange(startingRowId, endingRowId);
+      },
+    });
+  }
+
+  /**
+   * @returns a new selection formed from one cell within the data rows or the
+   * placeholder row.
+   */
+  ofOneCell(cellId: string): SheetSelection {
+    const { rowId } = parseCellId(cellId);
+    const { placeholderRowId } = this.plane;
+    const makeBasis =
+      rowId === placeholderRowId
+        ? basisFromPlaceholderCell
+        : basisFromOneDataCell;
+    return this.withBasis(makeBasis(cellId));
+  }
+
+  ofOneRow(rowId: string): SheetSelection {
+    return this.ofRowRange(rowId, rowId);
+  }
+
+  ofOneColumn(columnId: string): SheetSelection {
+    return this.ofColumnRange(columnId, columnId);
+  }
+
+  /**
+   * @returns a new selection that fits within the provided plane. This is
+   * relevant when paginating or when rows/columns are deleted/reordered/inserted.
+   */
+  forNewPlane(newPlane: Plane): SheetSelection {
+    if (this.basis.type === 'dataCells') {
+      if (!newPlane.hasResultRows) {
+        return new SheetSelection(newPlane, basisFromZeroEmptyColumns());
+      }
+
+      const [minRowId, maxRowId] = fitSelectedValuesToSeriesTransformation(
+        this.basis.rowIds,
+        this.plane.rowIds,
+        newPlane.rowIds,
+      );
+      const [minColumnId, maxColumnId] =
+        fitSelectedValuesToSeriesTransformation(
+          this.basis.columnIds,
+          this.plane.columnIds,
+          newPlane.columnIds,
+        );
+      if (
+        minRowId === undefined ||
+        maxRowId === undefined ||
+        minColumnId === undefined ||
+        maxColumnId === undefined
+      ) {
+        return new SheetSelection(newPlane);
+      }
+
+      const cellIds = newPlane.dataCellsInFlexibleRowColumnRange(
+        minRowId,
+        maxRowId,
+        minColumnId,
+        maxColumnId,
+      );
+
+      return new SheetSelection(
+        newPlane,
+        basisFromDataCells(cellIds, this.activeCellId),
+      );
+    }
+
+    if (this.basis.type === 'emptyColumns') {
+      if (newPlane.hasResultRows) {
+        return new SheetSelection(newPlane);
+      }
+      const minColumnId = newPlane.columnIds.min(this.basis.columnIds);
+      const maxColumnId = newPlane.columnIds.max(this.basis.columnIds);
+      if (minColumnId === undefined || maxColumnId === undefined) {
+        return new SheetSelection(newPlane, basisFromZeroEmptyColumns());
+      }
+      const columnIds = newPlane.columnIds.range(minColumnId, maxColumnId);
+      return new SheetSelection(newPlane, basisFromEmptyColumns(columnIds));
+    }
+
+    if (this.basis.type === 'placeholderCell') {
+      const columnId = first(this.basis.columnIds);
+      if (columnId === undefined) {
+        return new SheetSelection(newPlane);
+      }
+      const newPlaneHasSelectedCell =
+        newPlane.columnIds.has(columnId) &&
+        newPlane.placeholderRowId === this.plane.placeholderRowId;
+      if (newPlaneHasSelectedCell) {
+        // If we can retain the selected placeholder cell, then do so.
+        return new SheetSelection(newPlane, basisFromPlaceholderCell(columnId));
+      }
+      // Otherwise, return an empty selection
+      return new SheetSelection(newPlane);
+    }
+
+    if (this.basis.type === 'empty') {
+      // If the selection is empty, we keep it empty.
+      return new SheetSelection(newPlane);
+    }
+
+    return assertExhaustive(this.basis.type);
+  }
+
+  /**
+   * @returns a new selection formed by the rectangle between the currently
+   * active cell and provided cell, inclusive.
+   *
+   * This operation is designed to mimic the behavior of Google Sheets when
+   * shift-clicking a specific cell, or when dragging to create a new selection.
+   * A new selection is created that contains all cells in a rectangle bounded
+   * by the active cell (also the first cell selected when dragging) and the
+   * provided cell.
+   */
+  drawnToDataCell(cellId: string): SheetSelection {
+    return this.ofDataCellRange(this.activeCellId ?? cellId, cellId);
+  }
+
+  /**
+   * @returns a new selection formed by the cells in all the rows between the
+   * active cell and the provided row, inclusive.
+   */
+  drawnToRow(rowId: string): SheetSelection {
+    const activeRowId = this.activeCellId
+      ? parseCellId(this.activeCellId).rowId
+      : rowId;
+    return this.ofRowRange(activeRowId, rowId);
+  }
+
+  drawnToColumn(columnId: string): SheetSelection {
+    // TODO improve handling for empty columns
+
+    const activeColumnId = this.activeCellId
+      ? parseCellId(this.activeCellId).columnId
+      : columnId;
+    return this.ofColumnRange(activeColumnId, columnId);
+  }
+
+  /**
+   * @returns a new selection that mimics the behavior of arrow keys in
+   * spreadsheets. If the active cell can be moved in the provided direction,
+   * then a new selection is created with only that one cell selected.
+   */
+  collapsedAndMoved(direction: Direction): SheetSelection {
+    if (this.basis.type === 'emptyColumns') {
+      const offset = getColumnOffset(direction);
+      const newActiveColumnId = this.plane.columnIds.collapsedOffset(
+        this.basis.columnIds,
+        offset,
+      );
+      if (newActiveColumnId === undefined) {
+        // If we couldn't shift in the direction, then do nothing
+        return this;
+      }
+      return this.withBasis(basisFromEmptyColumns([newActiveColumnId]));
+    }
+
+    if (this.activeCellId === undefined) {
+      // If no cells are selected, then select the first data cell
+      return this.ofFirstDataCell();
+    }
+
+    const adjacent = this.plane.getAdjacentCell(this.activeCellId, direction);
+
+    if (adjacent.type === 'none') {
+      // If we can't move anywhere, then do nothing
+      return this;
+    }
+    if (adjacent.type === 'dataCell' || adjacent.type === 'placeholderCell') {
+      // Move to an adjacent data cell or adjacent placeholder cell
+      return this.ofOneCell(adjacent.cellId);
+    }
+    return assertExhaustive(adjacent);
+  }
+
+  /**
+   * @returns a new selection with the active cell moved within the selection,
+   * left to right, top to bottom.
+   *
+   * This is to handle the `Tab` and `Shift+Tab` keys.
+   */
+  withActiveCellAdvanced(
+    direction: 'forward' | 'back' = 'forward',
+  ): SheetSelection {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * @returns a new selection that is grown or shrunk to mimic the behavior of
+   * Google Sheets when manipulating selections via keyboard shortcuts like
+   * `Shift+Down`. The selection is deformed in the direction of the provided
+   * argument. The selection is _shrunk_ if doing so will keep the active cell
+   * within the selection. Otherwise, the selection is _grown_.
+   *
+   * Note that other spreadsheet applications have slightly different behavior
+   * for Shift + arrow keys. For example, LibreOffice Calc maintains state for
+   * the origin of the selection separate from the active cell. The two cells
+   * may be different if the user presses `Tab` after making a selection. In
+   * this case, the selection will be resized with respect to the origin, not
+   * the active cell. We chose to mimic Google Sheets behavior here because it
+   * is simpler.
+   */
+  resized(direction: Direction): SheetSelection {
+    // TODO
+    console.log('Sheet selection resizing is not yet implemented');
+    return this;
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts b/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts
new file mode 100644
index 0000000000..91261083e7
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/SheetSelectionStore.ts
@@ -0,0 +1,67 @@
+import type { Readable, Writable } from 'svelte/store';
+
+import { EventHandler } from '@mathesar/component-library';
+import PreventableEffectsStore from '@mathesar/stores/PreventableEffectsStore';
+
+import type Plane from './Plane';
+import SheetSelection from './SheetSelection';
+
+export default class SheetSelectionStore
+  extends EventHandler<{
+    focus: void;
+  }>
+  implements Writable<SheetSelection>
+{
+  private selection: PreventableEffectsStore<SheetSelection, 'focus'>;
+
+  private cleanupFunctions: (() => void)[] = [];
+
+  constructor(plane: Readable<Plane>) {
+    super();
+    this.selection = new PreventableEffectsStore(new SheetSelection(), {
+      focus: () => this.focus(),
+    });
+    this.cleanupFunctions.push(
+      plane.subscribe((p) => this.selection.update((s) => s.forNewPlane(p))),
+    );
+  }
+
+  private focus(): void {
+    void this.dispatch('focus');
+  }
+
+  subscribe(run: (value: SheetSelection) => void): () => void {
+    return this.selection.subscribe(run);
+  }
+
+  update(getNewValue: (oldValue: SheetSelection) => SheetSelection): void {
+    this.selection.update(getNewValue);
+  }
+
+  /**
+   * Updates the selection while skipping the side effect of focusing the active
+   * cell.
+   */
+  updateWithoutFocus(
+    getNewValue: (oldValue: SheetSelection) => SheetSelection,
+  ): void {
+    this.selection.update(getNewValue, { prevent: ['focus'] });
+  }
+
+  set(value: SheetSelection): void {
+    this.selection.set(value);
+  }
+
+  /**
+   * Sets the selection while skipping the side effect of focusing the active
+   * cell.
+   */
+  setWithoutFocus(value: SheetSelection): void {
+    this.selection.update(() => value, { prevent: ['focus'] });
+  }
+
+  destroy(): void {
+    super.destroy();
+    this.cleanupFunctions.forEach((f) => f());
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
new file mode 100644
index 0000000000..ac1351a4b9
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Plane.test.ts
@@ -0,0 +1,60 @@
+import { Direction } from '../Direction';
+import Plane from '../Plane';
+import Series from '../Series';
+
+test('Plane with placeholder row', () => {
+  const p = new Plane(
+    new Series(['r1', 'r2', 'r3', 'r4']),
+    new Series(['c1', 'c2', 'c3', 'c4']),
+    'PH',
+  );
+
+  expect([...p.allDataCells()]).toEqual([
+    '["r1","c1"]',
+    '["r1","c2"]',
+    '["r1","c3"]',
+    '["r1","c4"]',
+    '["r2","c1"]',
+    '["r2","c2"]',
+    '["r2","c3"]',
+    '["r2","c4"]',
+    '["r3","c1"]',
+    '["r3","c2"]',
+    '["r3","c3"]',
+    '["r3","c4"]',
+    '["r4","c1"]',
+    '["r4","c2"]',
+    '["r4","c3"]',
+    '["r4","c4"]',
+  ]);
+
+  expect([...p.dataCellsInFlexibleRowRange('r1', 'r2')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('r1', 'r3')].length).toBe(12);
+  expect([...p.dataCellsInFlexibleRowRange('r3', 'r4')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('r3', 'PH')].length).toBe(8);
+  expect([...p.dataCellsInFlexibleRowRange('PH', 'PH')]).toEqual([
+    '["r4","c1"]',
+    '["r4","c2"]',
+    '["r4","c3"]',
+    '["r4","c4"]',
+  ]);
+
+  expect([...p.dataCellsInColumnRange('c1', 'c2')].length).toBe(8);
+  expect([...p.dataCellsInColumnRange('c1', 'c3')].length).toBe(12);
+
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Up)).toEqual({
+    type: 'dataCell',
+    cellId: '["r3","c4"]',
+  });
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Right)).toEqual({
+    type: 'none',
+  });
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Down)).toEqual({
+    type: 'placeholderCell',
+    cellId: '["PH","c4"]',
+  });
+  expect(p.getAdjacentCell('["r4","c4"]', Direction.Left)).toEqual({
+    type: 'dataCell',
+    cellId: '["r4","c3"]',
+  });
+});
diff --git a/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
new file mode 100644
index 0000000000..0d485b64a7
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/__tests__/Series.test.ts
@@ -0,0 +1,78 @@
+import Series from '../Series';
+
+describe('Series', () => {
+  const h = 'h';
+  const i = 'i';
+  const j = 'j';
+  const k = 'k';
+  const l = 'l';
+  const all = [h, i, j, k, l];
+  const s = new Series(all);
+
+  test('basics', () => {
+    expect(s.length).toBe(5);
+    expect(s.first).toBe(h);
+    expect(s.last).toBe(l);
+    expect([...s]).toEqual(all);
+  });
+
+  test.each([
+    [[i, j, k], i],
+    [[k, j, i], i],
+    [[i, 'NOPE'], i],
+    [['NOPE'], undefined],
+    [[], undefined],
+  ])('min %#', (input, expected) => {
+    expect(s.min(input)).toBe(expected);
+  });
+
+  test.each([
+    [[i, j, k], k],
+    [[k, j, i], k],
+    [[i, 'NOPE'], i],
+    [['NOPE'], undefined],
+    [[], undefined],
+  ])('max %#', (input, expected) => {
+    expect(s.max(input)).toBe(expected);
+  });
+
+  test.each([
+    [i, k, [i, j, k]],
+    [k, i, [i, j, k]],
+    [i, i, [i]],
+  ])('range %#', (a, b, expected) => {
+    expect([...s.range(a, b)]).toEqual(expected);
+  });
+
+  test.each([
+    [i, 'NOPE'],
+    ['NOPE', i],
+  ])('range failures %#', (a, b) => {
+    expect(() => s.range(a, b)).toThrow();
+  });
+
+  test.each([
+    [i, 0, i],
+    [i, 1, j],
+    [i, 2, k],
+    [i, -1, h],
+    [i, -2, undefined],
+    ['NOPE', 0, undefined],
+    ['NOPE', 1, undefined],
+  ])('offset %#', (value, offset, expected) => {
+    expect(s.offset(value, offset)).toBe(expected);
+  });
+
+  test.each([
+    [[i, k], 0, undefined],
+    [[i, k], 1, l],
+    [[i, k], 2, undefined],
+    [[i, k], -1, h],
+    [[i, k], -2, undefined],
+    [[i, 'NOPE'], 0, undefined],
+    [[i, 'NOPE'], 1, j],
+    [[], 0, undefined],
+  ])('collapsedOffset %#', (values, offset, expected) => {
+    expect(s.collapsedOffset(values, offset)).toBe(expected);
+  });
+});
diff --git a/mathesar_ui/src/components/sheet/selection/basis.ts b/mathesar_ui/src/components/sheet/selection/basis.ts
new file mode 100644
index 0000000000..6d31861d05
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/basis.ts
@@ -0,0 +1,106 @@
+import { first } from 'iter-tools';
+
+import { ImmutableSet } from '@mathesar/component-library';
+
+import { parseCellId } from '../cellIds';
+
+/**
+ * - `'dataCells'` means that the selection contains data cells. This is by far
+ *   the most common type of selection basis.
+ *
+ * - `'emptyColumns'` is used when the sheet has no rows. In this case we still
+ *   want to allow the user to select columns, so we use this basis.
+ *
+ * - `'placeholderCell'` is used when the user is selecting a cell in the
+ *   placeholder row. This is a special case because we don't want to allow the
+ *   user to select multiple cells in the placeholder row, and we also don't
+ *   want to allow selections that include cells in data rows _and_ the
+ *   placeholder row.
+ *
+ * - `'empty'` is used when no cells are selected. We try to avoid this state,
+ *   but we also allow for it because it makes it easier to construct selection
+ *   instances if we don't already have the full plane data.
+ */
+export type BasisType =
+  | 'dataCells'
+  | 'emptyColumns'
+  | 'placeholderCell'
+  | 'empty';
+
+/**
+ * This type stores data about "which cells are selected", with some redundancy
+ * for efficient and consistent lookup across different kinds of selections.
+ *
+ * Due to the redundant nature of some properties on this type, you should be
+ * sure to only instantiate Basis using the utility functions below. This will
+ * ensure that the data is always valid.
+ */
+export interface Basis {
+  readonly type: BasisType;
+  readonly activeCellId: string | undefined;
+  readonly cellIds: ImmutableSet<string>;
+  readonly rowIds: ImmutableSet<string>;
+  readonly columnIds: ImmutableSet<string>;
+}
+
+export function basisFromDataCells(
+  _cellIds: Iterable<string>,
+  _activeCellId?: string,
+): Basis {
+  const parsedCells = [..._cellIds].map(parseCellId);
+  const cellIds = new ImmutableSet(_cellIds);
+  const activeCellId = (() => {
+    if (_activeCellId === undefined) {
+      return first(_cellIds);
+    }
+    if (cellIds.has(_activeCellId)) {
+      return _activeCellId;
+    }
+    return first(_cellIds);
+  })();
+  return {
+    type: 'dataCells',
+    activeCellId,
+    cellIds,
+    columnIds: new ImmutableSet(parsedCells.map((cellId) => cellId.columnId)),
+    rowIds: new ImmutableSet(parsedCells.map((cellId) => cellId.rowId)),
+  };
+}
+
+export function basisFromOneDataCell(cellId: string): Basis {
+  return basisFromDataCells([cellId], cellId);
+}
+
+export function basisFromEmptyColumns(columnIds: Iterable<string>): Basis {
+  return {
+    type: 'emptyColumns',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(columnIds),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+export function basisFromZeroEmptyColumns(): Basis {
+  return basisFromEmptyColumns([]);
+}
+
+export function basisFromPlaceholderCell(activeCellId: string): Basis {
+  return {
+    type: 'placeholderCell',
+    activeCellId,
+    cellIds: new ImmutableSet([activeCellId]),
+    columnIds: new ImmutableSet([parseCellId(activeCellId).columnId]),
+    rowIds: new ImmutableSet(),
+  };
+}
+
+export function emptyBasis(): Basis {
+  return {
+    type: 'empty',
+    activeCellId: undefined,
+    cellIds: new ImmutableSet(),
+    columnIds: new ImmutableSet(),
+    rowIds: new ImmutableSet(),
+  };
+}
diff --git a/mathesar_ui/src/components/sheet/selection/index.ts b/mathesar_ui/src/components/sheet/selection/index.ts
new file mode 100644
index 0000000000..ec81a55c52
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/index.ts
@@ -0,0 +1 @@
+export * from './selectionUtils';
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
new file mode 100644
index 0000000000..ee9c120b90
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -0,0 +1,116 @@
+import type { Writable } from 'svelte/store';
+
+import { type ImmutableSet, defined } from '@mathesar-component-library';
+
+import type Series from './Series';
+import type SheetSelection from './SheetSelection';
+
+export type SheetCellDetails =
+  | { type: 'data-cell'; cellId: string }
+  | { type: 'column-header-cell'; columnId: string }
+  | { type: 'row-header-cell'; rowId: string };
+
+export function findContainingSheetCell(
+  element: HTMLElement,
+): SheetCellDetails | undefined {
+  const containingElement = element.closest('[data-sheet-element]');
+  if (!containingElement) return undefined;
+
+  const elementType = containingElement.getAttribute('data-sheet-element');
+  if (!elementType) return undefined;
+
+  if (elementType === 'data-cell') {
+    const cellId = containingElement.getAttribute('data-cell-selection-id');
+    if (!cellId) return undefined;
+    return { type: 'data-cell', cellId };
+  }
+
+  if (elementType === 'column-header-cell') {
+    const columnId = containingElement.getAttribute('data-column-identifier');
+    if (!columnId) return undefined;
+    return { type: 'column-header-cell', columnId };
+  }
+
+  if (elementType === 'row-header-cell') {
+    const rowId = containingElement.getAttribute('data-row-selection-id');
+    if (!rowId) return undefined;
+    return { type: 'row-header-cell', rowId };
+  }
+
+  return undefined;
+}
+
+export function beginSelection({
+  selection,
+  sheetElement,
+  startingCell,
+  targetCell,
+  selectionInProgress,
+}: {
+  selection: Writable<SheetSelection>;
+  sheetElement: HTMLElement;
+  startingCell: SheetCellDetails;
+  targetCell: SheetCellDetails;
+  selectionInProgress: Writable<boolean>;
+}) {
+  let previousTarget: HTMLElement | undefined;
+
+  function drawToCell(endingCell: SheetCellDetails) {
+    selection.update((s) => s.ofSheetCellRange(startingCell, endingCell));
+  }
+
+  function drawToPoint(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (target === previousTarget) return; // For performance
+    const cell = findContainingSheetCell(target);
+    if (!cell) return;
+    drawToCell(cell);
+  }
+
+  function finish() {
+    sheetElement.removeEventListener('mousemove', drawToPoint);
+    window.removeEventListener('mouseup', finish);
+    selectionInProgress.set(false);
+  }
+
+  selectionInProgress.set(true);
+  drawToCell(targetCell);
+  sheetElement.addEventListener('mousemove', drawToPoint);
+  window.addEventListener('mouseup', finish);
+}
+
+function positive(n: number): number {
+  return Math.max(0, n);
+}
+
+/**
+ * Given a set of (contiguous) selected values within a series, this function
+ * will formulate a new set of selected values to fit within a new series such
+ * that the starting index and width of the selection are preserved to the best
+ * extent possible.
+ *
+ * @return A tuple containing the starting and ending values of the new
+ * selection.
+ */
+export function fitSelectedValuesToSeriesTransformation<T>(
+  selectedValues: ImmutableSet<T>,
+  oldSeries: Series<T>,
+  newSeries: Series<T>,
+): [T, T] {
+  const matchingMin = newSeries.min(selectedValues);
+  const matchingMax = newSeries.max(selectedValues);
+  if (matchingMin !== undefined && matchingMax !== undefined) {
+    return [matchingMin, matchingMax];
+  }
+
+  const width = Math.min(selectedValues.size, newSeries.length);
+  const oldStartingIndex =
+    defined(oldSeries.min(selectedValues), (v) => oldSeries.getIndex(v)) ?? 0;
+  const indexReduction = positive(
+    oldStartingIndex + width - 1 - newSeries.length,
+  );
+  const newStartingIndex = positive(oldStartingIndex - indexReduction);
+  const newStartingValue = newSeries.at(newStartingIndex) as T;
+  const newEndingValue = newSeries.at(newStartingIndex + width - 1) as T;
+  return [newStartingValue, newEndingValue];
+}
diff --git a/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts b/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts
new file mode 100644
index 0000000000..187dc00da6
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/sheetKeyboardUtils.ts
@@ -0,0 +1,48 @@
+import type { Writable } from 'svelte/store';
+
+import { KeyboardShortcut } from '@mathesar/utils/KeyboardShortcut';
+
+import { Direction } from './selection/Direction';
+import type SheetSelection from './selection/SheetSelection';
+import { autoScroll } from './sheetScrollingUtils';
+
+function move(selection: Writable<SheetSelection>, direction: Direction) {
+  selection.update((s) => s.collapsedAndMoved(direction));
+  void autoScroll();
+}
+
+function resize(selection: Writable<SheetSelection>, direction: Direction) {
+  selection.update((s) => s.resized(direction));
+  void autoScroll();
+}
+
+function key(...args: Parameters<typeof KeyboardShortcut.fromKey>) {
+  return KeyboardShortcut.fromKey(...args).toString();
+}
+
+const shortcutMapData: [string, (s: Writable<SheetSelection>) => void][] = [
+  [key('ArrowUp'), (s) => move(s, Direction.Up)],
+  [key('ArrowDown'), (s) => move(s, Direction.Down)],
+  [key('ArrowLeft'), (s) => move(s, Direction.Left)],
+  [key('ArrowRight'), (s) => move(s, Direction.Right)],
+  [key('Tab'), (s) => move(s, Direction.Right)],
+  [key('Tab', ['Shift']), (s) => move(s, Direction.Left)],
+  [key('ArrowUp', ['Shift']), (s) => resize(s, Direction.Up)],
+  [key('ArrowDown', ['Shift']), (s) => resize(s, Direction.Down)],
+  [key('ArrowLeft', ['Shift']), (s) => resize(s, Direction.Left)],
+  [key('ArrowRight', ['Shift']), (s) => resize(s, Direction.Right)],
+];
+
+const shortcutMap = new Map(shortcutMapData);
+
+export function handleKeyboardEventOnCell(
+  event: KeyboardEvent,
+  selection: Writable<SheetSelection>,
+): void {
+  const shortcut = KeyboardShortcut.fromKeyboardEvent(event);
+  const action = shortcutMap.get(shortcut.toString());
+  if (action) {
+    event.preventDefault();
+    action(selection);
+  }
+}
diff --git a/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
new file mode 100644
index 0000000000..b59cbc2bdf
--- /dev/null
+++ b/mathesar_ui/src/components/sheet/sheetScrollingUtils.ts
@@ -0,0 +1,52 @@
+import { tick } from 'svelte';
+
+// TODO: Create a common utility action to handle active element based scroll
+function scrollToElement(htmlElement: HTMLElement | null): void {
+  const activeRow = htmlElement?.parentElement;
+  const container = document.querySelector('[data-sheet-body-element="list"]');
+  if (!container || !activeRow) {
+    return;
+  }
+  // Vertical scroll
+  if (
+    activeRow.offsetTop + activeRow.clientHeight + 40 >
+    container.scrollTop + container.clientHeight
+  ) {
+    const offsetValue: number =
+      container.getBoundingClientRect().bottom -
+      activeRow.getBoundingClientRect().bottom -
+      40;
+    container.scrollTop -= offsetValue;
+  } else if (activeRow.offsetTop - 30 < container.scrollTop) {
+    container.scrollTop = activeRow.offsetTop - 30;
+  }
+
+  // Horizontal scroll
+  if (
+    htmlElement.offsetLeft + activeRow.clientWidth + 30 >
+    container.scrollLeft + container.clientWidth
+  ) {
+    const offsetValue: number =
+      container.getBoundingClientRect().right -
+      htmlElement.getBoundingClientRect().right -
+      30;
+    container.scrollLeft -= offsetValue;
+  } else if (htmlElement.offsetLeft - 30 < container.scrollLeft) {
+    container.scrollLeft = htmlElement.offsetLeft - 30;
+  }
+}
+
+export function scrollBasedOnActiveCell(): void {
+  const cell = document.querySelector<HTMLElement>('[data-cell-active]');
+  scrollToElement(cell);
+}
+
+export function scrollBasedOnSelection(): void {
+  const cell = document.querySelector<HTMLElement>('[data-cell-selected]');
+  scrollToElement(cell);
+}
+
+export async function autoScroll() {
+  await tick();
+  scrollBasedOnActiveCell();
+}
diff --git a/mathesar_ui/src/components/sheet/utils.ts b/mathesar_ui/src/components/sheet/utils.ts
index 4f3915d8d0..93b5074599 100644
--- a/mathesar_ui/src/components/sheet/utils.ts
+++ b/mathesar_ui/src/components/sheet/utils.ts
@@ -15,6 +15,7 @@ export interface SheetContextStores<SheetColumnIdentifierKey> {
   horizontalScrollOffset: Readable<number>;
   scrollOffset: Readable<number>;
   paddingRight: Readable<number>;
+  selectionInProgress: Readable<boolean>;
 }
 
 export interface SheetContext<SheetColumnIdentifierKey> {
@@ -73,3 +74,7 @@ export function getSheetContext<
 >(): SheetContext<SheetColumnIdentifierKey> {
   return getContext(SHEET_CONTEXT_KEY);
 }
+
+export function focusActiveCell(sheetElement: HTMLElement): void {
+  sheetElement?.querySelector<HTMLElement>('[data-active-cell]')?.focus();
+}
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
index 2b59a9e911..b6359e8e2c 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
@@ -269,7 +269,8 @@
   }
   .sheet-holder {
     max-width: fit-content;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
     margin: 0 auto;
     border: 1px solid var(--slate-200);
   }
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
index bc443f6a92..e2689764f4 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
@@ -3,8 +3,9 @@
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
   import {
     Sheet,
-    SheetCell,
     SheetCellResizer,
+    SheetColumnHeaderCell,
+    SheetDataCell,
     SheetHeader,
     SheetRow,
   } from '@mathesar/components/sheet';
@@ -26,21 +27,19 @@
   <Sheet restrictWidthToRowWidth {columns} getColumnIdentifier={(c) => c.id}>
     <SheetHeader inheritFontStyle>
       {#each columns as column (column.id)}
-        <SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
-          <div {...htmlAttributes} {style}>
-            <PreviewColumn
-              {isLoading}
-              processedColumn={column}
-              {updateTypeRelatedOptions}
-              bind:selected={columnPropertiesMap[column.id].selected}
-              bind:displayName={columnPropertiesMap[column.id].displayName}
-            />
-            <SheetCellResizer
-              columnIdentifierKey={column.id}
-              minColumnWidth={120}
-            />
-          </div>
-        </SheetCell>
+        <SheetColumnHeaderCell columnIdentifierKey={column.id}>
+          <PreviewColumn
+            {isLoading}
+            processedColumn={column}
+            {updateTypeRelatedOptions}
+            bind:selected={columnPropertiesMap[column.id].selected}
+            bind:displayName={columnPropertiesMap[column.id].displayName}
+          />
+          <SheetCellResizer
+            columnIdentifierKey={column.id}
+            minColumnWidth={120}
+          />
+        </SheetColumnHeaderCell>
       {/each}
     </SheetHeader>
     {#each records as record (record)}
@@ -51,20 +50,14 @@
       >
         <div {...htmlAttributes} style={styleString}>
           {#each columns as column (column)}
-            <SheetCell
-              columnIdentifierKey={column.id}
-              let:htmlAttributes={sheetCellHtmlAttributes}
-              let:style
-            >
-              <div {...sheetCellHtmlAttributes} {style}>
-                <CellFabric
-                  columnFabric={column}
-                  value={record[column.column.name]}
-                  showAsSkeleton={isLoading}
-                  disabled={true}
-                />
-              </div>
-            </SheetCell>
+            <SheetDataCell columnIdentifierKey={column.id}>
+              <CellFabric
+                columnFabric={column}
+                value={record[column.column.name]}
+                showAsSkeleton={isLoading}
+                disabled={true}
+              />
+            </SheetDataCell>
           {/each}
         </div>
       </SheetRow>
@@ -74,13 +67,17 @@
 
 <style lang="scss">
   .import-preview {
-    :global([data-sheet-element='row'] [data-sheet-element='cell']) {
+    :global([data-sheet-element='data-cell']) {
       background: var(--white);
     }
-    :global([data-sheet-element] [data-sheet-element='cell']:last-child) {
+    :global([data-sheet-element='data-cell']:last-child),
+    :global([data-sheet-element='column-header-cell']:last-child) {
       border-right: none;
     }
-    :global([data-sheet-element='row']:last-child [data-sheet-element='cell']) {
+    :global(
+        [data-sheet-element='data-row']:last-child
+          [data-sheet-element='data-cell']
+      ) {
       border-bottom: none;
     }
   }
diff --git a/mathesar_ui/src/pages/record/Widgets.svelte b/mathesar_ui/src/pages/record/Widgets.svelte
index 79bf1abdee..2e4c562be1 100644
--- a/mathesar_ui/src/pages/record/Widgets.svelte
+++ b/mathesar_ui/src/pages/record/Widgets.svelte
@@ -86,10 +86,6 @@
     :global(.sheet) {
       background: var(--white);
     }
-
-    :global(.sheet [data-sheet-element='header']) {
-      background: var(--slate-100);
-    }
   }
 
   .table-widget-positioner {
diff --git a/mathesar_ui/src/pages/table/TablePage.svelte b/mathesar_ui/src/pages/table/TablePage.svelte
index 6c12da00a9..a72515d1f5 100644
--- a/mathesar_ui/src/pages/table/TablePage.svelte
+++ b/mathesar_ui/src/pages/table/TablePage.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import { router } from 'tinro';
 
   import type { TableEntry } from '@mathesar/api/rest/types/tables';
+  import { focusActiveCell } from '@mathesar/components/sheet/utils';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
   import { currentDbAbstractTypes } from '@mathesar/stores/abstract-types';
@@ -28,6 +30,8 @@
   export let table: TableEntry;
   export let shareConsumer: ShareConsumer | undefined = undefined;
 
+  let sheetElement: HTMLElement;
+
   $: abstractTypesMap = $currentDbAbstractTypes.data;
   $: ({ query } = $router);
   $: meta = Meta.fromSerialization(query[metaSerializationQueryKey] ?? '');
@@ -38,10 +42,26 @@
     table,
     shareConsumer,
   });
+  $: ({ isLoading, selection } = tabularData);
   $: tabularDataStore.set(tabularData);
   let context: 'shared-consumer-page' | 'page' = 'page';
   $: context = shareConsumer ? 'shared-consumer-page' : 'page';
 
+  async function activateFirstDataCell() {
+    selection.updateWithoutFocus((s) => s.ofFirstDataCell());
+    // Don't steal focus if the user has already focused on another UI element
+    // while the table data is loading.
+    if (document.activeElement === document.body) {
+      await tick();
+      focusActiveCell(sheetElement);
+    }
+  }
+  let hasInitialized = false;
+  $: if (!hasInitialized && !$isLoading) {
+    hasInitialized = true;
+    void activateFirstDataCell();
+  }
+
   function handleMetaSerializationChange(s: string) {
     router.location.query.set(metaSerializationQueryKey, s);
   }
@@ -54,7 +74,7 @@
 <LayoutWithHeader fitViewport restrictWidth={false}>
   <div class="table-page">
     <ActionsPane {table} {context} />
-    <TableView {table} {context} />
+    <TableView {table} {context} bind:sheetElement />
   </div>
 </LayoutWithHeader>
 
diff --git a/mathesar_ui/src/stores/PreventableEffectsStore.ts b/mathesar_ui/src/stores/PreventableEffectsStore.ts
new file mode 100644
index 0000000000..40980f1507
--- /dev/null
+++ b/mathesar_ui/src/stores/PreventableEffectsStore.ts
@@ -0,0 +1,76 @@
+import { type Writable, writable } from 'svelte/store';
+
+interface Effect<Value, EffectNames> {
+  name: EffectNames;
+  run: (v: Value) => void;
+}
+
+/**
+ * This is a writable store that holds effects which run when the value changes.
+ * Unlike other effect mechanisms in Svelte, this store allows you to prevent
+ * certain effects from running when the value changes — and control over that
+ * prevention is delegated to the call site of the update.
+ *
+ * The use case for this store is when you have an imperative effect that you
+ * want to run _almost_ all the time. By default you want the effect to run. But
+ * for some cases (when you do a little extra work), then you can prevent the
+ * effect from running while performing an update.
+ *
+ * ## Example
+ *
+ * ```ts
+ * const store = new PreventableEffectsStore(0, {
+ *  log: (v) => console.log(v),
+ * });
+ *
+ * store.update((v) => v + 1); // logs 1
+ * store.update((v) => v + 1, { prevent: ['log'] }); // does not log
+ * ```
+ */
+export default class PreventableEffectsStore<
+  Value,
+  EffectNames extends string,
+> {
+  private value: Writable<Value>;
+
+  private effects: Effect<Value, EffectNames>[] = [];
+
+  constructor(
+    initialValue: Value,
+    effectMap: Record<EffectNames, (v: Value) => void>,
+  ) {
+    this.value = writable(initialValue);
+    this.effects = Object.entries(effectMap).map(([name, run]) => ({
+      name: name as EffectNames,
+      run: run as (v: Value) => void,
+    }));
+  }
+
+  private runEffects(
+    value: Value,
+    options: { prevent?: EffectNames[] } = {},
+  ): void {
+    this.effects
+      .filter(({ name }) => !options.prevent?.includes(name))
+      .forEach(({ run }) => run(value));
+  }
+
+  subscribe(run: (value: Value) => void): () => void {
+    return this.value.subscribe(run);
+  }
+
+  update(
+    getNewValue: (oldValue: Value) => Value,
+    options: { prevent?: EffectNames[] } = {},
+  ): void {
+    this.value.update((oldValue) => {
+      const newValue = getNewValue(oldValue);
+      this.runEffects(newValue, options);
+      return newValue;
+    });
+  }
+
+  set(value: Value): void {
+    this.value.set(value);
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/display.ts b/mathesar_ui/src/stores/table-data/display.ts
index c4e1426608..872c7d8cdf 100644
--- a/mathesar_ui/src/stores/table-data/display.ts
+++ b/mathesar_ui/src/stores/table-data/display.ts
@@ -65,6 +65,8 @@ export class Display {
 
   displayableRecords: Readable<Row[]>;
 
+  placeholderRowId: Readable<string>;
+
   constructor(
     meta: Meta,
     columnsDataStore: ColumnsDataStore,
@@ -100,6 +102,9 @@ export class Display {
       ),
     );
 
+    const placeholderRowId = writable('');
+    this.placeholderRowId = placeholderRowId;
+
     const { savedRecordRowsWithGroupHeaders, newRecords } = this.recordsData;
     this.displayableRecords = derived(
       [savedRecordRowsWithGroupHeaders, newRecords],
@@ -122,11 +127,24 @@ export class Display {
             })
             .concat($newRecords);
         }
-        allRecords = allRecords.concat({
+        const placeholderRow = {
           ...this.recordsData.getNewEmptyRecord(),
           rowIndex: savedRecords.length + $newRecords.length,
           isAddPlaceholder: true,
-        });
+        };
+
+        // This is really hacky! We have a side effect (mutating state) within a
+        // derived store, which I don't like. I put this here during a large
+        // refactor of the cell selection code because the Plane needs to know
+        // the id of the placeholder row since cell selection behaves
+        // differently in the placeholder row. I think we have some major
+        // refactoring to do across all the code that handles "rows" and
+        // "records" and things like that. There is a ton of mess there and I
+        // didn't want to lump any of that refactoring into an already-large
+        // refactor.
+        placeholderRowId.set(placeholderRow.identifier);
+
+        allRecords = allRecords.concat(placeholderRow);
         return allRecords;
       },
     );
diff --git a/mathesar_ui/src/stores/table-data/index.ts b/mathesar_ui/src/stores/table-data/index.ts
index 279ba7d931..2d68b467ac 100644
--- a/mathesar_ui/src/stores/table-data/index.ts
+++ b/mathesar_ui/src/stores/table-data/index.ts
@@ -42,7 +42,6 @@ export {
   getTabularDataStoreFromContext,
   TabularData,
   type TabularDataProps,
-  type TabularDataSelection,
 } from './tabularData';
 export {
   type ProcessedColumn,
diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index e64ecd35cb..e25b0bf904 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -175,7 +175,6 @@ export function filterRecordRows(rows: Row[]): RecordRow[] {
 export function rowHasSavedRecord(row: Row): row is RecordRow {
   return rowHasRecord(row) && Object.entries(row.record).length > 0;
 }
-
 export interface TableRecordsData {
   state: States;
   error?: string;
@@ -184,6 +183,10 @@ export interface TableRecordsData {
   grouping?: RecordGrouping;
 }
 
+export function getRowSelectionId(row: Row): string {
+  return row.identifier;
+}
+
 export function getRowKey(row: Row, primaryKeyColumnId?: Column['id']): string {
   if (rowHasRecord(row) && primaryKeyColumnId !== undefined) {
     const primaryKeyCellValue = row.record[primaryKeyColumnId];
@@ -300,6 +303,9 @@ export class RecordsData {
 
   error: Writable<string | undefined>;
 
+  /** Keys are row selection ids */
+  selectableRowsMap: Readable<Map<string, RecordRow>>;
+
   private promise: CancellablePromise<ApiRecordsResponse> | undefined;
 
   // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
@@ -355,6 +361,14 @@ export class RecordsData {
     this.url = `/api/db/v0/tables/${this.tableId}/records/`;
     void this.fetch();
 
+    this.selectableRowsMap = derived(
+      [this.savedRecords, this.newRecords],
+      ([savedRecords, newRecords]) => {
+        const records = [...savedRecords, ...newRecords];
+        return new Map(records.map((r) => [getRowSelectionId(r), r]));
+      },
+    );
+
     // TODO: Create base class to abstract subscriptions and unsubscriptions
     this.requestParamsUnsubscriber =
       this.meta.recordsRequestParamsData.subscribe(() => {
@@ -363,35 +377,31 @@ export class RecordsData {
   }
 
   async fetch(
-    retainExistingRows = false,
+    opts: {
+      clearNewRecords?: boolean;
+      setLoadingState?: boolean;
+      clearMetaStatuses?: boolean;
+    } = {},
   ): Promise<TableRecordsData | undefined> {
+    const options = {
+      clearNewRecords: true,
+      setLoadingState: true,
+      clearMetaStatuses: true,
+      ...opts,
+    };
+
     this.promise?.cancel();
     const { offset } = get(this.meta.pagination);
 
-    this.savedRecordRowsWithGroupHeaders.update((existingData) => {
-      let data = [...existingData];
-      data.length = Math.min(data.length, get(this.meta.pagination).size);
-
-      let index = -1;
-      data = data.map((entry) => {
-        index += 1;
-        if (!retainExistingRows || !entry) {
-          return {
-            state: 'loading',
-            identifier: generateRowIdentifier('dummy', offset, index),
-            rowIndex: index,
-            record: {},
-          };
-        }
-        return entry;
-      });
-
-      return data;
-    });
     this.error.set(undefined);
-    if (!retainExistingRows) {
-      this.state.set(States.Loading);
+
+    if (options.clearNewRecords) {
       this.newRecords.set([]);
+    }
+    if (options.setLoadingState) {
+      this.state.set(States.Loading);
+    }
+    if (options.clearMetaStatuses) {
       this.meta.clearAllStatusesAndErrors();
     }
 
@@ -444,22 +454,23 @@ export class RecordsData {
     return undefined;
   }
 
-  async deleteSelected(selectedRowIndices: number[]): Promise<void> {
-    const recordRows = this.getRecordRows();
+  async deleteSelected(rowSelectionIds: Iterable<string>): Promise<void> {
+    const ids =
+      typeof rowSelectionIds === 'string' ? [rowSelectionIds] : rowSelectionIds;
     const pkColumn = get(this.columnsDataStore.pkColumn);
     const primaryKeysOfSavedRows: string[] = [];
     const identifiersOfUnsavedRows: string[] = [];
-    selectedRowIndices.forEach((index) => {
-      const row = recordRows[index];
-      if (row) {
-        const rowKey = getRowKey(row, pkColumn?.id);
-        if (pkColumn?.id && isDefinedNonNullable(row.record[pkColumn?.id])) {
-          primaryKeysOfSavedRows.push(rowKey);
-        } else {
-          identifiersOfUnsavedRows.push(rowKey);
-        }
+    const selectableRows = get(this.selectableRowsMap);
+    for (const rowId of ids) {
+      const row = selectableRows.get(rowId);
+      if (!row) continue;
+      const rowKey = getRowKey(row, pkColumn?.id);
+      if (pkColumn?.id && isDefinedNonNullable(row.record[pkColumn?.id])) {
+        primaryKeysOfSavedRows.push(rowKey);
+      } else {
+        identifiersOfUnsavedRows.push(rowKey);
       }
-    });
+    }
     const rowKeys = [...primaryKeysOfSavedRows, ...identifiersOfUnsavedRows];
 
     if (rowKeys.length === 0) {
@@ -519,7 +530,11 @@ export class RecordsData {
     // flag instead of just re-fetching the records immediately after deleting
     // the saved records.
     if (shouldReFetchRecords) {
-      await this.fetch(true);
+      await this.fetch({
+        clearMetaStatuses: false,
+        clearNewRecords: false,
+        setLoadingState: false,
+      });
     }
 
     this.meta.rowCreationStatus.delete(Array.from(savedRecordKeys, String));
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 7be6ffe365..7a2edfec4a 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -1,32 +1,25 @@
 import { getContext, setContext } from 'svelte';
-import {
-  type Readable,
-  type Writable,
-  derived,
-  get,
-  writable,
-} from 'svelte/store';
+import { type Readable, type Writable, derived, writable } from 'svelte/store';
 
 import type { TableEntry } from '@mathesar/api/rest/types/tables';
 import type { Column } from '@mathesar/api/rest/types/tables/columns';
 import { States } from '@mathesar/api/rest/utils/requestUtils';
 import type { DBObjectEntry } from '@mathesar/AppTypes';
-import { SheetSelection } from '@mathesar/components/sheet';
+import Plane from '@mathesar/components/sheet/selection/Plane';
+import Series from '@mathesar/components/sheet/selection/Series';
+import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import type { ShareConsumer } from '@mathesar/utils/shares';
-import { getColumnOrder } from '@mathesar/utils/tables';
+import { orderProcessedColumns } from '@mathesar/utils/tables';
 
 import { ColumnsDataStore } from './columns';
 import type { ConstraintsData } from './constraints';
 import { ConstraintsDataStore } from './constraints';
 import { Display } from './display';
 import { Meta } from './meta';
-import type {
-  ProcessedColumn,
-  ProcessedColumnsStore,
-} from './processedColumns';
+import type { ProcessedColumnsStore } from './processedColumns';
 import { processColumn } from './processedColumns';
-import type { RecordRow, TableRecordsData } from './records';
+import type { TableRecordsData } from './records';
 import { RecordsData } from './records';
 
 export interface TabularDataProps {
@@ -48,8 +41,6 @@ export interface TabularDataProps {
   >[0]['hasEnhancedPrimaryKeyCell'];
 }
 
-export type TabularDataSelection = SheetSelection<RecordRow, ProcessedColumn>;
-
 export class TabularData {
   id: DBObjectEntry['id'];
 
@@ -67,7 +58,7 @@ export class TabularData {
 
   isLoading: Readable<boolean>;
 
-  selection: TabularDataSelection;
+  selection: SheetSelectionStore;
 
   table: TableEntry;
 
@@ -101,48 +92,43 @@ export class TabularData {
       this.recordsData,
     );
 
+    this.table = props.table;
+
     this.processedColumns = derived(
       [this.columnsDataStore.columns, this.constraintsDataStore],
       ([columns, constraintsData]) =>
-        new Map(
-          columns.map((column, columnIndex) => [
-            column.id,
-            processColumn({
-              tableId: this.id,
-              column,
-              columnIndex,
-              constraints: constraintsData.constraints,
-              abstractTypeMap: props.abstractTypesMap,
-              hasEnhancedPrimaryKeyCell: props.hasEnhancedPrimaryKeyCell,
-            }),
-          ]),
+        orderProcessedColumns(
+          new Map(
+            columns.map((column, columnIndex) => [
+              column.id,
+              processColumn({
+                tableId: this.id,
+                column,
+                columnIndex,
+                constraints: constraintsData.constraints,
+                abstractTypeMap: props.abstractTypesMap,
+                hasEnhancedPrimaryKeyCell: props.hasEnhancedPrimaryKeyCell,
+              }),
+            ]),
+          ),
+          this.table,
         ),
     );
 
-    this.table = props.table;
-
-    this.selection = new SheetSelection({
-      getColumns: () => [...get(this.processedColumns).values()],
-      getColumnOrder: () =>
-        getColumnOrder([...get(this.processedColumns).values()], this.table),
-      getRows: () => this.recordsData.getRecordRows(),
-      getMaxSelectionRowIndex: () => {
-        const totalCount = get(this.recordsData.totalCount) ?? 0;
-        const savedRecords = get(this.recordsData.savedRecords);
-        const newRecords = get(this.recordsData.newRecords);
-        const pagination = get(this.meta.pagination);
-        const { offset } = pagination;
-        const pageSize = pagination.size;
-        /**
-         * We are not subtracting 1 from the below maxRowIndex calculation
-         * inorder to account for the add-new-record placeholder row
-         */
-        return (
-          Math.min(pageSize, totalCount - offset, savedRecords.length) +
-          newRecords.length
-        );
+    const plane = derived(
+      [
+        this.recordsData.selectableRowsMap,
+        this.processedColumns,
+        this.display.placeholderRowId,
+      ],
+      ([selectableRowsMap, processedColumns, placeholderRowId]) => {
+        const rowIds = new Series([...selectableRowsMap.keys()]);
+        const columns = [...processedColumns.values()];
+        const columnIds = new Series(columns.map((c) => String(c.id)));
+        return new Plane(rowIds, columnIds, placeholderRowId);
       },
-    });
+    );
+    this.selection = new SheetSelectionStore(plane);
 
     this.isLoading = derived(
       [
@@ -226,6 +212,11 @@ export class TabularData {
     return this.refresh();
   }
 
+  addEmptyRecord() {
+    void this.recordsData.addEmptyRecord();
+    this.selection.update((s) => s.ofNewRecordDataEntryCell());
+  }
+
   destroy(): void {
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
diff --git a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
index 9525c5dccb..26a79b1b18 100644
--- a/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
+++ b/mathesar_ui/src/systems/connections/DeleteConnectionModal.svelte
@@ -3,9 +3,7 @@
   import { _ } from 'svelte-i18n';
 
   import type { Connection } from '@mathesar/api/rest/connections';
-  import DocsLink from '@mathesar/components/DocsLink.svelte';
   import Identifier from '@mathesar/components/Identifier.svelte';
-  import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import RichText from '@mathesar/components/rich-text/RichText.svelte';
   import {
     connectionHasUniqueDatabaseReference,
diff --git a/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte b/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
index 54ff4d47f2..fdda3a127f 100644
--- a/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
+++ b/mathesar_ui/src/systems/data-explorer/ActionsPane.svelte
@@ -53,7 +53,6 @@
     void queryManager.update((q) =>
       q.withBaseTable(tableEntry ? tableEntry.id : undefined),
     );
-    queryManager.clearSelection();
     linkCollapsibleOpenState = {};
   }
 
diff --git a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
index 12cfea051b..258871e5bb 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryInspector.ts
@@ -11,37 +11,55 @@ import type { Tab } from '@mathesar-component-library/types';
 
 import type QueryModel from './QueryModel';
 
+/**
+ * This is a function instead of a const because we can't run `get(_)` at the
+ * top level since i18n isn't initialized at build time.
+ */
+function makeTabMap() {
+  return {
+    exploration: { label: get(_)('exploration') },
+    column: { label: get(_)('column') },
+    cell: { label: get(_)('cell') },
+  };
+}
+
+export interface ExplorationInspectorTab extends Tab {
+  id: keyof ReturnType<typeof makeTabMap>;
+  label: string;
+}
+
+function makeTab([id, { label }]: [string, { label: string }]) {
+  return { id, label } as ExplorationInspectorTab;
+}
+
+function makeTabList(tabMap: Record<string, { label: string }>) {
+  return Object.entries(tabMap).map(makeTab);
+}
+
 export default class QueryInspector {
-  tabs: Readable<Tab[]>;
+  tabs: Readable<ExplorationInspectorTab[]>;
+
+  activeTabId: Writable<ExplorationInspectorTab['id']>;
 
-  activeTab: Writable<Tab | undefined>;
+  activeTab: Readable<ExplorationInspectorTab>;
 
   constructor(query: Writable<QueryModel>) {
-    const generalTabs: Tab[] = [
-      { id: 'inspect-column', label: get(_)('column') },
-      { id: 'inspect-cell', label: get(_)('cell') },
-    ];
-    const tabsWhenQueryIsSaved: Tab[] = [
-      { id: 'inspect-exploration', label: get(_)('exploration') },
-      ...generalTabs,
-    ];
-
-    this.tabs = derived(query, ($query) => {
-      if ($query.isSaved()) {
-        return tabsWhenQueryIsSaved;
+    const tabMap = makeTabMap();
+    this.tabs = derived(query, (q) => {
+      if (q.isSaved()) {
+        return makeTabList(tabMap);
       }
-      return generalTabs;
+      const { exploration, ...unsavedExplorationTabMap } = tabMap;
+      return makeTabList(unsavedExplorationTabMap);
     });
-    this.activeTab = writable(get(this.tabs)[0]);
-  }
-
-  selectColumnTab() {
-    this.activeTab.set(
-      get(this.tabs).find((tab) => tab.id === 'inspect-column'),
+    const firstTabId = get(this.tabs)[0].id;
+    this.activeTabId = writable(firstTabId);
+    this.activeTab = derived(this.activeTabId, (id) =>
+      makeTab([id, tabMap[id]]),
     );
   }
 
-  selectCellTab() {
-    this.activeTab.set(get(this.tabs).find((tab) => tab.id === 'inspect-cell'));
+  activate(tabId: ExplorationInspectorTab['id']) {
+    this.activeTabId.set(tabId);
   }
 }
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index cd9ec9fa04..4829acf33f 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -1,5 +1,5 @@
-import type { Writable } from 'svelte/store';
-import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 
 import type {
   QueryColumnMetaData,
@@ -9,7 +9,9 @@ import type {
 } from '@mathesar/api/rest/types/queries';
 import { ApiMultiError } from '@mathesar/api/rest/utils/errors';
 import type { RequestStatus } from '@mathesar/api/rest/utils/requestUtils';
-import { SheetSelection } from '@mathesar/components/sheet';
+import Plane from '@mathesar/components/sheet/selection/Plane';
+import Series from '@mathesar/components/sheet/selection/Series';
+import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { fetchQueryResults, runQuery } from '@mathesar/stores/queries';
 import Pagination from '@mathesar/utils/Pagination';
@@ -20,7 +22,6 @@ import QueryInspector from './QueryInspector';
 import type QueryModel from './QueryModel';
 import {
   type InputColumnsStoreSubstance,
-  type ProcessedQueryOutputColumn,
   type ProcessedQueryOutputColumnMap,
   type ProcessedQueryResultColumnMap,
   getProcessedOutputColumns,
@@ -33,16 +34,15 @@ export interface QueryRow {
   rowIndex: number;
 }
 
+export function getRowSelectionId(row: QueryRow): string {
+  return String(row.rowIndex);
+}
+
 export interface QueryRowsData {
   totalCount: number;
   rows: QueryRow[];
 }
 
-export type QuerySheetSelection = SheetSelection<
-  QueryRow,
-  ProcessedQueryOutputColumn
->;
-
 type QueryRunMode = 'queryId' | 'queryObject';
 
 export default class QueryRunner {
@@ -65,7 +65,10 @@ export default class QueryRunner {
     new ImmutableMap(),
   );
 
-  selection: QuerySheetSelection;
+  /** Keys are row selection ids */
+  selectableRowsMap: Readable<Map<string, QueryRow>>;
+
+  selection: SheetSelectionStore;
 
   inspector: QueryInspector;
 
@@ -102,20 +105,22 @@ export default class QueryRunner {
     this.shareConsumer = shareConsumer;
     this.speculateProcessedColumns();
     void this.run();
-    this.selection = new SheetSelection({
-      getColumns: () => [...get(this.processedColumns).values()],
-      getColumnOrder: () =>
-        [...get(this.processedColumns).values()].map((column) => column.id),
-      getRows: () => get(this.rowsData).rows,
-      getMaxSelectionRowIndex: () => {
-        const rowLength = get(this.rowsData).rows.length;
-        const totalCount = get(this.rowsData).totalCount ?? 0;
-        const pagination = get(this.pagination);
-        const { offset } = pagination;
-        const pageSize = pagination.size;
-        return Math.min(pageSize, totalCount - offset, rowLength) - 1;
+    this.selectableRowsMap = derived(
+      this.rowsData,
+      ({ rows }) => new Map(rows.map((r) => [getRowSelectionId(r), r])),
+    );
+
+    const plane = derived(
+      [this.rowsData, this.processedColumns],
+      ([{ rows }, columnsMap]) => {
+        const rowIds = new Series(rows.map(getRowSelectionId));
+        const columns = [...columnsMap.values()];
+        const columnIds = new Series(columns.map((c) => String(c.id)));
+        return new Plane(rowIds, columnIds);
       },
-    });
+    );
+    this.selection = new SheetSelectionStore(plane);
+
     this.inspector = new QueryInspector(this.query);
   }
 
@@ -228,7 +233,6 @@ export default class QueryRunner {
   async setPagination(pagination: Pagination): Promise<void> {
     this.pagination.set(pagination);
     await this.run();
-    this.selection.activateFirstCellInSelectedColumn();
   }
 
   protected resetPagination(): void {
@@ -242,7 +246,6 @@ export default class QueryRunner {
   }
 
   protected resetResults(): void {
-    this.clearSelection();
     this.runPromise?.cancel();
     this.resetPagination();
     this.rowsData.set({ totalCount: 0, rows: [] });
@@ -253,34 +256,15 @@ export default class QueryRunner {
   protected async resetPaginationAndRun(): Promise<void> {
     this.resetPagination();
     await this.run();
-    this.selection.activateFirstCellInSelectedColumn();
   }
 
   selectColumn(alias: QueryColumnMetaData['alias']): void {
     const processedColumn = get(this.processedColumns).get(alias);
     if (!processedColumn) {
-      this.selection.resetSelection();
-      this.selection.selectAndActivateFirstCellIfExists();
-      this.inspector.selectCellTab();
       return;
     }
-
-    const isSelected = this.selection.toggleColumnSelection(processedColumn);
-    if (isSelected) {
-      this.inspector.selectColumnTab();
-      return;
-    }
-
-    this.selection.activateFirstCellInSelectedColumn();
-    this.inspector.selectCellTab();
-  }
-
-  clearSelection(): void {
-    this.selection.resetSelection();
-  }
-
-  getRows(): QueryRow[] {
-    return get(this.rowsData).rows;
+    this.selection.update((s) => s.ofOneColumn(processedColumn.id));
+    this.inspector.activate('column');
   }
 
   getQueryModel(): QueryModel {
@@ -288,7 +272,7 @@ export default class QueryRunner {
   }
 
   destroy(): void {
-    this.selection.destroy();
     this.runPromise?.cancel();
+    this.selection.destroy();
   }
 }
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
deleted file mode 100644
index eb4a77de4b..0000000000
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/CellTab.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-  /**
-   * @file
-   *
-   * NOTICE: There is some code duplication between this file and
-   * `CellMode.svelte` used for the table view. It might be good to resolve this
-   * duplication at some point. In the meantime, be mindful of propagating
-   * changes to both files as necessary.
-   */
-  import { _ } from 'svelte-i18n';
-
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-
-  import type QueryRunner from '../QueryRunner';
-
-  export let queryHandler: QueryRunner;
-  $: ({ selection, processedColumns } = queryHandler);
-  $: ({ activeCell } = selection);
-
-  $: selectedCellValue = (() => {
-    const cell = $activeCell;
-    if (cell) {
-      const rows = queryHandler.getRows();
-      if (rows[cell.rowIndex]) {
-        return rows[cell.rowIndex].record[cell.columnId];
-      }
-    }
-    return undefined;
-  })();
-  $: processedQueryColumn = (() => {
-    const cell = $activeCell;
-    if (cell) {
-      const processedColumn = $processedColumns.get(String(cell.columnId));
-      if (processedColumn) {
-        return processedColumn;
-      }
-    }
-    return undefined;
-  })();
-</script>
-
-<div
-  class="section-content"
-  class:has-content={selectedCellValue !== undefined}
->
-  {#if selectedCellValue !== undefined}
-    <section class="cell-content">
-      <header>{$_('content')}</header>
-      <div class="content">
-        {#if processedQueryColumn}
-          <CellFabric
-            isIndependentOfSheet={true}
-            disabled={true}
-            columnFabric={processedQueryColumn}
-            value={selectedCellValue}
-          />
-        {/if}
-      </div>
-    </section>
-  {:else}
-    {$_('select_cell_view_properties')}
-  {/if}
-</div>
-
-<style lang="scss">
-  .section-content {
-    &.has-content {
-      padding: var(--size-x-small);
-    }
-    .cell-content {
-      header {
-        font-weight: 500;
-      }
-      .content {
-        white-space: pre-wrap;
-        border: 1px solid var(--slate-300);
-        padding: var(--size-xx-small);
-        border-radius: var(--border-radius-m);
-        margin-top: var(--size-x-small);
-      }
-    }
-  }
-</style>
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
index cb2daab392..cc8fb8dc09 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationInspector.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import type { Tab } from '@mathesar/component-library/types';
   import { TabContainer } from '@mathesar-component-library';
 
+  import type { ExplorationInspectorTab } from '../QueryInspector';
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
 
-  import CellTab from './CellTab.svelte';
+  import CellTab from './cell/CellTab.svelte';
   import ColumnTab from './column-tab/ColumnTab.svelte';
   import ExplorationTab from './ExplorationTab.svelte';
 
@@ -13,17 +15,23 @@
 
   $: ({ inspector, query } = queryHandler);
   $: ({ tabs, activeTab } = inspector);
+
+  function handleTabSelected(e: CustomEvent<{ tab: Tab }>) {
+    const tab = e.detail.tab as ExplorationInspectorTab;
+    inspector.activate(tab.id);
+  }
 </script>
 
 <aside class="exploration-inspector">
   <TabContainer
     tabStyle="compact"
     tabs={$tabs}
-    bind:activeTab={$activeTab}
+    activeTab={$activeTab}
     fillTabWidth
     fillContainerHeight
+    on:tabSelected={handleTabSelected}
   >
-    {#if $activeTab?.id === 'inspect-exploration'}
+    {#if $activeTab.id === 'exploration'}
       <ExplorationTab
         {queryHandler}
         name={$query.name}
@@ -31,9 +39,9 @@
         {canEditMetadata}
         on:delete
       />
-    {:else if $activeTab?.id === 'inspect-column'}
+    {:else if $activeTab.id === 'column'}
       <ColumnTab {queryHandler} />
-    {:else if $activeTab?.id === 'inspect-cell'}
+    {:else if $activeTab.id === 'cell'}
       <CellTab {queryHandler} />
     {/if}
   </TabContainer>
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte
new file mode 100644
index 0000000000..fdc42a0220
--- /dev/null
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/CellTab.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import CellInspector from '@mathesar/components/inspector/cell/CellInspector.svelte';
+
+  import type QueryRunner from '../../QueryRunner';
+
+  import { getSelectedCellData } from './cellTabUtils';
+
+  export let queryHandler: QueryRunner;
+
+  $: ({ selection, processedColumns, rowsData } = queryHandler);
+  $: selectedCellData = getSelectedCellData(
+    $selection,
+    $rowsData.rows,
+    $processedColumns,
+  );
+</script>
+
+<CellInspector {selectedCellData} />
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
new file mode 100644
index 0000000000..13033451c4
--- /dev/null
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
@@ -0,0 +1,26 @@
+import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+
+import { type QueryRow, getRowSelectionId } from '../../QueryRunner';
+import type { ProcessedQueryOutputColumnMap } from '../../utils';
+
+export function getSelectedCellData(
+  selection: SheetSelection,
+  rows: QueryRow[],
+  processedColumns: ProcessedQueryOutputColumnMap,
+): SelectedCellData {
+  const { activeCellId } = selection;
+  const selectionData = { cellCount: selection.cellIds.size };
+  const fallback = { selectionData };
+  if (!activeCellId) return fallback;
+  const { rowId, columnId } = parseCellId(activeCellId);
+  // TODO: Usage of `find` is not ideal for perf here. Would be nice to store
+  // rows in a map for faster lookup.
+  const row = rows.find((r) => getRowSelectionId(r) === rowId);
+  if (!row) return fallback;
+  const value = row.record[columnId];
+  const column = processedColumns.get(columnId);
+  const activeCellData = column && { column, value };
+  return { activeCellData, selectionData };
+}
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
index c64ad21a42..93f749fa2e 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/ColumnTab.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { execPipe, filter, map } from 'iter-tools';
   import { onDestroy } from 'svelte';
   import { _ } from 'svelte-i18n';
 
@@ -6,6 +7,7 @@
     Collapsible,
     LabeledInput,
     TextInput,
+    isDefinedNonNullable,
   } from '@mathesar-component-library';
 
   import QueryManager from '../../QueryManager';
@@ -19,21 +21,14 @@
   $: queryManager =
     queryHandler instanceof QueryManager ? queryHandler : undefined;
   $: ({ selection, columnsMetaData, processedColumns } = queryHandler);
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
-  $: selectedColumns = (() => {
-    const ids = selection.getSelectedUniqueColumnsId(
-      $selectedCells,
-      $columnsSelectedWhenTheTableIsEmpty,
-    );
-    const columns = [];
-    for (const id of ids) {
-      const c = $processedColumns.get(id);
-      if (c !== undefined) {
-        columns.push(c);
-      }
-    }
-    return columns;
-  })();
+  $: ({ columnIds } = $selection);
+  $: selectedColumns = Array.from(
+    execPipe(
+      columnIds,
+      map((id) => $processedColumns.get(id)),
+      filter(isDefinedNonNullable),
+    ),
+  );
   $: hasMultipleSelectedColumns = selectedColumns.length > 1;
   $: selectedColumn =
     selectedColumns.length > 0 ? selectedColumns[0] : undefined;
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
index 4f276fc5b2..ab68127620 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/column-tab/DeleteColumnAction.svelte
@@ -52,7 +52,6 @@
     void queryManager.update((q) =>
       q.withoutInitialColumns(selectedColumnAliases),
     );
-    queryManager.clearSelection();
   }
 </script>
 
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
index cbd5cef2a1..10b427d321 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultHeaderCell.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import ColumnName from '@mathesar/components/column/ColumnName.svelte';
-  import { SheetCell, SheetCellResizer } from '@mathesar/components/sheet';
+  import {
+    SheetCellResizer,
+    SheetColumnHeaderCell,
+  } from '@mathesar/components/sheet';
   import { Button } from '@mathesar-component-library';
 
   import type QueryRunner from '../QueryRunner';
@@ -15,32 +18,25 @@
   $: columnRunState = $runState?.state;
 </script>
 
-<SheetCell
-  columnIdentifierKey={processedQueryColumn.id}
-  let:htmlAttributes
-  let:style
->
-  <div {...htmlAttributes} {style}>
-    <Button
-      appearance="plain"
-      class="column-name-wrapper {isSelected ? 'selected' : ''}"
-      on:click={() => {
-        queryRunner.selectColumn(processedQueryColumn.column.alias);
+<SheetColumnHeaderCell columnIdentifierKey={processedQueryColumn.id}>
+  <Button
+    appearance="plain"
+    class="column-name-wrapper {isSelected ? 'selected' : ''}"
+  >
+    <!--
+      TODO: Use a separate prop to identify column that isn't fetched yet
+      instead of type:unknown
+    -->
+    <ColumnName
+      isLoading={columnRunState === 'processing' &&
+        processedQueryColumn.column.type === 'unknown'}
+      column={{
+        ...processedQueryColumn.column,
+        name:
+          processedQueryColumn.column.display_name ??
+          processedQueryColumn.column.alias,
       }}
-    >
-      <!--TODO: Use a separate prop to identify column that isn't fetched yet
-                      instead of type:unknown-->
-      <ColumnName
-        isLoading={columnRunState === 'processing' &&
-          processedQueryColumn.column.type === 'unknown'}
-        column={{
-          ...processedQueryColumn.column,
-          name:
-            processedQueryColumn.column.display_name ??
-            processedQueryColumn.column.alias,
-        }}
-      />
-    </Button>
-    <SheetCellResizer columnIdentifierKey={processedQueryColumn.id} />
-  </div>
-</SheetCell>
+    />
+  </Button>
+  <SheetCellResizer columnIdentifierKey={processedQueryColumn.id} />
+</SheetColumnHeaderCell>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
index 20070d9739..638872d09c 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/ResultRowCell.svelte
@@ -1,120 +1,40 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import type { Writable } from 'svelte/store';
 
   import type { RequestStatus } from '@mathesar/api/rest/utils/requestUtils';
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-  import {
-    SheetCell,
-    isCellActive,
-    isCellSelected,
-    scrollBasedOnActiveCell,
-  } from '@mathesar/components/sheet';
+  import { SheetDataCell } from '@mathesar/components/sheet';
+  import { makeCellId } from '@mathesar/components/sheet/cellIds';
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
 
-  import type QueryInspector from '../QueryInspector';
-  import type { QueryRow, QuerySheetSelection } from '../QueryRunner';
+  import type { QueryRow } from '../QueryRunner';
   import type { ProcessedQueryOutputColumn } from '../utils';
 
-  export let processedQueryColumn: ProcessedQueryOutputColumn;
+  export let column: ProcessedQueryOutputColumn;
   export let row: QueryRow | undefined;
+  export let rowSelectionId: string;
   export let recordRunState: RequestStatus['state'] | undefined;
-  export let selection: QuerySheetSelection;
-  export let inspector: QueryInspector;
+  export let selection: Writable<SheetSelection>;
 
-  $: ({ activeCell, selectedCells } = selection);
-  $: isActive =
-    $activeCell && row && isCellActive($activeCell, row, processedQueryColumn);
-
-  /**
-   * The name indicates that this boolean is only true when more than one cell
-   * is selected. However, because of the bug that [the active cell and selected
-   * cells do not remain in sync when using keyboard][1] this boolean is
-   * sometimes true even when multiple cells are selected. This is to
-   * differentiate between different active and selected cell using blue
-   * background styling for selected cell and blue border styling for active
-   * cell.
-   *
-   * The above bug can be fixed when following two conditions are met
-   *
-   * - We are working on keyboard accessability of the application.
-   * - `selectedCells` and `activeCell` are merged in a single store.
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1534
-   */
-  $: isSelectedInRange =
-    row &&
-    isCellSelected($selectedCells, row, processedQueryColumn) &&
-    $selectedCells.size > 1;
-
-  async function checkTypeAndScroll(type?: string) {
-    if (type === 'moved') {
-      await tick();
-      scrollBasedOnActiveCell();
-    }
-  }
-
-  async function moveThroughCells(
-    event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
-  ) {
-    const { originalEvent } = event.detail;
-    const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    if (type) {
-      originalEvent.stopPropagation();
-      originalEvent.preventDefault();
-
-      await checkTypeAndScroll(type);
-    }
-  }
+  $: cellId = row && makeCellId(rowSelectionId, column.id);
 </script>
 
-<SheetCell
-  columnIdentifierKey={processedQueryColumn.id}
-  let:htmlAttributes
-  let:style
+<SheetDataCell
+  columnIdentifierKey={column.id}
+  cellSelectionId={cellId}
+  selection={$selection}
+  let:isActive
 >
-  <div {...htmlAttributes} {style} class="cell" class:is-active={isActive}>
-    {#if row || recordRunState === 'processing'}
-      <CellFabric
-        {isActive}
-        {isSelectedInRange}
-        columnFabric={processedQueryColumn}
-        value={row?.record[processedQueryColumn.id]}
-        showAsSkeleton={recordRunState === 'processing'}
-        disabled={true}
-        on:movementKeyDown={moveThroughCells}
-        on:activate={() => {
-          if (row) {
-            selection.activateCell(row, processedQueryColumn);
-            inspector.selectCellTab();
-          }
-        }}
-        on:onSelectionStart={() => {
-          if (row) {
-            selection.onStartSelection(row, processedQueryColumn);
-          }
-        }}
-        on:onMouseEnterCellWhileSelection={() => {
-          if (row) {
-            // This enables the click + drag to
-            // select multiple cells
-            selection.onMouseEnterCellWhileSelection(row, processedQueryColumn);
-          }
-        }}
-      />
-    {/if}
-  </div>
-</SheetCell>
-
-<style lang="scss">
-  .cell {
-    user-select: none;
-    -webkit-user-select: none; /* Safari */
-    background: var(--cell-bg-color-base);
-
-    &.is-active {
-      z-index: var(--z-index__sheet__active-cell);
-      border-color: transparent;
-      min-height: 100%;
-      height: auto;
-    }
-  }
-</style>
+  {#if row || recordRunState === 'processing'}
+    <CellFabric
+      {isActive}
+      columnFabric={column}
+      value={row?.record[column.id]}
+      showAsSkeleton={recordRunState === 'processing'}
+      disabled={true}
+      on:movementKeyDown={({ detail }) =>
+        handleKeyboardEventOnCell(detail.originalEvent, selection)}
+    />
+  {/if}
+</SheetDataCell>
diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
index b7f08a82bd..c1790b844f 100644
--- a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
+++ b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { map } from 'iter-tools';
   import { get } from 'svelte/store';
   import { _ } from 'svelte-i18n';
 
@@ -6,19 +7,21 @@
   import PaginationGroup from '@mathesar/components/PaginationGroup.svelte';
   import {
     Sheet,
-    SheetCell,
     SheetHeader,
+    SheetOriginCell,
     SheetRow,
+    SheetRowHeaderCell,
     SheetVirtualRows,
-    isColumnSelected,
   } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx, rowHeightPx } from '@mathesar/geometry';
   import { toast } from '@mathesar/stores/toast';
+  import { arrayIndex } from '@mathesar/utils/typeUtils';
   import { ImmutableMap } from '@mathesar-component-library';
 
   import type QueryManager from '../QueryManager';
   import type QueryRunner from '../QueryRunner';
+  import { getRowSelectionId } from '../QueryRunner';
 
   import QueryRefreshButton from './QueryRefreshButton.svelte';
   import QueryRunErrors from './QueryRunErrors.svelte';
@@ -37,6 +40,7 @@
     query,
     processedColumns,
     rowsData,
+    selectableRowsMap,
     pagination,
     runState,
     selection,
@@ -44,13 +48,16 @@
   } = queryHandler);
   $: ({ initial_columns } = $query);
   $: clipboardHandler = new SheetClipboardHandler({
-    selection,
-    toast,
-    getRows: () => get(rowsData).rows,
-    getColumnsMap: () => get(processedColumns),
-    getRecordSummaries: () => new ImmutableMap(),
+    getCopyingContext: () => ({
+      rowsMap: new Map(map(([k, r]) => [k, r.record], get(selectableRowsMap))),
+      columnsMap: get(processedColumns),
+      recordSummaries: new ImmutableMap(),
+      selectedRowIds: get(selection).rowIds,
+      selectedColumnIds: get(selection).columnIds,
+    }),
+    showToastInfo: toast.info,
   });
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
+  $: ({ columnIds } = $selection);
   $: recordRunState = $runState?.state;
   $: errors = $runState?.state === 'failure' ? $runState.errors : undefined;
   $: columnList = [...$processedColumns.values()];
@@ -82,27 +89,20 @@
       {columnWidths}
       {clipboardHandler}
       usesVirtualList
+      {selection}
+      onCellSelectionStart={(cell) => {
+        if (cell.type === 'column-header-cell') {
+          inspector.activate('column');
+        }
+      }}
     >
       <SheetHeader>
-        <SheetCell
-          columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-          isStatic
-          isControlCell
-          let:htmlAttributes
-          let:style
-        >
-          <div {...htmlAttributes} {style} />
-        </SheetCell>
-
+        <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN} />
         {#each columnList as processedQueryColumn (processedQueryColumn.id)}
           <ResultHeaderCell
             {processedQueryColumn}
             queryRunner={queryHandler}
-            isSelected={isColumnSelected(
-              $selectedCells,
-              $columnsSelectedWhenTheTableIsEmpty,
-              processedQueryColumn,
-            )}
+            isSelected={columnIds.has(processedQueryColumn.id)}
           />
         {/each}
       </SheetHeader>
@@ -114,32 +114,34 @@
         let:items
       >
         {#each items as item (item.key)}
-          {#if rows[item.index] || showDummyGhostRow}
+          {@const row = arrayIndex(rows, item.index)}
+          {@const rowSelectionId = (row && getRowSelectionId(row)) ?? ''}
+          {@const isSelected = $selection.rowIds.has(rowSelectionId)}
+          {#if row || showDummyGhostRow}
             <SheetRow style={item.style} let:htmlAttributes let:styleString>
               <div
                 {...htmlAttributes}
                 style="--cell-height:{rowHeightPx - 1}px;{styleString}"
               >
-                <SheetCell
+                <SheetRowHeaderCell
+                  {rowSelectionId}
                   columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-                  isStatic
-                  isControlCell
-                  let:htmlAttributes={sheetCellHtmlAttributes}
-                  let:style
                 >
-                  <div {...sheetCellHtmlAttributes} {style}>
-                    <CellBackground color="var(--cell-bg-color-header)" />
-                    {$pagination.offset + item.index + 1}
-                  </div>
-                </SheetCell>
+                  <CellBackground color="var(--cell-bg-color-header)" />
+                  <CellBackground
+                    when={isSelected}
+                    color="var(--cell-bg-color-row-selected)"
+                  />
+                  {$pagination.offset + item.index + 1}
+                </SheetRowHeaderCell>
 
                 {#each columnList as processedQueryColumn (processedQueryColumn.id)}
                   <ResultRowCell
-                    {processedQueryColumn}
-                    row={rows[item.index]}
+                    {row}
+                    {rowSelectionId}
+                    column={processedQueryColumn}
                     {recordRunState}
                     {selection}
-                    {inspector}
                   />
                 {/each}
               </div>
@@ -236,7 +238,7 @@
     :global(.column-name-wrapper.selected) {
       background: var(--slate-200) !important;
     }
-    :global([data-sheet-element='cell'].selected) {
+    :global([data-sheet-element='data-cell'].selected) {
       background: var(--slate-100);
     }
   }
diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
index c44edb0462..10cd26f110 100644
--- a/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
+++ b/mathesar_ui/src/systems/record-selector/RecordSelectorDataCell.svelte
@@ -16,6 +16,7 @@
   export let processedColumn: ProcessedColumn;
   export let recordSummaries: RecordSummaryStore;
   export let searchFuzzy: Writable<SearchFuzzy>;
+  export let isLoading = false;
 
   $: ({ column } = processedColumn);
   $: searchValue = $searchFuzzy.get(column.id);
@@ -31,7 +32,7 @@
     {value}
     {recordSummary}
     disabled
-    showAsSkeleton={!rowHasSavedRecord(row)}
+    showAsSkeleton={!rowHasSavedRecord(row) || isLoading}
     {searchValue}
     showTruncationPopover
   />
diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
index e78adaa3c0..f56e9c2442 100644
--- a/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
+++ b/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
@@ -290,6 +290,7 @@
                 {processedColumn}
                 {recordSummaries}
                 {searchFuzzy}
+                isLoading={recordsDataIsLoading}
               />
             {/each}
           </RecordSelectorDataRow>
diff --git a/mathesar_ui/src/systems/table-view/Body.svelte b/mathesar_ui/src/systems/table-view/Body.svelte
index 9357e247c5..7df9ccc832 100644
--- a/mathesar_ui/src/systems/table-view/Body.svelte
+++ b/mathesar_ui/src/systems/table-view/Body.svelte
@@ -60,8 +60,6 @@
   }
 </script>
 
-<svelte:window />
-
 {#key id}
   {#if usesVirtualList}
     <SheetVirtualRows
diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
index 58a3b31ce6..1b404872eb 100644
--- a/mathesar_ui/src/systems/table-view/StatusPane.svelte
+++ b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -27,14 +27,8 @@
 
   export let context: 'page' | 'widget' | 'shared-consumer-page' = 'page';
 
-  $: ({
-    recordsData,
-    meta,
-    isLoading,
-    columnsDataStore,
-    constraintsDataStore,
-    selection,
-  } = $tabularData);
+  $: ({ recordsData, meta, isLoading, columnsDataStore, constraintsDataStore } =
+    $tabularData);
   $: ({ pagination } = meta);
   $: ({ size: pageSize, leftBound, rightBound } = $pagination);
   $: ({ totalCount, state, newRecords } = recordsData);
@@ -75,10 +69,7 @@
         disabled={$isLoading}
         size="medium"
         appearance="primary"
-        on:click={() => {
-          void recordsData.addEmptyRecord();
-          selection.selectAndActivateFirstDataEntryCellInLastRow();
-        }}
+        on:click={() => $tabularData.addEmptyRecord()}
       >
         <Icon {...iconAddNew} />
         <span>{$_('new_record')}</span>
diff --git a/mathesar_ui/src/systems/table-view/TableView.svelte b/mathesar_ui/src/systems/table-view/TableView.svelte
index 75d542bc9e..346e03662a 100644
--- a/mathesar_ui/src/systems/table-view/TableView.svelte
+++ b/mathesar_ui/src/systems/table-view/TableView.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+  import { map } from 'iter-tools';
+  import type { ComponentProps } from 'svelte';
   import { get } from 'svelte/store';
 
   import type { TableEntry } from '@mathesar/api/rest/types/tables';
+  import { ImmutableMap } from '@mathesar/component-library';
   import { Sheet } from '@mathesar/components/sheet';
   import { SheetClipboardHandler } from '@mathesar/components/sheet/SheetClipboardHandler';
   import { rowHeaderWidthPx } from '@mathesar/geometry';
@@ -10,13 +13,11 @@
   import {
     ID_ADD_NEW_COLUMN,
     ID_ROW_CONTROL_COLUMN,
-    type TabularDataSelection,
     getTabularDataStoreFromContext,
   } from '@mathesar/stores/table-data';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
-  import { orderProcessedColumns } from '@mathesar/utils/tables';
-  import { ImmutableMap } from '@mathesar-component-library';
+  import { stringifyMapKeys } from '@mathesar/utils/collectionUtils';
 
   import Body from './Body.svelte';
   import Header from './header/Header.svelte';
@@ -37,23 +38,27 @@
 
   export let context: Context = 'page';
   export let table: Pick<TableEntry, 'id' | 'settings' | 'schema'>;
+  export let sheetElement: HTMLElement | undefined = undefined;
+
+  let tableInspectorTab: ComponentProps<WithTableInspector>['activeTabId'] =
+    'table';
 
   $: usesVirtualList = context !== 'widget';
   $: allowsDdlOperations = context !== 'widget' && canExecuteDDL;
   $: sheetHasBorder = context === 'widget';
-  $: ({ processedColumns, display, isLoading, selection, recordsData } =
-    $tabularData);
+  $: ({ processedColumns, display, selection, recordsData } = $tabularData);
   $: clipboardHandler = new SheetClipboardHandler({
-    selection,
-    toast,
-    getRows: () => [
-      ...get(recordsData.savedRecords),
-      ...get(recordsData.newRecords),
-    ],
-    getColumnsMap: () => get(processedColumns),
-    getRecordSummaries: () => get(recordsData.recordSummaries),
+    getCopyingContext: () => ({
+      rowsMap: new Map(
+        map(([k, r]) => [k, r.record], get(recordsData.selectableRowsMap)),
+      ),
+      columnsMap: stringifyMapKeys(get(processedColumns)),
+      recordSummaries: get(recordsData.recordSummaries),
+      selectedRowIds: get(selection).rowIds,
+      selectedColumnIds: get(selection).columnIds,
+    }),
+    showToastInfo: toast.info,
   });
-  $: ({ activeCell } = selection);
   $: ({ horizontalScrollOffset, scrollOffset, isTableInspectorVisible } =
     display);
   $: ({ settings } = table);
@@ -66,13 +71,9 @@
    */
   $: supportsTableInspector = context === 'page';
   $: sheetColumns = (() => {
-    const orderedProcessedColumns = orderProcessedColumns(
-      $processedColumns,
-      table,
-    );
     const columns = [
       { column: { id: ID_ROW_CONTROL_COLUMN, name: 'ROW_CONTROL' } },
-      ...orderedProcessedColumns.values(),
+      ...$processedColumns.values(),
     ];
     if (hasNewColumnButton) {
       columns.push({ column: { id: ID_ADD_NEW_COLUMN, name: 'ADD_NEW' } });
@@ -85,50 +86,37 @@
     [ID_ADD_NEW_COLUMN, 32],
   ]);
   $: showTableInspector = $isTableInspectorVisible && supportsTableInspector;
-
-  function selectAndActivateFirstCellOnTableLoad(
-    _isLoading: boolean,
-    _selection: TabularDataSelection,
-    _context: Context,
-  ) {
-    // We only activate the first cell on the page, not in the widget. Doing so
-    // on the widget causes the cell to focus and the page to scroll down to
-    // bring that element into view.
-    if (_context !== 'widget' && !_isLoading) {
-      _selection.selectAndActivateFirstCellIfExists();
-    }
-  }
-
-  function checkAndReinstateFocusOnActiveCell(e: Event) {
-    const target = e.target as HTMLElement;
-    if (!target.closest('[data-sheet-element="cell"')) {
-      if ($activeCell) {
-        selection.focusCell(
-          { rowIndex: $activeCell.rowIndex },
-          { id: Number($activeCell.columnId) },
-        );
-      }
-    }
-  }
-
-  $: void selectAndActivateFirstCellOnTableLoad($isLoading, selection, context);
 </script>
 
 <div class="table-view">
-  <WithTableInspector {context} {showTableInspector}>
-    <div class="sheet-area" on:click={checkAndReinstateFocusOnActiveCell}>
+  <WithTableInspector
+    {context}
+    {showTableInspector}
+    bind:activeTabId={tableInspectorTab}
+  >
+    <div class="sheet-area">
       {#if $processedColumns.size}
         <Sheet
-          columns={sheetColumns}
-          getColumnIdentifier={(entry) => entry.column.id}
-          {usesVirtualList}
-          {columnWidths}
           {clipboardHandler}
-          hasBorder={sheetHasBorder}
-          restrictWidthToRowWidth={!usesVirtualList}
+          {columnWidths}
+          {selection}
+          {usesVirtualList}
+          onCellSelectionStart={(cell) => {
+            if (cell.type === 'column-header-cell') {
+              tableInspectorTab = 'column';
+            }
+            if (cell.type === 'row-header-cell') {
+              tableInspectorTab = 'record';
+            }
+          }}
           bind:horizontalScrollOffset={$horizontalScrollOffset}
           bind:scrollOffset={$scrollOffset}
+          columns={sheetColumns}
+          getColumnIdentifier={(entry) => entry.column.id}
+          hasBorder={sheetHasBorder}
           hasPaddingRight
+          restrictWidthToRowWidth={!usesVirtualList}
+          bind:sheetElement
         >
           <Header {hasNewColumnButton} {columnOrder} {table} />
           <Body {usesVirtualList} />
diff --git a/mathesar_ui/src/systems/table-view/header/Header.svelte b/mathesar_ui/src/systems/table-view/header/Header.svelte
index a72c3a4414..88e779d715 100644
--- a/mathesar_ui/src/systems/table-view/header/Header.svelte
+++ b/mathesar_ui/src/systems/table-view/header/Header.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+  import { first } from 'iter-tools';
+
   import type { TableEntry } from '@mathesar/api/rest/types/tables';
   import { ContextMenu } from '@mathesar/component-library';
   import {
-    SheetCell,
     SheetCellResizer,
+    SheetColumnCreationCell,
+    SheetColumnHeaderCell,
     SheetHeader,
-    isColumnSelected,
   } from '@mathesar/components/sheet';
+  import SheetOriginCell from '@mathesar/components/sheet/cells/SheetOriginCell.svelte';
   import type { ProcessedColumn } from '@mathesar/stores/table-data';
   import {
     ID_ADD_NEW_COLUMN,
@@ -28,17 +31,7 @@
 
   $: columnOrder = columnOrder ?? [];
   $: columnOrderString = columnOrder.map(String);
-
   $: ({ selection, processedColumns } = $tabularData);
-  $: ({
-    selectedCells,
-    columnsSelectedWhenTheTableIsEmpty,
-    selectionInProgress,
-  } = selection);
-  $: selectedColumnIds = selection.getSelectedUniqueColumnsId(
-    $selectedCells,
-    $columnsSelectedWhenTheTableIsEmpty,
-  );
 
   let locationOfFirstDraggedColumn: number | undefined = undefined;
   let selectedColumnIdsOrdered: string[] = [];
@@ -56,7 +49,7 @@
     columnOrderString = columnOrderString;
     // Remove selected column IDs and keep their order
     for (const id of columnOrderString) {
-      if (selectedColumnIds.map(String).includes(id)) {
+      if ($selection.columnIds.has(id)) {
         selectedColumnIdsOrdered.push(id);
         if (!locationOfFirstDraggedColumn) {
           locationOfFirstDraggedColumn = columnOrderString.indexOf(id);
@@ -71,9 +64,8 @@
     // Early exit if a column is dropped in the same place.
     // Should only be done for single column if non-continuous selection is allowed.
     if (
-      selectedColumnIds.length > 0 &&
       columnDroppedOn &&
-      selectedColumnIds[0] === columnDroppedOn.id
+      first($selection.columnIds) === String(columnDroppedOn.id)
     ) {
       // Reset drag information
       locationOfFirstDraggedColumn = undefined;
@@ -105,84 +97,43 @@
 </script>
 
 <SheetHeader>
-  <SheetCell
-    columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-    isStatic
-    isControlCell
-    let:htmlAttributes
-    let:style
-  >
+  <SheetOriginCell columnIdentifierKey={ID_ROW_CONTROL_COLUMN}>
     <Droppable
       on:drop={() => dropColumn()}
       on:dragover={(e) => e.preventDefault()}
       locationOfFirstDraggedColumn={0}
       columnLocation={-1}
-    >
-      <div {...htmlAttributes} {style} />
-    </Droppable>
-  </SheetCell>
+    />
+  </SheetOriginCell>
 
   {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
-    <SheetCell columnIdentifierKey={columnId} let:htmlAttributes let:style>
-      <div>
-        <div {...htmlAttributes} {style}>
-          <Draggable
-            on:dragstart={() => dragColumn()}
-            column={processedColumn}
-            {selection}
-            selectionInProgress={$selectionInProgress}
-          >
-            <Droppable
-              on:drop={() => dropColumn(processedColumn)}
-              on:dragover={(e) => e.preventDefault()}
-              {locationOfFirstDraggedColumn}
-              columnLocation={columnOrderString.indexOf(columnId.toString())}
-              isSelected={isColumnSelected(
-                $selectedCells,
-                $columnsSelectedWhenTheTableIsEmpty,
-                processedColumn,
-              )}
-            >
-              <HeaderCell
-                {processedColumn}
-                isSelected={isColumnSelected(
-                  $selectedCells,
-                  $columnsSelectedWhenTheTableIsEmpty,
-                  processedColumn,
-                )}
-                on:mousedown={() =>
-                  selection.onColumnSelectionStart(processedColumn)}
-                on:mouseenter={() =>
-                  selection.onMouseEnterColumnHeaderWhileSelection(
-                    processedColumn,
-                  )}
-              />
-            </Droppable>
-          </Draggable>
-          <SheetCellResizer columnIdentifierKey={columnId} />
-          <ContextMenu>
-            <ColumnHeaderContextMenu {processedColumn} />
-          </ContextMenu>
-        </div>
-      </div>
-    </SheetCell>
+    {@const isSelected = $selection.columnIds.has(String(columnId))}
+    <SheetColumnHeaderCell columnIdentifierKey={columnId}>
+      <Draggable
+        on:dragstart={() => dragColumn()}
+        column={processedColumn}
+        {selection}
+      >
+        <Droppable
+          on:drop={() => dropColumn(processedColumn)}
+          on:dragover={(e) => e.preventDefault()}
+          {locationOfFirstDraggedColumn}
+          columnLocation={columnOrderString.indexOf(columnId.toString())}
+          {isSelected}
+        >
+          <HeaderCell {processedColumn} {isSelected} />
+        </Droppable>
+      </Draggable>
+      <SheetCellResizer columnIdentifierKey={columnId} />
+      <ContextMenu>
+        <ColumnHeaderContextMenu {processedColumn} />
+      </ContextMenu>
+    </SheetColumnHeaderCell>
   {/each}
 
   {#if hasNewColumnButton}
-    <SheetCell
-      columnIdentifierKey={ID_ADD_NEW_COLUMN}
-      let:htmlAttributes
-      let:style
-    >
-      <div {...htmlAttributes} class="new-column-cell" {style}>
-        <NewColumnCell />
-      </div>
-    </SheetCell>
+    <SheetColumnCreationCell columnIdentifierKey={ID_ADD_NEW_COLUMN}>
+      <NewColumnCell />
+    </SheetColumnCreationCell>
   {/if}
 </SheetHeader>
-
-<style lang="scss">
-  .new-column-cell {
-    padding: 0 0.2rem;
-  }
-</style>
diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
index 2dcfe0a5bd..0c46402caa 100644
--- a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
+++ b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Draggable.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
-  import type {
-    ProcessedColumn,
-    TabularDataSelection,
-  } from '@mathesar/stores/table-data';
+  import type { Writable } from 'svelte/store';
 
-  export let selection: TabularDataSelection;
-  export let selectionInProgress = true;
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import type { ProcessedColumn } from '@mathesar/stores/table-data';
+
+  export let selection: Writable<SheetSelection>;
   export let column: ProcessedColumn;
 
-  $: draggable =
-    !selectionInProgress &&
-    selection &&
-    selection.isCompleteColumnSelected(column);
+  $: draggable = $selection.fullySelectedColumnIds.has(String(column.id));
+
+  function handleMouseDown(event: MouseEvent) {
+    if (draggable) {
+      event.stopPropagation();
+    }
+  }
 </script>
 
 <div
   on:dragstart
+  on:mousedown={handleMouseDown}
   class="draggable"
   class:draggable_active={draggable}
   {draggable}
diff --git a/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte b/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
index 9ff17dcfee..61ad3702b3 100644
--- a/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
+++ b/mathesar_ui/src/systems/table-view/row/GroupHeader.svelte
@@ -31,13 +31,8 @@
   );
 </script>
 
-<SheetPositionableCell
-  index={0}
-  columnSpan={processedColumnsMap.size + 1}
-  let:htmlAttributes
-  let:style
->
-  <div {...htmlAttributes} {style} class="group-header">
+<SheetPositionableCell index={0} columnSpan={processedColumnsMap.size + 1}>
+  <div class="group-header">
     <CellBackground color="var(--sand-200)" />
     <div class="groups-data">
       {#each columnIds as columnId, index (columnId)}
@@ -61,7 +56,6 @@
 <style lang="scss">
   .group-header {
     padding: 0.5rem 1.5rem;
-    z-index: var(--z-index__sheet__group-header);
 
     .groups-data {
       align-items: start;
diff --git a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
index 0e6c720dbd..7a3f76aee7 100644
--- a/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
+++ b/mathesar_ui/src/systems/table-view/row/NewRecordMessage.svelte
@@ -4,31 +4,26 @@
   import { SheetPositionableCell } from '@mathesar/components/sheet';
 
   export let columnCount: number;
+
+  // Adding once since the index is starting from 0
+  $: columnSpan = columnCount + 1;
 </script>
 
-<SheetPositionableCell
-  index={0}
-  columnSpan={// Adding once since the index is starting from 0
-  columnCount + 1}
-  let:htmlAttributes
-  let:style
->
-  <div
-    class="new-record-message"
-    {...htmlAttributes}
-    style="{style};min-width:400px;"
-  >
+<SheetPositionableCell index={0} {columnSpan}>
+  <div class="new-record-message">
     {$_('new_records_reposition_refresh')}
   </div>
 </SheetPositionableCell>
 
-<style lang="scss">
+<style>
   .new-record-message {
-    z-index: var(--z-index__sheet__new-record-message, auto);
     background: var(--sky-200);
+    position: absolute;
+    inset: 0;
     display: flex;
     align-items: center;
     font-size: var(--text-size-small);
     padding: 0 0.5rem;
+    min-width: max-content;
   }
 </style>
diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
index 7bf76bfe26..3d1ef87d78 100644
--- a/mathesar_ui/src/systems/table-view/row/Row.svelte
+++ b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
   import { ContextMenu } from '@mathesar/component-library';
-  import {
-    SheetCell,
-    SheetRow,
-    isRowSelected,
-  } from '@mathesar/components/sheet';
+  import { SheetRow, SheetRowHeaderCell } from '@mathesar/components/sheet';
   import { rowHeightPx } from '@mathesar/geometry';
   import {
     ID_ROW_CONTROL_COLUMN,
@@ -18,6 +14,7 @@
     isPlaceholderRow,
     rowHasRecord,
   } from '@mathesar/stores/table-data';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
 
   import GroupHeader from './GroupHeader.svelte';
   import NewRecordMessage from './NewRecordMessage.svelte';
@@ -43,33 +40,21 @@
   $: ({ pkColumn } = columnsDataStore);
   $: primaryKeyColumnId = $pkColumn?.id;
   $: rowKey = getRowKey(row, primaryKeyColumnId);
+  $: rowSelectionId = getRowSelectionId(row);
   $: creationStatus = $rowCreationStatus.get(rowKey)?.state;
   $: status = $rowStatus.get(rowKey);
   $: wholeRowState = status?.wholeRowState;
-  $: ({ selectedCells } = selection);
-  $: isSelected = rowHasRecord(row) && isRowSelected($selectedCells, row);
+  $: isSelected = $selection.rowIds.has(getRowSelectionId(row));
   $: hasWholeRowErrors = wholeRowState === 'failure';
   /** Including whole row errors and individual cell errors */
   $: hasAnyErrors = !!status?.errorsFromWholeRowAndCells?.length;
 
-  function checkAndCreateEmptyRow() {
+  function handleMouseDown(e: MouseEvent) {
     if (isPlaceholderRow(row)) {
-      void recordsData.addEmptyRecord();
-      selection.selectAndActivateFirstDataEntryCellInLastRow();
+      $tabularData.addEmptyRecord();
+      e.stopPropagation(); // Prevents cell selection from starting
     }
   }
-
-  const handleRowMouseDown = () => {
-    if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-      selection.onRowSelectionStart(row);
-    }
-  };
-
-  const handleRowMouseEnter = () => {
-    if (rowHasRecord(row) && !isPlaceholderRow(row)) {
-      selection.onMouseEnterRowHeaderWhileSelection(row);
-    }
-  };
 </script>
 
 <SheetRow {style} let:htmlAttributes let:styleString>
@@ -84,36 +69,26 @@
     class:is-add-placeholder={isPlaceholderRow(row)}
     {...htmlAttributes}
     style="--cell-height:{rowHeightPx - 1}px;{styleString}"
-    on:mousedown={checkAndCreateEmptyRow}
+    on:mousedown={handleMouseDown}
   >
-    <SheetCell
-      columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
-      isStatic
-      isControlCell
-      let:htmlAttributes={cellHtmlAttr}
-      let:style={sheetCellStyle}
-    >
-      <div
-        {...cellHtmlAttr}
-        style={sheetCellStyle}
-        on:mousedown={handleRowMouseDown}
-        on:mouseenter={handleRowMouseEnter}
+    {#if rowHasRecord(row)}
+      <SheetRowHeaderCell
+        {rowSelectionId}
+        columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
       >
-        {#if rowHasRecord(row)}
-          <RowControl
-            {primaryKeyColumnId}
-            {row}
-            {meta}
-            {recordsData}
-            {isSelected}
-            hasErrors={hasAnyErrors}
-          />
-          <ContextMenu>
-            <RowContextOptions recordPk={rowKey} {recordsData} {row} />
-          </ContextMenu>
-        {/if}
-      </div>
-    </SheetCell>
+        <RowControl
+          {primaryKeyColumnId}
+          {row}
+          {meta}
+          {recordsData}
+          {isSelected}
+          hasErrors={hasAnyErrors}
+        />
+        <ContextMenu>
+          <RowContextOptions recordPk={rowKey} {recordsData} {row} />
+        </ContextMenu>
+      </SheetRowHeaderCell>
+    {/if}
 
     {#if isHelpTextRow(row)}
       <NewRecordMessage columnCount={$processedColumns.size} />
@@ -161,9 +136,9 @@
       cursor: pointer;
 
       :global(
-          [data-sheet-element='cell']:not(.is-active)
+          [data-sheet-element='data-cell']
             .cell-fabric
-            .cell-wrapper
+            .cell-wrapper:not(.is-edit-mode)
             > *
         ) {
         visibility: hidden;
diff --git a/mathesar_ui/src/systems/table-view/row/RowCell.svelte b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
index e2a9625df2..6240c92b8c 100644
--- a/mathesar_ui/src/systems/table-view/row/RowCell.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowCell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import type { Writable } from 'svelte/store';
   import { _ } from 'svelte-i18n';
 
   import type { RequestStatus } from '@mathesar/api/rest/utils/requestUtils';
@@ -10,13 +10,11 @@
   import Null from '@mathesar/components/Null.svelte';
   import { RichText } from '@mathesar/components/rich-text';
   import RowCellBackgrounds from '@mathesar/components/RowCellBackgrounds.svelte';
-  import {
-    SheetCell,
-    isCellActive,
-    isCellSelected,
-    scrollBasedOnActiveCell,
-  } from '@mathesar/components/sheet';
-  import { iconRecord, iconSetToNull } from '@mathesar/icons';
+  import { SheetDataCell } from '@mathesar/components/sheet';
+  import { makeCellId } from '@mathesar/components/sheet/cellIds';
+  import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+  import { handleKeyboardEventOnCell } from '@mathesar/components/sheet/sheetKeyboardUtils';
+  import { iconLinkToRecordPage, iconSetToNull } from '@mathesar/icons';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
   import { storeToGetRecordPageUrl } from '@mathesar/stores/storeBasedUrls';
@@ -25,9 +23,9 @@
     type ProcessedColumn,
     type RecordRow,
     type RecordsData,
-    type TabularDataSelection,
     rowHasNewRecord,
   } from '@mathesar/stores/table-data';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import {
     ButtonMenuItem,
@@ -44,7 +42,7 @@
   import RowContextOptions from './RowContextOptions.svelte';
 
   export let recordsData: RecordsData;
-  export let selection: TabularDataSelection;
+  export let selection: Writable<SheetSelection>;
   export let row: RecordRow;
   export let rowHasErrors = false;
   export let key: CellKey;
@@ -56,6 +54,7 @@
 
   const userProfile = getUserProfileStoreFromContext();
 
+  $: cellId = makeCellId(getRowSelectionId(row), String(processedColumn.id));
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: canEditTableRecords = !!$userProfile?.hasPermission(
@@ -70,28 +69,6 @@
   $: ({ recordSummaries } = recordsData);
   $: ({ column, linkFk } = processedColumn);
   $: columnId = column.id;
-  $: ({ activeCell, selectedCells } = selection);
-  $: isActive = $activeCell && isCellActive($activeCell, row, processedColumn);
-
-  /**
-   * The name indicates that this boolean is only true when more than one cell
-   * is selected. However, because of the bug that [the active cell and selected
-   * cells do not remain in sync when using keyboard][1] this boolean is
-   * sometimes true even when multiple cells are selected. This is to
-   * differentiate between different active and selected cell using blue
-   * background styling for selected cell and blue border styling for active
-   * cell.
-   *
-   * The above bug can be fixed when following two conditions are met
-   *
-   * - We are working on keyboard accessability of the application.
-   * - `selectedCells` and `activeCell` are merged in a single store.
-   *
-   * [1]: https://github.com/centerofci/mathesar/issues/1534
-   */
-  $: isSelectedInRange =
-    isCellSelected($selectedCells, row, processedColumn) &&
-    $selectedCells.size > 1;
   $: modificationStatus = $modificationStatusMap.get(key);
   $: serverErrors =
     modificationStatus?.state === 'failure' ? modificationStatus?.errors : [];
@@ -110,25 +87,6 @@
     .get(String(column.id))
     ?.get(String(value));
 
-  async function checkTypeAndScroll(type?: string) {
-    if (type === 'moved') {
-      await tick();
-      scrollBasedOnActiveCell();
-    }
-  }
-
-  async function moveThroughCells(
-    event: CustomEvent<{ originalEvent: KeyboardEvent; key: string }>,
-  ) {
-    const { originalEvent } = event.detail;
-    const type = selection.handleKeyEventsOnActiveCell(originalEvent);
-    if (type) {
-      originalEvent.stopPropagation();
-      originalEvent.preventDefault();
-      await checkTypeAndScroll(type);
-    }
-  }
-
   async function setValue(newValue: unknown) {
     if (newValue === value) {
       return;
@@ -145,116 +103,81 @@
   }
 </script>
 
-<SheetCell columnIdentifierKey={column.id} let:htmlAttributes let:style>
-  <div
-    class="cell editable-cell"
-    class:error={hasError}
-    class:modified={modificationStatus?.state === 'success'}
-    class:is-active={isActive}
-    class:is-processing={isProcessing}
-    class:is-pk={column.primary_key}
-    class:is-selected={isSelectedInRange}
-    {...htmlAttributes}
-    {style}
-  >
-    <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
-    <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
-    {#if !(isEditable && isActive)}
-      <!--
-      We hide these backgrounds when the cell is editable and active because a
-      white background better communicates that the user can edit the active
-      cell.
-    -->
-      <RowCellBackgrounds hasErrors={rowHasErrors} />
-    {/if}
-
-    <CellFabric
-      columnFabric={processedColumn}
-      {isActive}
-      {isSelectedInRange}
-      {value}
-      {isProcessing}
-      {canViewLinkedEntities}
-      {recordSummary}
-      setRecordSummary={(recordId, rs) =>
-        recordSummaries.addBespokeRecordSummary({
-          columnId: String(columnId),
-          recordId,
-          recordSummary: rs,
-        })}
-      showAsSkeleton={$recordsDataState === States.Loading}
-      disabled={!isEditable}
-      on:movementKeyDown={moveThroughCells}
-      on:activate={() => {
-        selection.activateCell(row, processedColumn);
-      }}
-      on:update={valueUpdated}
-      horizontalAlignment={column.primary_key ? 'left' : undefined}
-      on:onSelectionStart={() => {
-        selection.onStartSelection(row, processedColumn);
-      }}
-      on:onMouseEnterCellWhileSelection={() => {
-        // This enables the click + drag to
-        // select multiple cells
-        selection.onMouseEnterCellWhileSelection(row, processedColumn);
-      }}
-    />
-    <ContextMenu>
-      {#if canEditTableRecords || showLinkedRecordHyperLink}
-        <MenuHeading>{$_('cell')}</MenuHeading>
-        {#if canEditTableRecords}
-          <ButtonMenuItem
-            icon={iconSetToNull}
-            disabled={!canSetNull}
-            on:click={() => setValue(null)}
-          >
-            {$_('set_to')}
-            <Null />
-          </ButtonMenuItem>
-        {/if}
-        {#if showLinkedRecordHyperLink && linkedRecordHref}
-          <LinkMenuItem icon={iconRecord} href={linkedRecordHref}>
-            <RichText text={$_('open_named_record')} let:slotName>
-              {#if slotName === 'recordName'}
-                <Identifier>{recordSummary}</Identifier>
-              {/if}
-            </RichText>
-          </LinkMenuItem>
-        {/if}
-        <MenuDivider />
+<SheetDataCell
+  columnIdentifierKey={column.id}
+  cellSelectionId={cellId}
+  selection={$selection}
+  let:isActive
+>
+  <CellBackground when={hasError} color="var(--cell-bg-color-error)" />
+  <CellBackground when={!isEditable} color="var(--cell-bg-color-disabled)" />
+  {#if !(isEditable && isActive)}
+    <!--
+    We hide these backgrounds when the cell is editable and active because a
+    white background better communicates that the user can edit the active
+    cell.
+  -->
+    <RowCellBackgrounds hasErrors={rowHasErrors} />
+  {/if}
+
+  <CellFabric
+    columnFabric={processedColumn}
+    {isActive}
+    {value}
+    {isProcessing}
+    {canViewLinkedEntities}
+    {recordSummary}
+    setRecordSummary={(recordId, rs) =>
+      recordSummaries.addBespokeRecordSummary({
+        columnId: String(columnId),
+        recordId,
+        recordSummary: rs,
+      })}
+    showAsSkeleton={$recordsDataState === States.Loading}
+    disabled={!isEditable}
+    on:movementKeyDown={({ detail }) =>
+      handleKeyboardEventOnCell(detail.originalEvent, selection)}
+    on:update={valueUpdated}
+    horizontalAlignment={column.primary_key ? 'left' : undefined}
+    lightText={hasError || isProcessing}
+  />
+  <ContextMenu>
+    {#if canEditTableRecords || showLinkedRecordHyperLink}
+      <MenuHeading>{$_('cell')}</MenuHeading>
+      {#if canEditTableRecords}
+        <ButtonMenuItem
+          icon={iconSetToNull}
+          disabled={!canSetNull}
+          on:click={() => setValue(null)}
+        >
+          {$_('set_to')}
+          <Null />
+        </ButtonMenuItem>
       {/if}
-
-      <!-- Column Attributes -->
-      <MenuHeading>{$_('column')}</MenuHeading>
-      <ColumnHeaderContextMenu {processedColumn} />
-
-      <!-- Row -->
-      {#if canEditTableRecords || showLinkedRecordHyperLink}
-        <MenuDivider />
-        <MenuHeading>{$_('row')}</MenuHeading>
-        <RowContextOptions recordPk={rowKey} {recordsData} {row} />
+      {#if showLinkedRecordHyperLink && linkedRecordHref}
+        <LinkMenuItem icon={iconLinkToRecordPage} href={linkedRecordHref}>
+          <RichText text={$_('open_named_record')} let:slotName>
+            {#if slotName === 'recordName'}
+              <Identifier>{recordSummary}</Identifier>
+            {/if}
+          </RichText>
+        </LinkMenuItem>
       {/if}
-    </ContextMenu>
-    {#if errors.length}
-      <CellErrors {errors} forceShowErrors={isActive} />
+      <MenuDivider />
     {/if}
-  </div>
-</SheetCell>
 
-<style lang="scss">
-  .editable-cell.cell {
-    user-select: none;
-    -webkit-user-select: none; /* Safari */
-    background: var(--cell-bg-color-base);
-    &.is-active {
-      z-index: var(--z-index__sheet__active-cell);
-      border-color: transparent;
-      min-height: 100%;
-      height: auto !important;
-    }
-    &.error,
-    &.is-processing {
-      color: var(--cell-text-color-processing);
-    }
-  }
-</style>
+    <!-- Column Attributes -->
+    <MenuHeading>{$_('column')}</MenuHeading>
+    <ColumnHeaderContextMenu {processedColumn} />
+
+    <!-- Row -->
+    {#if canEditTableRecords || showLinkedRecordHyperLink}
+      <MenuDivider />
+      <MenuHeading>{$_('row')}</MenuHeading>
+      <RowContextOptions recordPk={rowKey} {recordsData} {row} />
+    {/if}
+  </ContextMenu>
+  {#if errors.length}
+    <CellErrors {errors} forceShowErrors={isActive} />
+  {/if}
+</SheetDataCell>
diff --git a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
index 72384f1657..cd0cd83d7e 100644
--- a/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
+++ b/mathesar_ui/src/systems/table-view/row/RowContextOptions.svelte
@@ -11,6 +11,7 @@
     RecordsData,
     rowHasRecord,
   } from '@mathesar/stores/table-data';
+  import { getRowSelectionId } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
   import { getUserProfileStoreFromContext } from '@mathesar/stores/userProfile';
   import {
@@ -38,14 +39,13 @@
 
   async function handleDeleteRecords() {
     if (rowHasRecord(row)) {
-      const selectedRowIndices = [Number(row.rowIndex)];
       void confirmDelete({
         identifierType: $_('record'),
         body: [
           $_('deleted_records_cannot_be_recovered', { values: { count: 1 } }),
           $_('are_you_sure_to_proceed'),
         ],
-        onProceed: () => recordsData.deleteSelected(selectedRowIndices),
+        onProceed: () => recordsData.deleteSelected(getRowSelectionId(row)),
         onError: (e) => toast.fromError(e),
         onSuccess: () =>
           toast.success({
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
index 0f9dcd6b2a..870fab24d7 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte
@@ -1,74 +1,47 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
   import { _ } from 'svelte-i18n';
 
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import { TabContainer } from '@mathesar-component-library';
+  import type { Tab } from '@mathesar/component-library/types';
+  import { TabContainer, defined } from '@mathesar-component-library';
 
   import CellMode from './cell/CellMode.svelte';
   import ColumnMode from './column/ColumnMode.svelte';
   import RecordMode from './record/RecordMode.svelte';
   import TableMode from './table/TableMode.svelte';
 
-  type TabItem = { label: string; id: number; component: ComponentType };
-  const tabs: TabItem[] = [
-    {
-      label: $_('table'),
-      component: TableMode,
-      id: 1,
-    },
-    {
-      label: $_('column'),
-      component: ColumnMode,
-      id: 2,
-    },
-    {
-      label: $_('record'),
-      component: RecordMode,
-      id: 3,
-    },
-    {
-      label: $_('cell'),
-      component: CellMode,
-      id: 4,
-    },
-  ];
+  const tabMap = {
+    table: { label: $_('table'), component: TableMode },
+    column: { label: $_('column'), component: ColumnMode },
+    record: { label: $_('record'), component: RecordMode },
+    cell: { label: $_('cell'), component: CellMode },
+  };
 
-  let activeTab: TabItem;
+  type TableInspectorTabId = keyof typeof tabMap;
 
-  const tabularData = getTabularDataStoreFromContext();
-  $: ({ selection } = $tabularData);
-  $: ({ selectedCells } = selection);
+  export let activeTabId: TableInspectorTabId | undefined;
 
-  $: {
-    // Explicit dependency
-    $selectedCells;
+  $: tabs = Object.entries(tabMap).map(([id, tab]) => ({ id, ...tab }));
+  $: activeTab = defined(activeTabId, (id) => ({ id, ...tabMap[id] }));
 
-    if (selection.isAnyColumnCompletelySelected()) {
-      [, activeTab] = tabs;
-    }
-
-    if (selection.isAnyRowCompletelySelected()) {
-      [, , activeTab] = tabs;
-    }
+  function handleTabSelected(e: CustomEvent<{ tab: Tab }>) {
+    activeTabId = e.detail.tab.id as TableInspectorTabId;
   }
 </script>
 
 <div class="table-inspector">
   <TabContainer
-    bind:activeTab
+    {activeTab}
     {tabs}
     tabStyle="compact"
     fillContainerHeight
     fillTabWidth
+    on:tabSelected={handleTabSelected}
   >
-    <slot>
-      {#if activeTab}
-        <div class="tabs-container">
-          <svelte:component this={activeTab.component} />
-        </div>
-      {/if}
-    </slot>
+    {#if activeTab}
+      <div class="tabs-container">
+        <svelte:component this={activeTab.component} />
+      </div>
+    {/if}
   </TabContainer>
 </div>
 
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
index 79bf7777bb..0600d80e12 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/WithTableInspector.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
   import { tableInspectorWidth } from '@mathesar/stores/localStorage';
   import { WithPanel } from '@mathesar-component-library';
 
@@ -6,6 +8,9 @@
 
   export let context: 'page' | 'widget' | 'shared-consumer-page';
   export let showTableInspector: boolean;
+  export let activeTabId:
+    | ComponentProps<TableInspector>['activeTabId']
+    | undefined = undefined;
 </script>
 
 {#if context === 'widget'}
@@ -22,6 +27,6 @@
     maxSizePx={600}
   >
     <slot />
-    <TableInspector slot="panel" />
+    <TableInspector slot="panel" bind:activeTabId />
   </WithPanel>
 {/if}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
index ef4fe65b70..5372e7c4b9 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
@@ -1,81 +1,19 @@
 <script lang="ts">
-  /**
-   * @file
-   *
-   * NOTICE: There is some code duplication between this file and
-   * `CellTab.svelte` used for the data explorer. It might be good to resolve
-   * this duplication at some point. In the meantime, be mindful of propagating
-   * changes to both files as necessary.
-   */
-  import { _ } from 'svelte-i18n';
-
-  import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
+  import CellInspector from '@mathesar/components/inspector/cell/CellInspector.svelte';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
 
+  import { getSelectedCellData } from './cellModeUtils';
+
   const tabularData = getTabularDataStoreFromContext();
 
   $: ({ selection, recordsData, processedColumns } = $tabularData);
-  $: ({ activeCell } = selection);
-  $: ({ recordSummaries } = recordsData);
-  $: cell = $activeCell;
-  $: selectedCellValue = (() => {
-    if (cell) {
-      const rows = recordsData.getRecordRows();
-      if (rows[cell.rowIndex]) {
-        return rows[cell.rowIndex].record[cell.columnId];
-      }
-    }
-    return undefined;
-  })();
-  $: column = (() => {
-    if (cell) {
-      const processedColumn = $processedColumns.get(Number(cell.columnId));
-      if (processedColumn) {
-        return processedColumn;
-      }
-    }
-    return undefined;
-  })();
-  $: recordSummary =
-    column &&
-    $recordSummaries.get(String(column.id))?.get(String(selectedCellValue));
+  $: ({ recordSummaries, selectableRowsMap } = recordsData);
+  $: selectedCellData = getSelectedCellData(
+    $selection,
+    $selectableRowsMap,
+    $processedColumns,
+    $recordSummaries,
+  );
 </script>
 
-<div class="section-content">
-  {#if selectedCellValue !== undefined}
-    <section class="cell-content">
-      <header>{$_('content')}</header>
-      <div class="content">
-        {#if column}
-          <CellFabric
-            isIndependentOfSheet={true}
-            disabled={true}
-            columnFabric={column}
-            value={selectedCellValue}
-            {recordSummary}
-          />
-        {/if}
-      </div>
-    </section>
-  {:else}
-    {$_('select_cell_view_properties')}
-  {/if}
-</div>
-
-<style lang="scss">
-  .section-content {
-    padding: var(--size-x-small);
-    .cell-content {
-      header {
-        font-weight: 500;
-      }
-      .content {
-        white-space: pre-wrap;
-        border: 1px solid var(--slate-300);
-        padding: var(--size-xx-small);
-        border-radius: var(--border-radius-m);
-        margin-top: var(--size-x-small);
-      }
-    }
-  }
-</style>
+<CellInspector {selectedCellData} />
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
new file mode 100644
index 0000000000..fe3d5cb4ea
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
@@ -0,0 +1,40 @@
+import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import type {
+  ProcessedColumns,
+  RecordRow,
+  RecordSummariesForSheet,
+} from '@mathesar/stores/table-data';
+import { defined } from '@mathesar-component-library';
+
+export function getSelectedCellData(
+  selection: SheetSelection,
+  selectableRowsMap: Map<string, RecordRow>,
+  processedColumns: ProcessedColumns,
+  recordSummaries: RecordSummariesForSheet,
+): SelectedCellData {
+  const { activeCellId } = selection;
+  const selectionData = {
+    cellCount: selection.cellIds.size,
+  };
+  if (activeCellId === undefined) {
+    return { selectionData };
+  }
+  const { rowId, columnId } = parseCellId(activeCellId);
+  const row = selectableRowsMap.get(rowId);
+  const value = row?.record[columnId];
+  const column = processedColumns.get(Number(columnId));
+  const recordSummary = defined(
+    value,
+    (v) => recordSummaries.get(columnId)?.get(String(v)),
+  );
+  return {
+    activeCellData: column && {
+      column,
+      value,
+      recordSummary,
+    },
+    selectionData,
+  };
+}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
index 06522c581f..fd9af53489 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -25,17 +25,22 @@
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: ({ processedColumns, selection } = $tabularData);
-  $: ({ selectedCells, columnsSelectedWhenTheTableIsEmpty } = selection);
   $: selectedColumns = (() => {
-    const ids = selection.getSelectedUniqueColumnsId(
-      $selectedCells,
-      $columnsSelectedWhenTheTableIsEmpty,
-    );
+    const ids = $selection.columnIds;
     const columns = [];
     for (const id of ids) {
-      const c = $processedColumns.get(id);
-      if (c !== undefined) {
-        columns.push(c);
+      // This is a  little annoying that we need to parse the id as a string to
+      // a number. The reason is tricky. The cell selection system uses strings
+      // as column ids because they're more general purpose and can work with
+      // the string-based ids that the data explorer uses. However the table
+      // page stores processed columns with numeric ids. We could avoid this
+      // parsing by either making the selection system generic over the id type
+      // (which would be a pain, ergonomically), or by using string-based ids
+      // for columns in the table page too (which would require refactoring).
+      const parsedId = parseInt(id, 10);
+      const column = $processedColumns.get(parsedId);
+      if (column !== undefined) {
+        columns.push(column);
       }
     }
     return columns;
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
index 5835280b4f..9b8682c546 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/column-extraction/ExtractColumnsModal.svelte
@@ -121,7 +121,10 @@
       // unmounting this component.
       return;
     }
-    selection.intersectSelectedRowsWithGivenColumns(_columns);
+    const columnIds = _columns.map((c) => String(c.id));
+    selection.updateWithoutFocus((s) =>
+      s.ofRowColumnIntersection(s.rowIds, columnIds),
+    );
   }
   $: handleColumnsChange($columns);
 
@@ -215,7 +218,7 @@
         // will need to modify this logic when we position the new column where
         // the old columns were.
         const newFkColumn = allColumns.slice(-1)[0];
-        selection.toggleColumnSelection(newFkColumn);
+        selection.update((s) => s.ofOneColumn(String(newFkColumn.id)));
         await tick();
         scrollBasedOnSelection();
       }
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
index f71655becd..9eea8d2635 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RecordMode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import { getSelectedRowIndex } from '@mathesar/components/sheet';
   import { currentDatabase } from '@mathesar/stores/databases';
   import { currentSchema } from '@mathesar/stores/schemas';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
@@ -18,26 +17,20 @@
   $: database = $currentDatabase;
   $: schema = $currentSchema;
   $: ({ selection, recordsData } = $tabularData);
-  $: ({ selectedCells } = selection);
-  $: selectedRowIndices = $selectedCells
-    .valuesArray()
-    .map((cell) => getSelectedRowIndex(cell));
-  $: uniquelySelectedRowIndices = Array.from(new Set(selectedRowIndices));
-
   $: canEditTableRecords = !!$userProfile?.hasPermission(
     { database, schema },
     'canEditTableRecords',
   );
+  $: selectedRowIds = $selection.rowIds;
+  $: selectedRowCount = selectedRowIds.size;
 </script>
 
 <div class="column-mode-container">
-  {#if uniquelySelectedRowIndices.length}
-    {#if uniquelySelectedRowIndices.length > 1}
+  {#if selectedRowCount > 0}
+    {#if selectedRowCount > 1}
       <span class="records-selected-count">
         {$_('multiple_records_selected', {
-          values: {
-            count: uniquelySelectedRowIndices.length,
-          },
+          values: { count: selectedRowCount },
         })}
       </span>
     {/if}
@@ -45,9 +38,8 @@
       <CollapsibleHeader slot="header" title={$_('actions')} />
       <div slot="content" class="content-container">
         <RowActions
-          selectedRowIndices={uniquelySelectedRowIndices}
+          {selectedRowIds}
           {recordsData}
-          {selection}
           columnsDataStore={$tabularData.columnsDataStore}
           {canEditTableRecords}
         />
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
index dd9aa2050c..53ed8b9708 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record/RowActions.svelte
@@ -7,77 +7,67 @@
   import type {
     ColumnsDataStore,
     RecordsData,
-    TabularDataSelection,
   } from '@mathesar/stores/table-data';
   import { getPkValueInRecord } from '@mathesar/stores/table-data/records';
   import { toast } from '@mathesar/stores/toast';
+  import { takeFirstAndOnly } from '@mathesar/utils/iterUtils';
   import {
     AnchorButton,
     Button,
     Icon,
+    ImmutableSet,
     iconExternalLink,
   } from '@mathesar-component-library';
 
-  export let selectedRowIndices: number[];
+  export let selectedRowIds: ImmutableSet<string>;
   export let recordsData: RecordsData;
-  export let selection: TabularDataSelection;
   export let columnsDataStore: ColumnsDataStore;
   export let canEditTableRecords: boolean;
 
+  $: selectedRowCount = selectedRowIds.size;
+  $: ({ columns } = columnsDataStore);
+  $: ({ selectableRowsMap } = recordsData);
+  $: recordPageLink = (() => {
+    const id = takeFirstAndOnly(selectedRowIds);
+    if (!id) return undefined;
+    const row = $selectableRowsMap.get(id);
+    if (!row) return undefined;
+    try {
+      const recordId = getPkValueInRecord(row.record, $columns);
+      return $storeToGetRecordPageUrl({ recordId });
+    } catch (e) {
+      return undefined;
+    }
+  })();
+  $: showDeleteRecordButton = canEditTableRecords;
+  $: showNullStateText = !showDeleteRecordButton && !recordPageLink;
+
   async function handleDeleteRecords() {
     void confirmDelete({
       identifierType: $_('multiple_records', {
-        values: { count: selectedRowIndices.length },
+        values: { count: selectedRowCount },
       }),
       body: [
         $_('deleted_records_cannot_be_recovered', {
-          values: { count: selectedRowIndices.length },
+          values: { count: selectedRowCount },
         }),
         $_('are_you_sure_to_proceed'),
       ],
-      onProceed: () => recordsData.deleteSelected(selectedRowIndices),
+      onProceed: () => recordsData.deleteSelected(selectedRowIds),
       onError: (e) => toast.fromError(e),
       onSuccess: () => {
         toast.success({
           title: $_('count_records_deleted_successfully', {
-            values: { count: selectedRowIndices.length },
+            values: { count: selectedRowCount },
           }),
         });
-        selection.resetSelection();
       },
     });
   }
-
-  $: ({ columns } = columnsDataStore);
-  $: recordPageLink = (() => {
-    const selectedRowIndex = selectedRowIndices[0];
-    const recordRow = recordsData.getRecordRows()[selectedRowIndex];
-
-    if (!recordRow) {
-      return '';
-    }
-
-    let recordId: string | number;
-    try {
-      recordId = getPkValueInRecord(recordRow.record, $columns);
-    } catch (e) {
-      return '';
-    }
-
-    return (
-      $storeToGetRecordPageUrl({
-        recordId,
-      }) || ''
-    );
-  })();
-
-  $: showOpenRecordLink = selectedRowIndices.length === 1 && recordPageLink;
-  $: showDeleteRecordButton = canEditTableRecords;
-  $: showNullStateText = !showDeleteRecordButton && !showOpenRecordLink;
 </script>
 
 <div class="actions-container">
-  {#if showOpenRecordLink}
+  {#if recordPageLink}
     <AnchorButton href={recordPageLink}>
       <div class="action-item">
         <div>
@@ -92,7 +82,7 @@
     <Button on:click={handleDeleteRecords}>
       <Icon {...iconDeleteMajor} />
       <span>
-        {$_('delete_records', { values: { count: selectedRowIndices.length } })}
+        {$_('delete_records', { values: { count: selectedRowCount } })}
       </span>
     </Button>
   {/if}
diff --git a/mathesar_ui/src/utils/KeyboardShortcut.ts b/mathesar_ui/src/utils/KeyboardShortcut.ts
new file mode 100644
index 0000000000..17c45b75b1
--- /dev/null
+++ b/mathesar_ui/src/utils/KeyboardShortcut.ts
@@ -0,0 +1,63 @@
+/**
+ * A stricter definition KeyboardEvent['key']. We'll add more variants as we
+ * need them.
+ */
+type Key = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Tab';
+
+type Mod = 'Ctrl' | 'Shift' | 'Alt' | 'Meta';
+
+export class KeyboardShortcut {
+  ctrl: boolean;
+
+  shift: boolean;
+
+  alt: boolean;
+
+  meta: boolean;
+
+  key: Key;
+
+  constructor(props: {
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+    key: Key;
+  }) {
+    this.ctrl = props.ctrl;
+    this.shift = props.shift;
+    this.alt = props.alt;
+    this.meta = props.meta;
+    this.key = props.key;
+  }
+
+  static fromKey(key: Key, mods: Mod[] = []): KeyboardShortcut {
+    return new KeyboardShortcut({
+      ctrl: mods.includes('Ctrl'),
+      shift: mods.includes('Shift'),
+      alt: mods.includes('Alt'),
+      meta: mods.includes('Meta'),
+      key,
+    });
+  }
+
+  static fromKeyboardEvent(event: KeyboardEvent): KeyboardShortcut {
+    return new KeyboardShortcut({
+      ctrl: event.ctrlKey,
+      shift: event.shiftKey,
+      alt: event.altKey,
+      meta: event.metaKey,
+      key: event.key as Key,
+    });
+  }
+
+  toString(): string {
+    return [
+      ...(this.ctrl ? ['Ctrl'] : []),
+      ...(this.shift ? ['Shift'] : []),
+      ...(this.alt ? ['Alt'] : []),
+      ...(this.meta ? ['Meta'] : []),
+      this.key,
+    ].join('+');
+  }
+}
diff --git a/mathesar_ui/src/utils/__tests__/iterUtils.test.ts b/mathesar_ui/src/utils/__tests__/iterUtils.test.ts
new file mode 100644
index 0000000000..a87d5dc5ef
--- /dev/null
+++ b/mathesar_ui/src/utils/__tests__/iterUtils.test.ts
@@ -0,0 +1,21 @@
+import { cartesianProduct } from '../iterUtils';
+
+test.each([
+  [[], [], []],
+  [[], ['a', 'b'], []],
+  [['a', 'b'], [], []],
+  [
+    ['a', 'b'],
+    ['x', 'y', 'z'],
+    [
+      ['a', 'x'],
+      ['a', 'y'],
+      ['a', 'z'],
+      ['b', 'x'],
+      ['b', 'y'],
+      ['b', 'z'],
+    ],
+  ],
+])('cartesianProduct', (a, b, result) => {
+  expect([...cartesianProduct(a, b)]).toStrictEqual(result);
+});
diff --git a/mathesar_ui/src/utils/__tests__/patternMatching.test.ts b/mathesar_ui/src/utils/__tests__/patternMatching.test.ts
new file mode 100644
index 0000000000..b00d25a7fc
--- /dev/null
+++ b/mathesar_ui/src/utils/__tests__/patternMatching.test.ts
@@ -0,0 +1,20 @@
+import { match } from '../patternMatching';
+
+test('match', () => {
+  type Shape =
+    | { kind: 'circle'; radius: number }
+    | { kind: 'square'; x: number }
+    | { kind: 'triangle'; x: number; y: number };
+
+  function area(shape: Shape) {
+    return match(shape, 'kind', {
+      circle: ({ radius }) => Math.PI * radius ** 2,
+      square: ({ x }) => x ** 2,
+      triangle: ({ x, y }) => (x * y) / 2,
+    });
+  }
+
+  expect(area({ kind: 'circle', radius: 5 })).toBe(78.53981633974483);
+  expect(area({ kind: 'square', x: 5 })).toBe(25);
+  expect(area({ kind: 'triangle', x: 5, y: 6 })).toBe(15);
+});
diff --git a/mathesar_ui/src/utils/collectionUtils.ts b/mathesar_ui/src/utils/collectionUtils.ts
new file mode 100644
index 0000000000..ebed9303cd
--- /dev/null
+++ b/mathesar_ui/src/utils/collectionUtils.ts
@@ -0,0 +1,3 @@
+export function stringifyMapKeys<V>(m: Map<number, V>): Map<string, V> {
+  return new Map([...m.entries()].map(([k, v]) => [String(k), v]));
+}
diff --git a/mathesar_ui/src/utils/iterUtils.ts b/mathesar_ui/src/utils/iterUtils.ts
index ace570ad9d..805370b416 100644
--- a/mathesar_ui/src/utils/iterUtils.ts
+++ b/mathesar_ui/src/utils/iterUtils.ts
@@ -1,3 +1,18 @@
+export function cartesianProduct<T, U>(
+  a: Iterable<T>,
+  b: Iterable<U>,
+): Iterable<[T, U]> {
+  return {
+    *[Symbol.iterator]() {
+      for (const x of a) {
+        for (const y of b) {
+          yield [x, y];
+        }
+      }
+    },
+  };
+}
+
 /**
  * Maps the first element of an iterable if that iterable contains exactly one
  * element.
@@ -17,3 +32,15 @@ export function mapExactlyOne<T, Z, O, M>(
   }
   return p.whenMany;
 }
+
+/**
+ * If the iterable contains exactly one element, returns that element. Otherwise
+ * returns undefined.
+ */
+export function takeFirstAndOnly<T>(iterable: Iterable<T>): T | undefined {
+  return mapExactlyOne(iterable, {
+    whenZero: undefined,
+    whenOne: (v) => v,
+    whenMany: undefined,
+  });
+}
diff --git a/mathesar_ui/src/utils/patternMatching.ts b/mathesar_ui/src/utils/patternMatching.ts
new file mode 100644
index 0000000000..8b69cbdaed
--- /dev/null
+++ b/mathesar_ui/src/utils/patternMatching.ts
@@ -0,0 +1,42 @@
+/**
+ * Performs branching logic by exhaustively pattern-matching all variants of a
+ * TypeScript discriminated union.
+ *
+ * @param value The value to match
+ * @param property The name of the discriminant property
+ * @param cases An object representing the match arms. It should have one entry
+ * per variant of the union. The key should be the value of the discriminant
+ * property for that variant, and the value should be a function that takes the
+ * value of that variant and returns the result of the match arm.
+ *
+ * @example
+ *
+ * ```ts
+ * type Shape =
+ *   | { kind: 'circle'; radius: number }
+ *   | { kind: 'square'; x: number }
+ *   | { kind: 'triangle'; x: number; y: number };
+ *
+ * function area(shape: Shape) {
+ *   return match(shape, 'kind', {
+ *     circle: ({ radius }) => Math.PI * radius ** 2,
+ *     square: ({ x }) => x ** 2,
+ *     triangle: ({ x, y }) => (x * y) / 2,
+ *   });
+ * }
+ * ```
+ */
+export function match<
+  /** Discriminant Property name */
+  P extends string,
+  /** The other stuff in the type (besides the discriminant property) */
+  O,
+  /** The union valued type */
+  V extends Record<P, string> & O,
+  /** The match arms */
+  C extends { [K in V[P]]: (v: Extract<V, Record<P, K>>) => unknown },
+>(value: V, property: P, cases: C) {
+  return cases[value[property]](
+    value as Extract<V, Record<P, string>>,
+  ) as ReturnType<C[keyof C]>;
+}
diff --git a/mathesar_ui/src/utils/pointerUtils.ts b/mathesar_ui/src/utils/pointerUtils.ts
new file mode 100644
index 0000000000..82db98c0a7
--- /dev/null
+++ b/mathesar_ui/src/utils/pointerUtils.ts
@@ -0,0 +1,30 @@
+type ModifierKeyCombo =
+  | ''
+  // 1 modifier
+  | 'Alt'
+  | 'Ctrl'
+  | 'Meta'
+  | 'Shift'
+  // 2 modifiers
+  | 'Alt+Ctrl'
+  | 'Alt+Meta'
+  | 'Alt+Shift'
+  | 'Ctrl+Meta'
+  | 'Ctrl+Shift'
+  | 'Meta+Shift'
+  // 3 modifiers
+  | 'Alt+Ctrl+Meta'
+  | 'Alt+Ctrl+Shift'
+  | 'Alt+Meta+Shift'
+  | 'Ctrl+Meta+Shift'
+  // 4 modifiers
+  | 'Alt+Ctrl+Meta+Shift';
+
+export function getModifierKeyCombo(e: MouseEvent) {
+  return [
+    ...(e.altKey ? ['Alt'] : []),
+    ...(e.ctrlKey ? ['Ctrl'] : []),
+    ...(e.metaKey ? ['Meta'] : []),
+    ...(e.shiftKey ? ['Shift'] : []),
+  ].join('+') as ModifierKeyCombo;
+}
diff --git a/mathesar_ui/src/utils/typeUtils.ts b/mathesar_ui/src/utils/typeUtils.ts
index 7e802cf02c..5bf3df7aae 100644
--- a/mathesar_ui/src/utils/typeUtils.ts
+++ b/mathesar_ui/src/utils/typeUtils.ts
@@ -13,3 +13,11 @@ type ChangeWritableToReadable<T> = T extends Writable<infer U>
 export type MakeWritablePropertiesReadable<T> = {
   [P in keyof T]: ChangeWritableToReadable<T[P]>;
 };
+
+/**
+ * This function exists because we don't have `noUncheckedIndexedAccess` enabled
+ * yet. See https://github.com/mathesar-foundation/mathesar/issues/1966
+ */
+export function arrayIndex<T>(a: T[], i: number): T | undefined {
+  return a[i];
+}