diff --git a/mathesar_ui/src/App.d.ts b/mathesar_ui/src/App.d.ts
index bc466325b8..c2ecc90cbe 100644
--- a/mathesar_ui/src/App.d.ts
+++ b/mathesar_ui/src/App.d.ts
@@ -33,12 +33,6 @@ export interface SchemaResponse extends SchemaEntry, TreeItem {
   tables: DBObjectEntry[];
 }
 
-// TODO: Come up with a better name for representing both tables and views
-export enum TabularType {
-  Table = 1,
-  View = 2,
-}
-
 export type DbType = string;
 
 export interface FilterConfiguration {
diff --git a/mathesar_ui/src/App.svelte b/mathesar_ui/src/App.svelte
index 7214fd2697..cf23f44695 100644
--- a/mathesar_ui/src/App.svelte
+++ b/mathesar_ui/src/App.svelte
@@ -6,6 +6,15 @@
   import Header from '@mathesar/header/Header.svelte';
   import { toast } from '@mathesar/stores/toast';
   import { confirmationController } from '@mathesar/stores/confirmation';
+  import { currentSchemaId } from '@mathesar/stores/schemas';
+  import { beginUpdatingUrlWhenSchemaChanges } from './utils/routing';
+
+  // This is a bit of a hack to deal with our routing still being a patchwork of
+  // declarative and imperative logic. Without this call, the URL will not
+  // reliably set the query params when the schema changes. It actually _will_
+  // set the query params _sometimes_, but we weren't able to figure out why the
+  // behavior is inconsistent.
+  beginUpdatingUrlWhenSchemaChanges(currentSchemaId);
 </script>
 
 <ToastPresenter entries={toast.entries} />
diff --git a/mathesar_ui/src/api/tables/records.ts b/mathesar_ui/src/api/tables/records.ts
index 1d7bc94003..19451aae99 100644
--- a/mathesar_ui/src/api/tables/records.ts
+++ b/mathesar_ui/src/api/tables/records.ts
@@ -1,6 +1,51 @@
+export interface Grouping {
+  /** Each string is a column name */
+  columns: string[];
+  mode: GroupingMode;
+  /**
+   * When `mode` === 'distinct', `num_groups` will always be `null`.
+   *
+   * When `mode` === 'percentile', `num_groups` will give the number of groups,
+   * as specified in the request params.
+   */
+  num_groups: number | null;
+  ranged: boolean;
+  groups: Group[];
+}
+
+export type SortDirection = 'asc' | 'desc';
+export interface SortingEntry {
+  /** column name */
+  field: string;
+  direction: SortDirection;
+}
+export type FilterCombination = 'and' | 'or';
+export type FilterOperation = 'eq' | 'ne' | 'get_duplicates';
+export interface FilterCondition {
+  /** column name */
+  field: string;
+  op: FilterOperation;
+  value: unknown;
+}
+type MakeFilteringOption<U> = U extends string
+  ? { [k in U]: FilterCondition[] }
+  : never;
+export type Filtering =
+  | FilterCondition[]
+  | MakeFilteringOption<FilterCombination>;
+
+export interface GetRequestParams {
+  limit?: number;
+  offset?: number;
+  order_by?: SortingEntry[];
+  grouping?: Pick<Grouping, 'columns'>;
+  filters?: Filtering;
+}
+
 export type ResultValue = string | number | boolean | null;
 
 export interface Result {
+  /** keys are column names */
   [k: string]: ResultValue;
 }
 
@@ -29,21 +74,6 @@ export interface Group {
   result_indices: number[];
 }
 
-export interface Grouping {
-  /** Each string is a column name */
-  columns: string[];
-  mode: GroupingMode;
-  /**
-   * When `mode` === 'distinct', `num_groups` will always be `null`.
-   *
-   * When `mode` === 'percentile', `num_groups` will give the number of groups,
-   * as specified in the request params.
-   */
-  num_groups: number | null;
-  ranged: boolean;
-  groups: Group[];
-}
-
 export interface Response {
   count: number;
   grouping: Grouping | null;
diff --git a/mathesar_ui/src/component-library/common/utils/ImmutableMap.ts b/mathesar_ui/src/component-library/common/utils/ImmutableMap.ts
new file mode 100644
index 0000000000..bc264093d4
--- /dev/null
+++ b/mathesar_ui/src/component-library/common/utils/ImmutableMap.ts
@@ -0,0 +1,105 @@
+export default class ImmutableMap<
+  Key extends string | number | boolean | null,
+  Value,
+> {
+  private map: Map<Key, Value>;
+
+  constructor(i: Iterable<[Key, Value]> = []) {
+    this.map = new Map(i);
+  }
+
+  /**
+   * This method exists to allow us to subclass this class and call the
+   * constructor of the subclass from within this base class.
+   *
+   * If there's a way we can use generics to avoid `any` here, we'd love to
+   * know.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private getNewInstance(...args: any[]): this {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
+    return new (this.constructor as any)(...args) as this;
+  }
+
+  /**
+   * The value supplied here will overwrite any value that is already associated
+   * with `key`.
+   */
+  with(key: Key, value: Value): this {
+    const map = new Map(this.map);
+    map.set(key, value);
+    return this.getNewInstance(map);
+  }
+
+  /**
+   * When the same keys exist in within the entries of this instance and the
+   * entries supplied, the values from the entries supplied will be used instead
+   * of the values in this instance. This behavior is consistent with the `with`
+   * method.
+   */
+  withEntries(entries: Iterable<[Key, Value]>): this {
+    const map = new Map(this.map);
+    [...entries].forEach(([key, value]) => {
+      map.set(key, value);
+    });
+    return this.getNewInstance(map);
+  }
+
+  /**
+   * If `key` already exists, its corresponding value will remain. If `key` does
+   * not exist, then the value supplied here will be used.
+   */
+  coalesce(key: Key, value: Value): this {
+    return this.has(key) ? this : this.with(key, value);
+  }
+
+  /**
+   * When the same keys exist in within the entries of this instance and the
+   * entries supplied, the values from this instance will be used instead of the
+   * values from the supplied entries. This behavior is consistent with the
+   * `coalesce` method.
+   */
+  coalesceEntries(other: Iterable<[Key, Value]>): this {
+    const map = new Map(this.map);
+    [...other].forEach(([key, value]) => {
+      if (!this.has(key)) {
+        map.set(key, value);
+      }
+    });
+    return this.getNewInstance(map);
+  }
+
+  without(key: Key): this {
+    const map = new Map(this.map);
+    map.delete(key);
+    return this.getNewInstance(map);
+  }
+
+  has(key: Key): boolean {
+    return this.map.has(key);
+  }
+
+  get(key: Key): Value | undefined {
+    return this.map.get(key);
+  }
+
+  get size(): number {
+    return this.map.size;
+  }
+
+  keys(): IterableIterator<Key> {
+    return this.map.keys();
+  }
+
+  values(): IterableIterator<Value> {
+    return this.map.values();
+  }
+
+  entries(): IterableIterator<[Key, Value]> {
+    return this.map.entries();
+  }
+
+  [Symbol.iterator](): IterableIterator<[Key, Value]> {
+    return this.entries();
+  }
+}
diff --git a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
index f11cefd7cf..e3ecde4b22 100644
--- a/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
+++ b/mathesar_ui/src/component-library/common/utils/ImmutableSet.ts
@@ -5,24 +5,38 @@ export default class ImmutableSet<T extends string | number | boolean | null> {
     this.set = new Set(i);
   }
 
-  with(item: T): ImmutableSet<T> {
+  /**
+   * This method exists to allow us to subclass this class and call the
+   * constructor of the subclass from within this base class.
+   *
+   * If there's a way we can use generics to avoid `any` here, we'd love to
+   * know.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private getNewInstance(...args: any[]): this {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
+    return new (this.constructor as any)(...args) as this;
+  }
+
+  with(item: T): this {
     const set = new Set(this.set);
     set.add(item);
-    return new ImmutableSet(set);
+    return this.getNewInstance(set);
   }
 
-  union(other: ImmutableSet<T>): ImmutableSet<T> {
+  union(other: ImmutableSet<T>): this {
     const set = new Set(this.set);
     [...other.values()].forEach((value) => {
       set.add(value);
     });
-    return new ImmutableSet(set);
+    return this.getNewInstance(set);
   }
 
-  without(item: T): ImmutableSet<T> {
+  without(item: T): this {
     const set = new Set(this.set);
     set.delete(item);
-    return new ImmutableSet(set);
+    //
+    return this.getNewInstance(set);
   }
 
   has(item: T): boolean {
@@ -40,4 +54,8 @@ export default class ImmutableSet<T extends string | number | boolean | null> {
   valuesArray(): T[] {
     return [...this.set.values()];
   }
+
+  [Symbol.iterator](): IterableIterator<T> {
+    return this.values();
+  }
 }
diff --git a/mathesar_ui/src/component-library/common/utils/formatUtils.ts b/mathesar_ui/src/component-library/common/utils/formatUtils.ts
index a36a511674..8c7a163edf 100644
--- a/mathesar_ui/src/component-library/common/utils/formatUtils.ts
+++ b/mathesar_ui/src/component-library/common/utils/formatUtils.ts
@@ -1,3 +1,5 @@
+import { hasStringLabelProperty } from './typeUtils';
+
 export function formatSize(sizeInBytes: number): string {
   if (sizeInBytes === 0) {
     return '0 B';
@@ -13,3 +15,14 @@ export function formatSize(sizeInBytes: number): string {
 
   return `${repValue.toFixed(2)} ${repUnit}B`;
 }
+
+/**
+ * If the given value has a label property and it is a string, return it.
+ * Otherwise, return the value itself, converted to a string.
+ */
+export function getLabel(v: unknown): string {
+  if (hasStringLabelProperty(v)) {
+    return v.label;
+  }
+  return String(v);
+}
diff --git a/mathesar_ui/src/component-library/common/utils/index.ts b/mathesar_ui/src/component-library/common/utils/index.ts
index 6053f86655..9f4857aca3 100644
--- a/mathesar_ui/src/component-library/common/utils/index.ts
+++ b/mathesar_ui/src/component-library/common/utils/index.ts
@@ -2,6 +2,7 @@
 export { default as CancellablePromise } from './CancellablePromise';
 export { default as EventHandler } from './EventHandler';
 export { default as ImmutableSet } from './ImmutableSet';
+export { default as ImmutableMap } from './ImmutableMap';
 
 // Utility Functions
 export * from './domUtils';
diff --git a/mathesar_ui/src/component-library/common/utils/typeUtils.ts b/mathesar_ui/src/component-library/common/utils/typeUtils.ts
new file mode 100644
index 0000000000..f85f293ec0
--- /dev/null
+++ b/mathesar_ui/src/component-library/common/utils/typeUtils.ts
@@ -0,0 +1,7 @@
+function hasLabelProperty(v: unknown): v is { label: unknown } {
+  return typeof v === 'object' && v !== null && 'label' in v;
+}
+
+export function hasStringLabelProperty(v: unknown): v is { label: string } {
+  return hasLabelProperty(v) && typeof v.label === 'string';
+}
diff --git a/mathesar_ui/src/component-library/index.ts b/mathesar_ui/src/component-library/index.ts
index 88b9349e94..9f3e1a7a9e 100644
--- a/mathesar_ui/src/component-library/index.ts
+++ b/mathesar_ui/src/component-library/index.ts
@@ -33,6 +33,7 @@ export { default as Dropdown } from './dropdown/Dropdown.svelte';
 export { default as FileUpload } from './file-upload/FileUpload.svelte';
 export { default as Notification } from './notification/Notification.svelte';
 export { default as Pagination } from './pagination/Pagination.svelte';
+export { default as SimpleSelect } from './simple-select/SimpleSelect.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as TabContainer } from './tabs/TabContainer.svelte';
 export { default as Tree } from './tree/Tree.svelte';
diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
index 114ae1c892..c0eb4576a8 100644
--- a/mathesar_ui/src/component-library/pagination/Pagination.svelte
+++ b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -29,6 +29,12 @@
     undefined;
 
   // Total number of pages.
+  //
+  // TODO: @seancolsen says:
+  // > Refactor `pageCount` to no longer be an exported prop. We're exporting it
+  // > just so the parent component can access the calculation done within this
+  // > component. That's an unconventional flow of data. I'd rather do the
+  // > calculation in the parent and pass it down to this component.
   export let pageCount = 0;
 
   // ARIA Label for component
diff --git a/mathesar_ui/src/component-library/select/Select.svelte b/mathesar_ui/src/component-library/select/Select.svelte
index bcdc5eb0da..a46a0ec0ae 100644
--- a/mathesar_ui/src/component-library/select/Select.svelte
+++ b/mathesar_ui/src/component-library/select/Select.svelte
@@ -1,3 +1,11 @@
+<!--
+  @component
+
+  **NOTICE** This component will eventually be redesigned, with its props
+  behaving more like `SimpleSelect`.
+
+  https://github.com/centerofci/mathesar/issues/1099
+-->
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte';
   import { Dropdown } from '@mathesar-component-library';
diff --git a/mathesar_ui/src/component-library/simple-select/SimpleSelect.svelte b/mathesar_ui/src/component-library/simple-select/SimpleSelect.svelte
new file mode 100644
index 0000000000..271c387d50
--- /dev/null
+++ b/mathesar_ui/src/component-library/simple-select/SimpleSelect.svelte
@@ -0,0 +1,71 @@
+<!--
+  @component
+
+  **NOTICE** This component will eventually be deleted, with its design being
+  merged into `Select`.
+
+  https://github.com/centerofci/mathesar/issues/1099
+-->
+<script lang="ts">
+  import Select from '@mathesar-component-library-dir/select/Select.svelte';
+  import type {
+    SelectChangeEvent,
+    SelectOption,
+  } from '@mathesar-component-library-dir/select/Select.d';
+  import { getLabel as defaultGetLabel } from '@mathesar-component-library-dir/common/utils/formatUtils';
+
+  type T = $$Generic;
+
+  export let values: T[];
+  export let value: T;
+  export let getLabel: (value: T) => string = defaultGetLabel;
+  /**
+   * By default, values will be compared by equality. If you're using objects as
+   * values and you may need to supply a custom function here to compare them.
+   *
+   * For example:
+   *
+   * ```ts
+   * valuesAreEqual={(a, b) => a.id === b.id}
+   * ```
+   */
+  export let valuesAreEqual: (a: T, b: T) => boolean = (a, b) => a === b;
+  export let onChange: (value: T) => void = () => {};
+
+  $: childOptions = values.map((o) => ({ value: o, label: getLabel(o) }));
+
+  let selectedChildOption: SelectOption<T> | undefined;
+
+  function handleParentChange(parentValue: T) {
+    if (selectedChildOption?.value === undefined) {
+      return;
+    }
+    if (valuesAreEqual(parentValue, selectedChildOption.value)) {
+      return; // to avoid infinite loop
+    }
+    const newOption = childOptions.find((o) =>
+      valuesAreEqual(o.value, parentValue),
+    );
+    if (!newOption) {
+      return;
+    }
+    // @ts-ignore because typing of Select component needs improvements
+    selectedChildOption = newOption;
+  }
+  $: handleParentChange(value);
+
+  function handleChildChange(event: SelectChangeEvent) {
+    // @ts-ignore because typing of Select component needs improvements
+    value = event.detail.value.value;
+    // @ts-ignore because typing of Select component needs improvements
+    selectedChildOption = event.detail.value;
+    onChange(value);
+  }
+</script>
+
+<Select
+  options={childOptions}
+  value={selectedChildOption}
+  idKey="value"
+  on:change={handleChildChange}
+/>
diff --git a/mathesar_ui/src/component-library/simple-select/__meta__/SimpleSelect.stories.svelte b/mathesar_ui/src/component-library/simple-select/__meta__/SimpleSelect.stories.svelte
new file mode 100644
index 0000000000..4ef4aec15a
--- /dev/null
+++ b/mathesar_ui/src/component-library/simple-select/__meta__/SimpleSelect.stories.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import SimpleSelect from '../SimpleSelect.svelte';
+
+  const meta = {
+    title: 'Components/SimpleSelect',
+  };
+
+  const aValues = [1, 2, 3];
+  const aDefault = aValues[0];
+  let a = 2;
+
+  const bValues = [
+    { foo: 'arst', bar: 'oien' },
+    { foo: 'qyul', bar: 'zwfp' },
+  ];
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  const bGetLabel = (o) => `${o.foo}-${o.bar}`;
+  const bDefault = bValues[0];
+  let b = bValues[0];
+</script>
+
+<Meta {...meta} />
+
+<Story name="Basic">
+  <div><SimpleSelect values={aValues} bind:value={a} /></div>
+  <div>
+    Value: {a}
+    <button
+      on:click={() => {
+        a = aDefault;
+      }}>Reset</button
+    >
+  </div>
+</Story>
+
+<hr />
+
+<Story name="Basic">
+  <div>
+    <SimpleSelect values={bValues} bind:value={b} getLabel={bGetLabel} />
+  </div>
+  <div>
+    foo: {b?.foo}, bar: {b?.bar}
+    <button
+      on:click={() => {
+        b = bDefault;
+      }}>Reset</button
+    >
+  </div>
+</Story>
diff --git a/mathesar_ui/src/components/SelectColumn.svelte b/mathesar_ui/src/components/SelectColumn.svelte
new file mode 100644
index 0000000000..21f20780dd
--- /dev/null
+++ b/mathesar_ui/src/components/SelectColumn.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { SimpleSelect } from '@mathesar-component-library';
+  import type { Column } from '@mathesar/stores/table-data/types';
+
+  export let columns: Column[];
+  export let column: Column;
+  export let onChange: (column: Column) => void = () => {};
+</script>
+
+<SimpleSelect
+  values={columns}
+  getLabel={(c) => c.name}
+  valuesAreEqual={(a, b) => a.id === b.id}
+  bind:value={column}
+  {onChange}
+/>
diff --git a/mathesar_ui/src/components/SelectSortDirection.svelte b/mathesar_ui/src/components/SelectSortDirection.svelte
new file mode 100644
index 0000000000..bf9e4758a0
--- /dev/null
+++ b/mathesar_ui/src/components/SelectSortDirection.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { SimpleSelect } from '@mathesar-component-library';
+  import {
+    SortDirection,
+    getDirectionLabel,
+  } from '@mathesar/stores/table-data';
+
+  export let value: SortDirection;
+  export let onChange: (value: SortDirection) => void = () => {};
+</script>
+
+<SimpleSelect
+  values={Object.values(SortDirection)}
+  getLabel={getDirectionLabel}
+  bind:value
+  {onChange}
+/>
diff --git a/mathesar_ui/src/header/Header.svelte b/mathesar_ui/src/header/Header.svelte
index c00f370f5d..66c799873c 100644
--- a/mathesar_ui/src/header/Header.svelte
+++ b/mathesar_ui/src/header/Header.svelte
@@ -18,7 +18,7 @@
   } from '@mathesar/stores/tabs';
 
   import { Icon, Button, Dropdown } from '@mathesar-component-library';
-  import { TabularType } from '@mathesar/App.d';
+  import { TabularType } from '@mathesar/stores/table-data';
 
   import SchemaSelector from './schema-selector/SchemaSelector.svelte';
   import ImportIndicator from './import-indicator/ImportIndicator.svelte';
diff --git a/mathesar_ui/src/sections/Base.svelte b/mathesar_ui/src/sections/Base.svelte
index 039d2e9cb5..0d36100542 100644
--- a/mathesar_ui/src/sections/Base.svelte
+++ b/mathesar_ui/src/sections/Base.svelte
@@ -3,12 +3,14 @@
   import { TabContainer, Icon } from '@mathesar-component-library';
   import { currentDBName } from '@mathesar/stores/databases';
   import { currentSchemaId } from '@mathesar/stores/schemas';
+  import type { MathesarTab, TabList } from '@mathesar/stores/tabs/types';
   import {
     getTabsForSchema,
-    constructTabularTabLink,
+    tabIsTabular,
+    TabType,
   } from '@mathesar/stores/tabs';
-  import type { MathesarTab, TabList } from '@mathesar/stores/tabs/types';
-  import { TabularType } from '@mathesar/App.d';
+  import { constructTabularTabLink } from '@mathesar/stores/tabs/tabDataSaver';
+  import { TabularType } from '@mathesar/stores/table-data';
   import type { TableEntry } from '@mathesar/App.d';
 
   import ImportData from './import-data/ImportData.svelte';
@@ -35,15 +37,15 @@
   // TODO: Move this entire logic to data layer without involving view layer
   $: changeCurrentSchema(database, schemaId);
 
-  function getTabLink(entry: MathesarTab): string | undefined {
-    if (entry.isNew || !entry.tabularData) {
+  function getTabLink(tab: MathesarTab): string | undefined {
+    if (!tabIsTabular(tab)) {
       return undefined;
     }
     return constructTabularTabLink(
       database,
       schemaId,
-      entry.tabularData.type,
-      entry.tabularData.id,
+      tab.tabularData.type,
+      tab.tabularData.id,
     );
   }
 
@@ -92,9 +94,9 @@
       </span>
 
       {#if $activeTab}
-        {#if $activeTab.isNew}
+        {#if $activeTab.type === TabType.Import}
           <ImportData {database} {schemaId} id={$activeTab.fileImportId} />
-        {:else if $activeTab.tabularData}
+        {:else if $activeTab.type === TabType.Tabular}
           <TableView tabularData={$activeTab.tabularData} />
         {/if}
       {/if}
diff --git a/mathesar_ui/src/sections/import-data/importUtils.ts b/mathesar_ui/src/sections/import-data/importUtils.ts
index 243664294a..8cf3c51ae7 100644
--- a/mathesar_ui/src/sections/import-data/importUtils.ts
+++ b/mathesar_ui/src/sections/import-data/importUtils.ts
@@ -31,7 +31,7 @@ import type {
   FileUploadAddDetail,
   FileUploadProgress,
 } from '@mathesar-component-library/types';
-import { TabularType } from '@mathesar/App.d';
+import { TabularType } from '@mathesar/stores/table-data';
 
 function completionCallback(
   fileImportStore: FileImport,
diff --git a/mathesar_ui/src/sections/left-pane/LeftPane.svelte b/mathesar_ui/src/sections/left-pane/LeftPane.svelte
index 2e4caa0e1b..fb132b9c0c 100644
--- a/mathesar_ui/src/sections/left-pane/LeftPane.svelte
+++ b/mathesar_ui/src/sections/left-pane/LeftPane.svelte
@@ -6,6 +6,7 @@
     getTabsForSchema,
     constructTabularTab,
     constructImportTab,
+    TabType,
   } from '@mathesar/stores/tabs';
   import { tables } from '@mathesar/stores/tables';
   import { loadIncompleteImport } from '@mathesar/stores/fileImports';
@@ -13,7 +14,7 @@
   import type { DBTablesStoreData } from '@mathesar/stores/tables';
   import type { MathesarTab } from '@mathesar/stores/tabs/types';
   import type { SchemaEntry, TableEntry } from '@mathesar/App.d';
-  import { TabularType } from '@mathesar/App.d';
+  import { TabularType } from '@mathesar/stores/table-data';
   import type { TreeItem } from '@mathesar-component-library/types';
 
   export let database: string;
@@ -55,7 +56,7 @@
   $: tree = generateTree($tables);
 
   function onActiveTabChange(_activeTab: MathesarTab | undefined) {
-    if (_activeTab?.tabularData) {
+    if (_activeTab && _activeTab.type === TabType.Tabular) {
       activeOptionSet = new Set([_activeTab.tabularData.id]);
     } else {
       activeOptionSet = new Set();
diff --git a/mathesar_ui/src/sections/table-view/actions-pane/ActionsPane.svelte b/mathesar_ui/src/sections/table-view/actions-pane/ActionsPane.svelte
index bc74a10f49..6aaacf249c 100644
--- a/mathesar_ui/src/sections/table-view/actions-pane/ActionsPane.svelte
+++ b/mathesar_ui/src/sections/table-view/actions-pane/ActionsPane.svelte
@@ -12,11 +12,7 @@
   } from '@fortawesome/free-solid-svg-icons';
   import { States } from '@mathesar/utils/api';
   import { Button, Icon, Dropdown } from '@mathesar-component-library';
-  import type {
-    TabularDataStore,
-    ColumnsData,
-  } from '@mathesar/stores/table-data/types';
-  import type { SelectOption } from '@mathesar-component-library/types';
+  import type { TabularDataStore } from '@mathesar/stores/table-data/types';
   import { refetchTablesForSchema, deleteTable } from '@mathesar/stores/tables';
   import { currentSchemaId } from '@mathesar/stores/schemas';
   import { currentDBName } from '@mathesar/stores/databases';
@@ -31,22 +27,19 @@
 
   const tabularData = getContext<TabularDataStore>('tabularData');
 
-  function getColumnOptions(columnsData: ColumnsData): SelectOption<string>[] {
-    return (
-      columnsData?.columns?.map((column) => ({
-        id: column.name,
-        label: column.name,
-      })) || []
-    );
-  }
-
   const tableConstraintsModal = modal.spawnModalController();
   const tableRenameModal = modal.spawnModalController();
 
   $: ({ columnsDataStore, recordsData, meta, constraintsDataStore } =
     $tabularData);
-  $: ({ filter, sort, group, selectedRecords, combinedModificationState } =
-    meta);
+  $: ({ columns } = $columnsDataStore);
+  $: ({
+    filtering,
+    sorting,
+    grouping,
+    selectedRecords,
+    combinedModificationState,
+  } = meta);
   $: recordState = recordsData.state;
 
   $: isLoading =
@@ -57,7 +50,6 @@
     $columnsDataStore.state === States.Error ||
     $recordState === States.Error ||
     $constraintsDataStore.state === States.Error;
-  $: columnOptions = getColumnOptions($columnsDataStore);
 
   function refresh() {
     void $tabularData.refresh();
@@ -121,13 +113,13 @@
       <Icon data={faFilter} size="0.8em" />
       <span>
         Filters
-        {#if $filter?.filters?.length > 0}
-          ({$filter?.filters?.length})
+        {#if $filtering.entries.length > 0}
+          ({$filtering.entries.length})
         {/if}
       </span>
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <DisplayFilter options={columnOptions} {meta} />
+      <DisplayFilter {columns} filtering={meta.filtering} />
     </svelte:fragment>
   </Dropdown>
 
@@ -136,13 +128,13 @@
       <Icon data={faSort} />
       <span>
         Sort
-        {#if $sort?.size > 0}
-          ({$sort?.size})
+        {#if $sorting.size > 0}
+          ({$sorting.size})
         {/if}
       </span>
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <DisplaySort options={columnOptions} {meta} />
+      <DisplaySort {columns} sorting={meta.sorting} />
     </svelte:fragment>
   </Dropdown>
 
@@ -151,13 +143,13 @@
       <Icon data={faListAlt} />
       <span>
         Group
-        {#if $group?.size > 0}
-          ({$group?.size})
+        {#if $grouping.size > 0}
+          ({$grouping.size})
         {/if}
       </span>
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <DisplayGroup options={columnOptions} {meta} />
+      <DisplayGroup {columns} grouping={meta.grouping} />
     </svelte:fragment>
   </Dropdown>
 
diff --git a/mathesar_ui/src/sections/table-view/actions-pane/RenameTableModal.svelte b/mathesar_ui/src/sections/table-view/actions-pane/RenameTableModal.svelte
index f4d0db64db..eb4501184c 100644
--- a/mathesar_ui/src/sections/table-view/actions-pane/RenameTableModal.svelte
+++ b/mathesar_ui/src/sections/table-view/actions-pane/RenameTableModal.svelte
@@ -10,7 +10,8 @@
   import { currentSchemaId } from '@mathesar/stores/schemas';
   import { constructTabularTab, getTabsForSchema } from '@mathesar/stores/tabs';
   import { currentDBName } from '@mathesar/stores/databases';
-  import { TabularType } from '@mathesar/App.d';
+  import { TabularType } from '@mathesar/stores/table-data';
+
   import ModalTextInputForm from '@mathesar/components/ModalTextInputForm.svelte';
   import Identifier from '@mathesar/components/Identifier.svelte';
 
diff --git a/mathesar_ui/src/sections/table-view/display-options/DisplayFilter.svelte b/mathesar_ui/src/sections/table-view/display-options/DisplayFilter.svelte
index 760195d275..66908bcd2f 100644
--- a/mathesar_ui/src/sections/table-view/display-options/DisplayFilter.svelte
+++ b/mathesar_ui/src/sections/table-view/display-options/DisplayFilter.svelte
@@ -1,90 +1,90 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
-  import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
-  import { Icon, Button, Select, TextInput } from '@mathesar-component-library';
-  import { filterCombinations } from '@mathesar/stores/table-data';
+  import type { Writable } from 'svelte/store';
+  // import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
+  // import { Icon, Button, Select, TextInput } from '@mathesar-component-library';
+  // import {
+  //   filterCombinations,
+  //   filterConditions,
+  //   defaultFilterCondition,
+  //   defaultFilterCombination,
+  // } from '@mathesar/stores/table-data';
   import type {
-    Meta,
-    FilterCombination,
+    Filtering,
+    Column,
+    // FilterCondition,
+    // FilterCombination,
   } from '@mathesar/stores/table-data/types';
-  import type { SelectOption } from '@mathesar-component-library/types';
-  import FilterEntry from './FilterEntry.svelte';
+  // import FilterEntry from './FilterEntry.svelte';
 
-  export let meta: Meta;
-  export let options: SelectOption[];
+  export let filtering: Writable<Filtering>;
+  export let columns: Column[];
 
-  let filter: Meta['filter'];
-  let filterCombination: FilterCombination;
-  let filterColumn: SelectOption;
-  let filterCondition: SelectOption;
-  let filterValue = '';
-  let addNew = false;
+  // let filterCombination: FilterCombination = defaultFilterCombination;
+  // let filterColumn: ColumnSelectOption = columnSelectOptions[0];
+  // let filterCondition: FilterCondition | undefined;
+  // let filterValue = '';
+  // let addNew = false;
 
-  const conditions = [
-    { id: 'eq', label: 'equals' },
-    { id: 'ne', label: 'not equals' },
-    { id: 'get_duplicates', label: 'has duplicates' },
-  ];
+  // function addFilter() {
+  //   if (!filterColumn) {
+  //     return;
+  //   }
+  //   filtering.update((f) =>
+  //     f.withEntry({
+  //       columnName: filterColumn.columnName,
+  //       condition: filterCondition ?? defaultFilterCondition,
+  //       value: filterValue,
+  //     }),
+  //   );
 
-  function onMetaChange(_meta: Meta) {
-    ({ filter } = _meta);
-    filterCombination = _meta.getFilterCombination();
-  }
+  //   filterColumn = columnSelectOptions[0];
+  //   filterCondition = filterConditions[0];
+  //   filterValue = '';
+  //   addNew = false;
+  // }
 
-  $: onMetaChange(meta);
+  // function removeFilter(index: number) {
+  //   filtering.update((f) => f.withoutEntry(index));
+  // }
 
-  function addFilter() {
-    meta.addFilter({
-      column: filterColumn,
-      condition: filterCondition,
-      value: filterValue,
-    });
-
-    [filterColumn] = options;
-    [filterCondition] = conditions;
-    filterValue = '';
-    addNew = false;
-  }
-
-  function updateFilters() {
-    // Recreate with new object to trigger subscriptions
-    meta.setFilters({
-      ...get(filter),
-    });
-  }
+  // function updateFilters() {
+  //   // Recreate with new object to trigger subscriptions
+  //   filtering.update((f) => f);
+  // }
 </script>
 
 <div class="display-option">
-  <div class="header">
+  <!-- <div class="header">
     <span>
       Filters
-      {#if $filter?.filters?.length > 0}
-        ({$filter?.filters?.length})
+      {#if $filtering.entries.length}
+        ({$filtering.entries.length})
       {/if}
     </span>
   </div>
   <div class="content">
     <table>
-      {#if $filter?.filters?.length > 0}
+      {#if $filtering?.entries.length}
         <tr>
           <td>
             <Select
               options={filterCombinations}
               bind:value={filterCombination}
-              on:change={() => meta.setFilterCombination(filterCombination)}
+              on:change={() =>
+                filtering.update((f) => f.withCombination(filterCombination))}
             />
           </td>
         </tr>
       {/if}
-      {#each $filter?.filters || [] as option, index (option)}
+      {#each $filtering.entries as entry, index (entry)}
         <FilterEntry
-          {options}
-          {conditions}
-          filterByDuplicates={option.condition.id === conditions[2].id}
-          bind:column={option.column}
-          bind:condition={option.condition}
-          bind:value={option.value}
-          on:removeFilter={() => meta.removeFilter(index)}
+          {columnSelectOptions}
+          conditions={filterConditions}
+          filterByDuplicates={entry.condition.id === filterConditions[2].id}
+          bind:column={entry.column}
+          bind:condition={entry.condition}
+          bind:value={entry.value}
+          on:removeFilter={() => removeFilter(index)}
           on:reload={() => updateFilters()}
         />
       {:else}
@@ -93,7 +93,7 @@
         </tr>
       {/each}
 
-      {#if options.length > 0}
+      {#if columnSelectOptions.length > 0}
         {#if !addNew}
           <tr class="add-option">
             <td colspan="3">
@@ -109,12 +109,12 @@
         {:else}
           <tr class="add-option">
             <td class="column">
-              <Select {options} bind:value={filterColumn} />
+              <Select options={columnSelectOptions} bind:value={filterColumn} />
             </td>
             <td class="dir">
-              <Select options={conditions} bind:value={filterCondition} />
+              <Select options={filterConditions} bind:value={filterCondition} />
             </td>
-            {#if filterCondition !== conditions[2]}
+            {#if filterCondition !== filterConditions[2]}
               <td class="value" colspan="2">
                 <TextInput bind:value={filterValue} />
               </td>
@@ -138,7 +138,7 @@
         {/if}
       {/if}
     </table>
-  </div>
+  </div> -->
 </div>
 
 <style global lang="scss">
diff --git a/mathesar_ui/src/sections/table-view/display-options/DisplayGroup.svelte b/mathesar_ui/src/sections/table-view/display-options/DisplayGroup.svelte
index 92c133e3a4..99669a4f20 100644
--- a/mathesar_ui/src/sections/table-view/display-options/DisplayGroup.svelte
+++ b/mathesar_ui/src/sections/table-view/display-options/DisplayGroup.svelte
@@ -1,37 +1,22 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
   import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
-  import type { Meta, GroupOption } from '@mathesar/stores/table-data/types';
-  import { Button, Select, Icon } from '@mathesar-component-library';
-  import type { SelectOption } from '@mathesar-component-library/types';
+  import type { Grouping } from '@mathesar/stores/table-data';
+  import { Button, Icon } from '@mathesar-component-library';
+  import type { Column } from '@mathesar/stores/table-data/columns';
+  import SelectColumn from '@mathesar/components/SelectColumn.svelte';
 
-  export let meta: Meta;
-  export let options: SelectOption<string>[];
+  export let grouping: Writable<Grouping>;
+  export let columns: Column[];
 
-  $: ({ group } = meta);
-
-  let groupColumns: SelectOption<string>[];
-  let groupColumnValue: SelectOption<string>;
+  /** Columns which are not already used as a grouping entry */
+  $: availableColumns = columns.filter((column) => !$grouping.has(column.name));
+  $: [newGroupColumn] = availableColumns;
   let addNew = false;
 
-  function calcNewGroupColumns(
-    _columns: SelectOption<string>[],
-    _group: GroupOption,
-  ) {
-    let groupOptions = _columns;
-    if (_group) {
-      groupOptions = groupOptions.filter((option) => !_group.has(option.id));
-    }
-    groupColumns = groupOptions;
-  }
-
-  $: calcNewGroupColumns(options, $group);
-
   function addGroupColumn() {
-    if (groupColumnValue?.id) {
-      const column = groupColumnValue.id;
-      meta.addGroup(column);
-      addNew = false;
-    }
+    grouping.update((g) => g.with(newGroupColumn.name));
+    addNew = false;
   }
 </script>
 
@@ -39,18 +24,22 @@
   <div class="header">
     <span>
       Group
-      {#if $group?.size > 0}
-        ({$group.size})
+      {#if $grouping.size > 0}
+        ({$grouping.size})
       {/if}
     </span>
   </div>
   <div class="content">
     <table>
-      {#each Array.from($group ?? []) as option (option)}
+      {#each [...$grouping] as columnName (columnName)}
         <tr>
-          <td class="groupcolumn">{option}</td>
+          <td class="groupcolumn">{columnName}</td>
           <td class="action">
-            <Button on:click={() => meta.removeGroup(option)}>Clear</Button>
+            <Button
+              on:click={() => grouping.update((g) => g.without(columnName))}
+            >
+              Clear
+            </Button>
           </td>
         </tr>
       {:else}
@@ -59,7 +48,7 @@
         </tr>
       {/each}
 
-      {#if groupColumns?.length > 0}
+      {#if availableColumns.length > 0}
         {#if !addNew}
           <tr class="add-option">
             <td colspan="3">
@@ -75,7 +64,10 @@
         {:else}
           <tr class="add-option">
             <td class="groupcolumn">
-              <Select options={groupColumns} bind:value={groupColumnValue} />
+              <SelectColumn
+                columns={availableColumns}
+                bind:column={newGroupColumn}
+              />
             </td>
             <td class="action">
               <Button size="small" on:click={addGroupColumn}>
diff --git a/mathesar_ui/src/sections/table-view/display-options/DisplaySort.svelte b/mathesar_ui/src/sections/table-view/display-options/DisplaySort.svelte
index 668f4a8fdf..604b7e0777 100644
--- a/mathesar_ui/src/sections/table-view/display-options/DisplaySort.svelte
+++ b/mathesar_ui/src/sections/table-view/display-options/DisplaySort.svelte
@@ -1,59 +1,25 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
   import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
-  import type { Meta, SortOption } from '@mathesar/stores/table-data/types';
-  import { Icon, Button, Select } from '@mathesar-component-library';
-  import type {
-    SelectOption,
-    SelectChangeEvent,
-  } from '@mathesar-component-library/types';
+  import { Icon, Button } from '@mathesar-component-library';
+  import { SortDirection } from '@mathesar/stores/table-data';
+  import type { Sorting } from '@mathesar/stores/table-data';
+  import type { Column } from '@mathesar/stores/table-data/columns';
+  import SelectSortDirection from '@mathesar/components/SelectSortDirection.svelte';
+  import SelectColumn from '@mathesar/components/SelectColumn.svelte';
 
-  export let meta: Meta;
-  export let options: SelectOption<string>[];
+  export let sorting: Writable<Sorting>;
+  export let columns: Column[];
 
-  $: ({ sort } = meta);
-
-  let sortColumns: SelectOption<string>[];
-  let sortColumnValue: SelectOption<string>;
-  let sortDirectionValue: SelectOption<'asc' | 'desc'>;
+  /** Columns which are not already used as a sorting entry */
+  $: availableColumns = columns.filter((column) => !$sorting.has(column.name));
+  $: [newSortColumn] = availableColumns;
+  let newSortDirection = SortDirection.A;
   let addNew = false;
 
-  function calcNewSortColumns(
-    _columns: SelectOption<string>[],
-    _sort: SortOption,
-  ) {
-    let sortOptions = _columns;
-    if (_sort) {
-      sortOptions = sortOptions.filter((option) => !_sort.get(option.id));
-    }
-    sortColumns = sortOptions;
-    [sortColumnValue] = sortColumns;
-  }
-
-  $: calcNewSortColumns(options, $sort);
-
-  const sortDirections = [
-    { id: 'asc', label: 'asc' },
-    { id: 'desc', label: 'desc' },
-  ];
-
-  function getSelectedDirection(option: [string, 'asc' | 'desc']) {
-    return sortDirections.find((entry) => entry.id === option[1]);
-  }
-
-  function directionChanged(
-    event: SelectChangeEvent<'asc' | 'desc'>,
-    option: [string, 'asc' | 'desc'],
-  ) {
-    const newDirection = event.detail.value.id ?? 'asc';
-    meta.changeSortDirection(option[0], newDirection);
-  }
-
   function addSortColumn() {
-    if (sortColumnValue?.id) {
-      const column = sortColumnValue.id;
-      meta.addUpdateSort(column, sortDirectionValue?.id);
-      addNew = false;
-    }
+    sorting.update((s) => s.with(newSortColumn.name, newSortDirection));
+    addNew = false;
   }
 </script>
 
@@ -61,25 +27,30 @@
   <div class="header">
     <span>
       Sort
-      {#if $sort?.size > 0}
-        ({$sort.size})
+      {#if $sorting.size > 0}
+        ({$sorting.size})
       {/if}
     </span>
   </div>
   <div class="content">
     <table>
-      {#each Array.from($sort ?? []) as option (option[0])}
+      {#each [...$sorting] as [columnName, sortDirection] (columnName)}
         <tr>
-          <td class="column">{option[0]}</td>
+          <td class="column">{columnName}</td>
           <td class="dir">
-            <Select
-              options={sortDirections}
-              value={getSelectedDirection(option)}
-              on:change={(event) => directionChanged(event, option)}
+            <SelectSortDirection
+              value={sortDirection}
+              onChange={(direction) => {
+                sorting.update((s) => s.with(columnName, direction));
+              }}
             />
           </td>
           <td class="action">
-            <Button on:click={() => meta.removeSort(option[0])}>Clear</Button>
+            <Button
+              on:click={() => sorting.update((s) => s.without(columnName))}
+            >
+              Clear
+            </Button>
           </td>
         </tr>
       {:else}
@@ -88,7 +59,7 @@
         </tr>
       {/each}
 
-      {#if sortColumns?.length > 0}
+      {#if availableColumns.length > 0}
         {#if !addNew}
           <tr class="add-option">
             <td colspan="3">
@@ -104,13 +75,13 @@
         {:else}
           <tr class="add-option">
             <td class="column">
-              <Select options={sortColumns} bind:value={sortColumnValue} />
+              <SelectColumn
+                columns={availableColumns}
+                bind:column={newSortColumn}
+              />
             </td>
             <td class="dir">
-              <Select
-                options={sortDirections}
-                bind:value={sortDirectionValue}
-              />
+              <SelectSortDirection bind:value={newSortDirection} />
             </td>
             <td class="action">
               <Button size="small" on:click={addSortColumn}>
diff --git a/mathesar_ui/src/sections/table-view/display-options/FilterEntry.svelte b/mathesar_ui/src/sections/table-view/display-options/FilterEntry.svelte
index 41e2d66fa9..fa7fdf7c48 100644
--- a/mathesar_ui/src/sections/table-view/display-options/FilterEntry.svelte
+++ b/mathesar_ui/src/sections/table-view/display-options/FilterEntry.svelte
@@ -1,49 +1,49 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-  import { faTimes } from '@fortawesome/free-solid-svg-icons';
-  import { Icon, Button, Select, TextInput } from '@mathesar-component-library';
-  import type { FilterEntry } from '@mathesar/stores/table-data/types';
-  import type { SelectOption } from '@mathesar-component-library/types';
+  // import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  // import { faTimes } from '@fortawesome/free-solid-svg-icons';
+  // import { Icon, Button, Select, TextInput } from '@mathesar-component-library';
+  // import type { FilterCondition } from '@mathesar/stores/table-data/types';
+  // import type { SelectOption } from '@mathesar-component-library/types';
 
-  const dispatch = createEventDispatcher();
+  // const dispatch = createEventDispatcher();
 
-  export let options: SelectOption[];
-  export let conditions: SelectOption[];
+  // export let columnSelectOptions: ColumnSelectOption[];
+  // export let conditions: FilterCondition[];
 
-  export let filterByDuplicates: boolean;
+  // export let filterByDuplicates: boolean;
 
-  export let column: FilterEntry['column'];
-  export let condition: FilterEntry['condition'];
-  export let value: FilterEntry['value'];
+  // export let column: ColumnSelectOption;
+  // export let condition: FilterEntry['condition'];
+  // export let value: FilterEntry['value'];
 
-  let inputValue: string;
-  let timer: number;
+  // let inputValue: string;
+  // let timer: number;
 
-  onMount(() => {
-    inputValue = value;
-  });
+  // onMount(() => {
+  //   inputValue = value;
+  // });
 
-  onDestroy(() => {
-    window.clearTimeout(timer);
-  });
+  // onDestroy(() => {
+  //   window.clearTimeout(timer);
+  // });
 
-  function onValueChange(_inputValue: string) {
-    clearTimeout(timer);
-    timer = window.setTimeout(() => {
-      if (value !== _inputValue) {
-        value = _inputValue;
-        dispatch('reload');
-      }
-    }, 500);
-  }
+  // function onValueChange(_inputValue: string) {
+  //   clearTimeout(timer);
+  //   timer = window.setTimeout(() => {
+  //     if (value !== _inputValue) {
+  //       value = _inputValue;
+  //       dispatch('reload');
+  //     }
+  //   }, 500);
+  // }
 
-  $: onValueChange(inputValue);
+  // $: onValueChange(inputValue);
 </script>
 
 <tr>
-  <td class="column">
+  <!-- <td class="column">
     <Select
-      {options}
+      options={columnSelectOptions}
       bind:value={column}
       on:change={() => dispatch('reload')}
     />
@@ -64,5 +64,5 @@
     <Button size="small" on:click={() => dispatch('removeFilter')}>
       <Icon data={faTimes} />
     </Button>
-  </td>
+  </td> -->
 </tr>
diff --git a/mathesar_ui/src/sections/table-view/header/header-cell/DefaultOptions.svelte b/mathesar_ui/src/sections/table-view/header/header-cell/DefaultOptions.svelte
index 95adff67ca..c9b4df1275 100644
--- a/mathesar_ui/src/sections/table-view/header/header-cell/DefaultOptions.svelte
+++ b/mathesar_ui/src/sections/table-view/header/header-cell/DefaultOptions.svelte
@@ -12,13 +12,12 @@
   import type {
     Meta,
     Column,
-    SortOption,
-    GroupOption,
     ColumnsDataStore,
     ConstraintsDataStore,
   } from '@mathesar/stores/table-data/types';
   import { toast } from '@mathesar/stores/toast';
   import { confirmDelete } from '@mathesar/stores/confirmation';
+  import { SortDirection } from '@mathesar/stores/table-data';
 
   const dispatch = createEventDispatcher();
 
@@ -30,28 +29,28 @@
   let isRequestingToggleAllowNull = false;
   let isRequestingToggleAllowDuplicates = false;
 
-  $: ({ sort, group } = meta);
-  $: sortDirection = ($sort as SortOption)?.get(column.name);
-  $: hasGrouping = ($group as GroupOption)?.has(column.name);
+  $: ({ sorting, grouping } = meta);
+  $: sortDirection = $sorting.get(column.name);
+  $: hasGrouping = $grouping.has(column.name);
 
   $: allowsNull = column.nullable;
   $: ({ uniqueColumns } = constraintsDataStore);
   $: allowsDuplicates = !(column.primary_key || $uniqueColumns.has(column.id));
 
-  function handleSort(order: 'asc' | 'desc') {
+  function handleSort(order: SortDirection) {
     if (sortDirection === order) {
-      meta.removeSort(column.name);
+      sorting.update((s) => s.without(column.name));
     } else {
-      meta.addUpdateSort(column.name, order);
+      sorting.update((s) => s.with(column.name, order));
     }
     dispatch('close');
   }
 
   function toggleGroup() {
     if (hasGrouping) {
-      meta.removeGroup(column.name);
+      grouping.update((g) => g.without(column.name));
     } else {
-      meta.addGroup(column.name);
+      grouping.update((g) => g.with(column.name));
     }
     dispatch('close');
   }
@@ -126,10 +125,10 @@
 <h6 class="category">Display</h6>
 <ul>
   <li>
-    <Button appearance="plain" on:click={() => handleSort('asc')}>
+    <Button appearance="plain" on:click={() => handleSort(SortDirection.A)}>
       <Icon class="opt" data={faSortAmountDownAlt} />
       <span>
-        {#if sortDirection === 'asc'}
+        {#if sortDirection === SortDirection.A}
           Remove asc sort
         {:else}
           Sort Ascending
@@ -138,10 +137,10 @@
     </Button>
   </li>
   <li>
-    <Button appearance="plain" on:click={() => handleSort('desc')}>
+    <Button appearance="plain" on:click={() => handleSort(SortDirection.D)}>
       <Icon class="opt" data={faSortAmountDown} />
       <span>
-        {#if sortDirection === 'desc'}
+        {#if sortDirection === SortDirection.D}
           Remove desc sort
         {:else}
           Sort Descending
diff --git a/mathesar_ui/src/sections/table-view/row/RowControl.svelte b/mathesar_ui/src/sections/table-view/row/RowControl.svelte
index 79b8520f5d..d53fbe1de9 100644
--- a/mathesar_ui/src/sections/table-view/row/RowControl.svelte
+++ b/mathesar_ui/src/sections/table-view/row/RowControl.svelte
@@ -16,7 +16,7 @@
   export let meta: Meta;
   export let recordsData: RecordsData;
 
-  $: ({ selectedRecords, recordModificationState, offset } = meta);
+  $: ({ selectedRecords, recordModificationState, pagination } = meta);
   $: ({ savedRecords, newRecords, totalCount } = recordsData);
 
   $: primaryKeyValue = primaryKeyColumn ? row[primaryKeyColumn] : undefined;
@@ -50,7 +50,7 @@
           {row.__rowIndex +
             (row.__isNew
               ? ($totalCount ?? 0) - $savedRecords.length - $newRecords.length
-              : $offset) +
+              : $pagination.offset) +
             1}
           {#if row.__isNew}
             *
diff --git a/mathesar_ui/src/sections/table-view/status-pane/StatusPane.svelte b/mathesar_ui/src/sections/table-view/status-pane/StatusPane.svelte
index ca44d0f43a..4da0e609c7 100644
--- a/mathesar_ui/src/sections/table-view/status-pane/StatusPane.svelte
+++ b/mathesar_ui/src/sections/table-view/status-pane/StatusPane.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { Pagination, Select } from '@mathesar-component-library';
+  import {
+    Pagination as PaginationComponent,
+    Select,
+  } from '@mathesar-component-library';
   import { States } from '@mathesar/utils/api';
   import type { TabularDataStore } from '@mathesar/stores/table-data/types';
+  import { Pagination } from '@mathesar/stores/table-data';
 
   const tabularData = getContext<TabularDataStore>('tabularData');
 
   $: ({ recordsData, meta } = $tabularData);
-  $: ({ selectedRecords, pageSize, page, offset } = meta);
+  $: ({ selectedRecords, pagination } = meta);
+  $: ({ size: pageSize, page, offset } = $pagination);
   $: ({ totalCount, state, newRecords } = recordsData);
   $: recordState = $state;
-  $: selectedPageSize = { id: $pageSize, label: $pageSize };
+  $: selectedPageSize = { id: pageSize, label: pageSize };
 
   const pageSizeOpts = [
     { id: 100, label: '100' },
@@ -19,15 +24,24 @@
   ];
 
   let pageCount: number;
-  $: max = Math.min($totalCount ?? 0, $offset + $pageSize);
+  $: max = Math.min($totalCount ?? 0, offset + pageSize);
+
+  function handlePageChange(event: {
+    detail: {
+      currentPage: number;
+    };
+  }) {
+    pagination.update(
+      (p) => new Pagination({ ...p, page: event.detail.currentPage }),
+    );
+  }
 
   function setPageSize(
     event: CustomEvent<{ value: { id: number; label: string } }>,
   ) {
     const newPageSize = event.detail.value.id;
-    if ($pageSize !== newPageSize) {
-      $pageSize = newPageSize;
-      $page = 1;
+    if (pageSize !== newPageSize) {
+      $pagination = new Pagination({ page: 1, size: newPageSize });
     }
   }
 </script>
@@ -38,7 +52,7 @@
       {$selectedRecords.size} record{$selectedRecords.size > 1 ? 's' : ''} selected
       of {$totalCount}
     {:else if pageCount > 0 && $totalCount}
-      Showing {$offset + 1} to {max}
+      Showing {offset + 1} to {max}
       {#if $newRecords.length > 0}
         (+ {$newRecords.length} new record{$newRecords.length > 1 ? 's' : ''})
       {/if}
@@ -50,11 +64,12 @@
 
   <div class="pagination-group">
     {#if $totalCount}
-      <Pagination
+      <PaginationComponent
         total={$totalCount}
-        pageSize={$pageSize}
-        bind:currentPage={$page}
+        {pageSize}
         bind:pageCount
+        currentPage={page}
+        on:change={handlePageChange}
       />
       <Select
         options={pageSizeOpts}
diff --git a/mathesar_ui/src/stores/table-data/TabularType.ts b/mathesar_ui/src/stores/table-data/TabularType.ts
new file mode 100644
index 0000000000..cc8d89930e
--- /dev/null
+++ b/mathesar_ui/src/stores/table-data/TabularType.ts
@@ -0,0 +1,4 @@
+export enum TabularType {
+  Table = 1,
+  View = 2,
+}
diff --git a/mathesar_ui/src/stores/table-data/columns.ts b/mathesar_ui/src/stores/table-data/columns.ts
index 9a2c631fc2..618224ea81 100644
--- a/mathesar_ui/src/stores/table-data/columns.ts
+++ b/mathesar_ui/src/stores/table-data/columns.ts
@@ -1,4 +1,9 @@
+import type { Writable, Updater, Subscriber, Unsubscriber } from 'svelte/store';
 import { writable, get as getStoreValue } from 'svelte/store';
+import type { DBObjectEntry, DbType } from '@mathesar/App.d';
+import type { CancellablePromise } from '@mathesar-component-library';
+import { EventHandler } from '@mathesar-component-library';
+import type { PaginatedResponse } from '@mathesar/utils/api';
 import {
   deleteAPI,
   getAPI,
@@ -6,13 +11,7 @@ import {
   postAPI,
   States,
 } from '@mathesar/utils/api';
-import { TabularType } from '@mathesar/App.d';
-import { EventHandler } from '@mathesar-component-library';
-
-import type { Writable, Updater, Subscriber, Unsubscriber } from 'svelte/store';
-import type { PaginatedResponse } from '@mathesar/utils/api';
-import type { CancellablePromise } from '@mathesar-component-library';
-import type { DBObjectEntry, DbType } from '@mathesar/App.d';
+import { TabularType } from './TabularType';
 import type { Meta } from './meta';
 
 export interface Column {
diff --git a/mathesar_ui/src/stores/table-data/display.ts b/mathesar_ui/src/stores/table-data/display.ts
index b1f54cf09a..8330c69539 100644
--- a/mathesar_ui/src/stores/table-data/display.ts
+++ b/mathesar_ui/src/stores/table-data/display.ts
@@ -1,7 +1,6 @@
 import { writable, get, derived } from 'svelte/store';
 import { States } from '@mathesar/utils/api';
 import type { Writable, Readable, Unsubscriber } from 'svelte/store';
-import type { TabularType, DBObjectEntry } from '@mathesar/App.d';
 import type { Meta } from './meta';
 import type { ColumnsDataStore, Column } from './columns';
 import type { TableRecord, RecordsData } from './records';
@@ -114,10 +113,6 @@ export function scrollBasedOnActiveCell(): void {
 }
 
 export class Display {
-  private type: TabularType;
-
-  private parentId: DBObjectEntry['id'];
-
   private meta: Meta;
 
   private columnsDataStore: ColumnsDataStore;
@@ -137,14 +132,10 @@ export class Display {
   displayableRecords: Readable<TableRecord[]>;
 
   constructor(
-    type: TabularType,
-    parentId: number,
     meta: Meta,
     columnsDataStore: ColumnsDataStore,
     recordsData: RecordsData,
   ) {
-    this.type = type;
-    this.parentId = parentId;
     this.meta = meta;
     this.columnsDataStore = columnsDataStore;
     this.recordsData = recordsData;
@@ -221,8 +212,9 @@ export class Display {
     const totalCount = get(this.recordsData.totalCount);
     const savedRecords = get(this.recordsData.savedRecords);
     const newRecords = get(this.recordsData.newRecords);
-    const offset = get(this.meta.offset);
-    const pageSize = get(this.meta.pageSize);
+    const pagination = get(this.meta.pagination);
+    const { offset } = pagination;
+    const pageSize = pagination.size;
     const minRowIndex = 0;
     const maxRowIndex =
       // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
diff --git a/mathesar_ui/src/stores/table-data/filtering.ts b/mathesar_ui/src/stores/table-data/filtering.ts
new file mode 100644
index 0000000000..d6c7d22190
--- /dev/null
+++ b/mathesar_ui/src/stores/table-data/filtering.ts
@@ -0,0 +1,145 @@
+import type { SelectOption } from '@mathesar-component-library/types';
+import type {
+  FilterCombination as ApiFilterCombination,
+  GetRequestParams,
+  FilterOperation,
+  FilterCondition as ApiFilterCondition,
+} from '@mathesar/api/tables/records';
+
+export interface FilterCondition {
+  id: FilterOperation;
+  label: string;
+}
+
+export const filterConditions: FilterCondition[] = [
+  { id: 'eq', label: 'equals' },
+  { id: 'ne', label: 'not equals' },
+  { id: 'get_duplicates', label: 'has duplicates' },
+];
+
+export const defaultFilterCondition = filterConditions[0];
+
+export interface FilterEntry {
+  readonly columnName: string;
+  readonly condition: FilterCondition;
+  readonly value: string;
+}
+
+function makeApiFilterCondition(filterEntry: FilterEntry): ApiFilterCondition {
+  return {
+    field: filterEntry.columnName,
+    op: filterEntry.condition.id,
+    value: filterEntry.value,
+  };
+}
+
+/** [ columnName, operation, value ] */
+type TerseFilterEntry = [string, FilterOperation, string];
+
+function makeTerseFilterEntry(filterEntry: FilterEntry): TerseFilterEntry {
+  return [filterEntry.columnName, filterEntry.condition.id, filterEntry.value];
+}
+
+function makeFilterEntry(terseFilterEntry: TerseFilterEntry): FilterEntry {
+  const filterOperation = terseFilterEntry[1];
+  let condition = filterConditions.find((c) => c.id === filterOperation);
+  if (!condition) {
+    console.error(`Unknown filter operation ${filterOperation}.`);
+    condition = defaultFilterCondition;
+  }
+  return {
+    columnName: terseFilterEntry[0],
+    condition,
+    value: terseFilterEntry[2],
+  };
+}
+
+export interface FilterCombination extends SelectOption {
+  readonly id: ApiFilterCombination;
+  readonly label: string;
+}
+
+export const filterCombinations: FilterCombination[] = [
+  { id: 'and', label: 'and' },
+  { id: 'or', label: 'or' },
+];
+export const defaultFilterCombination = filterCombinations[0];
+
+export type TerseFiltering = [ApiFilterCombination, TerseFilterEntry[]];
+
+export class Filtering {
+  readonly combination: FilterCombination;
+
+  readonly entries: FilterEntry[];
+
+  constructor({
+    combination,
+    entries,
+  }: {
+    combination?: FilterCombination;
+    entries?: FilterEntry[];
+  } = {}) {
+    this.combination = combination ?? defaultFilterCombination;
+    this.entries = entries ?? [];
+  }
+
+  withEntry(entry: FilterEntry): Filtering {
+    return new Filtering({
+      combination: this.combination,
+      entries: [...this.entries, entry],
+    });
+  }
+
+  withoutEntry(entryIndex: number): Filtering {
+    return new Filtering({
+      combination: this.combination,
+      entries: [
+        ...this.entries.slice(0, entryIndex),
+        ...this.entries.slice(entryIndex + 1),
+      ],
+    });
+  }
+
+  withCombination(combination: FilterCombination): Filtering {
+    return new Filtering({
+      combination,
+      entries: this.entries,
+    });
+  }
+
+  recordsRequestParams(): Pick<GetRequestParams, 'filters'> {
+    if (!this.entries.length) {
+      return {};
+    }
+    const conditions = this.entries.map(makeApiFilterCondition);
+
+    if (
+      this.combination.id === 'and' &&
+      this.entries.length === 1 &&
+      this.entries[0].condition.id === 'get_duplicates'
+    ) {
+      // Special handling for the get_duplicates operation due to backend bug.
+      // The backend can only handle the get_duplicates operation by itself. The
+      // "and" must be removed and the value must be in an array.
+      conditions[0].value = [conditions[0].value];
+      return { filters: conditions };
+    }
+
+    const filters =
+      this.combination.id === 'and' ? { and: conditions } : { or: conditions };
+    return { filters };
+  }
+
+  terse(): TerseFiltering {
+    return [this.combination.id, this.entries.map(makeTerseFilterEntry)];
+  }
+
+  static fromTerse(terse: TerseFiltering): Filtering {
+    return new Filtering({
+      combination:
+        filterCombinations.find((c) => c.id === terse[0]) ??
+        defaultFilterCombination,
+      entries: terse[1].map(makeFilterEntry),
+    });
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/grouping.ts b/mathesar_ui/src/stores/table-data/grouping.ts
new file mode 100644
index 0000000000..dfd30a30c2
--- /dev/null
+++ b/mathesar_ui/src/stores/table-data/grouping.ts
@@ -0,0 +1,25 @@
+import type { GetRequestParams } from '@mathesar/api/tables/records';
+import { ImmutableSet } from '@mathesar/component-library';
+
+/** Each value is a column name */
+export type TerseGrouping = string[];
+
+/** Each value is a column name. */
+export class Grouping extends ImmutableSet<string> {
+  recordsRequestParams(): Pick<GetRequestParams, 'grouping'> {
+    if (!this.size) {
+      return {};
+    }
+    return {
+      grouping: { columns: [...this] },
+    };
+  }
+
+  terse(): TerseGrouping {
+    return [...this];
+  }
+
+  static fromTerse(terse: TerseGrouping): Grouping {
+    return new Grouping(terse);
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/index.ts b/mathesar_ui/src/stores/table-data/index.ts
index 23009a816f..f4d9db03b3 100644
--- a/mathesar_ui/src/stores/table-data/index.ts
+++ b/mathesar_ui/src/stores/table-data/index.ts
@@ -1,6 +1,6 @@
 export { RecordsData } from './records';
 export { ColumnsDataStore } from './columns';
-export { Meta, filterCombinations, DEFAULT_PAGE_SIZE } from './meta';
+export { Meta } from './meta';
 export {
   Display,
   isCellActive,
@@ -9,6 +9,18 @@ export {
   ROW_CONTROL_COLUMN_WIDTH,
   DEFAULT_ROW_RIGHT_PADDING,
 } from './display';
+export {
+  filterCombinations,
+  filterConditions,
+  defaultFilterCondition,
+  defaultFilterCombination,
+  Filtering,
+} from './filtering';
+export { Sorting, SortDirection, getDirectionLabel } from './sorting';
+export { Grouping } from './grouping';
+export { Pagination } from './pagination';
 export { getGenericModificationStatus, getModificationState } from './utils';
 
 export { getTabularContent, removeTabularContent } from './manager';
+export { makeTabularDataProps, makeTerseTabularDataProps } from './tabularData';
+export { TabularType } from './TabularType';
diff --git a/mathesar_ui/src/stores/table-data/manager.ts b/mathesar_ui/src/stores/table-data/manager.ts
index b85ac226e6..361f6d2396 100644
--- a/mathesar_ui/src/stores/table-data/manager.ts
+++ b/mathesar_ui/src/stores/table-data/manager.ts
@@ -1,21 +1,17 @@
-import { TabularType } from '@mathesar/App.d';
 import type { DBObjectEntry, TableEntry, ViewEntry } from '@mathesar/App.d';
+import type { TabularDataProps } from './tabularData';
 import { TabularData } from './tabularData';
-import type { TabularDataParams } from './tabularData';
+import { TabularType } from './TabularType';
 
 const tableMap: Map<TableEntry['id'], TabularData> = new Map();
 const viewMap: Map<ViewEntry['id'], TabularData> = new Map();
 
-export function getTabularContent(
-  type: TabularType,
-  id: DBObjectEntry['id'],
-  params?: TabularDataParams,
-): TabularData {
-  const tabularMap = type === TabularType.View ? viewMap : tableMap;
-  let entry = tabularMap.get(id);
+export function getTabularContent(props: TabularDataProps): TabularData {
+  const tabularMap = props.type === TabularType.View ? viewMap : tableMap;
+  let entry = tabularMap.get(props.id);
   if (!entry) {
-    entry = new TabularData(type, id, params);
-    tabularMap.set(id, entry);
+    entry = new TabularData(props);
+    tabularMap.set(props.id, entry);
   }
   return entry;
 }
diff --git a/mathesar_ui/src/stores/table-data/meta.ts b/mathesar_ui/src/stores/table-data/meta.ts
index 421d193528..01e0034959 100644
--- a/mathesar_ui/src/stores/table-data/meta.ts
+++ b/mathesar_ui/src/stores/table-data/meta.ts
@@ -1,42 +1,17 @@
 import { writable, derived, get } from 'svelte/store';
 import type { Writable, Readable } from 'svelte/store';
-import type { TabularType, DBObjectEntry } from '@mathesar/App.d';
-import type { SelectOption } from '@mathesar-component-library/types';
+import type { TerseFiltering } from './filtering';
+import { Filtering } from './filtering';
+import type { TerseSorting } from './sorting';
+import { Sorting } from './sorting';
+import type { TersePagination } from './pagination';
+import { Pagination } from './pagination';
+import type { TerseGrouping } from './grouping';
+import { Grouping } from './grouping';
+import type { RecordsRequestParamsData } from './records';
 
-export const DEFAULT_PAGE_SIZE = 500;
 export const RECORD_COMBINED_STATE_KEY = '__combined';
 
-export type SortOption = Map<string, 'asc' | 'desc'>;
-export type GroupOption = Set<string>;
-
-export interface FilterEntry {
-  column: SelectOption;
-  condition: SelectOption;
-  value: string;
-}
-
-export interface FilterCombination extends SelectOption {
-  id: 'and' | 'or';
-  label: string;
-}
-
-export const filterCombinations: FilterCombination[] = [
-  { id: 'and', label: 'and' },
-  { id: 'or', label: 'or' },
-];
-
-export interface FilterOption {
-  combination: FilterCombination;
-  filters: FilterEntry[];
-}
-
-export type MetaParams = [
-  number[], // [pageSize, page]
-  string[], // [sortcolumn, sortorder:'a'|'d', sc, so ...]
-  string[], // [groupcolumn, gc, gc]
-  string[], // [filtercombination:'a'|'o', filtercolumn, condition, value ...]
-];
-
 export type UpdateModificationType = 'update' | 'updated' | 'updateFailed';
 
 export type ModificationType =
@@ -103,25 +78,95 @@ function getCombinedUpdateState(
   return state;
 }
 
-// The Meta store is meant to be used by other stores for storing and operating on meta information.
-// This may also include display properties. Properties in Meta store do not depend on other stores.
-// For display specific properties that depend on other stores, the Display store can be used.
-export class Meta {
-  private type: TabularType;
+function getCombinedModificationState(
+  recordModificationState: Readable<ModificationStateMap>,
+) {
+  return derived(
+    recordModificationState,
+    ($recordModificationState, set) => {
+      if ($recordModificationState.size === 0) {
+        set('idle');
+      } else {
+        let finalState: ModificationStatus = 'idle';
+        // eslint-disable-next-line no-restricted-syntax
+        for (const value of $recordModificationState.values()) {
+          const rowState = value?.get(RECORD_COMBINED_STATE_KEY);
+          if (rowState) {
+            if (inProgressSet.has(rowState)) {
+              finalState = 'inprocess';
+              break;
+            }
+            if (errorSet.has(rowState)) {
+              finalState = 'error';
+            } else if (completeSet.has(rowState) && finalState === 'idle') {
+              finalState = 'complete';
+            }
+          }
+        }
+        set(finalState);
+      }
+    },
+    'idle' as ModificationStatus,
+  );
+}
 
-  private parentId: DBObjectEntry['id'];
+export interface MetaProps {
+  pagination: Pagination;
+  sorting: Sorting;
+  grouping: Grouping;
+  filtering: Filtering;
+}
 
-  pageSize: Writable<number>;
+/** Adds default values. */
+function getFullMetaProps(p?: Partial<MetaProps>): MetaProps {
+  return {
+    pagination: p?.pagination ?? new Pagination(),
+    sorting: p?.sorting ?? new Sorting(),
+    grouping: p?.grouping ?? new Grouping(),
+    filtering: p?.filtering ?? new Filtering(),
+  };
+}
 
-  page: Writable<number>;
+export type TerseMetaProps = [
+  TersePagination,
+  TerseSorting,
+  TerseGrouping,
+  TerseFiltering,
+];
 
-  offset: Readable<number>;
+export function makeMetaProps(t: TerseMetaProps): MetaProps {
+  return {
+    pagination: Pagination.fromTerse(t[0]),
+    sorting: Sorting.fromTerse(t[1]),
+    grouping: Grouping.fromTerse(t[2]),
+    filtering: Filtering.fromTerse(t[3]),
+  };
+}
 
-  sort: Writable<SortOption>;
+export function makeTerseMetaProps(p?: Partial<MetaProps>): TerseMetaProps {
+  const props = getFullMetaProps(p);
+  return [
+    props.pagination.terse(),
+    props.sorting.terse(),
+    props.grouping.terse(),
+    props.filtering.terse(),
+  ];
+}
 
-  group: Writable<GroupOption>;
+/**
+ * The Meta store is meant to be used by other stores for storing and operating
+ * on meta information. This may also include display properties. Properties in
+ * Meta store do not depend on other stores. For display specific properties
+ * that depend on other stores, the Display store can be used.
+ */
+export class Meta {
+  pagination: Writable<Pagination>;
+
+  sorting: Writable<Sorting>;
+
+  grouping: Writable<Grouping>;
 
-  filter: Writable<FilterOption>;
+  filtering: Writable<Filtering>;
 
   selectedRecords: Writable<Set<unknown>>;
 
@@ -130,326 +175,64 @@ export class Meta {
 
   combinedModificationState: Readable<ModificationStatus>;
 
-  // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-  recordRequestParams: Readable<string>;
-
-  // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-  metaParameters: Readable<MetaParams>;
-
-  constructor(type: TabularType, parentId: number, params?: MetaParams) {
-    this.type = type;
-    this.parentId = parentId;
-
-    this.pageSize = writable(DEFAULT_PAGE_SIZE);
-    this.page = writable(1);
-    this.sort = writable(new Map() as SortOption);
-    this.group = writable(new Set() as GroupOption);
-    this.filter = writable({
-      combination: filterCombinations[0],
-      filters: [],
-    });
-    if (params) {
-      this.loadFromParams(params);
-    }
+  /**
+   * Allows us to save and re-create Meta, e.g. from data stored in the tab
+   * system.
+   */
+  props: Readable<MetaProps>;
+
+  /**
+   * Allows us to re-fetch records from the server when some of the parameters
+   * change.
+   */
+  recordsRequestParamsData: Readable<RecordsRequestParamsData>;
+
+  constructor(p?: Partial<MetaProps>) {
+    const props = getFullMetaProps(p);
+    this.pagination = writable(props.pagination);
+    this.sorting = writable(props.sorting);
+    this.grouping = writable(props.grouping);
+    this.filtering = writable(props.filtering);
 
     this.selectedRecords = writable(new Set());
     this.recordModificationState = writable(new Map() as ModificationStateMap);
 
-    this.offset = derived(
-      [this.pageSize, this.page],
-      ([$pageSize, $page], set) => {
-        set($pageSize * ($page - 1));
-      },
-    );
-    this.combinedModificationState = derived(
+    this.combinedModificationState = getCombinedModificationState(
       this.recordModificationState,
-      ($recordModificationState, set) => {
-        if ($recordModificationState.size === 0) {
-          set('idle');
-        } else {
-          let finalState: ModificationStatus = 'idle';
-          // eslint-disable-next-line no-restricted-syntax
-          for (const value of $recordModificationState.values()) {
-            const rowState = value?.get(RECORD_COMBINED_STATE_KEY);
-            if (rowState) {
-              if (inProgressSet.has(rowState)) {
-                finalState = 'inprocess';
-                break;
-              }
-              if (errorSet.has(rowState)) {
-                finalState = 'error';
-              } else if (completeSet.has(rowState) && finalState === 'idle') {
-                finalState = 'complete';
-              }
-            }
-          }
-          set(finalState);
-        }
-      },
-      'idle' as ModificationStatus,
     );
-    this.setRecordRequestParamsStore();
-    this.setMetaParametersStore();
-  }
-
-  private setRecordRequestParamsStore(): void {
-    this.recordRequestParams = derived(
-      [this.pageSize, this.offset, this.group, this.sort, this.filter],
-      ([$pageSize, $offset, $group, $sort, $filter]) => {
-        const params: string[] = [];
-        params.push(`limit=${$pageSize}`);
-        params.push(`offset=${$offset}`);
-
-        const groupOptions = Array.from($group ?? []);
-        const groupSortOptions = groupOptions.map((field) => ({
-          field,
-          direction: $sort.get(field) ?? 'asc',
-        }));
-
-        let sortOptions: { field: string; direction: string }[] = [];
-        $sort.forEach((value, key) => {
-          if (!$group.has(key)) {
-            sortOptions.unshift({
-              field: key,
-              direction: value,
-            });
-          }
-        });
-
-        sortOptions = [...groupSortOptions, ...sortOptions];
 
-        if (sortOptions.length > 0) {
-          params.push(
-            `order_by=${encodeURIComponent(JSON.stringify(sortOptions))}`,
-          );
-        }
-        if (groupOptions.length > 0) {
-          params.push(
-            `grouping=${encodeURIComponent(
-              JSON.stringify({ columns: groupOptions }),
-            )}`,
-          );
-        }
-        if ($filter.filters?.length > 0) {
-          // Specify fields to pass style checks for special handling of get_duplicates op
-          const filter: {
-            and: {
-              field: string;
-              op: string;
-              value: string[];
-            }[];
-          } = { and: [] };
-
-          const terms = $filter.filters.map((term) => ({
-            field: term.column.id,
-            op: term.condition.id,
-            value: term.value,
-          }));
-          // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-          filter[$filter.combination.id as string] = terms;
-          if (
-            'and' in filter &&
-            filter.and.length === 1 &&
-            filter.and[0].op === 'get_duplicates'
-          ) {
-            // Special handling for the get_duplicates operation due to backend bug
-            // The backend can only handle the get_duplicates operation by itself
-            // The "and" must be removed and the value must be in an array
-            filter.and[0].value = [filter.and[0].field];
-            params.push(
-              `filters=${encodeURIComponent(JSON.stringify([filter.and[0]]))}`,
-            );
-          } else {
-            // Handle other filters normally
-            params.push(
-              `filters=${encodeURIComponent(JSON.stringify(filter))}`,
-            );
-          }
-        }
-        return params.join('&');
-      },
+    // Why do `this.props` and `this.recordsRequestParamsData` look identical?
+    //
+    // It's a coincidence that `MetaProps` and `RecordsRequestParamsData` are
+    // almost identical, but that might not always be the case. For example, if
+    // we want to store info in the tabs system about the selected cells, then
+    // `MetaProps` would need more fields. Using separate fields for
+    // `this.props` and `this.recordsRequestParamsData` gives us a separation
+    // of concerns.
+    this.props = derived(
+      [this.pagination, this.sorting, this.grouping, this.filtering],
+      ([pagination, sorting, grouping, filtering]) => ({
+        pagination,
+        sorting,
+        grouping,
+        filtering,
+      }),
     );
-  }
-
-  private setMetaParametersStore(): void {
-    this.metaParameters = derived(
-      [this.pageSize, this.page, this.sort, this.group, this.filter],
-      ([$pageSize, $page, $sort, $group, $filter]) => {
-        const paginationOption: number[] = [$pageSize, $page];
-
-        const sortOption: string[] = [];
-        $sort.forEach((value, key) => {
-          sortOption.push(key);
-          const sortOrder = value === 'desc' ? 'd' : 'a';
-          sortOption.push(sortOrder);
-        });
-
-        const groupOption: string[] = [...($group ?? [])];
-
-        const filterOptions: string[] = [];
-        const filterConfig = $filter;
-        if (filterConfig?.filters?.length > 0) {
-          filterOptions.push(filterConfig.combination.id === 'or' ? 'o' : 'a');
-          filterConfig.filters.forEach((filter) => {
-            filterOptions.push(filter.column.id as string);
-            filterOptions.push(filter.condition.id as string);
-            filterOptions.push(filter.value);
-          });
-        }
-
-        const metaParams: MetaParams = [
-          paginationOption,
-          sortOption,
-          groupOption,
-          filterOptions,
-        ];
-        return metaParams;
-      },
+    this.recordsRequestParamsData = derived(
+      [this.pagination, this.sorting, this.grouping, this.filtering],
+      ([pagination, sorting, grouping, filtering]) => ({
+        pagination,
+        sorting,
+        grouping,
+        filtering,
+      }),
     );
   }
 
-  loadFromParams(params: MetaParams): void {
-    try {
-      const [paginationOption, sortOption, groupOption, filterOption] = params;
-      if (paginationOption?.length === 2) {
-        this.pageSize.set(paginationOption[0] || DEFAULT_PAGE_SIZE);
-        this.page.set(paginationOption[1] || 1);
-      }
-
-      if (sortOption?.length > 0) {
-        const sortOptionMap: SortOption = new Map();
-        for (let i = 0; i < sortOption.length; i += 2) {
-          const sortOrder = sortOption[i + 1] === 'd' ? 'desc' : 'asc';
-          sortOptionMap.set(sortOption[i], sortOrder);
-        }
-        if (sortOption.length > 0) {
-          this.sort.set(sortOptionMap);
-        }
-      }
-
-      const groupOptionSet: GroupOption = new Set(groupOption);
-      if (groupOptionSet.size > 0) {
-        this.group.set(groupOptionSet);
-      }
-
-      if (filterOption?.length > 0) {
-        const filters: FilterEntry[] = [];
-        const combination: FilterCombination['id'] =
-          filterOption[0] === 'o' ? 'or' : 'and';
-        for (let i = 1; i < filterOption.length; ) {
-          const column = filterOption[i];
-          const condition = filterOption[i + 1];
-
-          if (column && condition) {
-            const value = filterOption[i + 2] || '';
-            filters.push({
-              column: {
-                id: column,
-                label: column,
-              },
-              condition: {
-                id: condition,
-                label: condition,
-              },
-              value,
-            });
-          }
-          i += 3;
-        }
-        if (filters.length > 0) {
-          this.filter.set({
-            combination: {
-              id: combination,
-              label: combination,
-            },
-            filters,
-          });
-        }
-      }
-    } catch (err) {
-      console.error('Unable to load meta information from params', err);
-    }
-  }
-
   clearSelectedRecords(): void {
     this.selectedRecords.set(new Set());
   }
 
-  addFilter(entry: FilterEntry, combination?: FilterCombination): void {
-    this.filter.update((existing) => ({
-      combination: combination || existing.combination || filterCombinations[0],
-      filters: [...existing.filters, entry],
-    }));
-  }
-
-  removeFilter(index: number): void {
-    this.filter.update((existing) => {
-      existing?.filters?.splice(index, 1);
-      return {
-        ...existing,
-      };
-    });
-  }
-
-  setFilterCombination(combination: FilterCombination): void {
-    this.filter.update((existing) => ({
-      ...existing,
-      combination,
-    }));
-  }
-
-  getFilterCombination(): FilterCombination {
-    return get(this.filter)?.combination ?? filterCombinations[0];
-  }
-
-  setFilters(filters: FilterOption): void {
-    this.filter.set(filters);
-  }
-
-  addUpdateSort(column: string, direction: 'asc' | 'desc' = 'asc'): void {
-    this.sort.update((existing) => {
-      const newSort: SortOption = new Map(existing);
-      newSort.set(column, direction);
-      return newSort;
-    });
-  }
-
-  removeSort(column: string): void {
-    this.sort.update((existing) => {
-      const newSort = new Map(existing);
-      newSort.delete(column);
-      return newSort;
-    });
-  }
-
-  changeSortDirection(column: string, direction: 'asc' | 'desc'): void {
-    if (get(this.sort).get(column) !== direction) {
-      this.sort.update((existing) => {
-        const newSort = new Map(existing);
-        newSort.set(column, direction);
-        return newSort;
-      });
-    }
-  }
-
-  addGroup(column: string): void {
-    if (!get(this.group).has(column)) {
-      this.group.update((existing) => {
-        const newGroup = new Set(existing);
-        newGroup.add(column);
-        return newGroup;
-      });
-    }
-  }
-
-  removeGroup(column: string): void {
-    this.group.update((existing) => {
-      const newGroup = new Set(existing);
-      newGroup.delete(column);
-      return newGroup;
-    });
-  }
-
   selectRecordByPrimaryKey(primaryKeyValue: unknown): void {
     if (!get(this.selectedRecords).has(primaryKeyValue)) {
       this.selectedRecords.update((existingSet) => {
diff --git a/mathesar_ui/src/stores/table-data/pagination.ts b/mathesar_ui/src/stores/table-data/pagination.ts
new file mode 100644
index 0000000000..5ea0c2f7e8
--- /dev/null
+++ b/mathesar_ui/src/stores/table-data/pagination.ts
@@ -0,0 +1,42 @@
+import type { GetRequestParams } from '@mathesar/api/tables/records';
+
+const DEFAULT_PAGE_SIZE = 500;
+
+/**
+ * [page, size]
+ */
+export type TersePagination = [number, number];
+
+export class Pagination {
+  /** The first page is page 1 */
+  readonly page: number;
+
+  /** The number of records to display */
+  readonly size: number;
+
+  readonly offset: number;
+
+  constructor({ page, size }: { page?: number; size?: number } = {}) {
+    this.page = page ?? 1;
+    this.size = size ?? DEFAULT_PAGE_SIZE;
+    this.offset = (this.page - 1) * this.size;
+  }
+
+  recordsRequestParams(): Pick<GetRequestParams, 'limit' | 'offset'> {
+    return {
+      limit: this.size,
+      offset: this.offset,
+    };
+  }
+
+  terse(): TersePagination {
+    return [this.page, this.size];
+  }
+
+  static fromTerse(terse: TersePagination): Pagination {
+    return new Pagination({
+      page: terse[0],
+      size: terse[1],
+    });
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/records.ts b/mathesar_ui/src/stores/table-data/records.ts
index 89434e815c..7eb1b1f44f 100644
--- a/mathesar_ui/src/stores/table-data/records.ts
+++ b/mathesar_ui/src/stores/table-data/records.ts
@@ -6,7 +6,6 @@ import {
   patchAPI,
   postAPI,
 } from '@mathesar/utils/api';
-import { TabularType } from '@mathesar/App.d';
 import type { Writable, Unsubscriber } from 'svelte/store';
 import type { CancellablePromise } from '@mathesar-component-library';
 import type { DBObjectEntry } from '@mathesar/App.d';
@@ -17,9 +16,36 @@ import type {
   Grouping as ApiGrouping,
   ResultValue,
   GroupingMode,
+  GetRequestParams as ApiGetRequestParams,
 } from '@mathesar/api/tables/records';
 import type { Meta } from './meta';
 import type { ColumnsDataStore, Column } from './columns';
+import type { Pagination } from './pagination';
+import type { Sorting } from './sorting';
+import type { Grouping as GroupingTODORename } from './grouping';
+import type { Filtering } from './filtering';
+import { TabularType } from './TabularType';
+
+export interface RecordsRequestParamsData {
+  pagination: Pagination;
+  sorting: Sorting;
+  grouping: GroupingTODORename;
+  filtering: Filtering;
+}
+
+function buildFetchQueryString(data: RecordsRequestParamsData): string {
+  const params: ApiGetRequestParams = {
+    ...data.pagination.recordsRequestParams(),
+    ...data.sorting.recordsRequestParamsIncludingGrouping(data.grouping),
+    ...data.grouping.recordsRequestParams(),
+    ...data.filtering.recordsRequestParams(),
+  };
+  const entries: [string, string][] = Object.entries(params).map(([k, v]) => {
+    const value = typeof v === 'string' ? v : JSON.stringify(v);
+    return [k, value];
+  });
+  return new URLSearchParams(entries).toString();
+}
 
 export interface Group {
   count: number;
@@ -242,11 +268,10 @@ export class RecordsData {
     void this.fetch();
 
     // TODO: Create base class to abstract subscriptions and unsubscriptions
-    this.requestParamsUnsubscriber = this.meta.recordRequestParams.subscribe(
-      () => {
+    this.requestParamsUnsubscriber =
+      this.meta.recordsRequestParamsData.subscribe(() => {
         void this.fetch();
-      },
-    );
+      });
     this.columnPatchUnsubscriber = this.columnsDataStore.on(
       'columnPatched',
       () => this.fetch(),
@@ -257,11 +282,11 @@ export class RecordsData {
     retainExistingRows = false,
   ): Promise<TableRecordsData | undefined> {
     this.promise?.cancel();
-    const offset = getStoreValue(this.meta.offset);
+    const { offset } = getStoreValue(this.meta.pagination);
 
     this.savedRecords.update((existingData) => {
       let data = [...existingData];
-      data.length = getStoreValue(this.meta.pageSize);
+      data.length = getStoreValue(this.meta.pagination).size;
 
       let index = -1;
       data = data.map((entry) => {
@@ -285,8 +310,9 @@ export class RecordsData {
     }
 
     try {
-      const params = getStoreValue(this.meta.recordRequestParams);
-      this.promise = getAPI<ApiRecordsResponse>(`${this.url}?${params ?? ''}`);
+      const params = getStoreValue(this.meta.recordsRequestParamsData);
+      const queryString = buildFetchQueryString(params);
+      this.promise = getAPI<ApiRecordsResponse>(`${this.url}?${queryString}`);
       const response = await this.promise;
       const totalCount = response.count || 0;
       const grouping = response.grouping
@@ -339,7 +365,7 @@ export class RecordsData {
         await Promise.all(promises);
         await this.fetch(true);
 
-        const offset = getStoreValue(this.meta.offset);
+        const { offset } = getStoreValue(this.meta.pagination);
         const savedRecords = getStoreValue(this.savedRecords);
         const savedRecordsLength = savedRecords?.length || 0;
 
@@ -439,7 +465,7 @@ export class RecordsData {
   }
 
   getNewEmptyRecord(): TableRecord {
-    const offset = getStoreValue(this.meta.offset);
+    const { offset } = getStoreValue(this.meta.pagination);
     const savedRecords = getStoreValue(this.savedRecords);
     const savedRecordsLength = savedRecords?.length || 0;
     const existingNewRecords = getStoreValue(this.newRecords);
diff --git a/mathesar_ui/src/stores/table-data/sorting.ts b/mathesar_ui/src/stores/table-data/sorting.ts
new file mode 100644
index 0000000000..00da29334a
--- /dev/null
+++ b/mathesar_ui/src/stores/table-data/sorting.ts
@@ -0,0 +1,97 @@
+import { ImmutableMap } from '@mathesar-component-library';
+import type {
+  SortDirection as ApiSortDirection,
+  SortingEntry as ApiSortingEntry,
+  GetRequestParams,
+} from '@mathesar/api/tables/records';
+import type { Grouping } from './grouping';
+
+export enum SortDirection {
+  /** Ascending */
+  A = 'a',
+  /** Descending */
+  D = 'd',
+}
+
+function sortDirectionIsValid(d: string): boolean {
+  return (Object.values(SortDirection) as string[]).includes(d);
+}
+
+const apiSortDirectionMap = new Map<SortDirection, ApiSortDirection>([
+  [SortDirection.A, 'asc'],
+  [SortDirection.D, 'desc'],
+]);
+function getApiSortDirection(sortDirection: SortDirection): ApiSortDirection {
+  const d = apiSortDirectionMap.get(sortDirection);
+  if (!d) {
+    throw new Error(`Invalid sort direction: ${sortDirection}`);
+  }
+  return d;
+}
+
+const directionLabels = new Map([
+  [SortDirection.A, 'asc'],
+  [SortDirection.D, 'desc'],
+]);
+export function getDirectionLabel(direction: SortDirection): string {
+  return directionLabels.get(direction) ?? '';
+}
+
+/**
+ * [columnName, sortDirection]
+ */
+export type TerseSorting = [string, SortDirection][];
+
+export class Sorting extends ImmutableMap<string, SortDirection> {
+  constructor(entries: Iterable<[string, SortDirection]> = []) {
+    [...entries].forEach(([, sortDirection]) => {
+      // Even though TS will catch build-time errors with SortDirection, we also
+      // want runtime validation because new sorting entries are created from
+      // input such as localStorage and URL params.
+      if (!sortDirectionIsValid(sortDirection)) {
+        throw new Error(`Invalid sort direction: ${sortDirection}`);
+      }
+    });
+    super(entries);
+  }
+
+  private recordsRequestParams(): Pick<GetRequestParams, 'order_by'> {
+    const sortingEntries: ApiSortingEntry[] = [...this].map(
+      ([columnName, sortDirection]) => ({
+        field: columnName,
+        direction: getApiSortDirection(sortDirection),
+      }),
+    );
+    if (!sortingEntries.length) {
+      return {};
+    }
+    return { order_by: sortingEntries };
+  }
+
+  /**
+   * When grouping records, the API does not automatically sort the records by
+   * their groups. We need to manually tell the API that we want the records
+   * sorted by the groups too.
+   */
+  recordsRequestParamsIncludingGrouping(
+    grouping: Grouping,
+  ): Pick<GetRequestParams, 'order_by'> {
+    const sortingFromGrouping = new Sorting(
+      [...grouping].map((g) => [g, SortDirection.A]),
+    );
+    return sortingFromGrouping.coalesceEntries(this).recordsRequestParams();
+  }
+
+  terse(): TerseSorting {
+    return [...this].map(([columnName, sortDirection]) => [
+      columnName,
+      sortDirection,
+    ]);
+  }
+
+  static fromTerse(t: TerseSorting): Sorting {
+    return new Sorting(
+      t.map(([columnName, sortDirection]) => [columnName, sortDirection]),
+    );
+  }
+}
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index 78375e4a49..a888cfc884 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -1,9 +1,7 @@
-import { get } from 'svelte/store';
-import type { Writable, Unsubscriber } from 'svelte/store';
-import type { DBObjectEntry, TabularType } from '@mathesar/App.d';
-import { EventHandler } from '@mathesar-component-library';
-import type { MetaParams } from './meta';
-import { Meta } from './meta';
+import type { Writable } from 'svelte/store';
+import type { DBObjectEntry } from '@mathesar/App.d';
+import type { TerseMetaProps, MetaProps } from './meta';
+import { makeMetaProps, makeTerseMetaProps, Meta } from './meta';
 import type { ColumnsData } from './columns';
 import { ColumnsDataStore } from './columns';
 import type { TableRecordsData } from './records';
@@ -11,14 +9,38 @@ import { RecordsData } from './records';
 import { Display } from './display';
 import type { ConstraintsData } from './constraints';
 import { ConstraintsDataStore } from './constraints';
+import type { TabularType } from './TabularType';
 
-export type TabularDataParams = [
+export interface TabularDataProps {
+  type: TabularType;
+  id: DBObjectEntry['id'];
+  metaProps?: MetaProps;
+}
+
+/** [ type, id, metaProps ] */
+export type TerseTabularDataProps = [
   TabularType,
   DBObjectEntry['id'],
-  ...MetaParams
+  TerseMetaProps,
 ];
 
-export class TabularData extends EventHandler {
+export function makeTabularDataProps(
+  t: TerseTabularDataProps,
+): TabularDataProps {
+  return {
+    type: t[0],
+    id: t[1],
+    metaProps: makeMetaProps(t[2]),
+  };
+}
+
+export function makeTerseTabularDataProps(
+  p: TabularDataProps,
+): TerseTabularDataProps {
+  return [p.type, p.id, makeTerseMetaProps(p.metaProps)];
+}
+
+export class TabularData {
   type: TabularType;
 
   id: DBObjectEntry['id'];
@@ -33,44 +55,27 @@ export class TabularData extends EventHandler {
 
   display: Display;
 
-  private metaParametersUnsubscriber: Unsubscriber;
-
-  constructor(
-    type: TabularType,
-    id: DBObjectEntry['id'],
-    params?: TabularDataParams,
-  ) {
-    super();
-    this.type = type;
-    this.id = id;
-    this.meta = new Meta(type, id, params?.slice(2) as MetaParams);
-    this.columnsDataStore = new ColumnsDataStore(type, id, this.meta);
-    this.constraintsDataStore = new ConstraintsDataStore(id);
+  constructor(props: TabularDataProps) {
+    this.type = props.type;
+    this.id = props.id;
+    this.meta = new Meta(props.metaProps);
+    this.columnsDataStore = new ColumnsDataStore(this.type, this.id, this.meta);
+    this.constraintsDataStore = new ConstraintsDataStore(this.id);
     this.recordsData = new RecordsData(
-      type,
-      id,
+      this.type,
+      this.id,
       this.meta,
       this.columnsDataStore,
     );
     this.display = new Display(
-      type,
-      id,
       this.meta,
       this.columnsDataStore,
       this.recordsData,
     );
 
-    this.metaParametersUnsubscriber = this.meta.metaParameters.subscribe(() => {
-      void this.dispatch('paramsUpdated', this.parameterize());
-    });
     this.columnsDataStore.on('columnRenamed', () => this.refresh());
   }
 
-  parameterize(): TabularDataParams {
-    const metaParams = get(this.meta.metaParameters);
-    return [this.type, this.id, ...metaParams];
-  }
-
   refresh(): Promise<
     [
       ColumnsData | undefined,
@@ -86,13 +91,10 @@ export class TabularData extends EventHandler {
   }
 
   destroy(): void {
-    // Destroy in reverse order of creation
-    this.metaParametersUnsubscriber();
     this.display.destroy();
     this.recordsData.destroy();
     this.constraintsDataStore.destroy();
     this.columnsDataStore.destroy();
-    super.destroy();
   }
 }
 
diff --git a/mathesar_ui/src/stores/table-data/types.d.ts b/mathesar_ui/src/stores/table-data/types.d.ts
index dab65dfee7..041ed70272 100644
--- a/mathesar_ui/src/stores/table-data/types.d.ts
+++ b/mathesar_ui/src/stores/table-data/types.d.ts
@@ -1,23 +1,21 @@
 export type {
   TabularData,
   TabularDataStore,
-  TabularDataParams,
+  TabularDataProps,
+  TerseTabularDataProps,
 } from './tabularData';
 export type { RecordsData, TableRecord } from './records';
 export type { ColumnPosition, ColumnPositionMap } from './display';
 export type { Column, ColumnsData, ColumnsDataStore } from './columns';
+export type {
+  Filtering,
+  FilterCondition,
+  FilterCombination,
+} from './filtering';
 export type {
   Constraint,
   ConstraintsData,
   ConstraintsDataStore,
 } from './constraints';
-export type {
-  Meta,
-  FilterEntry,
-  FilterCombination,
-  GroupOption,
-  SortOption,
-  FilterOption,
-  ModificationType,
-} from './meta';
+export type { Meta, ModificationType, MetaProps } from './meta';
 export type { Display } from './display';
diff --git a/mathesar_ui/src/stores/tabs/__tests__/tabDataSaver.test.ts b/mathesar_ui/src/stores/tabs/__tests__/tabDataSaver.test.ts
new file mode 100644
index 0000000000..79a1ab593f
--- /dev/null
+++ b/mathesar_ui/src/stores/tabs/__tests__/tabDataSaver.test.ts
@@ -0,0 +1,62 @@
+import {
+  TabularType,
+  Grouping,
+  Sorting,
+  Filtering,
+  Pagination,
+  SortDirection,
+} from '@mathesar/stores/table-data';
+import type { SavableTabData } from '../tabDataSaver';
+import {
+  serializeSavableTabData,
+  deserializeSavableTabData,
+} from '../tabDataSaver';
+
+function roundTrip(data: SavableTabData): SavableTabData {
+  return deserializeSavableTabData(serializeSavableTabData(data));
+}
+
+test('round trip serialization, empty case', () => {
+  const data: SavableTabData = {
+    tabs: [],
+    activeTab: undefined,
+  };
+  expect(roundTrip(data)).toEqual(data);
+});
+
+test('round trip serialization, complex case', () => {
+  const data: SavableTabData = {
+    tabs: [
+      {
+        type: TabularType.Table,
+        id: 123,
+        metaProps: {
+          filtering: new Filtering({
+            combination: { id: 'and', label: 'and' },
+            entries: [
+              {
+                columnName: 'Foo',
+                condition: { id: 'eq', label: 'equals' },
+                value: 'This is a column value',
+              },
+            ],
+          }),
+          grouping: new Grouping(['Column 1', 'Column 2']),
+          sorting: new Sorting([
+            ['My Column name', SortDirection.A],
+            ['Your column name', SortDirection.D],
+          ]),
+          pagination: new Pagination({ page: 2, size: 100 }),
+        },
+      },
+    ],
+    activeTab: { type: TabularType.Table, id: 123 },
+  };
+  expect(roundTrip(data)).toEqual(data);
+});
+
+test("can't deserialize invalid input", () => {
+  expect(() => {
+    deserializeSavableTabData('This input is invalid');
+  }).toThrow();
+});
diff --git a/mathesar_ui/src/stores/tabs/index.ts b/mathesar_ui/src/stores/tabs/index.ts
index 203e0a48f0..9194b9fe15 100644
--- a/mathesar_ui/src/stores/tabs/index.ts
+++ b/mathesar_ui/src/stores/tabs/index.ts
@@ -1,3 +1,7 @@
 export { getTabsForSchema, clearTabsForSchema } from './manager';
-export { constructTabularTab, constructImportTab } from './tabList';
-export { constructTabularTabLink } from './utils';
+export {
+  constructTabularTab,
+  constructImportTab,
+  TabType,
+  tabIsTabular,
+} from './tabList';
diff --git a/mathesar_ui/src/stores/tabs/tabDataSaver.ts b/mathesar_ui/src/stores/tabs/tabDataSaver.ts
new file mode 100644
index 0000000000..800e6c82fc
--- /dev/null
+++ b/mathesar_ui/src/stores/tabs/tabDataSaver.ts
@@ -0,0 +1,113 @@
+import { router } from 'tinro';
+import type { DBObjectEntry, Database, SchemaEntry } from '@mathesar/App';
+import type { TabularType } from '@mathesar/stores/table-data';
+import Url64 from '@mathesar/utils/Url64';
+import {
+  makeTabularDataProps,
+  makeTerseTabularDataProps,
+} from '@mathesar/stores/table-data';
+import type {
+  TabularDataProps,
+  TerseTabularDataProps,
+} from '@mathesar/stores/table-data/types';
+import type { TabularTab } from './tabList';
+
+const TAB_LIST_QUERY_PARAM = 't';
+
+export type TabularTabReference = Pick<TabularDataProps, 'type' | 'id'>;
+
+/** [ type, id ] */
+type TerseTabularTabReference = [TabularType, DBObjectEntry['id']];
+
+function makeTabularTabReference(
+  t: TerseTabularTabReference,
+): TabularTabReference {
+  return {
+    type: t[0],
+    id: t[1],
+  };
+}
+
+function makeTerseTabularTabReference(
+  p: TabularTabReference,
+): TerseTabularTabReference {
+  return [p.type, p.id];
+}
+
+export function tabMatchesReference(
+  tab: TabularTab,
+  ref: TabularTabReference,
+): boolean {
+  const { tabularData } = tab;
+  return tabularData.type === ref.type && tabularData.id === ref.id;
+}
+
+export interface SavableTabData {
+  tabs: TabularDataProps[];
+  activeTab?: TabularTabReference;
+}
+
+/** [ tabs, activeTab ] */
+type TerseSavableTabData = [
+  TerseTabularDataProps[],
+  // using null instead of undefined for JSON serialization compatibility
+  TerseTabularTabReference | null,
+];
+
+function makeSavableTabData(t: TerseSavableTabData): SavableTabData {
+  return {
+    tabs: t[0].map(makeTabularDataProps),
+    activeTab: t[1] ? makeTabularTabReference(t[1]) : undefined,
+  };
+}
+
+function makeTerseSavableTabData(l: SavableTabData): TerseSavableTabData {
+  return [
+    l.tabs.map(makeTerseTabularDataProps),
+    // using null instead of undefined for JSON serialization compatibility
+    l.activeTab ? makeTerseTabularTabReference(l.activeTab) : null,
+  ];
+}
+
+export function serializeSavableTabData(data: SavableTabData): string {
+  return Url64.encode(JSON.stringify(makeTerseSavableTabData(data)));
+}
+
+/** @throws {Error} if input string is not formatted correctly */
+export function deserializeSavableTabData(s: string): SavableTabData {
+  return makeSavableTabData(JSON.parse(Url64.decode(s)));
+}
+
+export function saveTabData(data: SavableTabData): void {
+  const serializedData = serializeSavableTabData(data);
+  router.location.query.set(TAB_LIST_QUERY_PARAM, serializedData);
+  // TODO save to localStorage too
+}
+
+export function getSavedTabData(): SavableTabData | undefined {
+  // TODO load from localStorage as fallback
+  let data: SavableTabData | undefined;
+  const dataFromUrl = router.location.query.get(TAB_LIST_QUERY_PARAM) as string;
+  if (!dataFromUrl) {
+    return undefined;
+  }
+  try {
+    data = deserializeSavableTabData(dataFromUrl);
+  } catch (e) {
+    console.error('Unable to deserialize saved tab data.', e);
+  }
+  return data;
+}
+
+export function constructTabularTabLink(
+  db: Database['name'],
+  schemaId: SchemaEntry['id'],
+  type: TabularType,
+  tabularId: DBObjectEntry['id'],
+): string {
+  const data: SavableTabData = {
+    tabs: [{ type, id: tabularId }],
+  };
+  const serializedData = serializeSavableTabData(data);
+  return `/${db}/${schemaId}/?${TAB_LIST_QUERY_PARAM}=${serializedData}`;
+}
diff --git a/mathesar_ui/src/stores/tabs/tabList.ts b/mathesar_ui/src/stores/tabs/tabList.ts
index be51632eaf..cf10b635f5 100644
--- a/mathesar_ui/src/stores/tabs/tabList.ts
+++ b/mathesar_ui/src/stores/tabs/tabList.ts
@@ -1,45 +1,56 @@
-import { get, writable } from 'svelte/store';
-import type { Writable, Unsubscriber } from 'svelte/store';
+import type { Readable, Writable, Unsubscriber } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 import type { Tab } from '@mathesar-component-library/types';
 import type {
   TabularData,
-  TabularDataParams,
+  TabularDataProps,
+  MetaProps,
 } from '@mathesar/stores/table-data/types';
-import type {
-  Database,
-  DBObjectEntry,
-  SchemaEntry,
-  TabularType,
-} from '@mathesar/App.d';
+import type { Database, DBObjectEntry, SchemaEntry } from '@mathesar/App.d';
 import {
   getTabularContent,
   removeTabularContent,
+  TabularType,
 } from '@mathesar/stores/table-data';
 import { getTablesStoreForSchema } from '@mathesar/stores/tables';
 import {
-  getAllImportDetailsForSchema,
   removeImportFromView,
+  getAllImportDetailsForSchema,
 } from '@mathesar/stores/fileImports';
 import type { FileImportInfo } from '@mathesar/stores/fileImports';
+import { collapse, unite } from '@mathesar/utils/storeUtils';
+import type { SavableTabData, TabularTabReference } from './tabDataSaver';
 import {
-  parseTabListConfigFromURL,
-  syncTabularParamListToURL,
-  syncSingleTabularParamToURL,
-  syncActiveTabToURL,
-} from './utils';
-import type { TabListConfig } from './utils';
-
-export interface MathesarTab extends Tab {
+  getSavedTabData,
+  saveTabData,
+  tabMatchesReference,
+} from './tabDataSaver';
+
+export enum TabType {
+  Tabular,
+  Import,
+}
+interface BaseTab extends Tab {
   id: string;
   label: string;
-
-  // TODO: Use a enum to determine type of tab
-  isNew: boolean;
-  tabularData?: TabularData;
-
-  // Discuss: Remove imports from within the tab context to a higher level modal context
+}
+export interface TabularTab extends BaseTab {
+  type: TabType.Tabular;
+  tabularData: TabularData;
+}
+export interface ImportTab extends BaseTab {
+  type: TabType.Import;
+  /**
+   * Discuss: Remove imports from within the tab context to a higher level
+   * modal context.
+   */
   fileImportId?: FileImportInfo['id'];
 }
+export type MathesarTab = TabularTab | ImportTab;
+
+export function tabIsTabular(tab: MathesarTab): tab is TabularTab {
+  return tab.type === TabType.Tabular;
+}
 
 interface TabAddOptions {
   position?: number;
@@ -57,63 +68,94 @@ function calculateImportTabId(id: FileImportInfo['id']): MathesarTab['id'] {
   return `import_id_${id}`;
 }
 
-function getTabsFromImports(schemaId: SchemaEntry['id']): MathesarTab[] {
-  const imports: MathesarTab[] = getAllImportDetailsForSchema(schemaId).map(
-    (entry) => ({
-      id: calculateImportTabId(entry.id),
-      fileImportId: entry.id,
-      isNew: true,
-      label: 'Import data',
-    }),
-  );
-  return imports;
-}
-
-function getTabsFromConfig(
-  schemaId: SchemaEntry['id'],
-  tabListConfig?: TabListConfig,
-): MathesarTab[] {
-  const tabs: MathesarTab[] = [];
-  const tableStoreData = get(getTablesStoreForSchema(schemaId));
-  tabListConfig?.tabularDataParamList?.forEach((entry) => {
-    const table = tableStoreData.data.get(entry[1]);
-    if (table) {
-      tabs.push({
-        id: calculateTabularTabId(entry[0], entry[1]),
-        label: table.name,
-        isNew: false,
-        tabularData: getTabularContent(entry[0], entry[1], entry),
-      });
-    }
-  });
-  return tabs;
-}
-
 export function constructTabularTab(
   type: TabularData['type'],
   id: TabularData['id'],
   label: DBObjectEntry['name'],
-): MathesarTab {
-  const newTab: MathesarTab = {
+  metaProps?: MetaProps,
+): TabularTab {
+  const newTab: TabularTab = {
     id: calculateTabularTabId(type, id),
     label,
-    isNew: false,
-    tabularData: getTabularContent(type, id),
+    type: TabType.Tabular,
+    tabularData: getTabularContent({ type, id, metaProps }),
   };
   return newTab;
 }
 
+function buildTabularTabFromProps({
+  schemaId,
+  tabularDataProps,
+}: {
+  schemaId: SchemaEntry['id'];
+  tabularDataProps: TabularDataProps;
+}) {
+  const { id, type, metaProps } = tabularDataProps;
+  const tableStoreData = get(getTablesStoreForSchema(schemaId));
+  const table = tableStoreData.data.get(id);
+  const label = table ? table.name : '(Unknown table)';
+  return constructTabularTab(type, id, label, metaProps);
+}
+
+function getTabsFromImports(schemaId: SchemaEntry['id']): ImportTab[] {
+  const imports: ImportTab[] = getAllImportDetailsForSchema(schemaId).map(
+    (entry) => ({
+      id: calculateImportTabId(entry.id),
+      fileImportId: entry.id,
+      type: TabType.Import,
+      label: 'Import data',
+    }),
+  );
+  return imports;
+}
+
 export function constructImportTab(
   fileImportId: FileImportInfo['id'],
   label?: FileImportInfo['name'],
-): MathesarTab {
-  const newTab: MathesarTab = {
+): ImportTab {
+  return {
     id: calculateImportTabId(fileImportId),
     label: label || 'Import data',
-    isNew: true,
+    type: TabType.Import,
     fileImportId,
   };
-  return newTab;
+}
+
+function getTabularTabReference(
+  tab: MathesarTab,
+): TabularTabReference | undefined {
+  if (!tabIsTabular(tab)) {
+    return undefined;
+  }
+  return { type: tab.tabularData.type, id: tab.tabularData.id };
+}
+
+function getTabularDataProps(
+  tabularTab: TabularTab,
+): Readable<TabularDataProps> {
+  return derived(tabularTab.tabularData.meta.props, (metaProps) => ({
+    type: tabularTab.tabularData.type,
+    id: tabularTab.tabularData.id,
+    metaProps,
+  }));
+}
+
+function getSavableTabData(
+  tabs: Readable<MathesarTab[]>,
+  activeTab: Readable<MathesarTab | undefined>,
+): Readable<SavableTabData> {
+  const tabularTabs = derived(tabs, ($tabs) => $tabs.filter(tabIsTabular));
+  return collapse(
+    derived([tabularTabs, activeTab], ([$tabularTabs, $activeTab]) => {
+      const tabularDataPropsArray = unite(
+        $tabularTabs.map(getTabularDataProps),
+      );
+      return derived(tabularDataPropsArray, ($tabularDataPropsArray) => ({
+        tabs: $tabularDataPropsArray,
+        activeTab: $activeTab && getTabularTabReference($activeTab),
+      }));
+    }),
+  );
 }
 
 /**
@@ -131,9 +173,9 @@ export class TabList {
 
   activeTab: Writable<MathesarTab | undefined>;
 
-  private tabsUnsubscriber: Unsubscriber;
+  savableTabData: Readable<SavableTabData>;
 
-  private activeTabUnsubscriber: Unsubscriber;
+  private savableTabDataUnsubscriber: Unsubscriber;
 
   constructor(dbName: Database['name'], schemaId: SchemaEntry['id']) {
     this.dbName = dbName;
@@ -142,59 +184,28 @@ export class TabList {
     // Load incomplete imports from fileImports store
     const importedFileTabs = getTabsFromImports(schemaId);
 
-    // Load tables & views from URL
-    const tabListConfig = parseTabListConfigFromURL(dbName, schemaId);
-    const tabularTabs = getTabsFromConfig(schemaId, tabListConfig);
-
-    const tabs = [...importedFileTabs, ...tabularTabs];
-    const activeTab =
-      tabularTabs.find(
-        (tab) =>
-          tab.tabularData?.type === tabListConfig.activeTabularTab?.[0] &&
-          tab.tabularData?.id === tabListConfig.activeTabularTab?.[1],
-      ) || tabs[0];
+    // // Load tables & views from URL
+    const savedTabData = getSavedTabData();
+    const activeTabReference = savedTabData?.activeTab;
+    const tabularTabs =
+      savedTabData?.tabs.map((tabularDataProps) =>
+        buildTabularTabFromProps({ tabularDataProps, schemaId: this.schemaId }),
+      ) ?? [];
 
+    const tabs: MathesarTab[] = [...importedFileTabs, ...tabularTabs];
     this.tabs = writable(tabs);
-    this.activeTab = writable(activeTab);
 
-    // Tabular tabs <-> url subscribers
-    this.tabsUnsubscriber = this.tabs.subscribe((tabsSubstance) => {
-      const tabularDataParamList: TabularDataParams[] = [];
-      tabsSubstance.forEach((entry) => {
-        if (entry.tabularData) {
-          tabularDataParamList.push(entry.tabularData.parameterize());
-        }
-      });
-      syncTabularParamListToURL(
-        this.dbName,
-        this.schemaId,
-        tabularDataParamList,
-      );
-    });
-    tabularTabs.forEach((tabularTab) => {
-      this.addParamListenerToTab(tabularTab);
-    });
-
-    // Active tab <-> url subscriber
-    this.activeTabUnsubscriber = this.activeTab.subscribe(
-      (activeTabSubstance) => {
-        let activeTabularTab: TabListConfig['activeTabularTab'] | undefined;
-        if (activeTabSubstance?.tabularData) {
-          activeTabularTab = [
-            activeTabSubstance.tabularData.type,
-            activeTabSubstance.tabularData.id,
-          ];
-        }
-        syncActiveTabToURL(this.dbName, this.schemaId, activeTabularTab);
-      },
-    );
-  }
+    const activeTab =
+      (activeTabReference
+        ? tabularTabs.find((tab) =>
+            tabMatchesReference(tab, activeTabReference),
+          )
+        : undefined) ?? tabs[0];
+    this.activeTab = writable(activeTab);
 
-  addParamListenerToTab(tab: MathesarTab): void {
-    // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-    tab.tabularData?.on('paramsUpdated', async (params: TabularDataParams) => {
-      syncSingleTabularParamToURL(this.dbName, this.schemaId, params);
-    });
+    this.savableTabData = getSavableTabData(this.tabs, this.activeTab);
+    this.savableTabDataUnsubscriber =
+      this.savableTabData.subscribe(saveTabData);
   }
 
   add(tab: MathesarTab, options?: TabAddOptions): void {
@@ -220,8 +231,6 @@ export class TabList {
         this.activeTab.set(existingTab || tab);
       }
     }
-
-    this.addParamListenerToTab(tab);
   }
 
   getTabularTabByTabularID(
@@ -264,13 +273,13 @@ export class TabList {
     /**
      * If called from component event, the tab would already have been removed in previous tick.
      * If called directly, tab will have to be removed.
-     * We have a find check to avoid unnessary re-renders incase of component events.
+     * We have a find check to avoid unnecessary re-renders incase of component events.
      */
     if (removedTabIndexInTabsArray > -1) {
       this.tabs.set(tabSubstance.filter((entry) => entry.id !== tab.id));
     }
 
-    if (tab.isNew) {
+    if (tab.type === TabType.Import) {
       if (tab.fileImportId) {
         removeImportFromView(this.schemaId, tab.fileImportId);
       }
@@ -301,7 +310,6 @@ export class TabList {
   }
 
   destroy(): void {
-    this.activeTabUnsubscriber();
-    this.tabsUnsubscriber();
+    this.savableTabDataUnsubscriber();
   }
 }
diff --git a/mathesar_ui/src/stores/tabs/utils.ts b/mathesar_ui/src/stores/tabs/utils.ts
deleted file mode 100644
index a7bff26fbc..0000000000
--- a/mathesar_ui/src/stores/tabs/utils.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { router } from 'tinro';
-import type {
-  Database,
-  DBObjectEntry,
-  SchemaEntry,
-  TabularType,
-} from '@mathesar/App.d';
-import type { TabularDataParams } from '@mathesar/stores/table-data/types';
-
-export interface TabListConfig {
-  tabularDataParamList?: TabularDataParams[];
-  activeTabularTab?: [TabularType, DBObjectEntry['id']];
-}
-
-const TAB_QUERY_PARAM = 't';
-const ACTIVE_TAB_QUERY_PARAM = 'a';
-
-function isInPath(db: Database['name'], schemaId: SchemaEntry['id']): boolean {
-  const paths = window.location.pathname.split('/');
-  const dbParam = paths[1];
-  const schemaParam = paths[2];
-
-  return dbParam === db && schemaParam === schemaId.toString();
-}
-
-export function parseTabListConfigFromURL(
-  db: Database['name'],
-  schemaId: SchemaEntry['id'],
-): TabListConfig {
-  let tabularDataParamList: TabListConfig['tabularDataParamList'];
-  let activeTabularTab: TabListConfig['activeTabularTab'];
-
-  if (isInPath(db, schemaId)) {
-    const params = router.location.query.get() as Record<string, string>;
-    const t = params[TAB_QUERY_PARAM];
-    const a = params[ACTIVE_TAB_QUERY_PARAM];
-
-    try {
-      if (t) {
-        tabularDataParamList = JSON.parse(
-          decodeURIComponent(t),
-        ) as TabListConfig['tabularDataParamList'];
-      }
-      if (a) {
-        activeTabularTab = JSON.parse(
-          decodeURIComponent(a),
-        ) as TabListConfig['activeTabularTab'];
-      }
-    } catch (err) {
-      console.error('Unable to parse tabular params from url', err);
-    }
-  }
-
-  return {
-    tabularDataParamList,
-    activeTabularTab,
-  };
-}
-
-export function syncTabularParamListToURL(
-  db: Database['name'],
-  schemaId: SchemaEntry['id'],
-  tabularDataParamList: TabListConfig['tabularDataParamList'],
-): void {
-  if (isInPath(db, schemaId)) {
-    try {
-      const queryParam = encodeURIComponent(
-        JSON.stringify(tabularDataParamList),
-      );
-      router.location.query.set(TAB_QUERY_PARAM, queryParam);
-    } catch (err) {
-      console.error('Unable to set tabular params in url', err);
-    }
-  }
-}
-
-export function syncSingleTabularParamToURL(
-  db: Database['name'],
-  schemaId: SchemaEntry['id'],
-  tabularDataParam: TabularDataParams,
-): void {
-  if (isInPath(db, schemaId)) {
-    try {
-      const { tabularDataParamList } = parseTabListConfigFromURL(db, schemaId);
-      if (!tabularDataParamList) {
-        return;
-      }
-      const replacementIndex = tabularDataParamList.findIndex(
-        (entry) =>
-          entry[0] === tabularDataParam[0] && entry[1] === tabularDataParam[1],
-      );
-      if (replacementIndex > -1) {
-        tabularDataParamList[replacementIndex] = tabularDataParam;
-      }
-      syncTabularParamListToURL(db, schemaId, tabularDataParamList);
-    } catch (err) {
-      console.error('Unable to set single tabular param in url', err);
-    }
-  }
-}
-
-export function syncActiveTabToURL(
-  db: Database['name'],
-  schemaId: SchemaEntry['id'],
-  activeTabularTab?: TabListConfig['activeTabularTab'],
-): void {
-  if (isInPath(db, schemaId)) {
-    try {
-      if (activeTabularTab) {
-        router.location.query.set(
-          ACTIVE_TAB_QUERY_PARAM,
-          encodeURIComponent(JSON.stringify(activeTabularTab)),
-        );
-      } else {
-        router.location.query.delete(ACTIVE_TAB_QUERY_PARAM);
-      }
-    } catch (err) {
-      console.error('Unable to set active tabular tab param in url', err);
-    }
-  }
-}
-
-export function constructTabularTabLink(
-  db: Database['name'],
-  schemaId: SchemaEntry['id'],
-  type: TabularType,
-  tabularId: DBObjectEntry['id'],
-): string {
-  const tab = [type, tabularId];
-  const active = encodeURIComponent(JSON.stringify(tab));
-  const list = encodeURIComponent(JSON.stringify([tab]));
-  return `/${db}/${schemaId}/?${TAB_QUERY_PARAM}=${list}&${ACTIVE_TAB_QUERY_PARAM}=${active}`;
-}
diff --git a/mathesar_ui/src/utils/Url64.ts b/mathesar_ui/src/utils/Url64.ts
new file mode 100644
index 0000000000..6658876816
--- /dev/null
+++ b/mathesar_ui/src/utils/Url64.ts
@@ -0,0 +1,17 @@
+/**
+ * Encode a string as a URL-safe base64 string.
+ *
+ * The resulting string won't have any characters which require URL encoding.
+ * We change `+` to `-` and `/` to `_`. We remove the padding characters `=`
+ * altogether because atob only needs them when inputs are concatenated.
+ */
+export default class Url64 {
+  static encode(s: string): string {
+    const base64 = btoa(s);
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+  }
+
+  static decode(s: string): string {
+    return atob(s.replace(/-/g, '+').replace(/_/g, '/'));
+  }
+}
diff --git a/mathesar_ui/src/utils/routing.ts b/mathesar_ui/src/utils/routing.ts
new file mode 100644
index 0000000000..3ece05a10f
--- /dev/null
+++ b/mathesar_ui/src/utils/routing.ts
@@ -0,0 +1,19 @@
+import type { Unsubscriber, Writable } from 'svelte/store';
+import { get } from 'svelte/store';
+import { currentDBName } from '@mathesar/stores/databases';
+import { getTabsForSchema } from '@mathesar/stores/tabs/manager';
+import { saveTabData } from '@mathesar/stores/tabs/tabDataSaver';
+
+export function beginUpdatingUrlWhenSchemaChanges(
+  currentSchemaId: Writable<number | undefined>,
+): Unsubscriber {
+  return currentSchemaId.subscribe((schemaId) => {
+    if (!schemaId) {
+      return;
+    }
+    const dbName = get(currentDBName);
+    const tabList = getTabsForSchema(dbName, schemaId);
+    const tabData = get(tabList.savableTabData);
+    saveTabData(tabData);
+  });
+}
diff --git a/mathesar_ui/src/utils/storeUtils.test.ts b/mathesar_ui/src/utils/storeUtils.test.ts
new file mode 100644
index 0000000000..d6cb2caca8
--- /dev/null
+++ b/mathesar_ui/src/utils/storeUtils.test.ts
@@ -0,0 +1,28 @@
+import { get, writable } from 'svelte/store';
+import { collapse, unite } from './storeUtils';
+
+test('collapse', () => {
+  const innerA = writable(21);
+  const innerB = writable(31);
+  const outer = writable(innerA);
+  const collapsed = collapse<number>(outer);
+  expect(get(collapsed)).toBe(21);
+  innerA.set(22);
+  expect(get(collapsed)).toBe(22);
+  outer.set(innerB);
+  expect(get(collapsed)).toBe(31);
+  innerB.set(32);
+  expect(get(collapsed)).toBe(32);
+});
+
+test('unite', () => {
+  const a = writable(21);
+  const b = writable(31);
+  const all = [a, b];
+  const united = unite(all);
+  expect(get(united)).toEqual([21, 31]);
+  a.set(22);
+  expect(get(united)).toEqual([22, 31]);
+  b.set(32);
+  expect(get(united)).toEqual([22, 32]);
+});
diff --git a/mathesar_ui/src/utils/storeUtils.ts b/mathesar_ui/src/utils/storeUtils.ts
new file mode 100644
index 0000000000..49b565d98c
--- /dev/null
+++ b/mathesar_ui/src/utils/storeUtils.ts
@@ -0,0 +1,41 @@
+import type { Readable } from 'svelte/store';
+import { derived, readable } from 'svelte/store';
+
+/**
+ * Collapse two nested stores into a single store.
+ */
+export function collapse<T>(outerStore: Readable<Readable<T>>): Readable<T> {
+  // This is memory-safe because the Unsubscriber function gets returned from
+  // the callback passed to `derive`.
+  //
+  // From https://svelte.dev/docs#run-time-svelte-store-derived
+  //
+  // > If you return a function from the callback, it will be called when a) the
+  // > callback runs again, or b) the last subscriber unsubscribes.
+  return derived(outerStore, (innerStore, set) => innerStore.subscribe(set));
+}
+
+function arrayWithValueSetAtIndex<T>(array: T[], index: number, item: T): T[] {
+  const result = [...array];
+  result[index] = item;
+  return result;
+}
+
+/**
+ * Unite an array of stores into a store of arrays.
+ */
+export function unite<T>(stores: Readable<T>[]): Readable<T[]> {
+  let results: T[] = [];
+  return readable(results, (set) => {
+    const unsubscribers = stores.map((store, index) =>
+      store.subscribe((value) => {
+        results = arrayWithValueSetAtIndex(results, index, value);
+        set(results);
+      }),
+    );
+    // This is memory safe because when the last subscriber unsubscribes from
+    // the `unite` store, the function below will ensure that we're
+    // unsubscribing from all the inner stores.
+    return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+  });
+}