diff --git a/mathesar_ui/src/api/rpc/records.ts b/mathesar_ui/src/api/rpc/records.ts
index e82f8adf3e..8a8123f06a 100644
--- a/mathesar_ui/src/api/rpc/records.ts
+++ b/mathesar_ui/src/api/rpc/records.ts
@@ -1,5 +1,7 @@
 import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
 
+import type { RecordSummaryTemplate } from './tables';
+
 export type ResultValue = string | number | boolean | null;
 
 export type SortDirection = 'asc' | 'desc';
@@ -130,6 +132,16 @@ export const records = {
       table_oid: number;
       record_id: ResultValue;
       return_record_summaries?: boolean;
+      /**
+       * Keys are stringified table OIDs. Values are record summary templates
+       * that will override the templates stored in table metadata. These
+       * overrides can be used to render a of a record summary using an
+       * ephemeral template before any template is stored.
+       * */
+      table_record_summary_templates?: Record<
+        string,
+        RecordSummaryTemplate | null
+      > | null;
     },
     RecordsResponse
   >(),
diff --git a/mathesar_ui/src/api/rpc/tables.ts b/mathesar_ui/src/api/rpc/tables.ts
index d2d392380d..f9f0f774f0 100644
--- a/mathesar_ui/src/api/rpc/tables.ts
+++ b/mathesar_ui/src/api/rpc/tables.ts
@@ -32,6 +32,17 @@ export interface RawTablePrivilegesForRole {
   direct: TablePrivilege[];
 }
 
+/**
+ * A string is static text to be displayed in the summary.
+ *
+ * An array of numbers indicates a reference to a column in the table. Each
+ * number is a column attnum. A sequence of multiple numbers indicates a chain
+ * of FK references, column-by-column.
+ *
+ */
+export type RecordSummaryTemplatePart = string | number[];
+export type RecordSummaryTemplate = RecordSummaryTemplatePart[];
+
 interface TableMetadata {
   /** The id of the data file used during import while creating the table */
   data_file_id: number | null;
@@ -45,8 +56,7 @@ interface TableMetadata {
    */
   import_verified: boolean | null;
   column_order: number[] | null;
-  record_summary_customized: boolean | null;
-  record_summary_template: string | null;
+  record_summary_template: RecordSummaryTemplate | null;
 }
 
 export interface RawTableWithMetadata extends RawTable {
diff --git a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss
index 1e909b82a5..e895c5de1d 100644
--- a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss
+++ b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss
@@ -1,48 +1,32 @@
-.fieldset-group {
-  padding: 0;
-  margin: 0;
+.fieldset-group-options {
   --spacing-y-default: 0.5em;
   --spacing-x-default: 1em;
+  padding-left: 0;
+  list-style-type: none;
+  margin-top: 0.25em;
+  margin-bottom: 0;
 
-  legend {
-    padding: 0;
-    font-weight: var(--font-weight-medium);
-    margin-bottom: 0.5rem;
-  }
-  .options {
-    padding-left: 0;
-    list-style-type: none;
-    margin-top: 0.25em;
-    margin-bottom: 0;
-  }
-  &.has-label .options {
+  &.has-fieldset-label {
     margin-top: 1em;
   }
-  &:not(.inline) .option:not(:first-child) {
-    margin-top: var(--spacing-y, var(--spacing-y-default));
-  }
-  &:not(.inline) .option:not(:last-child) {
-    margin-bottom: var(--spacing-y, var(--spacing-y-default));
-  }
-  &:not(.inline) .option.has-help:not(:last-child) {
-    margin-bottom: calc(2 * var(--spacing-y, var(--spacing-y-default)));
+
+  &:not(.inline) {
+    .option:not(:first-child) {
+      margin-top: var(--spacing-y, var(--spacing-y-default));
+    }
+    .option:not(:last-child) {
+      margin-bottom: var(--spacing-y, var(--spacing-y-default));
+    }
+    .option.has-help:not(:last-child) {
+      margin-bottom: calc(2 * var(--spacing-y, var(--spacing-y-default)));
+    }
   }
 
-  &.inline .options {
+  &.inline {
     display: flex;
     flex-wrap: wrap;
     .option:not(:last-child) {
       margin-right: var(--spacing-x, var(--spacing-x-default));
     }
   }
-
-  &:not(.boxed) {
-    border: 0;
-  }
-  &.boxed {
-    border: 1px solid var(--slate-300);
-    border-radius: var(--border-radius-m);
-    padding: 1em;
-    padding-top: 0;
-  }
 }
diff --git a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
index 2d2c1d55f5..2885999942 100644
--- a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
+++ b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
@@ -9,11 +9,12 @@
   import Render from '@mathesar-component-library-dir/render/Render.svelte';
   import StringOrComponent from '@mathesar-component-library-dir/string-or-component/StringOrComponent.svelte';
 
+  import Fieldset from '../fieldset/Fieldset.svelte';
   import type { ComponentWithProps } from '../types';
 
   type Option = $$Generic;
 
-  export let isInline = false;
+  export let isInline: boolean | undefined = undefined;
   export let options: readonly Option[] = [];
   export let label: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
@@ -21,28 +22,20 @@
   export let labelKey = 'label';
   export let getLabel: LabelGetter<Option> = (o: Option) =>
     defaultGetLabel(o, labelKey);
-  export let boxed = false;
+  export let boxed: boolean | undefined = undefined;
   export let getDisabled: (value: Option | undefined) => boolean = () => false;
   export let getHelp: <C extends SvelteComponent>(
     value: Option,
   ) => string | ComponentWithProps<C> | undefined = () => undefined;
 </script>
 
-<fieldset
-  class="fieldset-group"
-  class:inline={isInline}
-  class:boxed
-  class:has-label={!!label}
-  aria-label={ariaLabel}
-  on:change
->
-  {#if $$slots.label || label}
-    <legend>
-      {#if $$slots.label}<slot name="label" />{/if}
-      {#if label}{label}{/if}
-    </legend>
-  {/if}
-  <ul class="options">
+<Fieldset {ariaLabel} {boxed}>
+  <slot name="label" slot="label">{label}</slot>
+  <ul
+    class="fieldset-group-options"
+    class:inline={isInline}
+    class:has-fieldset-label={!!label}
+  >
     {#each options as option (option)}
       {@const help = getHelp(option)}
       <li class="option" class:has-help={!!help}>
@@ -55,4 +48,4 @@
     {/each}
   </ul>
   <slot name="extra" />
-</fieldset>
+</Fieldset>
diff --git a/mathesar_ui/src/component-library/fieldset/Fieldset.scss b/mathesar_ui/src/component-library/fieldset/Fieldset.scss
new file mode 100644
index 0000000000..067010fac0
--- /dev/null
+++ b/mathesar_ui/src/component-library/fieldset/Fieldset.scss
@@ -0,0 +1,23 @@
+.fieldset {
+  padding: 0;
+  margin: 0;
+
+  legend {
+    padding: 0;
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 0.5rem;
+  }
+  legend:empty {
+    display: none;
+  }
+
+  &:not(.boxed) {
+    border: 0;
+  }
+  &.boxed {
+    border: 1px solid var(--slate-300);
+    border-radius: var(--border-radius-m);
+    padding: 1em;
+    padding-top: 0;
+  }
+}
diff --git a/mathesar_ui/src/component-library/fieldset/Fieldset.svelte b/mathesar_ui/src/component-library/fieldset/Fieldset.svelte
new file mode 100644
index 0000000000..e816ef4cc7
--- /dev/null
+++ b/mathesar_ui/src/component-library/fieldset/Fieldset.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let label: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
+  export let boxed = false;
+</script>
+
+<fieldset
+  class="fieldset"
+  class:boxed
+  class:has-label={!!label}
+  aria-label={ariaLabel}
+  on:change
+>
+  {#if $$slots.label || label}
+    <legend><slot name="label">{label}</slot></legend>
+  {/if}
+  <slot />
+</fieldset>
diff --git a/mathesar_ui/src/component-library/index.ts b/mathesar_ui/src/component-library/index.ts
index 402916ab44..c154c37593 100644
--- a/mathesar_ui/src/component-library/index.ts
+++ b/mathesar_ui/src/component-library/index.ts
@@ -21,6 +21,7 @@ export { default as Chip } from './chip/Chip.svelte';
 export { default as Collapsible } from './collapsible/Collapsible.svelte';
 export { default as ContextMenu } from './context-menu/ContextMenu.svelte';
 export { default as Debounce } from './debounce/Debounce.svelte';
+export { default as Fieldset } from './fieldset/Fieldset.svelte';
 export { default as Help } from './help/Help.svelte';
 export { default as Icon } from './icon/Icon.svelte';
 export { InputGroup, InputGroupText } from './input-group';
diff --git a/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte b/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte
index bb397bce50..43b68d8ea6 100644
--- a/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte
+++ b/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
   import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import FieldsetGroup from '@mathesar-component-library-dir/fieldset-group/FieldsetGroup.svelte';
   import Radio from '@mathesar-component-library-dir/radio/Radio.svelte';
 
   type Option = $$Generic;
 
+  const dispatch = createEventDispatcher<{ change: { value: Option } }>();
+
   export let value: Option | undefined = undefined;
   export let isInline = false;
   export let options: readonly Option[] = [];
@@ -34,13 +38,11 @@
 <FieldsetGroup
   {isInline}
   {options}
-  {label}
   {ariaLabel}
   {disabled}
   {boxed}
   let:option
   let:disabled={innerDisabled}
-  on:change
   labelKey={radioLabelKey}
   getLabel={getRadioLabel}
 >
@@ -51,8 +53,9 @@
       if (checked) {
         value = option;
       }
+      dispatch('change', { value: option });
     }}
   />
-  <slot slot="label" />
+  <slot slot="label" name="label">{label}</slot>
   <slot slot="extra" name="extra" />
 </FieldsetGroup>
diff --git a/mathesar_ui/src/component-library/styles.scss b/mathesar_ui/src/component-library/styles.scss
index d3d53550aa..c9c0025751 100644
--- a/mathesar_ui/src/component-library/styles.scss
+++ b/mathesar_ui/src/component-library/styles.scss
@@ -14,6 +14,7 @@
 @import 'checkbox/Checkbox.scss';
 @import 'chip/Chip.scss';
 @import 'collapsible/Collapsible.scss';
+@import 'fieldset/Fieldset.scss';
 @import 'fieldset-group/FieldsetGroup.scss';
 @import 'icon/Icon.scss';
 @import 'input-group/InputGroup.scss';
diff --git a/mathesar_ui/src/components/LinkedRecord.svelte b/mathesar_ui/src/components/LinkedRecord.svelte
index e6559cc120..64900fad09 100644
--- a/mathesar_ui/src/components/LinkedRecord.svelte
+++ b/mathesar_ui/src/components/LinkedRecord.svelte
@@ -20,13 +20,13 @@
   let isHoveringRecordPageLink = false;
 
   $: label = (() => {
-    if (recordSummary) {
+    if (recordSummary && recordSummary.trim() !== '') {
       return recordSummary;
     }
     if (recordId !== undefined) {
       return String(recordId);
     }
-    return '(Unknown)';
+    return '?';
   })();
 
   function handleDeleteButtonClick() {
diff --git a/mathesar_ui/src/components/SelectProcessedColumn.svelte b/mathesar_ui/src/components/SelectProcessedColumn.svelte
index 53e8b90e6d..a415caad6f 100644
--- a/mathesar_ui/src/components/SelectProcessedColumn.svelte
+++ b/mathesar_ui/src/components/SelectProcessedColumn.svelte
@@ -7,18 +7,29 @@
   export let columns: ProcessedColumn[];
   export let value: ProcessedColumn | undefined = undefined;
   export let disabled = false;
+  export let onUpdate: ((v: ProcessedColumn | undefined) => void) | undefined =
+    undefined;
+  export let allowEmpty = false;
 </script>
 
 <Select
-  options={columns}
+  options={[...(allowEmpty ? [undefined] : []), ...columns]}
   labelKey="name"
   valuesAreEqual={(a, b) => a?.id === b?.id}
   bind:value
   {disabled}
-  on:change
+  on:change={({ detail: column }) => onUpdate?.(column)}
   let:option
 >
   {#if option}
     <ProcessedColumnName processedColumn={option} />
+  {:else}
+    <div class="empty"></div>
   {/if}
 </Select>
+
+<style>
+  .empty {
+    min-width: 3rem;
+  }
+</style>
diff --git a/mathesar_ui/src/components/abstract-type-control/AbstractTypeSelector.svelte b/mathesar_ui/src/components/abstract-type-control/AbstractTypeSelector.svelte
index 6657d47669..3d4efb1d9f 100644
--- a/mathesar_ui/src/components/abstract-type-control/AbstractTypeSelector.svelte
+++ b/mathesar_ui/src/components/abstract-type-control/AbstractTypeSelector.svelte
@@ -3,10 +3,7 @@
   import { _ } from 'svelte-i18n';
 
   import NameWithIcon from '@mathesar/components/NameWithIcon.svelte';
-  import {
-    abstractTypesMap,
-    getAllowedAbstractTypesForDbTypeAndItsTargetTypes,
-  } from '@mathesar/stores/abstract-types';
+  import { getAllowedAbstractTypesForDbTypeAndItsTargetTypes } from '@mathesar/stores/abstract-types';
   import { typeCastMap } from '@mathesar/stores/abstract-types/typeCastMap';
   import type { AbstractType } from '@mathesar/stores/abstract-types/types';
   import { LabeledInput, Select } from '@mathesar-component-library';
@@ -28,7 +25,6 @@
   $: allowedTypeConversions = getAllowedAbstractTypesForDbTypeAndItsTargetTypes(
     column.type,
     typeCastMap[column.type] ?? [],
-    abstractTypesMap,
   ).filter((item) => !['jsonlist', 'map'].includes(item.identifier));
 
   function selectAbstractType(
diff --git a/mathesar_ui/src/components/cell-fabric/data-types/utils.ts b/mathesar_ui/src/components/cell-fabric/data-types/utils.ts
index 944edc35cc..3f0e24d62b 100644
--- a/mathesar_ui/src/components/cell-fabric/data-types/utils.ts
+++ b/mathesar_ui/src/components/cell-fabric/data-types/utils.ts
@@ -1,15 +1,9 @@
 import type { DbType } from '@mathesar/AppTypes';
-import {
-  abstractTypesMap,
-  getAbstractTypeForDbType,
-} from '@mathesar/stores/abstract-types';
+import { getAbstractTypeForDbType } from '@mathesar/stores/abstract-types';
 import type { CellInfo } from '@mathesar/stores/abstract-types/types';
 
 export function getCellInfo(dbType: DbType): CellInfo | undefined {
-  const abstractTypeOfColumn = getAbstractTypeForDbType(
-    dbType,
-    abstractTypesMap,
-  );
+  const abstractTypeOfColumn = getAbstractTypeForDbType(dbType);
   return abstractTypeOfColumn?.cellInfo;
 }
 
diff --git a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
index e007842471..c10e61d706 100644
--- a/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
+++ b/mathesar_ui/src/components/inspector/cell/CellInspector.svelte
@@ -2,8 +2,7 @@
   import { _ } from 'svelte-i18n';
 
   import CellFabric from '@mathesar/components/cell-fabric/CellFabric.svelte';
-
-  import type { SelectedCellData } from './cellInspectorUtils';
+  import type { SelectedCellData } from '@mathesar/components/sheet/selection';
 
   export let selectedCellData: SelectedCellData;
 
diff --git a/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts b/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
deleted file mode 100644
index b493f92069..0000000000
--- a/mathesar_ui/src/components/inspector/cell/cellInspectorUtils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { CellColumnFabric } from '@mathesar/components/cell-fabric/types';
-
-interface ActiveCellData {
-  column: CellColumnFabric;
-  value: unknown;
-  recordSummary?: string;
-}
-
-interface SelectionData {
-  cellCount: number;
-}
-
-export interface SelectedCellData {
-  activeCellData?: ActiveCellData;
-  selectionData: SelectionData;
-}
diff --git a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
index ee9c120b90..afcbbb3e6d 100644
--- a/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
+++ b/mathesar_ui/src/components/sheet/selection/selectionUtils.ts
@@ -1,5 +1,7 @@
 import type { Writable } from 'svelte/store';
 
+import type { ResultValue } from '@mathesar/api/rpc/records';
+import type { CellColumnFabric } from '@mathesar/components/cell-fabric/types';
 import { type ImmutableSet, defined } from '@mathesar-component-library';
 
 import type Series from './Series';
@@ -114,3 +116,14 @@ export function fitSelectedValuesToSeriesTransformation<T>(
   const newEndingValue = newSeries.at(newStartingIndex + width - 1) as T;
   return [newStartingValue, newEndingValue];
 }
+
+export interface SelectedCellData {
+  activeCellData?: {
+    column: CellColumnFabric;
+    value: ResultValue | undefined;
+    recordSummary?: string;
+  };
+  selectionData: {
+    cellCount: number;
+  };
+}
diff --git a/mathesar_ui/src/i18n/languages/en/dict.json b/mathesar_ui/src/i18n/languages/en/dict.json
index 369ddae470..541c66129e 100644
--- a/mathesar_ui/src/i18n/languages/en/dict.json
+++ b/mathesar_ui/src/i18n/languages/en/dict.json
@@ -15,6 +15,7 @@
   "add_child_roles": "Add Child Role(s)",
   "add_collaborator": "Add Collaborator",
   "add_columns_to_exploration_empty_message": "This exploration does not contain any columns. Edit the exploration to add columns to it.",
+  "add_field": "Add Field",
   "add_filter": "Add Filter",
   "add_foreign_key_constraint": "Add Foreign Key Constraint",
   "add_new_filter": "Add New Filter",
@@ -141,6 +142,9 @@
   "currently_installed": "Currently Installed",
   "custom": "Custom",
   "custom_default": "Custom Default",
+  "custom_fields": "Custom Fields",
+  "customization": "Customization",
+  "customize_fields": "Customize Fields",
   "customize_names_types_preview": "You can customize column names and types within the preview below.",
   "data_explorer": "Data Explorer",
   "data_loss_warning_alert": "Data loss can result from changing the data type of a column. This action cannot be undone.",
@@ -185,6 +189,7 @@
   "delete_schema": "Delete Schema",
   "delete_table": "Delete Table",
   "delete_user": "Delete User",
+  "deleted_column": "Deleted column",
   "deleted_records_cannot_be_recovered": "{count, plural, one {Once deleted, the record cannot be recovered.} other {Once deleted, the records cannot be recovered.}}",
   "descending": "Descending",
   "descending_id": "Descending ID",
@@ -381,6 +386,7 @@
   "no_default_value": "No Default Value",
   "no_existing_records": "No existing records",
   "no_explorations": "No Explorations",
+  "no_fields_added_yet": "No fields added yet",
   "no_file_uploaded": "No file uploaded",
   "no_filters_added": "No filters have been added",
   "no_formatting_option_data_type": "No formatting option for the column data type",
@@ -389,7 +395,6 @@
   "no_matching_records": "No matching records",
   "no_privileges_view_record": "Your role does not have the privileges to view this record.",
   "no_privileges_view_table": "Your role does not have the privileges to view this table.",
-  "no_record_summary_available": "No record summary available.",
   "no_records_found": "No records found",
   "no_results_found": "No results found",
   "no_sorting_condition_added": "No sorting condition has been added",
@@ -453,8 +458,11 @@
   "record_deleted_successfully": "Record deleted successfully!",
   "record_in_table": "Record in [tableName]",
   "record_summary": "Record Summary",
-  "record_summary_help": "The record summary shown when linking to [tableName].",
-  "record_summary_non_conformant_columns_help": "Because some column names contain curly braces, the following numerical values are used in place of column names within the above template",
+  "record_summary_config_help": "Configure [tableName] record summaries here.",
+  "record_summary_detail_help_1": "Mathesar helps you identify records in a table by generating a short piece of text to summarize each record. These record summaries display in various places throughout the app, such as foreign key cells and record page titles.",
+  "record_summary_detail_help_2": "Use the form below to customize the fields included in the [tableName] record summary.",
+  "record_summary_no_pk_error": "The [tableName] table's record summaries cannot be configured because it does not have a primary key column.",
+  "record_summary_preview_help": "This is how the currently selected [tableName] record will be summarized.",
   "recover_query_click_button": "You can attempt to recover the query by clicking on the button below.",
   "redirected_login_page_password_change": "You'll be redirected to the login page once you change your password.",
   "redo": "Redo",
@@ -566,6 +574,7 @@
   "standard": "Standard",
   "start_over": "Start Over",
   "start_working_with_mathesar": "Start Working with Mathesar",
+  "static_record_summary_template_error": "Record summary cannot be static. Add at least one column field in order to save.",
   "summarization": "Summarization",
   "summarize": "Summarize",
   "summarize_column_configure": "You can manually configure a summarization later via the \"Transform Results\" pane.",
@@ -605,8 +614,8 @@
   "target_table": "Target Table",
   "template": "Template",
   "template_refer_atleast_one_column_error": "The template must reference at least one column, otherwise the record summary will be the same for all records.",
-  "template_type": "Template type",
   "ten_best_matches_shown": "The 10 best matches are shown. Continue filtering to see more.",
+  "text": "Text",
   "the_credentials_will_be_copied_from_this_connection": "The username, password, host, and port will be copied from this connection.",
   "this_will_remove_following_columns": "This will remove the following column(s):",
   "this_will_remove_following_transformations": "This will remove the following transformation(s):",
@@ -637,6 +646,7 @@
   "unique": "Unique",
   "unique_key_help": "A unique constraint ensures that each record in a column is unique.",
   "unknown_column": "unknown column",
+  "unknown_error": "An unknown error occurred.",
   "unsaved_changes": "Unsaved Changes",
   "update": "Update",
   "update_connection": "Update Connection",
@@ -675,7 +685,7 @@
   "we_can_install_new_version": "We can install this new version for you",
   "we_will_add_a_column_in_x_to_y": "We'll add a column in [baseTable] which links to [targetTable].",
   "we_will_add_two_columns_in_x_to_y": "We'll add two columns in [mappingTable] each linking to [targetTable].",
-  "we_will_create_a_new_table": "We'll create a new table  [mappingTable].",
+  "we_will_create_a_new_table": "We'll create a new table [mappingTable].",
   "welcome_to_mathesar_user": "Welcome to Mathesar, {user}!",
   "what_is_a_table": "Tables store your data. It's good to have one table per entity. An entity is a thing you wish to keep data about. For example, in your personal financial schema, you may have a table for your bank accounts and another for your transactions. You can have as many tables as you wish.",
   "what_is_an_exploration": "Explorations let you query your data to uncover trends and insights. They may be stored and run anytime to see the latest data. Explorations make great reports. You might, for example, create an exploration that shows your monthly spending.",
diff --git a/mathesar_ui/src/i18n/languages/ja/dict.json b/mathesar_ui/src/i18n/languages/ja/dict.json
index 74f499c883..f5c8191c51 100644
--- a/mathesar_ui/src/i18n/languages/ja/dict.json
+++ b/mathesar_ui/src/i18n/languages/ja/dict.json
@@ -340,7 +340,6 @@
   "no_grouping_condition_added": "グループ化条件が追加されていません",
   "no_matches": "[searchValue] に一致するものはありません",
   "no_matching_records": "一致するレコードはありません",
-  "no_record_summary_available": "利用可能なレコードの概要はありません。",
   "no_records_found": "レコードが見つかりませんでした",
   "no_results_found": "結果が見つかりません",
   "no_sorting_condition_added": "ソート条件が追加されていません",
@@ -398,8 +397,6 @@
   "record_deleted_successfully": "レコードは正常に削除されました。",
   "record_in_table": " [tableName] のレコード",
   "record_summary": "レコードの概要",
-  "record_summary_help": "[tableName] レコードへのリンクがどのように表示されるかを示します。",
-  "record_summary_non_conformant_columns_help": "一部の列名に中かっこが含まれているため、上記のテンプレート内では列名の代わりに次の数値が使用されます。",
   "recover_query_click_button": "下のボタンをクリックすると、クエリの復元を試みることができます。",
   "redirected_login_page_password_change": "パスワードを変更すると、ログイン ページにリダイレクトされます。",
   "redo": "やり直し",
@@ -514,7 +511,6 @@
   "target_table": "ターゲットテーブル",
   "template": "テンプレート",
   "template_refer_atleast_one_column_error": "テンプレートは少なくとも1つの列を参照する必要があります。そうしない限り、レコードサマリーはすべてのレコードで同じものになります。",
-  "template_type": "テンプレートタイプ",
   "ten_best_matches_shown": "最も適合する10件が表示されています。さらに見るにはフィルタリングを続けてください。",
   "the_credentials_will_be_copied_from_this_connection": "ユーザー名、パスワード、ホスト、ポートがこの接続からコピーされます。",
   "this_database_must_exist_already": "このデータベースはすでに存在している必要があります。",
diff --git a/mathesar_ui/src/icons/index.ts b/mathesar_ui/src/icons/index.ts
index 96219596f0..987c85524a 100644
--- a/mathesar_ui/src/icons/index.ts
+++ b/mathesar_ui/src/icons/index.ts
@@ -6,6 +6,7 @@ import {
   faBackspace,
   faCalendarDay,
   faCalendarWeek,
+  faCaretRight,
   faCheck,
   faCheckSquare,
   faChevronRight,
@@ -57,6 +58,7 @@ import {
   faStar,
   faStopwatch,
   faSync,
+  faT,
   faTimes,
   faTrashAlt,
   faUndo,
@@ -189,6 +191,9 @@ export const iconLinksInThisTable: IconProps = { data: faArrowRight };
 export const iconLinksFromOtherTables: IconProps = { data: faArrowLeft };
 export const iconForwardSeparator: IconProps = { data: faSlash };
 export const iconUrl: IconProps = { data: faLink };
+export const iconText: IconProps = { data: faT };
+export const iconField: IconProps = { data: faDatabase };
+export const iconFieldDelimiter: IconProps = { data: faCaretRight };
 
 // STATUSES
 
diff --git a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
index 77254e8939..0a70f1b131 100644
--- a/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
+++ b/mathesar_ui/src/pages/exploration/ExplorationPage.svelte
@@ -7,8 +7,6 @@
   import type { Database } from '@mathesar/models/Database';
   import type { Schema } from '@mathesar/models/Schema';
   import { getSchemaPageUrl } from '@mathesar/routes/urls';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
-  import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
   import {
     ExplorationResult,
     QueryModel,
@@ -29,14 +27,10 @@
   let queryRunner: QueryRunner | undefined;
   let isInspectorOpen = true;
 
-  function createQueryRunner(
-    _query: SavedExploration,
-    abstractTypeMap: AbstractTypesMap,
-  ) {
+  function createQueryRunner(_query: SavedExploration) {
     queryRunner?.destroy();
     queryRunner = new QueryRunner({
       query: new QueryModel(_query),
-      abstractTypeMap,
       runMode: 'queryId',
       shareConsumer,
     });
@@ -44,7 +38,7 @@
 
   let context: 'shared-consumer-page' | 'page' = 'page';
   $: context = shareConsumer ? 'shared-consumer-page' : 'page';
-  $: createQueryRunner(query, abstractTypesMap);
+  $: createQueryRunner(query);
 
   function gotoSchemaPage() {
     router.goto(getSchemaPageUrl(database.id, schema.oid));
diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
index 9cb4763cc5..a13bd1e013 100644
--- a/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
+++ b/mathesar_ui/src/pages/import/preview/ImportPreviewContent.svelte
@@ -23,7 +23,6 @@
     getSchemaPageUrl,
     getTablePageUrl,
   } from '@mathesar/routes/urls';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import AsyncStore from '@mathesar/stores/AsyncStore';
   import {
     currentTables,
@@ -95,7 +94,7 @@
   $: records = $previewRequest.resolvedValue ?? getSkeletonRecords();
   $: formInputsAreDisabled = !$previewRequest.isOk;
   $: canProceed = $previewRequest.isOk && $form.canSubmit;
-  $: processedColumns = processColumns(columns, abstractTypesMap);
+  $: processedColumns = processColumns(columns);
 
   async function init() {
     const columnsResponse = await columnsFetch.run({
diff --git a/mathesar_ui/src/pages/import/preview/importPreviewPageUtils.ts b/mathesar_ui/src/pages/import/preview/importPreviewPageUtils.ts
index a42e218c26..41d1b9bd87 100644
--- a/mathesar_ui/src/pages/import/preview/importPreviewPageUtils.ts
+++ b/mathesar_ui/src/pages/import/preview/importPreviewPageUtils.ts
@@ -5,10 +5,7 @@ import { getCellCap } from '@mathesar/components/cell-fabric/utils';
 import type { Schema } from '@mathesar/models/Schema';
 import type { Table } from '@mathesar/models/Table';
 import { getAbstractTypeForDbType } from '@mathesar/stores/abstract-types';
-import type {
-  AbstractType,
-  AbstractTypesMap,
-} from '@mathesar/stores/abstract-types/types';
+import type { AbstractType } from '@mathesar/stores/abstract-types/types';
 import AsyncStore from '@mathesar/stores/AsyncStore';
 import { createTableFromDataFile, deleteTable } from '@mathesar/stores/tables';
 
@@ -27,12 +24,9 @@ export interface ProcessedPreviewColumn {
   cellComponentAndProps: ReturnType<typeof getCellCap>;
 }
 
-export function processColumns(
-  columns: Column[],
-  abstractTypeMap: AbstractTypesMap,
-): ProcessedPreviewColumn[] {
+export function processColumns(columns: Column[]): ProcessedPreviewColumn[] {
   return columns.map((column) => {
-    const abstractType = getAbstractTypeForDbType(column.type, abstractTypeMap);
+    const abstractType = getAbstractTypeForDbType(column.type);
     return {
       id: column.id,
       column,
diff --git a/mathesar_ui/src/pages/record/RecordPage.svelte b/mathesar_ui/src/pages/record/RecordPage.svelte
index 714fad2d07..fd119ebc5b 100644
--- a/mathesar_ui/src/pages/record/RecordPage.svelte
+++ b/mathesar_ui/src/pages/record/RecordPage.svelte
@@ -5,7 +5,6 @@
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import type { Table } from '@mathesar/models/Table';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import { TableStructure } from '@mathesar/stores/table-data';
   import { currentTable } from '@mathesar/stores/tables';
 
@@ -21,7 +20,6 @@
   $: tableStructure = new TableStructure({
     database: table.schema.database,
     table,
-    abstractTypesMap,
   });
   $: tableStructureIsLoading = tableStructure.isLoading;
   $: recordStoreFetchRequest = record.fetchRequest;
diff --git a/mathesar_ui/src/pages/record/TableWidget.svelte b/mathesar_ui/src/pages/record/TableWidget.svelte
index 4652dda3f8..cdc7157d53 100644
--- a/mathesar_ui/src/pages/record/TableWidget.svelte
+++ b/mathesar_ui/src/pages/record/TableWidget.svelte
@@ -5,7 +5,6 @@
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
   import TableName from '@mathesar/components/TableName.svelte';
   import type { Table } from '@mathesar/models/Table';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import {
     Meta,
     TabularData,
@@ -31,7 +30,6 @@
   $: tabularData = new TabularData({
     database: table.schema.database,
     table,
-    abstractTypesMap,
     meta,
     contextualFilters: new Map([[fkColumn.id, recordPk]]),
   });
diff --git a/mathesar_ui/src/pages/table/TablePage.svelte b/mathesar_ui/src/pages/table/TablePage.svelte
index 744a856c60..994116b4a0 100644
--- a/mathesar_ui/src/pages/table/TablePage.svelte
+++ b/mathesar_ui/src/pages/table/TablePage.svelte
@@ -8,7 +8,6 @@
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
   import type { Table } from '@mathesar/models/Table';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import {
     Meta,
     TabularData,
@@ -40,7 +39,6 @@
   $: tabularData = new TabularData({
     database: table.schema.database,
     table,
-    abstractTypesMap,
     meta,
     shareConsumer,
   });
diff --git a/mathesar_ui/src/routes/DataExplorerRoute.svelte b/mathesar_ui/src/routes/DataExplorerRoute.svelte
index 905defdf1a..25c4c579c1 100644
--- a/mathesar_ui/src/routes/DataExplorerRoute.svelte
+++ b/mathesar_ui/src/routes/DataExplorerRoute.svelte
@@ -18,7 +18,6 @@
     getDataExplorerPageUrl,
     getExplorationEditorPageUrl,
   } from '@mathesar/routes/urls';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import { getExploration } from '@mathesar/stores/queries';
   import {
     QueryManager,
@@ -40,7 +39,6 @@
     queryManager?.destroy();
     queryManager = new QueryManager({
       query: new QueryModel(queryInstance),
-      abstractTypeMap: abstractTypesMap,
       onSave: async (instance) => {
         try {
           const url = getExplorationEditorPageUrl(
diff --git a/mathesar_ui/src/stores/abstract-types/abstractTypeCategories.ts b/mathesar_ui/src/stores/abstract-types/abstractTypeCategories.ts
index a1d7c4d0e6..c52ec8fb48 100644
--- a/mathesar_ui/src/stores/abstract-types/abstractTypeCategories.ts
+++ b/mathesar_ui/src/stores/abstract-types/abstractTypeCategories.ts
@@ -1,11 +1,13 @@
 import type { DbType } from '@mathesar/AppTypes';
+import {
+  iconUiTypeArray,
+  iconUiTypeJsonArray,
+  iconUiTypeJsonObject,
+} from '@mathesar/icons';
 
 import { abstractTypeCategory } from './constants';
 import { DB_TYPES } from './dbTypes';
 import Boolean from './type-configs/boolean';
-import arrayFactory from './type-configs/comboTypes/arrayFactory';
-import jsonArrayFactory from './type-configs/comboTypes/jsonArrayFactory';
-import jsonObjectFactory from './type-configs/comboTypes/jsonObjectFactory';
 import Date from './type-configs/date';
 import DateTime from './type-configs/datetime';
 import Duration from './type-configs/duration';
@@ -24,7 +26,13 @@ import type {
   AbstractTypeResponse,
   AbstractTypesMap,
 } from './types';
-import { identifyAbstractTypeForDbType, unknownAbstractType } from './utils';
+
+const unknownAbstractType: AbstractType = {
+  name: 'Other',
+  identifier: 'other',
+  ...Fallback,
+  dbTypes: new Set([]),
+};
 
 /**
  * This is meant to be serializable and replaced by an API
@@ -43,6 +51,38 @@ const simpleAbstractTypeCategories: AbstractTypeConfigurationPartialMap = {
   [abstractTypeCategory.DateTime]: DateTime,
 };
 
+export const arrayFactory: AbstractTypeConfigurationFactory = () => ({
+  getIcon: (args) => {
+    const arrayIcon = { ...iconUiTypeArray, label: 'Array' };
+    const itemType = args?.typeOptions?.item_type ?? undefined;
+    if (!itemType) return arrayIcon;
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    const innerAbstractType = getAbstractTypeForDbType(itemType);
+    const innerIcon = innerAbstractType.getIcon();
+    const innerIcons = Array.isArray(innerIcon) ? innerIcon : [innerIcon];
+    return [arrayIcon, ...innerIcons];
+  },
+  cellInfo: {
+    type: 'array',
+  },
+});
+
+const jsonArrayFactory: AbstractTypeConfigurationFactory = () => ({
+  getIcon: () => iconUiTypeJsonArray,
+  defaultDbType: 'mathesar_types.mathesar_json_array',
+  cellInfo: {
+    type: 'string',
+  },
+});
+
+const jsonObjectFactory: AbstractTypeConfigurationFactory = () => ({
+  getIcon: () => iconUiTypeJsonObject,
+  defaultDbType: 'mathesar_types.mathesar_json_object',
+  cellInfo: {
+    type: 'string',
+  },
+});
+
 const comboAbstractTypeCategories: Partial<
   Record<AbstractTypeCategoryIdentifier, AbstractTypeConfigurationFactory>
 > = {
@@ -53,7 +93,7 @@ const comboAbstractTypeCategories: Partial<
 
 export const defaultDbType = DB_TYPES.TEXT;
 
-export function constructAbstractTypeMapFromResponse(
+function constructAbstractTypeMapFromResponse(
   abstractTypesResponse: AbstractTypeResponse[],
 ): AbstractTypesMap {
   const simpleAbstractTypesMap: Map<AbstractType['identifier'], AbstractType> =
@@ -96,17 +136,130 @@ export function constructAbstractTypeMapFromResponse(
     });
   });
 
-  const abstractTypesMap: AbstractTypesMap = new Map(simpleAbstractTypesMap);
+  const result: AbstractTypesMap = new Map(simpleAbstractTypesMap);
 
   complexAbstractTypeFactories.forEach((entry) => {
-    abstractTypesMap.set(entry.identifier, {
+    result.set(entry.identifier, {
       identifier: entry.identifier,
       name: entry.name,
       dbTypes: entry.dbTypes,
-      ...entry.factory(simpleAbstractTypesMap),
+      ...entry.factory(),
     });
   });
-  return abstractTypesMap;
+  return result;
+}
+
+/**
+ * This is called "Response" because we originally designed the types
+ * architecture to be client-server oriented. But later we decided to hard-code
+ * this data in the front end.
+ */
+const typesResponse: AbstractTypeResponse[] = [
+  {
+    identifier: 'boolean',
+    name: 'Boolean',
+    db_types: [DB_TYPES.BOOLEAN],
+  },
+  {
+    identifier: 'date',
+    name: 'Date',
+    db_types: [DB_TYPES.DATE],
+  },
+  {
+    identifier: 'time',
+    name: 'Time',
+    db_types: [DB_TYPES.TIME_WITH_TZ, DB_TYPES.TIME_WITHOUT_TZ],
+  },
+  {
+    identifier: 'datetime',
+    name: 'Date & Time',
+    db_types: [DB_TYPES.TIMESTAMP_WITH_TZ, DB_TYPES.TIMESTAMP_WITHOUT_TZ],
+  },
+  {
+    identifier: 'duration',
+    name: 'Duration',
+    db_types: [DB_TYPES.INTERVAL],
+  },
+  {
+    identifier: 'email',
+    name: 'Email',
+    db_types: [DB_TYPES.MSAR__EMAIL],
+  },
+  {
+    identifier: 'money',
+    name: 'Money',
+    db_types: [
+      DB_TYPES.MONEY,
+      DB_TYPES.MSAR__MATHESAR_MONEY,
+      DB_TYPES.MSAR__MULTICURRENCY_MONEY,
+    ],
+  },
+  {
+    identifier: 'number',
+    name: 'Number',
+    db_types: [
+      DB_TYPES.DOUBLE_PRECISION,
+      DB_TYPES.REAL,
+      DB_TYPES.SMALLINT,
+      DB_TYPES.BIGINT,
+      DB_TYPES.INTEGER,
+      DB_TYPES.NUMERIC,
+    ],
+  },
+  {
+    identifier: 'text',
+    name: 'Text',
+    db_types: [
+      DB_TYPES.CHAR,
+      DB_TYPES.CHARACTER_VARYING,
+      DB_TYPES.CHARACTER,
+      DB_TYPES.NAME,
+      DB_TYPES.TEXT,
+    ],
+  },
+  {
+    identifier: 'uri',
+    name: 'URI',
+    db_types: [DB_TYPES.MSAR__URI],
+  },
+  {
+    identifier: 'jsonlist',
+    name: 'JSON List',
+    db_types: [DB_TYPES.MSAR__MATHESAR_JSON_ARRAY],
+  },
+  {
+    identifier: 'map',
+    name: 'Map',
+    db_types: [DB_TYPES.MSAR__MATHESAR_JSON_OBJECT],
+  },
+  {
+    identifier: 'array',
+    name: 'Array',
+    db_types: [DB_TYPES.ARRAY],
+  },
+];
+
+const abstractTypesMap = constructAbstractTypeMapFromResponse(typesResponse);
+
+function identifyAbstractTypeForDbType(
+  dbType: DbType,
+): AbstractType | undefined {
+  let abstractTypeOfDbType;
+  for (const [, abstractType] of abstractTypesMap) {
+    if (abstractType.dbTypes.has(dbType)) {
+      abstractTypeOfDbType = abstractType;
+      break;
+    }
+  }
+  return abstractTypeOfDbType;
+}
+
+export function getAbstractTypeForDbType(dbType: DbType): AbstractType {
+  let abstractTypeOfDbType = identifyAbstractTypeForDbType(dbType);
+  if (!abstractTypeOfDbType) {
+    abstractTypeOfDbType = unknownAbstractType;
+  }
+  return abstractTypeOfDbType;
 }
 
 /**
@@ -119,23 +272,16 @@ export function constructAbstractTypeMapFromResponse(
 export function getAllowedAbstractTypesForDbTypeAndItsTargetTypes(
   dbType: DbType,
   targetDbTypes: DbType[],
-  abstractTypesMap: AbstractTypesMap,
 ): AbstractType[] {
   const abstractTypeSet: Set<AbstractType> = new Set();
 
-  const abstractTypeOfDbType = identifyAbstractTypeForDbType(
-    dbType,
-    abstractTypesMap,
-  );
+  const abstractTypeOfDbType = identifyAbstractTypeForDbType(dbType);
   if (abstractTypeOfDbType) {
     abstractTypeSet.add(abstractTypeOfDbType);
   }
 
   targetDbTypes.forEach((targetDbType) => {
-    const abstractType = identifyAbstractTypeForDbType(
-      targetDbType,
-      abstractTypesMap,
-    );
+    const abstractType = identifyAbstractTypeForDbType(targetDbType);
     if (abstractType) {
       abstractTypeSet.add(abstractType);
     }
@@ -150,9 +296,7 @@ export function getAllowedAbstractTypesForDbTypeAndItsTargetTypes(
   return abstractTypeList;
 }
 
-export function getAllowedAbstractTypesForNewColumn(
-  abstractTypesMap: AbstractTypesMap,
-) {
+export function getAllowedAbstractTypesForNewColumn() {
   return [...abstractTypesMap.values()]
     .filter((type) => !comboAbstractTypeCategories[type.identifier])
     .sort((a, b) => a.name.localeCompare(b.name));
diff --git a/mathesar_ui/src/stores/abstract-types/abstractTypesMap.ts b/mathesar_ui/src/stores/abstract-types/abstractTypesMap.ts
deleted file mode 100644
index e9130bbc2c..0000000000
--- a/mathesar_ui/src/stores/abstract-types/abstractTypesMap.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { constructAbstractTypeMapFromResponse } from './abstractTypeCategories';
-import { DB_TYPES } from './dbTypes';
-import type { AbstractTypeResponse } from './types';
-
-/**
- * This is called "Response" because we originally designed the types
- * architecture to be client-server oriented. But later we decided to hard-code
- * this data in the front end.
- */
-const typesResponse: AbstractTypeResponse[] = [
-  {
-    identifier: 'boolean',
-    name: 'Boolean',
-    db_types: [DB_TYPES.BOOLEAN],
-  },
-  {
-    identifier: 'date',
-    name: 'Date',
-    db_types: [DB_TYPES.DATE],
-  },
-  {
-    identifier: 'time',
-    name: 'Time',
-    db_types: [DB_TYPES.TIME_WITH_TZ, DB_TYPES.TIME_WITHOUT_TZ],
-  },
-  {
-    identifier: 'datetime',
-    name: 'Date & Time',
-    db_types: [DB_TYPES.TIMESTAMP_WITH_TZ, DB_TYPES.TIMESTAMP_WITHOUT_TZ],
-  },
-  {
-    identifier: 'duration',
-    name: 'Duration',
-    db_types: [DB_TYPES.INTERVAL],
-  },
-  {
-    identifier: 'email',
-    name: 'Email',
-    db_types: [DB_TYPES.MSAR__EMAIL],
-  },
-  {
-    identifier: 'money',
-    name: 'Money',
-    db_types: [
-      DB_TYPES.MONEY,
-      DB_TYPES.MSAR__MATHESAR_MONEY,
-      DB_TYPES.MSAR__MULTICURRENCY_MONEY,
-    ],
-  },
-  {
-    identifier: 'number',
-    name: 'Number',
-    db_types: [
-      DB_TYPES.DOUBLE_PRECISION,
-      DB_TYPES.REAL,
-      DB_TYPES.SMALLINT,
-      DB_TYPES.BIGINT,
-      DB_TYPES.INTEGER,
-      DB_TYPES.NUMERIC,
-    ],
-  },
-  {
-    identifier: 'text',
-    name: 'Text',
-    db_types: [
-      DB_TYPES.CHAR,
-      DB_TYPES.CHARACTER_VARYING,
-      DB_TYPES.CHARACTER,
-      DB_TYPES.NAME,
-      DB_TYPES.TEXT,
-    ],
-  },
-  {
-    identifier: 'uri',
-    name: 'URI',
-    db_types: [DB_TYPES.MSAR__URI],
-  },
-  {
-    identifier: 'jsonlist',
-    name: 'JSON List',
-    db_types: [DB_TYPES.MSAR__MATHESAR_JSON_ARRAY],
-  },
-  {
-    identifier: 'map',
-    name: 'Map',
-    db_types: [DB_TYPES.MSAR__MATHESAR_JSON_OBJECT],
-  },
-  {
-    identifier: 'array',
-    name: 'Array',
-    db_types: [DB_TYPES.ARRAY],
-  },
-];
-
-export const abstractTypesMap =
-  constructAbstractTypeMapFromResponse(typesResponse);
diff --git a/mathesar_ui/src/stores/abstract-types/index.ts b/mathesar_ui/src/stores/abstract-types/index.ts
index 4cc26e1b2b..42b8427f0a 100644
--- a/mathesar_ui/src/stores/abstract-types/index.ts
+++ b/mathesar_ui/src/stores/abstract-types/index.ts
@@ -3,9 +3,8 @@ export {
   getAllowedAbstractTypesForNewColumn,
   defaultDbType,
   getDefaultDbTypeOfAbstractType,
+  getAbstractTypeForDbType,
 } from './abstractTypeCategories';
-export { getAbstractTypeForDbType } from './utils';
-export { abstractTypesMap } from './abstractTypesMap';
 export {
   filterDefinitionMap,
   getEqualityFiltersForAbstractType,
diff --git a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/arrayFactory.ts b/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/arrayFactory.ts
deleted file mode 100644
index 6f1ef295de..0000000000
--- a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/arrayFactory.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { iconUiTypeArray } from '@mathesar/icons';
-
-import type { AbstractTypeConfigurationFactory } from '../../types';
-import { getAbstractTypeForDbType } from '../../utils';
-
-const arrayFactory: AbstractTypeConfigurationFactory = (map) => ({
-  getIcon: (args) => {
-    const arrayIcon = { ...iconUiTypeArray, label: 'Array' };
-    const itemType = args?.typeOptions?.item_type ?? undefined;
-    if (!itemType) return arrayIcon;
-    const innerAbstractType = getAbstractTypeForDbType(itemType, map);
-    const innerIcon = innerAbstractType.getIcon();
-    const innerIcons = Array.isArray(innerIcon) ? innerIcon : [innerIcon];
-    return [arrayIcon, ...innerIcons];
-  },
-  cellInfo: {
-    type: 'array',
-  },
-});
-
-export default arrayFactory;
diff --git a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonArrayFactory.ts b/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonArrayFactory.ts
deleted file mode 100644
index ad7652078a..0000000000
--- a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonArrayFactory.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { iconUiTypeJsonArray } from '@mathesar/icons';
-
-import type { AbstractTypeConfigurationFactory } from '../../types';
-
-const jsonArrayFactory: AbstractTypeConfigurationFactory = () => ({
-  getIcon: () => iconUiTypeJsonArray,
-  defaultDbType: 'mathesar_types.mathesar_json_array',
-  cellInfo: {
-    type: 'string',
-  },
-});
-
-export default jsonArrayFactory;
diff --git a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonObjectFactory.ts b/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonObjectFactory.ts
deleted file mode 100644
index e17cbfa057..0000000000
--- a/mathesar_ui/src/stores/abstract-types/type-configs/comboTypes/jsonObjectFactory.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { iconUiTypeJsonObject } from '@mathesar/icons';
-
-import type { AbstractTypeConfigurationFactory } from '../../types';
-
-const jsonObjectFactory: AbstractTypeConfigurationFactory = () => ({
-  getIcon: () => iconUiTypeJsonObject,
-  defaultDbType: 'mathesar_types.mathesar_json_object',
-  cellInfo: {
-    type: 'string',
-  },
-});
-
-export default jsonObjectFactory;
diff --git a/mathesar_ui/src/stores/abstract-types/types.ts b/mathesar_ui/src/stores/abstract-types/types.ts
index 04c32d999e..f8ecdcf438 100644
--- a/mathesar_ui/src/stores/abstract-types/types.ts
+++ b/mathesar_ui/src/stores/abstract-types/types.ts
@@ -85,9 +85,7 @@ export interface AbstractType
 
 export type AbstractTypesMap = Map<AbstractType['identifier'], AbstractType>;
 
-export type AbstractTypeConfigurationFactory = (
-  map: AbstractTypesMap,
-) => AbstractTypeConfiguration;
+export type AbstractTypeConfigurationFactory = () => AbstractTypeConfiguration;
 
 /**
  * These filter ids represent the filter functions used for the _old_ filtering
diff --git a/mathesar_ui/src/stores/abstract-types/utils.ts b/mathesar_ui/src/stores/abstract-types/utils.ts
deleted file mode 100644
index 09ef40fdd1..0000000000
--- a/mathesar_ui/src/stores/abstract-types/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { DbType } from '@mathesar/AppTypes';
-
-import Fallback from './type-configs/fallback';
-import type { AbstractType, AbstractTypesMap } from './types';
-
-export const unknownAbstractType: AbstractType = {
-  name: 'Other',
-  identifier: 'other',
-  ...Fallback,
-  dbTypes: new Set([]),
-};
-
-export function identifyAbstractTypeForDbType(
-  dbType: DbType,
-  abstractTypesMap: AbstractTypesMap,
-): AbstractType | undefined {
-  let abstractTypeOfDbType;
-  for (const [, abstractType] of abstractTypesMap) {
-    if (abstractType.dbTypes.has(dbType)) {
-      abstractTypeOfDbType = abstractType;
-      break;
-    }
-  }
-  return abstractTypeOfDbType;
-}
-
-export function getAbstractTypeForDbType(
-  dbType: DbType,
-  abstractTypesMap: AbstractTypesMap,
-): AbstractType {
-  let abstractTypeOfDbType = identifyAbstractTypeForDbType(
-    dbType,
-    abstractTypesMap,
-  );
-  if (!abstractTypeOfDbType) {
-    abstractTypeOfDbType = unknownAbstractType;
-  }
-  return abstractTypeOfDbType;
-}
diff --git a/mathesar_ui/src/stores/table-data/TableStructure.ts b/mathesar_ui/src/stores/table-data/TableStructure.ts
index 347bd8ec54..f4539651a4 100644
--- a/mathesar_ui/src/stores/table-data/TableStructure.ts
+++ b/mathesar_ui/src/stores/table-data/TableStructure.ts
@@ -5,7 +5,6 @@ import type { Column } from '@mathesar/api/rpc/columns';
 import type { DBObjectEntry } from '@mathesar/AppTypes';
 import type { Database } from '@mathesar/models/Database';
 import type { Table } from '@mathesar/models/Table';
-import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 
 import { ColumnsDataStore } from './columns';
 import { type ConstraintsData, ConstraintsDataStore } from './constraints';
@@ -14,7 +13,6 @@ import { type ProcessedColumnsStore, processColumn } from './processedColumns';
 export interface TableStructureProps {
   database: Pick<Database, 'id'>;
   table: Pick<Table, 'oid'>;
-  abstractTypesMap: AbstractTypesMap;
 }
 
 export class TableStructure {
@@ -43,7 +41,6 @@ export class TableStructure {
               column,
               columnIndex,
               constraints: constraintsData.constraints,
-              abstractTypeMap: props.abstractTypesMap,
             }),
           ]),
         ),
@@ -57,6 +54,7 @@ export class TableStructure {
   }
 
   refresh(): Promise<[Column[] | undefined, ConstraintsData | undefined]> {
+    // TODO batch these request via RPC batching
     return Promise.all([
       this.columnsDataStore.fetch(),
       this.constraintsDataStore.fetch(),
diff --git a/mathesar_ui/src/stores/table-data/processedColumns.ts b/mathesar_ui/src/stores/table-data/processedColumns.ts
index bc473509bc..e797cf8ae0 100644
--- a/mathesar_ui/src/stores/table-data/processedColumns.ts
+++ b/mathesar_ui/src/stores/table-data/processedColumns.ts
@@ -19,7 +19,6 @@ import {
 import type {
   AbstractType,
   AbstractTypePreprocFunctionDefinition,
-  AbstractTypesMap,
 } from '@mathesar/stores/abstract-types/types';
 import type { ComponentAndProps } from '@mathesar-component-library/types';
 
@@ -59,14 +58,12 @@ export function processColumn({
   column,
   columnIndex,
   constraints,
-  abstractTypeMap,
   hasEnhancedPrimaryKeyCell,
 }: {
   tableId: Table['oid'];
   column: Column;
   columnIndex: number;
   constraints: Constraint[];
-  abstractTypeMap: AbstractTypesMap;
   /**
    * - When true, the primary key cells will be rendered via the PrimaryKeyCell
    *   component, which provides additional functionality (e.g. hyperlink to
@@ -76,7 +73,7 @@ export function processColumn({
    */
   hasEnhancedPrimaryKeyCell?: boolean;
 }): ProcessedColumn {
-  const abstractType = getAbstractTypeForDbType(column.type, abstractTypeMap);
+  const abstractType = getAbstractTypeForDbType(column.type);
   const relevantConstraints = constraints.filter((c) =>
     c.columns.includes(column.id),
   );
diff --git a/mathesar_ui/src/stores/table-data/tabularData.ts b/mathesar_ui/src/stores/table-data/tabularData.ts
index e771a77efd..0fb4252316 100644
--- a/mathesar_ui/src/stores/table-data/tabularData.ts
+++ b/mathesar_ui/src/stores/table-data/tabularData.ts
@@ -3,14 +3,22 @@ import { type Readable, type Writable, derived, writable } from 'svelte/store';
 
 import { States } from '@mathesar/api/rest/utils/requestUtils';
 import type { Column } from '@mathesar/api/rpc/columns';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type { SelectedCellData } from '@mathesar/components/sheet/selection';
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
 import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
 import type { Database } from '@mathesar/models/Database';
 import type { Table } from '@mathesar/models/Table';
-import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
+import type {
+  ProcessedColumns,
+  RecordRow,
+  RecordSummariesForSheet,
+} from '@mathesar/stores/table-data';
 import type { ShareConsumer } from '@mathesar/utils/shares';
 import { orderProcessedColumns } from '@mathesar/utils/tables';
+import { defined } from '@mathesar-component-library';
 
 import { ColumnsDataStore } from './columns';
 import { type ConstraintsData, ConstraintsDataStore } from './constraints';
@@ -19,10 +27,40 @@ import { Meta } from './meta';
 import { type ProcessedColumnsStore, processColumn } from './processedColumns';
 import { RecordsData, type TableRecordsData } from './records';
 
+function getSelectedCellData(
+  selection: SheetSelection,
+  selectableRowsMap: Map<string, RecordRow>,
+  processedColumns: ProcessedColumns,
+  linkedRecordSummaries: RecordSummariesForSheet,
+): SelectedCellData {
+  const { activeCellId } = selection;
+  const selectionData = {
+    cellCount: selection.cellIds.size,
+  };
+  if (activeCellId === undefined) {
+    return { selectionData };
+  }
+  const { rowId, columnId } = parseCellId(activeCellId);
+  const row = selectableRowsMap.get(rowId);
+  const value = row?.record[columnId];
+  const column = processedColumns.get(Number(columnId));
+  const recordSummary = defined(
+    value,
+    (v) => linkedRecordSummaries.get(columnId)?.get(String(v)),
+  );
+  return {
+    activeCellData: column && {
+      column,
+      value,
+      recordSummary,
+    },
+    selectionData,
+  };
+}
+
 export interface TabularDataProps {
   database: Pick<Database, 'id'>;
   table: Table;
-  abstractTypesMap: AbstractTypesMap;
   meta?: Meta;
   shareConsumer?: ShareConsumer;
   /**
@@ -67,6 +105,8 @@ export class TabularData {
 
   selection: SheetSelectionStore;
 
+  selectedCellData: Readable<SelectedCellData>;
+
   shareConsumer?: ShareConsumer;
 
   constructor(props: TabularDataProps) {
@@ -116,7 +156,6 @@ export class TabularData {
                 column,
                 columnIndex,
                 constraints: constraintsData.constraints,
-                abstractTypeMap: props.abstractTypesMap,
                 hasEnhancedPrimaryKeyCell: props.hasEnhancedPrimaryKeyCell,
               }),
             ]),
@@ -152,6 +191,16 @@ export class TabularData {
         recordsDataState === States.Loading,
     );
 
+    this.selectedCellData = derived(
+      [
+        this.selection,
+        this.recordsData.selectableRowsMap,
+        this.processedColumns,
+        this.recordsData.linkedRecordSummaries,
+      ],
+      (args) => getSelectedCellData(...args),
+    );
+
     this.columnsDataStore.on('columnRenamed', async () => {
       await this.refresh();
     });
diff --git a/mathesar_ui/src/systems/data-explorer/QueryManager.ts b/mathesar_ui/src/systems/data-explorer/QueryManager.ts
index a26e7e0da0..b0d818a216 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryManager.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryManager.ts
@@ -8,7 +8,6 @@ import {
   explorationIsAddable,
   explorationIsSaved,
 } from '@mathesar/api/rpc/explorations';
-import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { currentDatabase } from '@mathesar/stores/databases';
 import { addExploration, replaceExploration } from '@mathesar/stores/queries';
 import CacheManager from '@mathesar/utils/CacheManager';
@@ -70,16 +69,13 @@ export default class QueryManager extends QueryRunner {
 
   constructor({
     query,
-    abstractTypeMap,
     onSave,
   }: {
     query: QueryModel;
-    abstractTypeMap: AbstractTypesMap;
     onSave?: (instance: SavedExploration) => unknown;
   }) {
     super({
       query,
-      abstractTypeMap,
       onRunWithObject: (response: ExplorationResult) => {
         this.checkAndUpdateSummarizationAfterRun(
           new QueryModel({
diff --git a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
index 74e629930b..44b5393088 100644
--- a/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
+++ b/mathesar_ui/src/systems/data-explorer/QueryRunner.ts
@@ -17,7 +17,6 @@ import type {
 import Plane from '@mathesar/components/sheet/selection/Plane';
 import Series from '@mathesar/components/sheet/selection/Series';
 import SheetSelectionStore from '@mathesar/components/sheet/selection/SheetSelectionStore';
-import type { AbstractTypesMap } from '@mathesar/stores/abstract-types/types';
 import { runSavedExploration } from '@mathesar/stores/queries';
 import Pagination from '@mathesar/utils/Pagination';
 import type { ShareConsumer } from '@mathesar/utils/shares';
@@ -56,8 +55,6 @@ type QueryRunMode = 'queryId' | 'queryObject';
 export class QueryRunner {
   query: Writable<QueryModel>;
 
-  abstractTypeMap: AbstractTypesMap;
-
   runState: Writable<RequestStatus<string[] | ApiMultiError> | undefined> =
     writable();
 
@@ -92,20 +89,17 @@ export class QueryRunner {
 
   constructor({
     query,
-    abstractTypeMap,
     runMode,
     onRunWithObject,
     onRunWithId,
     shareConsumer,
   }: {
     query: QueryModel;
-    abstractTypeMap: AbstractTypesMap;
     runMode?: QueryRunMode;
     onRunWithObject?: (instance: ExplorationResult) => unknown;
     onRunWithId?: (instance: ExplorationResult) => unknown;
     shareConsumer?: ShareConsumer;
   }) {
-    this.abstractTypeMap = abstractTypeMap;
     this.runMode = runMode ?? 'queryObject';
     this.query = writable(query);
     this.onRunWithObjectCallback = onRunWithObject;
@@ -146,7 +140,6 @@ export class QueryRunner {
         inputColumnInformationMap ??
         (new Map() as InputColumnsStoreSubstance['inputColumnInformationMap']),
       queryModel: this.getQueryModel(),
-      abstractTypeMap: this.abstractTypeMap,
     });
     this.columnsMetaData.set(speculatedMetaData);
     this.processedColumns.set(
@@ -204,10 +197,7 @@ export class QueryRunner {
         triggerCallback = () => this.onRunWithIdCallback?.(response);
       }
 
-      const columnsMetaData = processColumnMetaData(
-        response.column_metadata,
-        this.abstractTypeMap,
-      );
+      const columnsMetaData = processColumnMetaData(response.column_metadata);
       this.columnsMetaData.set(columnsMetaData);
       this.processedColumns.set(
         new ImmutableMap(
diff --git a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
index 13033451c4..380e58997a 100644
--- a/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
+++ b/mathesar_ui/src/systems/data-explorer/exploration-inspector/cell/cellTabUtils.ts
@@ -1,5 +1,6 @@
-import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
+import type { ResultValue } from '@mathesar/api/rpc/records';
 import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type { SelectedCellData } from '@mathesar/components/sheet/selection';
 import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
 
 import { type QueryRow, getRowSelectionId } from '../../QueryRunner';
@@ -19,7 +20,7 @@ export function getSelectedCellData(
   // rows in a map for faster lookup.
   const row = rows.find((r) => getRowSelectionId(r) === rowId);
   if (!row) return fallback;
-  const value = row.record[columnId];
+  const value = row.record[columnId] as ResultValue | undefined;
   const column = processedColumns.get(columnId);
   const activeCellData = column && { column, value };
   return { activeCellData, selectionData };
diff --git a/mathesar_ui/src/systems/data-explorer/utils.ts b/mathesar_ui/src/systems/data-explorer/utils.ts
index fdc379326f..cb2c07c862 100644
--- a/mathesar_ui/src/systems/data-explorer/utils.ts
+++ b/mathesar_ui/src/systems/data-explorer/utils.ts
@@ -28,7 +28,6 @@ import type {
   AbstractType,
   AbstractTypePreprocFunctionDefinition,
   AbstractTypeSummarizationFunction,
-  AbstractTypesMap,
 } from '@mathesar/stores/abstract-types/types';
 import { ImmutableMap } from '@mathesar-component-library';
 import type {
@@ -335,7 +334,6 @@ function processColumn(
   columnInfo: Pick<QueryColumnMetaData, 'alias'> &
     ProcessedQueryResultColumnSource &
     Partial<QueryColumnMetaData>,
-  abstractTypeMap: AbstractTypesMap,
 ): ProcessedQueryResultColumn {
   const column: QueryResultColumn = {
     alias: columnInfo.alias,
@@ -345,7 +343,7 @@ function processColumn(
     metadata: columnInfo.metadata ?? null,
   };
 
-  const abstractType = getAbstractTypeForDbType(column.type, abstractTypeMap);
+  const abstractType = getAbstractTypeForDbType(column.type);
   const source: ProcessedQueryResultColumnSource = columnInfo.is_initial_column
     ? {
         is_initial_column: true,
@@ -389,12 +387,11 @@ function processColumn(
 
 export function processColumnMetaData(
   columnMetaData: ExplorationResult['column_metadata'],
-  abstractTypeMap: AbstractTypesMap,
 ): ProcessedQueryResultColumnMap {
   return new ImmutableMap(
     Object.entries(columnMetaData).map(([alias, columnMeta]) => [
       alias,
-      processColumn(columnMeta, abstractTypeMap),
+      processColumn(columnMeta),
     ]),
   );
 }
@@ -403,12 +400,10 @@ export function speculateColumnMetaData({
   currentProcessedColumnsMetaData,
   inputColumnInformationMap,
   queryModel,
-  abstractTypeMap,
 }: {
   currentProcessedColumnsMetaData: ProcessedQueryResultColumnMap;
   inputColumnInformationMap: InputColumnsStoreSubstance['inputColumnInformationMap'];
   queryModel: QueryModel;
-  abstractTypeMap: AbstractTypesMap;
 }): ProcessedQueryResultColumnMap {
   const initialColumns = queryModel.initial_columns;
   const summarizationTransforms = queryModel.getSummarizationTransforms();
@@ -443,17 +438,14 @@ export function speculateColumnMetaData({
       );
       updatedColumnsMetaData = updatedColumnsMetaData.with(
         initialColumn.alias,
-        processColumn(
-          {
-            alias: initialColumn.alias,
-            type: inputColumnInformation?.type,
-            is_initial_column: true,
-            input_column_name: inputColumnInformation?.name,
-            input_table_name: inputColumnInformation?.tableName,
-            input_table_id: inputColumnInformation?.tableId,
-          },
-          abstractTypeMap,
-        ),
+        processColumn({
+          alias: initialColumn.alias,
+          type: inputColumnInformation?.type,
+          is_initial_column: true,
+          input_column_name: inputColumnInformation?.name,
+          input_table_name: inputColumnInformation?.tableName,
+          input_table_id: inputColumnInformation?.tableId,
+        }),
       );
     });
   }
@@ -465,18 +457,15 @@ export function speculateColumnMetaData({
             ?.column;
           updatedColumnsMetaData = updatedColumnsMetaData.with(
             group.outputAlias,
-            processColumn(
-              {
-                alias: group.outputAlias,
-                display_name: null,
-                type: inputColumn?.type ?? 'unknown',
-                type_options: inputColumn?.type_options ?? null,
-                metadata: inputColumn?.metadata ?? null,
-                is_initial_column: false,
-                input_alias: group.inputAlias,
-              },
-              abstractTypeMap,
-            ),
+            processColumn({
+              alias: group.outputAlias,
+              display_name: null,
+              type: inputColumn?.type ?? 'unknown',
+              type_options: inputColumn?.type_options ?? null,
+              metadata: inputColumn?.metadata ?? null,
+              is_initial_column: false,
+              input_alias: group.inputAlias,
+            }),
           );
         }
       });
@@ -484,33 +473,30 @@ export function speculateColumnMetaData({
         if (!updatedColumnsMetaData.has(aggregation.outputAlias)) {
           updatedColumnsMetaData = updatedColumnsMetaData.with(
             aggregation.outputAlias,
-            processColumn(
-              {
-                alias: aggregation.outputAlias,
-                type:
-                  aggregation.function === 'distinct_aggregate_to_array'
-                    ? '_array'
-                    : 'integer',
-                type_options:
-                  aggregation.function === 'distinct_aggregate_to_array'
-                    ? {
-                        // TODO_BETA: Ask Pavish.
-                        //
-                        // `Column['type_options']` was previously typed loosely
-                        // as `Record<string, unknown> | null`. Now it's more
-                        // strict and it doesn't have a `type` property.
-                        //
-                        // type:
-                        //   updatedColumnsMetaData.get(aggregation.inputAlias)
-                        //     ?.column.type ?? 'unknown',
-                      }
-                    : null,
-                metadata: null,
-                is_initial_column: false,
-                input_alias: aggregation.inputAlias,
-              },
-              abstractTypeMap,
-            ),
+            processColumn({
+              alias: aggregation.outputAlias,
+              type:
+                aggregation.function === 'distinct_aggregate_to_array'
+                  ? '_array'
+                  : 'integer',
+              type_options:
+                aggregation.function === 'distinct_aggregate_to_array'
+                  ? {
+                      // TODO_BETA: Ask Pavish.
+                      //
+                      // `Column['type_options']` was previously typed loosely
+                      // as `Record<string, unknown> | null`. Now it's more
+                      // strict and it doesn't have a `type` property.
+                      //
+                      // type:
+                      //   updatedColumnsMetaData.get(aggregation.inputAlias)
+                      //     ?.column.type ?? 'unknown',
+                    }
+                  : null,
+              metadata: null,
+              is_initial_column: false,
+              input_alias: aggregation.inputAlias,
+            }),
           );
         }
       });
@@ -545,7 +531,7 @@ export function getProcessedOutputColumns(
       alias,
       {
         ...(processedColumnMetaData.get(alias) ??
-          processColumn({ alias, is_initial_column: true }, new Map())),
+          processColumn({ alias, is_initial_column: true })),
         columnIndex: index,
       },
     ]),
diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorWindow.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorWindow.svelte
index f235411e61..063684bf9e 100644
--- a/mathesar_ui/src/systems/record-selector/RecordSelectorWindow.svelte
+++ b/mathesar_ui/src/systems/record-selector/RecordSelectorWindow.svelte
@@ -3,7 +3,6 @@
 
   import { RichText } from '@mathesar/components/rich-text';
   import TableName from '@mathesar/components/TableName.svelte';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import { Meta, TabularData } from '@mathesar/stores/table-data';
   import { currentTablesMap } from '@mathesar/stores/tables';
   import Pagination from '@mathesar/utils/Pagination';
@@ -35,7 +34,6 @@
     $tableId && table
       ? new TabularData({
           database: table.schema.database,
-          abstractTypesMap,
           meta: new Meta({ pagination: new Pagination({ size: 10 }) }),
           hasEnhancedPrimaryKeyCell: false,
           table,
diff --git a/mathesar_ui/src/systems/table-view/constraints/NewFkConstraint.svelte b/mathesar_ui/src/systems/table-view/constraints/NewFkConstraint.svelte
index 8ed7490082..1741c7cd14 100644
--- a/mathesar_ui/src/systems/table-view/constraints/NewFkConstraint.svelte
+++ b/mathesar_ui/src/systems/table-view/constraints/NewFkConstraint.svelte
@@ -15,7 +15,6 @@
   import SelectTable from '@mathesar/components/SelectTable.svelte';
   import TableName from '@mathesar/components/TableName.svelte';
   import type { Table } from '@mathesar/models/Table';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
   import {
     type ProcessedColumn,
     TableStructure,
@@ -80,7 +79,6 @@
     ? new TableStructure({
         database: $targetTable.schema.database,
         table: $targetTable,
-        abstractTypesMap,
       })
     : undefined;
   $: targetTableStructureIsLoading = ensureReadable(
diff --git a/mathesar_ui/src/systems/table-view/header/new-column-cell/ColumnTypeSelector.svelte b/mathesar_ui/src/systems/table-view/header/new-column-cell/ColumnTypeSelector.svelte
index c99c0cc021..57f6f9a924 100644
--- a/mathesar_ui/src/systems/table-view/header/new-column-cell/ColumnTypeSelector.svelte
+++ b/mathesar_ui/src/systems/table-view/header/new-column-cell/ColumnTypeSelector.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import NameWithIcon from '@mathesar/components/NameWithIcon.svelte';
   import {
-    abstractTypesMap,
     defaultDbType,
     getAbstractTypeForDbType,
     getAllowedAbstractTypesForNewColumn,
@@ -12,8 +11,8 @@
   export let value = defaultDbType;
   export let disabled = false;
 
-  $: abstractType = getAbstractTypeForDbType(value, abstractTypesMap);
-  $: options = getAllowedAbstractTypesForNewColumn(abstractTypesMap);
+  $: abstractType = getAbstractTypeForDbType(value);
+  $: options = getAllowedAbstractTypesForNewColumn();
 </script>
 
 <SelectionList
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
index 6fb8d37495..c2b75e49d5 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/cell/CellMode.svelte
@@ -2,18 +2,9 @@
   import CellInspector from '@mathesar/components/inspector/cell/CellInspector.svelte';
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
 
-  import { getSelectedCellData } from './cellModeUtils';
-
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({ selection, recordsData, processedColumns } = $tabularData);
-  $: ({ linkedRecordSummaries, selectableRowsMap } = recordsData);
-  $: selectedCellData = getSelectedCellData(
-    $selection,
-    $selectableRowsMap,
-    $processedColumns,
-    $linkedRecordSummaries,
-  );
+  $: ({ selectedCellData } = $tabularData);
 </script>
 
-<CellInspector {selectedCellData} />
+<CellInspector selectedCellData={$selectedCellData} />
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts b/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
deleted file mode 100644
index ab2dc77173..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/cell/cellModeUtils.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { SelectedCellData } from '@mathesar/components/inspector/cell/cellInspectorUtils';
-import { parseCellId } from '@mathesar/components/sheet/cellIds';
-import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
-import type {
-  ProcessedColumns,
-  RecordRow,
-  RecordSummariesForSheet,
-} from '@mathesar/stores/table-data';
-import { defined } from '@mathesar-component-library';
-
-export function getSelectedCellData(
-  selection: SheetSelection,
-  selectableRowsMap: Map<string, RecordRow>,
-  processedColumns: ProcessedColumns,
-  linkedRecordSummaries: RecordSummariesForSheet,
-): SelectedCellData {
-  const { activeCellId } = selection;
-  const selectionData = {
-    cellCount: selection.cellIds.size,
-  };
-  if (activeCellId === undefined) {
-    return { selectionData };
-  }
-  const { rowId, columnId } = parseCellId(activeCellId);
-  const row = selectableRowsMap.get(rowId);
-  const value = row?.record[columnId];
-  const column = processedColumns.get(Number(columnId));
-  const recordSummary = defined(
-    value,
-    (v) => linkedRecordSummaries.get(columnId)?.get(String(v)),
-  );
-  return {
-    activeCellData: column && {
-      column,
-      value,
-      recordSummary,
-    },
-    selectionData,
-  };
-}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
index 528dbef05c..91a33aff98 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/column/ColumnMode.svelte
@@ -12,7 +12,7 @@
   import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
   import { currentTablesData } from '@mathesar/stores/tables';
   import FkRecordSummaryConfig from '@mathesar/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte';
-  import { Collapsible } from '@mathesar-component-library';
+  import { Collapsible, defined } from '@mathesar-component-library';
 
   import CollapsibleHeader from '../CollapsibleHeader.svelte';
 
@@ -26,7 +26,7 @@
 
   const tabularData = getTabularDataStoreFromContext();
 
-  $: ({ table, processedColumns, selection } = $tabularData);
+  $: ({ table, processedColumns, selection, selectedCellData } = $tabularData);
   $: ({ currentRoleOwns } = table.currentAccess);
   $: selectedColumns = (() => {
     const ids = $selection.columnIds;
@@ -50,6 +50,9 @@
   })();
   /** When only one column is selected */
   $: column = selectedColumns.length === 1 ? selectedColumns[0] : undefined;
+  $: linkedTable = defined(column?.linkFk?.referent_table_oid, (id) =>
+    $currentTablesData.tablesMap.get(id),
+  );
 </script>
 
 <div class="column-mode-container">
@@ -146,26 +149,20 @@
       </Collapsible>
     {/if}
 
-    {#if column}
-      {@const referentTableId = column.linkFk?.referent_table_oid}
-      {@const referentTable =
-        referentTableId === undefined
-          ? undefined
-          : $currentTablesData.tablesMap.get(referentTableId)}
-      {#if referentTable !== undefined}
-        <Collapsible
-          bind:isOpen={$tableInspectorColumnRecordSummaryVisible}
-          triggerAppearance="inspector"
-        >
-          <CollapsibleHeader
-            slot="header"
-            title={$_('linked_record_summary')}
+    {#if linkedTable}
+      <Collapsible
+        bind:isOpen={$tableInspectorColumnRecordSummaryVisible}
+        triggerAppearance="inspector"
+      >
+        <CollapsibleHeader slot="header" title={$_('linked_record_summary')} />
+        <div slot="content" class="content-container">
+          <FkRecordSummaryConfig
+            {linkedTable}
+            previewRecordId={$selectedCellData.activeCellData?.value}
+            onSave={() => $tabularData.recordsData.fetch()}
           />
-          <div slot="content" class="content-container">
-            <FkRecordSummaryConfig table={referentTable} />
-          </div>
-        </Collapsible>
-      {/if}
+        </div>
+      </Collapsible>
     {/if}
 
     <Collapsible
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/AppendColumn.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/AppendColumn.svelte
deleted file mode 100644
index 34dce46827..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/AppendColumn.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-  import { _ } from 'svelte-i18n';
-
-  import type { Column } from '@mathesar/api/rpc/columns';
-  import { iconAddNew, iconConstraint, iconTableLink } from '@mathesar/icons';
-  import { getTabularDataStoreFromContext } from '@mathesar/stores/table-data';
-  import {
-    getColumnConstraintTypeByColumnId,
-    getColumnIconProps,
-  } from '@mathesar/utils/columnUtils';
-  import { ButtonMenuItem, DropdownMenu } from '@mathesar-component-library';
-
-  const tabularData = getTabularDataStoreFromContext();
-  $: ({ processedColumns } = $tabularData);
-
-  export let columns: Column[];
-  export let onSelect: (column: Column) => void;
-  export let disabled = false;
-
-  function getIcon(column: Column) {
-    const constraintsType = getColumnConstraintTypeByColumnId(
-      column.id,
-      $processedColumns,
-    );
-    if (constraintsType?.includes('primary')) {
-      return iconConstraint;
-    }
-    if (constraintsType?.includes('foreignkey')) {
-      return iconTableLink;
-    }
-
-    const icon = getColumnIconProps(column);
-    return Array.isArray(icon) ? icon[0] : icon;
-  }
-</script>
-
-<DropdownMenu
-  label={$_('append_column')}
-  icon={iconAddNew}
-  {disabled}
-  size="small"
->
-  {#each columns as column (column.id)}
-    <ButtonMenuItem
-      label={column.name}
-      icon={getIcon(column)}
-      on:click={() => onSelect(column)}
-    />
-  {/each}
-</DropdownMenu>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/CustomTemplate.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/CustomTemplate.svelte
new file mode 100644
index 0000000000..dc4b07b20e
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/CustomTemplate.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { first } from 'iter-tools';
+  import { _ } from 'svelte-i18n';
+
+  import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
+  import { sortableContainer } from '@mathesar/components/sortable/sortable';
+  import { iconAddNew, iconField, iconText } from '@mathesar/icons';
+  import type { Database } from '@mathesar/models/Database';
+  import type {
+    ProcessedColumn,
+    ProcessedColumns,
+  } from '@mathesar/stores/table-data';
+  import {
+    ButtonMenuItem,
+    DropdownMenu,
+    Fieldset,
+  } from '@mathesar-component-library';
+
+  import FieldPart from './FieldPart.svelte';
+  import { TemplateConfig } from './TemplateConfig';
+  import TextPart from './TextPart.svelte';
+
+  export let database: Pick<Database, 'id'>;
+  export let templateConfig: TemplateConfig;
+  export let columns: ProcessedColumns;
+  export let errorsDisplayed: string[] = [];
+
+  function deletePart(key: number) {
+    templateConfig = templateConfig.withoutPart(key);
+  }
+
+  function replacePart(key: number, part: string | number[]) {
+    templateConfig = templateConfig.withPartReplaced(key, part);
+  }
+
+  function addText() {
+    templateConfig = templateConfig.withPartAppended('');
+  }
+
+  function addColumn() {
+    const column = first(columns.values()) as ProcessedColumn;
+    templateConfig = templateConfig.withPartAppended([column.id]);
+  }
+</script>
+
+<Fieldset label={$_('custom_fields')} boxed>
+  <div
+    class="parts"
+    use:sortableContainer={{
+      getItems: () => [...templateConfig],
+      onSort: (items) => {
+        templateConfig = new TemplateConfig(items);
+      },
+    }}
+  >
+    {#each [...templateConfig] as [key, part] (key)}
+      {#if typeof part === 'string'}
+        <TextPart
+          text={part}
+          onUpdate={(text) => replacePart(key, text)}
+          onDelete={() => deletePart(key)}
+        />
+      {:else}
+        <FieldPart
+          columnIds={part}
+          {columns}
+          {database}
+          onDelete={() => deletePart(key)}
+          onUpdate={(columnIds) => replacePart(key, columnIds)}
+        />
+      {/if}
+    {:else}
+      <div class="no-fields">{$_('no_fields_added_yet')}</div>
+    {/each}
+  </div>
+
+  <div class="add">
+    <DropdownMenu label={$_('add_field')} icon={iconAddNew} size="small">
+      <ButtonMenuItem
+        label={$_('column')}
+        icon={iconField}
+        on:click={addColumn}
+      />
+      <ButtonMenuItem label={$_('text')} icon={iconText} on:click={addText} />
+    </DropdownMenu>
+  </div>
+
+  {#if errorsDisplayed.length > 0}
+    <div class="errors">
+      <ErrorBox>
+        {#each errorsDisplayed as error}
+          <p>{error}</p>
+        {/each}
+      </ErrorBox>
+    </div>
+  {/if}
+</Fieldset>
+
+<style>
+  .parts {
+    --column-select-margin: 0.25rem;
+    margin: 0.5rem 0;
+    display: grid;
+    /* We want a visual gap of 1rem but we already have some margin set on each
+    column select (to take effect when flex wrapping happens), so we need to
+    subtract that. */
+    gap: calc(1rem - var(--column-select-margin));
+  }
+  .no-fields {
+    text-align: center;
+    color: var(--color-text-muted);
+    font-size: var(--text-size-small);
+  }
+  .add {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .errors {
+    margin: 1rem 0 0 1rem;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChain.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChain.svelte
new file mode 100644
index 0000000000..999c39d9b8
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChain.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import { Icon, defined } from '@mathesar/component-library';
+  import SelectProcessedColumn from '@mathesar/components/SelectProcessedColumn.svelte';
+  import { iconFieldDelimiter } from '@mathesar/icons';
+  import type { Database } from '@mathesar/models/Database';
+  import {
+    type ProcessedColumns,
+    TableStructure,
+  } from '@mathesar/stores/table-data';
+
+  import FieldChainTail from './FieldChainTail.svelte';
+
+  export let database: Pick<Database, 'id'>;
+  export let columnIds: number[];
+  export let columns: ProcessedColumns;
+  export let onUpdate: (columnIds: number[]) => void;
+
+  $: column = defined(columnIds[0], (c) => columns.get(c));
+  $: referentTable = defined(
+    column?.linkFk?.referent_table_oid,
+    (oid) => new TableStructure({ database, table: { oid } }),
+  );
+</script>
+
+{#if columnIds[0] !== undefined && column === undefined}
+  <div class="deleted-column">{$_('deleted_column')}</div>
+{:else}
+  <div class="column-select">
+    <SelectProcessedColumn
+      columns={[...columns.values()]}
+      value={column}
+      onUpdate={(c) => onUpdate(c ? [c.id] : [])}
+      allowEmpty
+    />
+    {#if referentTable}
+      <div class="delimiter"><Icon {...iconFieldDelimiter} /></div>
+    {/if}
+  </div>
+{/if}
+
+{#if referentTable}
+  <FieldChainTail
+    {database}
+    columnIds={columnIds.slice(1)}
+    {referentTable}
+    onUpdate={(ids) =>
+      onUpdate([...(defined(column, (c) => [c.id]) ?? []), ...ids])}
+  />
+{/if}
+
+<style>
+  .column-select {
+    display: flex;
+    align-items: center;
+    /* We need some margin here in order to vertically multiple column select
+    elements when there are so many that they wrap within the same template
+    part. */
+    margin: var(--column-select-margin) 0;
+  }
+  .deleted-column {
+    margin-top: 0.7rem;
+    color: var(--sand-600);
+    font-size: var(--text-size-small);
+    font-style: italic;
+  }
+  .delimiter {
+    color: var(--sand-600);
+    margin: 0 0.1rem;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChainTail.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChainTail.svelte
new file mode 100644
index 0000000000..be940a6fdf
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldChainTail.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Spinner from '@mathesar/component-library/spinner/Spinner.svelte';
+  import type { Database } from '@mathesar/models/Database';
+  import type { TableStructure } from '@mathesar/stores/table-data';
+
+  import FieldChain from './FieldChain.svelte';
+
+  export let database: Pick<Database, 'id'>;
+  export let columnIds: number[];
+  export let referentTable: TableStructure;
+  export let onUpdate: (columnIds: number[]) => void;
+
+  $: ({ isLoading, processedColumns } = referentTable);
+</script>
+
+{#if $isLoading}
+  <div class="loading">
+    <Spinner />
+  </div>
+{:else}
+  <FieldChain {database} {columnIds} columns={$processedColumns} {onUpdate} />
+{/if}
+
+<style>
+  .loading {
+    margin: 0.6rem 0 0 0.5rem;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldPart.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldPart.svelte
new file mode 100644
index 0000000000..b4cf477980
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FieldPart.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Database } from '@mathesar/models/Database';
+  import type { ProcessedColumns } from '@mathesar/stores/table-data';
+
+  import FieldChain from './FieldChain.svelte';
+  import Part from './Part.svelte';
+
+  export let database: Pick<Database, 'id'>;
+  export let columnIds: number[];
+  export let columns: ProcessedColumns;
+  export let onDelete: () => void;
+  export let onUpdate: (columnIds: number[]) => void;
+</script>
+
+<Part {onDelete}>
+  <div class="chain">
+    <FieldChain {columns} {columnIds} {database} {onUpdate} />
+  </div>
+</Part>
+
+<style>
+  .chain {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte
index 02bb35a927..4df2acdf03 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/FkRecordSummaryConfig.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
+  import type { ResultValue } from '@mathesar/api/rpc/records';
   import type { Table } from '@mathesar/models/Table';
-  import { abstractTypesMap } from '@mathesar/stores/abstract-types';
-  import { Meta, TabularData } from '@mathesar/stores/table-data';
+  import { TableStructure } from '@mathesar/stores/table-data';
   import RecordSummaryConfig from '@mathesar/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte';
-  import Pagination from '@mathesar/utils/Pagination';
 
-  // eslint-disable-next-line svelte/valid-compile
-  export let table: Table;
+  export let linkedTable: Table;
+  export let previewRecordId: ResultValue | undefined;
+  export let onSave: (() => void) | undefined = undefined;
 
-  // $: tabularData = new TabularData({
-  //   database: table.schema.database,
-  //   table,
-  //   meta: new Meta({ pagination: new Pagination({ size: 1 }) }),
-  // });
+  $: ({ database } = linkedTable.schema);
+  $: structure = new TableStructure({ database, table: linkedTable });
+  $: ({ processedColumns, isLoading } = structure);
 </script>
 
-<!-- <RecordSummaryConfig {tabularData} /> -->
-TODO
+<RecordSummaryConfig
+  {database}
+  table={linkedTable}
+  processedColumns={$processedColumns}
+  isLoading={$isLoading}
+  {previewRecordId}
+  {onSave}
+/>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Part.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Part.svelte
new file mode 100644
index 0000000000..fd05373536
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Part.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import {
+    sortableItem,
+    sortableTrigger,
+  } from '@mathesar/components/sortable/sortable';
+  import { iconDeleteMajor, iconGrip } from '@mathesar/icons';
+  import { Button, Icon } from '@mathesar-component-library';
+
+  export let label: string | undefined = undefined;
+  export let onDelete: () => void;
+</script>
+
+<div use:sortableItem class="part">
+  <div use:sortableTrigger class="grip"><Icon {...iconGrip} /></div>
+  <div class="label">{label ?? ''}</div>
+  <div class="editor"><slot /></div>
+  <div class="delete">
+    <Button size="small" appearance="ghost" on:click={onDelete}>
+      <Icon {...iconDeleteMajor} />
+    </Button>
+  </div>
+</div>
+
+<style>
+  .part {
+    display: grid;
+    /* You might think we'd want `center` here, but we use flex-start because we
+    want the grip, label, and delete elements to be centered with the first line
+    of select elements when there are multiple (wrapped) lines. */
+    align-items: flex-start;
+    grid-template-columns: auto auto 1fr auto;
+  }
+  .grip {
+    margin: 0.65rem 0.5rem 0 0;
+  }
+  .label:not(:empty) {
+    margin: 0.65rem 0.5rem 0 0;
+  }
+  .delete {
+    margin: 0.3rem -0.5rem 0 0;
+  }
+  .delete:not(:hover) {
+    color: var(--slate-400);
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Preview.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Preview.svelte
new file mode 100644
index 0000000000..2573f0857f
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Preview.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import { api } from '@mathesar/api/rpc';
+  import type { ResultValue } from '@mathesar/api/rpc/records';
+  import type { RecordSummaryTemplate } from '@mathesar/api/rpc/tables';
+  import Spinner from '@mathesar/component-library/spinner/Spinner.svelte';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import LinkedRecord from '@mathesar/components/LinkedRecord.svelte';
+  import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
+  import type { Database } from '@mathesar/models/Database';
+  import type { Table } from '@mathesar/models/Table';
+  import AsyncRpcApiStore from '@mathesar/stores/AsyncRpcApiStore';
+  import { Fieldset } from '@mathesar-component-library';
+
+  const preview = new AsyncRpcApiStore(api.records.get);
+
+  export let database: Pick<Database, 'id'>;
+  export let template: RecordSummaryTemplate | null;
+  export let table: Table;
+  export let recordId: ResultValue;
+
+  $: void preview.run({
+    database_id: database.id,
+    table_oid: table.oid,
+    return_record_summaries: true,
+    record_id: recordId,
+    table_record_summary_templates: { [table.oid]: template },
+  });
+
+  $: recordSummary =
+    $preview.resolvedValue?.record_summaries?.[String(recordId)];
+</script>
+
+<Fieldset label={$_('preview')} boxed>
+  {#if $preview.isLoading}
+    <Spinner />
+  {:else if recordSummary !== undefined}
+    <LinkedRecord {recordSummary} />
+  {:else if $preview.error}
+    <ErrorBox>{$preview.error}</ErrorBox>
+  {:else}
+    <ErrorBox>{$_('unknown_error')}</ErrorBox>
+  {/if}
+
+  <div class="help">
+    <RichText text={$_('record_summary_preview_help')} let:slotName>
+      {#if slotName === 'tableName'}
+        <Identifier>{table.name}</Identifier>
+      {/if}
+    </RichText>
+  </div>
+</Fieldset>
+
+<style>
+  .help {
+    font-size: var(--text-size-small);
+    color: var(--color-text-muted);
+    margin-top: 0.5rem;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte
index 5aa9bb6426..3331ab0864 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte
@@ -1,65 +1,50 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
+  import type { ResultValue } from '@mathesar/api/rpc/records';
   import {
     FormSubmit,
     makeForm,
     optionalField,
-    requiredField,
+    validIf,
   } from '@mathesar/components/form';
-  import Field from '@mathesar/components/form/Field.svelte';
   import Identifier from '@mathesar/components/Identifier.svelte';
-  import LinkedRecord from '@mathesar/components/LinkedRecord.svelte';
+  import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
   import InfoBox from '@mathesar/components/message-boxes/InfoBox.svelte';
   import { RichText } from '@mathesar/components/rich-text';
+  import { iconUndo } from '@mathesar/icons';
+  import type { Database } from '@mathesar/models/Database';
   import type { Table } from '@mathesar/models/Table';
-  import type { RecordRow, TabularData } from '@mathesar/stores/table-data';
+  import type { ProcessedColumns } from '@mathesar/stores/table-data';
   import { updateTable } from '@mathesar/stores/tables';
   import { toast } from '@mathesar/stores/toast';
   import { getErrorMessage } from '@mathesar/utils/errors';
-  import { RadioGroup, Spinner } from '@mathesar-component-library';
+  import { Help, Spinner, defined } from '@mathesar-component-library';
 
-  import {
-    columnIsConformant,
-    getColumnsInTemplate,
-    hasColumnReferences,
-  } from './recordSummaryTemplateUtils';
-  import TemplateInput from './TemplateInput.svelte';
+  import Preview from './Preview.svelte';
+  import Template from './Template.svelte';
+  import { TemplateConfig } from './TemplateConfig';
 
+  export let database: Pick<Database, 'id'>;
   export let table: Table;
-  export let tabularData: TabularData;
+  export let processedColumns: ProcessedColumns;
+  export let isLoading: boolean;
+  export let previewRecordId: ResultValue | undefined;
+  export let onSave: (() => void) | undefined = undefined;
 
-  $: ({ recordsData, columnsDataStore, isLoading } = tabularData);
-  $: ({ columns } = columnsDataStore);
-  $: ({ savedRecords, linkedRecordSummaries } = recordsData);
-  $: firstRow = $savedRecords[0] as RecordRow | undefined;
-  $: initialCustomized = table.metadata?.record_summary_customized ?? false;
-  $: initialTemplate = table.metadata?.record_summary_template ?? '';
-  $: customized = requiredField(initialCustomized);
-  $: customizedDisabled = customized.disabled;
-  $: template = optionalField(initialTemplate, [hasColumnReferences($columns)]);
-  $: form = makeForm({ customized, template });
-  $: columnsInTemplate = getColumnsInTemplate($columns, $template);
-  $: nonconformantColumns = columnsInTemplate.filter(
-    (column) => !columnIsConformant(column),
+  $: template = table?.metadata?.record_summary_template ?? undefined;
+  $: templateConfig = optionalField(
+    defined(template, (t) => TemplateConfig.fromTemplate(t)),
+    [
+      validIf(
+        (t) => !!t?.hasAnyColumnParts,
+        $_('static_record_summary_template_error'),
+      ),
+    ],
   );
-  $: previewRecordSummary = (() => {
-    if (!firstRow) {
-      return undefined;
-    }
-    const { record } = firstRow;
-
-    // TODO: Fully re-implement record summary previews across the stack, now
-    // with a new backend-centric approach since we're no longer rendering the
-    // record summary on the front end.
-
-    // return renderRecordSummaryForRow({
-    //   template: $template,
-    //   record,
-    //   transitiveData: $linkedRecordSummaries,
-    // });
-    return '';
-  })();
+  $: form = makeForm({ templateConfig });
+  $: templateErrors = templateConfig.fieldErrors;
+  $: hasPk = [...processedColumns].some(([, c]) => c.column.primary_key);
 
   async function save() {
     try {
@@ -68,11 +53,11 @@
         table: {
           oid: table.oid,
           metadata: {
-            record_summary_customized: $customized,
-            record_summary_template: $template,
+            record_summary_template: $templateConfig?.template ?? null,
           },
         },
       });
+      onSave?.();
     } catch (e) {
       toast.error(`${$_('unable_to_save_changes')} ${getErrorMessage(e)}`);
     }
@@ -80,113 +65,70 @@
 </script>
 
 <div class="record-summary-config">
-  {#if $isLoading}
+  {#if isLoading}
     <Spinner />
+  {:else if !hasPk}
+    <ErrorBox>
+      <RichText text={$_('record_summary_no_pk_error')} let:slotName>
+        {#if slotName === 'tableName'}
+          <Identifier>{table.name}</Identifier>
+        {/if}
+      </RichText>
+    </ErrorBox>
   {:else}
-    <div class="content">
-      <RadioGroup
-        options={[false, true]}
-        getRadioLabel={(v) =>
-          v ? $_('use_custom_template') : $_('use_default')}
-        ariaLabel={$_('template_type')}
-        isInline
-        bind:value={$customized}
-        disabled={$customizedDisabled}
-      />
-
-      {#if previewRecordSummary}
-        <div class="preview">
-          <div class="preview-record-summary">
-            <LinkedRecord recordSummary={previewRecordSummary} />
-          </div>
-          <div class="help">
-            <RichText text={$_('record_summary_help')} let:slotName>
+    <div class="help">
+      <InfoBox>
+        <RichText text={$_('record_summary_config_help')} let:slotName>
+          {#if slotName === 'tableName'}
+            <Identifier>{table.name}</Identifier>
+          {/if}
+        </RichText>
+        <Help>
+          <p>{$_('record_summary_detail_help_1')}</p>
+          <p>
+            <RichText text={$_('record_summary_detail_help_2')} let:slotName>
               {#if slotName === 'tableName'}
                 <Identifier>{table.name}</Identifier>
               {/if}
             </RichText>
-          </div>
-        </div>
-      {/if}
+          </p>
+        </Help>
+      </InfoBox>
+    </div>
 
-      {#if $customized}
-        <Field
-          field={template}
-          input={{ component: TemplateInput, props: { columns: $columns } }}
-        />
+    <Template
+      bind:templateConfig={$templateConfig}
+      columns={processedColumns}
+      {database}
+      errorsDisplayed={$form.hasChanges ? $templateErrors : []}
+    />
 
-        {#if nonconformantColumns.length}
-          <InfoBox>
-            <div class="nonconformant-columns">
-              <p>
-                {$_('record_summary_non_conformant_columns_help')}:
-              </p>
-              <ul>
-                {#each nonconformantColumns as column}
-                  <li>
-                    <RichText
-                      text={$_('column_id_references_column_name')}
-                      let:slotName
-                    >
-                      {#if slotName === 'columnId'}
-                        <Identifier>{column.id}</Identifier>
-                      {:else if slotName === 'columnName'}
-                        <Identifier>{column.name}</Identifier>
-                      {/if}
-                    </RichText>
-                  </li>
-                {/each}
-              </ul>
-            </div>
-          </InfoBox>
-        {/if}
-      {/if}
+    {#if previewRecordId !== undefined}
+      <Preview
+        {database}
+        {table}
+        recordId={previewRecordId}
+        template={$templateConfig?.template ?? null}
+      />
+    {/if}
 
-      {#if $customized !== initialCustomized || $template !== initialTemplate}
-        <FormSubmit
-          {form}
-          onProceed={save}
-          onCancel={form.reset}
-          proceedButton={{ label: $_('save') }}
-          initiallyHidden
-          size="small"
-        />
-      {/if}
-      {#if !previewRecordSummary}
-        <span class="null-text">{$_('no_record_summary_available')}</span>
-      {/if}
-    </div>
+    <FormSubmit
+      {form}
+      onProceed={save}
+      onCancel={form.reset}
+      proceedButton={{ label: $_('save') }}
+      cancelButton={{ label: $_('reset'), icon: iconUndo }}
+      initiallyHidden
+      size="small"
+    />
   {/if}
 </div>
 
 <style>
-  .content > :global(* + *) {
-    margin-top: 1rem;
-  }
   .help {
     font-size: var(--text-size-small);
-    color: var(--color-text-muted);
-    margin-top: 0.5rem;
-  }
-  .preview-record-summary {
-    border: 1px solid var(--slate-200);
-    padding: 0.4rem;
-    width: 100%;
-    border-radius: 0.25rem;
-    background-color: var(--slate-50);
-    margin-top: 0.5rem;
   }
-  .nonconformant-columns > :global(:first-child) {
-    margin-top: 0;
-  }
-  .nonconformant-columns > :global(:last-child) {
-    margin-bottom: 0;
-  }
-  .nonconformant-columns ul {
-    padding-left: 1.5rem;
-  }
-  .null-text {
-    color: var(--color-text-muted);
-    display: block;
+  .record-summary-config > :global(* + *) {
+    margin-top: 1rem;
   }
 </style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TableRecordSummaryConfig.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TableRecordSummaryConfig.svelte
new file mode 100644
index 0000000000..ab3f05b6ce
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TableRecordSummaryConfig.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { TabularData } from '@mathesar/stores/table-data';
+  import RecordSummaryConfig from '@mathesar/systems/table-view/table-inspector/record-summary/RecordSummaryConfig.svelte';
+
+  import { getTableRecordId } from './utils';
+
+  export let tabularData: TabularData;
+
+  $: ({ table, processedColumns, database, recordsData, selection, isLoading } =
+    tabularData);
+  $: ({ selectableRowsMap } = recordsData);
+  $: previewRecordId = getTableRecordId({
+    processedColumns: $processedColumns,
+    selection: $selection,
+    selectableRowsMap: $selectableRowsMap,
+  });
+</script>
+
+<RecordSummaryConfig
+  {database}
+  {table}
+  processedColumns={$processedColumns}
+  {previewRecordId}
+  isLoading={$isLoading}
+/>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Template.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Template.svelte
new file mode 100644
index 0000000000..3112a32a02
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/Template.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import { RadioGroup } from '@mathesar/component-library';
+  import type { Database } from '@mathesar/models/Database';
+  import type { ProcessedColumns } from '@mathesar/stores/table-data';
+
+  import CustomTemplate from './CustomTemplate.svelte';
+  import { TemplateConfig } from './TemplateConfig';
+
+  export let database: Pick<Database, 'id'>;
+  export let templateConfig: TemplateConfig | undefined;
+  export let columns: ProcessedColumns;
+  export let errorsDisplayed: string[] = [];
+</script>
+
+<RadioGroup
+  label={$_('customization')}
+  options={[false, true]}
+  getRadioLabel={(v) => (v ? $_('customize_fields') : $_('use_default'))}
+  isInline
+  value={templateConfig !== undefined}
+  boxed
+  on:change={({ detail: { value: checked } }) => {
+    templateConfig = checked ? TemplateConfig.newCustom(columns) : undefined;
+  }}
+/>
+
+{#if templateConfig}
+  <div class="custom-template">
+    <CustomTemplate
+      bind:templateConfig
+      {columns}
+      {database}
+      {errorsDisplayed}
+    />
+  </div>
+{/if}
+
+<style>
+  .custom-template {
+    margin-top: 1rem;
+  }
+</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateConfig.ts b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateConfig.ts
new file mode 100644
index 0000000000..ce9a31c531
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateConfig.ts
@@ -0,0 +1,94 @@
+import { filter, first, some } from 'iter-tools';
+
+import type {
+  RecordSummaryTemplate,
+  RecordSummaryTemplatePart,
+} from '@mathesar/api/rpc/tables';
+import type {
+  ProcessedColumn,
+  ProcessedColumns,
+} from '@mathesar/stores/table-data';
+import { ImmutableMap } from '@mathesar-component-library';
+
+function partIsColumn(part: RecordSummaryTemplatePart): part is number[] {
+  return Array.isArray(part);
+}
+
+/**
+ * This holds the UI state to configure a record summary template.
+ *
+ * I had first tried using the raw record summary template to hold the UI state
+ * but ran into some snags. Within the config UI, the template parts need the
+ * ability to be independently updated and also sorted. It turned out to be
+ * tricky to accomplish both of those requirements without having components
+ * re-render unnecessarily. The svelte {#each} block which renders template
+ * parts can either be keyed or non-keyed, and I tried both. Each option had
+ * different problems with re-rendering. Re-rendering causes poor UX for
+ * FieldPart because it re-loads the TableStructure when things change.
+ * Re-rendering is also poor UX for TextPart because the input loses focus.
+ *
+ * So this class exists primarily to assign a persistent, unique key to each
+ * template part. Then we can use that key within svelte's {#each} block to
+ * avoid re-rendering parts of the template.
+ */
+export class TemplateConfig {
+  private readonly parts;
+
+  constructor(parts: Iterable<[number, RecordSummaryTemplatePart]>) {
+    this.parts = new ImmutableMap(parts);
+  }
+
+  private getNextKey(): number {
+    return Math.max(...this.parts.keys(), 0) + 1;
+  }
+
+  static fromTemplate(template: RecordSummaryTemplatePart[]): TemplateConfig {
+    return new TemplateConfig(template.map((part, i) => [i, part]));
+  }
+
+  /**
+   * Creates a new TemplateConfig as a starting point for the user to build
+   * their own customized template.
+   */
+  static newCustom(columns: ProcessedColumns): TemplateConfig {
+    const textColumns = filter(
+      (c) => c.abstractType.identifier === 'text',
+      columns.values(),
+    );
+    const firstTextColumn = first(textColumns);
+    if (firstTextColumn) {
+      return TemplateConfig.fromTemplate([[firstTextColumn.id]]);
+    }
+    // Type assertion here because we know that every table has at least one
+    // column.
+    const firstColumn = first(columns.values()) as ProcessedColumn;
+    return TemplateConfig.fromTemplate([[firstColumn.id]]);
+  }
+
+  get template(): RecordSummaryTemplate {
+    return [...this.parts.values()];
+  }
+
+  withPartAppended(part: RecordSummaryTemplatePart): TemplateConfig {
+    return new TemplateConfig(this.parts.with(this.getNextKey(), part));
+  }
+
+  withPartReplaced(
+    key: number,
+    part: RecordSummaryTemplatePart,
+  ): TemplateConfig {
+    return new TemplateConfig(this.parts.with(key, part));
+  }
+
+  withoutPart(key: number): TemplateConfig {
+    return new TemplateConfig(this.parts.without(key));
+  }
+
+  get hasAnyColumnParts(): boolean {
+    return some(partIsColumn, this.parts.values());
+  }
+
+  [Symbol.iterator]() {
+    return this.parts[Symbol.iterator]();
+  }
+}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInput.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInput.svelte
deleted file mode 100644
index 438466630d..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInput.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from 'svelte';
-
-  import type { Column } from '@mathesar/api/rpc/columns';
-  import { FormattedInput } from '@mathesar-component-library';
-
-  import AppendColumn from './AppendColumn.svelte';
-  import TemplateInputFormatter from './TemplateInputFormatter';
-
-  interface $$Props
-    extends Omit<ComponentProps<FormattedInput<string>>, 'formatter'> {
-    columns: Column[];
-  }
-
-  export let value: string | null | undefined = undefined;
-  export let columns: Column[];
-  export let disabled = false;
-
-  $: formatter = new TemplateInputFormatter(columns);
-
-  function insertColumn(column: Column) {
-    value = `${value}{${column.id}}`;
-  }
-</script>
-
-<FormattedInput {formatter} bind:value {disabled} {...$$restProps} />
-<span class="column-insert">
-  <AppendColumn {columns} onSelect={insertColumn} {disabled} />
-</span>
-
-<style>
-  .column-insert {
-    display: block;
-    text-align: right;
-    margin-top: 0.5rem;
-  }
-</style>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInputFormatter.ts b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInputFormatter.ts
deleted file mode 100644
index ccde20fa73..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TemplateInputFormatter.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type {
-  InputFormatter,
-  ParseResult,
-} from '@mathesar-component-library/types';
-
-import {
-  type ColumnLike,
-  columnIsConformant,
-} from './recordSummaryTemplateUtils';
-
-export default class TemplateInputFormatter implements InputFormatter<string> {
-  private readonly columns: ColumnLike[];
-
-  constructor(columns: ColumnLike[]) {
-    this.columns = columns.filter(columnIsConformant);
-  }
-
-  private getColumnName(columnId: number): string | undefined {
-    return this.columns.find((c) => c.id === columnId)?.name;
-  }
-
-  private getColumnId(columnName: string): number | undefined {
-    return this.columns.find((c) => c.name === columnName)?.id;
-  }
-
-  format(templateWithColumnIds: string): string {
-    const tokenPattern = /\{\d+\}/g;
-    return templateWithColumnIds.replace(tokenPattern, (token) => {
-      const columnId = parseInt(token.slice(1, -1), 10);
-      const columnName = this.getColumnName(columnId);
-      if (columnName === undefined) {
-        return token;
-      }
-      return `{${columnName}}`;
-    });
-  }
-
-  parse(templateWithColumnNames: string): ParseResult<string> {
-    const tokenPattern = /\{[^{}]+\}/g;
-    const intermediateDisplay = templateWithColumnNames;
-    const value = templateWithColumnNames.replace(tokenPattern, (token) => {
-      const columnName = token.slice(1, -1);
-      const columnId = this.getColumnId(columnName);
-      if (columnId === undefined) {
-        return token;
-      }
-      return `{${columnId}}`;
-    });
-    return { value, intermediateDisplay };
-  }
-}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TextPart.svelte b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TextPart.svelte
new file mode 100644
index 0000000000..8a754c6639
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/TextPart.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+
+  import { TextInput } from '@mathesar-component-library';
+
+  import Part from './Part.svelte';
+
+  export let text: string;
+  export let onDelete: () => void;
+  export let onUpdate: (text: string) => void;
+
+  function handleInput(e: Event) {
+    const element = e.target as HTMLInputElement;
+    onUpdate(element.value);
+  }
+</script>
+
+<Part label={$_('text')} {onDelete}>
+  <TextInput value={text} on:input={handleInput} />
+</Part>
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/__tests__/TemplateInputFormatter.test.ts b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/__tests__/TemplateInputFormatter.test.ts
deleted file mode 100644
index 5de22ad716..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/__tests__/TemplateInputFormatter.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import TemplateInputFormatter from '../TemplateInputFormatter';
-
-/**
- * - `bidirectional` - The test case can be formatted and parsed.
- * - `format-only` - The test case only works for formatting.
- * - `parse-only` - The test case only works for parsing.
- */
-type TestCaseType = 'bidirectional' | 'format-only' | 'parse-only';
-
-/** [withColumnIds, withColumnNames, type] */
-type TestCase = [string, string, TestCaseType];
-
-function isFormattable([, , t]: TestCase) {
-  return t === 'bidirectional' || t === 'format-only';
-}
-function isParsable([, , t]: TestCase) {
-  return t === 'bidirectional' || t === 'parse-only';
-}
-
-describe('TemplateInputFormatter', () => {
-  const columns = [
-    { id: 1, name: 'col1' },
-    { id: 2, name: 'col2' },
-    { id: 3, name: 'foo bar' },
-    { id: 4, name: 'Left{brace' },
-    { id: 5, name: 'Right}brace' },
-    { id: 6, name: '1' },
-    { id: 7, name: '99' },
-    { id: 8, name: 'brace' },
-  ];
-  const formatter = new TemplateInputFormatter(columns);
-
-  // prettier-ignore
-  const testCases: TestCase[] = [ /*
-                          <->                   bidirectional
-                          -->                   format-only
-                          <--                   parse-only
-     with Column IDs       | with Column Names                 */
-    [''                    , ''              , 'bidirectional' ],
-    ['No tokens'           , 'No tokens'     , 'bidirectional' ],
-    ['{1}'                 , '{col1}'        , 'bidirectional' ],
-    ['{col1}'              , '{col1}'        , 'format-only' ],
-    ['{nope}'              , '{nope}'        , 'bidirectional' ],
-    ['{1} {2}'             , '{col1} {col2}' , 'bidirectional' ],
-    ['{1} {col2'           , '{col1} {col2'  , 'bidirectional' ],
-    ['{7}'                 , '{99}'          , 'bidirectional' ],
-    ['{99}'                , '{99}'          , 'format-only' ],
-    ['{3}'                 , '{foo bar}'     , 'bidirectional' ],
-    ['{6}'                 , '{1}'           , 'bidirectional' ],
-    ['{2}'                 , '{2}'           , 'parse-only' ],
-    ['{2}'                 , '{col2}'        , 'bidirectional' ],
-    ['{4}'                 , '{4}'           , 'bidirectional' ], // 1
-    ['{5}'                 , '{5}'           , 'bidirectional' ], // 1
-    ['{Left{8}'            , '{Left{brace}'  , 'bidirectional' ],
-    ['{Right}brace}'       , '{Right}brace}' , 'bidirectional' ],
-  ];
-  // 1. Columns with braces in the names are not taken into account at all.
-
-  test.each(testCases.filter(isFormattable))(
-    'format %#',
-    (withColumnIds, withColumnNames) => {
-      expect(formatter.format(withColumnIds)).toBe(withColumnNames);
-    },
-  );
-
-  test.each(testCases.filter(isParsable))(
-    'parse %#',
-    (withColumnIds, withColumnNames) => {
-      expect(formatter.parse(withColumnNames).value).toBe(withColumnIds);
-    },
-  );
-});
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/recordSummaryTemplateUtils.ts b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/recordSummaryTemplateUtils.ts
deleted file mode 100644
index f0a1eb9738..0000000000
--- a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/recordSummaryTemplateUtils.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { get } from 'svelte/store';
-import { _ } from 'svelte-i18n';
-
-import type { Column } from '@mathesar/api/rpc/columns';
-import { type ValidationFn, validIf } from '@mathesar/components/form';
-
-export type ColumnLike = Pick<Column, 'id' | 'name'>;
-
-/**
- * Conformant columns can be displayed by name within the UI template. A column
- * is conformant as long as its name does not contain any curly braces.
- *
- * Nonconformant columns can still be inserted into the template, but they will
- * be displayed by ID instead of name.
- */
-export function columnIsConformant(column: ColumnLike): boolean {
-  return !column.name.match(/[{}]/);
-}
-
-export function getColumnsInTemplate(columns: Column[], template: string) {
-  const matches = template.match(/\{\d+\}/g) ?? [];
-  const columnIds = matches.map((m) => parseInt(m.slice(1, -1), 10));
-  return columns.filter((c) => columnIds.includes(c.id));
-}
-
-export function hasColumnReferences(columns: Column[]): ValidationFn<string> {
-  return validIf(
-    (template) => getColumnsInTemplate(columns, template).length > 0,
-    get(_)('template_refer_atleast_one_column_error'),
-  );
-}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/record-summary/utils.ts b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/utils.ts
new file mode 100644
index 0000000000..01291dba66
--- /dev/null
+++ b/mathesar_ui/src/systems/table-view/table-inspector/record-summary/utils.ts
@@ -0,0 +1,21 @@
+import { first } from 'iter-tools';
+
+import type { ResultValue } from '@mathesar/api/rpc/records';
+import { parseCellId } from '@mathesar/components/sheet/cellIds';
+import type SheetSelection from '@mathesar/components/sheet/selection/SheetSelection';
+import type { ProcessedColumns, RecordRow } from '@mathesar/stores/table-data';
+import { defined } from '@mathesar-component-library';
+
+export function getTableRecordId(p: {
+  processedColumns: ProcessedColumns;
+  selection: SheetSelection;
+  selectableRowsMap: Map<string, RecordRow>;
+}): ResultValue | undefined {
+  const pk = [...p.processedColumns.values()].find((c) => c.column.primary_key);
+  if (!pk) return undefined;
+  const rowId = defined(p.selection.activeCellId, (c) => parseCellId(c).rowId);
+  const row =
+    defined(rowId, (r) => p.selectableRowsMap.get(r)) ??
+    first(p.selectableRowsMap.values());
+  return row?.record[pk.id];
+}
diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte
index 44f88a63bd..5a9b1fd459 100644
--- a/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte
+++ b/mathesar_ui/src/systems/table-view/table-inspector/table/TableMode.svelte
@@ -13,6 +13,7 @@
   import { Collapsible } from '@mathesar-component-library';
 
   import CollapsibleHeader from '../CollapsibleHeader.svelte';
+  import TableRecordSummaryConfig from '../record-summary/TableRecordSummaryConfig.svelte';
 
   import AdvancedActions from './AdvancedActions.svelte';
   import TableLinks from './links/TableLinks.svelte';
@@ -72,7 +73,7 @@
   >
     <CollapsibleHeader slot="header" title={$_('record_summary')} />
     <div slot="content" class="content-container">
-      <!-- <RecordSummaryConfig tabularData={$tabularData} /> -->
+      <TableRecordSummaryConfig tabularData={$tabularData} />
     </div>
   </Collapsible>
 
diff --git a/mathesar_ui/src/utils/columnUtils.ts b/mathesar_ui/src/utils/columnUtils.ts
index 2beef6c841..ad2d65ab9d 100644
--- a/mathesar_ui/src/utils/columnUtils.ts
+++ b/mathesar_ui/src/utils/columnUtils.ts
@@ -3,10 +3,7 @@ import type { ConstraintType } from '@mathesar/api/rpc/constraints';
 import { type ValidationFn, uniqueWith } from '@mathesar/components/form';
 import { iconConstraint, iconTableLink } from '@mathesar/icons';
 import type { Table } from '@mathesar/models/Table';
-import {
-  abstractTypesMap,
-  getAbstractTypeForDbType,
-} from '@mathesar/stores/abstract-types';
+import { getAbstractTypeForDbType } from '@mathesar/stores/abstract-types';
 import type { ProcessedColumn } from '@mathesar/stores/table-data';
 import { getAvailableName } from '@mathesar/utils/db';
 import type { IconProps } from '@mathesar-component-library/types';
@@ -26,7 +23,7 @@ export function getColumnIconProps(column: {
     return iconTableLink;
   }
 
-  return getAbstractTypeForDbType(column.type, abstractTypesMap).getIcon({
+  return getAbstractTypeForDbType(column.type).getIcon({
     dbType: column.type,
     typeOptions: column.type_options,
   });