diff --git a/src/modules/grid/GridWidget.vue b/src/modules/grid/GridWidget.vue
index 8c26456949..1fb297e980 100644
--- a/src/modules/grid/GridWidget.vue
+++ b/src/modules/grid/GridWidget.vue
@@ -9,10 +9,10 @@
 		data-cy="gridWidget">
 		<header v-if="hasHeading" class="grid-widget__header">
 			<h2 :id="headingId" class="grid-widget__title">
-				{{ widget.configuration.showTitle ? widget.configuration.title : typeLabel }}
+				{{ widget.configuration.showTitle ? label : typeLabel }}
 			</h2>
 			<NcActions v-if="editable" :aria-label="t('tables', 'Widget actions')" :force-menu="true">
-				<NcActionButton :close-after-click="true" @click="$emit('configure', widget)">
+				<NcActionButton v-if="isKnownType" :close-after-click="true" @click="$emit('configure', widget)">
 					<template #icon>
 						<CogOutline :size="20" />
 					</template>
@@ -86,8 +86,12 @@ export default {
 		TrashCanOutline,
 	},
 	provide() {
-		// A widget that renders its own heading sits one level below the card's heading
-		return { widgetHeadingLevel: computed(() => this.hasHeading ? 3 : 2) }
+		return {
+			// A widget that renders its own heading sits one level below the card's heading
+			widgetHeadingLevel: computed(() => this.hasHeading ? 3 : 2),
+			// Set when the server marked the widget's stored target as gone
+			widgetBroken: computed(() => this.widget.broken === true),
+		}
 	},
 	props: {
 		widget: {
@@ -124,6 +128,10 @@ export default {
 		widgetComponent() {
 			return getWidgetComponent(this.widget.type)
 		},
+		// A widget of a type the server does not know is shown, not configured: its schema is unknown
+		isKnownType() {
+			return findWidgetType(this.widgetTypes, this.widget.type) !== null
+		},
 		typeLabel() {
 			return findWidgetType(this.widgetTypes, this.widget.type)?.title ?? this.widget.type
 		},
diff --git a/src/modules/grid/SchemaForm.vue b/src/modules/grid/SchemaForm.vue
new file mode 100644
index 0000000000..f141d71954
--- /dev/null
+++ b/src/modules/grid/SchemaForm.vue
@@ -0,0 +1,235 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="schema-form">
+		<div v-for="(property, name) in properties" :key="name" class="schema-form__field" :data-cy="fieldDataCy(name)">
+			<NcTextField v-if="property.type === 'string'"
+				class="schema-form__input"
+				:model-value="value(name)"
+				:label="property.title"
+				@update:model-value="text => set(name, text)" />
+			<NcTextArea v-else-if="property.type === 'text'"
+				class="schema-form__input"
+				:model-value="value(name)"
+				:label="property.title"
+				:placeholder="t('tables', 'Leave an empty line between paragraphs')"
+				resize="vertical"
+				rows="6"
+				@update:model-value="text => set(name, text)" />
+			<NcTextField v-else-if="property.type === 'integer'"
+				class="schema-form__input"
+				:model-value="String(value(name) ?? '')"
+				:label="property.title"
+				:error="invalidIntegers.includes(name)"
+				:helper-text="invalidIntegers.includes(name) ? t('tables', 'Enter a whole number') : ''"
+				type="number"
+				@update:model-value="text => setInteger(name, text)" />
+			<NcCheckboxRadioSwitch v-else-if="property.type === 'boolean'"
+				type="switch"
+				:model-value="!!value(name)"
+				@update:model-value="checked => set(name, checked)">
+				{{ property.title }}
+			</NcCheckboxRadioSwitch>
+			<NcSelect v-else-if="property.type === 'enum'"
+				class="schema-form__input"
+				:model-value="enumOption(property, value(name))"
+				:input-label="property.title"
+				:options="property.options"
+				:clearable="false"
+				label="label"
+				@update:model-value="option => set(name, option?.value ?? property.default)" />
+			<NcSelect v-else-if="property.type === 'target'"
+				class="schema-form__input"
+				:model-value="targetOption(value(name))"
+				:input-label="property.title"
+				:options="targetOptions"
+				:clearable="false"
+				:searchable="true"
+				label="label"
+				@update:model-value="option => set(name, option ? { type: option.targetType, id: option.targetId } : null)" />
+			<div v-else-if="property.type === 'color'" class="schema-form__color">
+				<NcColorPicker :model-value="colorValue(name)"
+					advanced-fields
+					clearable
+					@update:model-value="color => set(name, color ?? '')">
+					<NcButton variant="secondary">
+						<template #icon>
+							<span class="schema-form__swatch" :style="{ backgroundColor: colorValue(name) ?? 'transparent' }" />
+						</template>
+						{{ property.title }}
+					</NcButton>
+				</NcColorPicker>
+				<span class="schema-form__hint">{{ colorValue(name) ?? t('tables', 'Theme color') }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcCheckboxRadioSwitch, NcColorPicker, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { useTablesStore } from '../../store/store.js'
+import { isHexColor } from '../../shared/utils/gridColors.js'
+
+/**
+ * Renders the configuration form of a widget from the schema of its type, so a
+ * new widget type needs a schema on the server and a renderer, not a dialog.
+ */
+export default {
+	name: 'SchemaForm',
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcColorPicker,
+		NcSelect,
+		NcTextArea,
+		NcTextField,
+	},
+	props: {
+		properties: {
+			type: Object,
+			required: true,
+		},
+		modelValue: {
+			type: Object,
+			required: true,
+		},
+	},
+	emits: ['update:modelValue', 'validity'],
+	data() {
+		return {
+			invalidIntegers: [],
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['tables', 'views']),
+		isValid() {
+			return this.invalidIntegers.length === 0
+		},
+		targetOptions() {
+			const tables = this.tables.map(table => ({
+				id: 'table-' + table.id,
+				targetType: 'table',
+				targetId: table.id,
+				label: (table.emoji ? table.emoji + ' ' : '') + table.title,
+			}))
+			const views = this.views
+				.filter(view => view.type !== 'grid')
+				.map(view => ({
+					id: 'view-' + view.id,
+					targetType: 'view',
+					targetId: view.id,
+					label: t('tables', '{title} (view)', { title: (view.emoji ? view.emoji + ' ' : '') + view.title }, undefined, { escape: false }),
+				}))
+			return [...tables, ...views]
+		},
+	},
+	watch: {
+		properties() {
+			// Another widget type has other fields, so earlier invalid input no longer applies
+			this.invalidIntegers = []
+		},
+		isValid: {
+			immediate: true,
+			handler(isValid) {
+				this.$emit('validity', isValid)
+			},
+		},
+	},
+	methods: {
+		/**
+		 * @param {string} name property name
+		 * @return {string} the data-cy of the field, in camelCase
+		 */
+		fieldDataCy(name) {
+			return 'widgetField' + name.charAt(0).toUpperCase() + name.slice(1)
+		},
+		/**
+		 * @param {string} name property name
+		 * @return {string|number|boolean|object|null} the current value of the property
+		 */
+		value(name) {
+			return this.modelValue[name]
+		},
+		/**
+		 * @param {string} name property name
+		 * @param {string|number|boolean|object|null} value the new value of the property
+		 */
+		set(name, value) {
+			this.$emit('update:modelValue', { ...this.modelValue, [name]: value })
+		},
+		/**
+		 * Stores a whole number, or nothing for an empty field. Anything else is marked
+		 * invalid instead of being rounded.
+		 *
+		 * @param {string} name property name
+		 * @param {string} text what was typed
+		 */
+		setInteger(name, text) {
+			const number = Number(text)
+			const isValid = text === '' || Number.isInteger(number)
+			this.invalidIntegers = isValid ? this.invalidIntegers.filter(invalid => invalid !== name) : [...new Set([...this.invalidIntegers, name])]
+			if (isValid) {
+				this.set(name, text === '' ? null : number)
+			}
+		},
+		/**
+		 * @param {string} name property name
+		 * @return {string|undefined} the stored color, or undefined for the theme color
+		 */
+		colorValue(name) {
+			return isHexColor(this.value(name)) ? this.value(name) : undefined
+		},
+		/**
+		 * @param {object} property the enum property
+		 * @param {string} value the stored value
+		 * @return {object|null} the option of the value, else the option of the default
+		 */
+		enumOption(property, value) {
+			return property.options.find(option => option.value === value) ?? property.options.find(option => option.value === property.default) ?? null
+		},
+		/**
+		 * @param {{type: string, id: number}|null} target the stored target
+		 * @return {object|null} the option of the target, or null when it is not in the lists
+		 */
+		targetOption(target) {
+			if (!target) {
+				return null
+			}
+			return this.targetOptions.find(option => option.targetType === target.type && option.targetId === target.id) ?? null
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.schema-form {
+	&__field {
+		margin-top: calc(2 * var(--default-grid-baseline));
+	}
+
+	&__input {
+		width: 100%;
+	}
+
+	&__color {
+		display: flex;
+		align-items: center;
+		gap: calc(3 * var(--default-grid-baseline));
+	}
+
+	&__swatch {
+		display: inline-block;
+		width: calc(5 * var(--default-grid-baseline));
+		height: calc(5 * var(--default-grid-baseline));
+		border: 1px solid var(--color-border-maxcontrast);
+		border-radius: var(--border-radius);
+	}
+
+	&__hint {
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>
diff --git a/src/modules/grid/widgetRegistry.js b/src/modules/grid/widgetRegistry.js
index 49bf755b94..bd958d46d1 100644
--- a/src/modules/grid/widgetRegistry.js
+++ b/src/modules/grid/widgetRegistry.js
@@ -4,6 +4,7 @@
  */
 import HeaderWidget from './widgets/HeaderWidget.vue'
 import TextWidget from './widgets/TextWidget.vue'
+import DataWidget from './widgets/DataWidget.vue'
 
 export const WIDGET_TYPE_HEADER = 'header'
 export const WIDGET_TYPE_TEXT = 'text'
@@ -17,6 +18,7 @@ export const WIDGET_TYPE_DATA = 'data'
 const widgetComponents = {
 	[WIDGET_TYPE_HEADER]: HeaderWidget,
 	[WIDGET_TYPE_TEXT]: TextWidget,
+	[WIDGET_TYPE_DATA]: DataWidget,
 }
 
 /**
diff --git a/src/modules/grid/widgets/DataWidget.vue b/src/modules/grid/widgets/DataWidget.vue
new file mode 100644
index 0000000000..228d6b6526
--- /dev/null
+++ b/src/modules/grid/widgets/DataWidget.vue
@@ -0,0 +1,203 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="data-widget">
+		<p v-if="widgetBroken" class="data-widget__empty" data-cy="dataWidgetBroken">
+			{{ t('tables', 'This table or view no longer exists') }}
+		</p>
+		<template v-else-if="!target">
+			<p v-if="editable" class="data-widget__empty">
+				{{ t('tables', 'Pick a table or view in the widget settings') }}
+			</p>
+		</template>
+		<NcLoadingIcon v-else-if="loading" :size="32" class="data-widget__loading" />
+		<p v-else-if="!element" class="data-widget__empty" data-cy="dataWidgetLoadFailed">
+			{{ t('tables', 'This table or view could not be loaded') }}
+		</p>
+		<template v-else>
+			<CustomView v-if="isView"
+				:view="element"
+				:columns="columns"
+				:rows="rows"
+				:view-setting="viewSetting"
+				@create-column="createColumn"
+				@import="openImportModal"
+				@update:view-setting="setting => viewSetting = setting" />
+			<TableWrapper v-else
+				:table="element"
+				:columns="columns"
+				:rows="rows"
+				:view-setting="viewSetting"
+				@create-column="createColumn"
+				@import="openImportModal"
+				@update:view-setting="setting => viewSetting = setting" />
+		</template>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+import { mapActions, mapState, storeToRefs } from 'pinia'
+import { emit } from '@nextcloud/event-bus'
+import TableWrapper from '../../main/sections/TableWrapper.vue'
+import CustomView from '../../main/sections/View.vue'
+import { useTablesStore } from '../../../store/store.js'
+import { useDataStore } from '../../../store/data.js'
+
+/**
+ * Shows the rows of one table or view inside a grid view.
+ */
+export default {
+	name: 'DataWidget',
+	components: {
+		NcLoadingIcon,
+		TableWrapper,
+		CustomView,
+	},
+	inject: {
+		// Set when the server marked the stored target as gone
+		widgetBroken: { default: false },
+	},
+	props: {
+		content: {
+			type: Object,
+			required: true,
+		},
+		// The prompt to pick a target only shows while the page is edited
+		editable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		const store = useDataStore()
+		const { getColumns, getRows } = storeToRefs(store)
+		return { getColumns, getRows }
+	},
+	data() {
+		return {
+			loading: false,
+			loadFailed: false,
+			viewSetting: {},
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['tables', 'views']),
+		target() {
+			return this.content.target ?? null
+		},
+		isView() {
+			return this.target?.type === 'view'
+		},
+		targetId() {
+			return this.target?.id ?? null
+		},
+		element() {
+			if (!this.targetId || this.loadFailed) {
+				return null
+			}
+			return this.isView
+				? this.views.find(view => view.id === this.targetId) ?? null
+				: this.tables.find(table => table.id === this.targetId) ?? null
+		},
+		columns() {
+			return this.getColumns(this.isView, this.targetId) ?? []
+		},
+		rows() {
+			return this.getRows(this.isView, this.targetId) ?? []
+		},
+	},
+	watch: {
+		target: {
+			deep: true,
+			handler() {
+				this.load()
+			},
+		},
+	},
+	created() {
+		// Counts the loads, so a load that a newer one overtook leaves the state alone
+		this.loadRequest = 0
+	},
+	mounted() {
+		this.load()
+	},
+	methods: {
+		...mapActions(useTablesStore, ['loadContextTable', 'loadContextView']),
+		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		/**
+		 * Loads the table or view with its columns, rows and relations. A target the server
+		 * marked as gone is not requested.
+		 */
+		async load() {
+			const request = ++this.loadRequest
+			this.loadFailed = false
+			if (!this.targetId || this.widgetBroken) {
+				this.loading = false
+				return
+			}
+			this.loading = true
+			try {
+				if (this.isView) {
+					await this.loadContextView({ id: this.targetId })
+					const view = this.views.find(view => view.id === this.targetId)
+					if (view) {
+						await this.loadColumnsFromBE({ view })
+						await this.loadRowsFromBE({ viewId: view.id, tableId: view.tableId })
+						await this.loadRelationsFromBE({ viewId: view.id })
+					}
+				} else {
+					await this.loadContextTable({ id: this.targetId })
+					await this.loadColumnsFromBE({ view: null, tableId: this.targetId })
+					await this.loadRowsFromBE({ viewId: null, tableId: this.targetId })
+					await this.loadRelationsFromBE({ tableId: this.targetId })
+				}
+			} catch {
+				// The store already reported the error
+				if (request === this.loadRequest) {
+					this.loadFailed = true
+				}
+			} finally {
+				if (request === this.loadRequest) {
+					this.loading = false
+				}
+			}
+		},
+		/**
+		 * Asks the app to open the create column dialog for the shown table or view.
+		 */
+		createColumn() {
+			emit('tables:column:create', { isView: this.isView, element: this.element })
+		},
+		/**
+		 * Asks the app to open the import dialog for the shown table or view.
+		 */
+		openImportModal() {
+			emit('tables:modal:import', { element: this.element, isView: this.isView })
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.data-widget {
+	height: 100%;
+	overflow: auto;
+
+	&__loading {
+		margin: calc(4 * var(--default-grid-baseline)) auto;
+	}
+
+	&__empty {
+		padding: calc(3 * var(--default-grid-baseline));
+		color: var(--color-text-maxcontrast);
+	}
+
+	:deep(h1) {
+		font-size: unset;
+		font-size: revert;
+	}
+}
+</style>
diff --git a/src/modules/modals/AddWidget.vue b/src/modules/modals/AddWidget.vue
new file mode 100644
index 0000000000..5d97360def
--- /dev/null
+++ b/src/modules/modals/AddWidget.vue
@@ -0,0 +1,173 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog v-if="showModal"
+		:name="editingWidget ? t('tables', 'Configure widget') : t('tables', 'Add widget')"
+		size="normal"
+		data-cy="addWidgetModal"
+		@closing="$emit('close')">
+		<div class="modal__content">
+			<div class="row space-T">
+				<NcSelect :model-value="selectedType"
+					class="add-widget__input"
+					:input-label="t('tables', 'Widget type')"
+					:options="typeOptions"
+					:clearable="false"
+					:disabled="editingWidget !== null"
+					label="label"
+					data-cy="addWidgetType"
+					@update:model-value="selectType" />
+			</div>
+
+			<div class="row space-T">
+				<NcTextField v-model="title" class="add-widget__input" :label="t('tables', 'Widget title')" data-cy="addWidgetTitle" />
+			</div>
+			<div class="row">
+				<NcCheckboxRadioSwitch v-model="showTitle" data-cy="addWidgetShowTitle">
+					{{ t('tables', 'Show the title above the widget') }}
+				</NcCheckboxRadioSwitch>
+			</div>
+
+			<SchemaForm v-if="widgetType"
+				v-model="content"
+				:properties="widgetType.properties"
+				@validity="isValid => formIsValid = isValid" />
+		</div>
+		<template #actions>
+			<NcButton variant="primary" :disabled="!canSubmit" data-cy="addWidgetSubmit" @click="submit">
+				{{ editingWidget ? t('tables', 'Save widget') : t('tables', 'Add widget') }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcCheckboxRadioSwitch, NcDialog, NcSelect, NcTextField } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
+import SchemaForm from '../grid/SchemaForm.vue'
+import { useTablesStore } from '../../store/store.js'
+import { defaultConfiguration, defaultContent, findWidgetType } from '../grid/gridLayout.js'
+
+/**
+ * Collects the type, configuration and content of a widget; the content form comes
+ * from the schema of the type. The parent places the widget on the grid.
+ */
+export default {
+	name: 'AddWidget',
+	components: {
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
+		NcSelect,
+		NcTextField,
+		SchemaForm,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		editingWidget: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close', 'submit'],
+	data() {
+		return {
+			selectedType: null,
+			title: '',
+			showTitle: false,
+			content: {},
+			formIsValid: true,
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['widgetTypes']),
+		typeOptions() {
+			return this.widgetTypes.map(widgetType => ({ id: widgetType.type, label: widgetType.title }))
+		},
+		widgetType() {
+			return findWidgetType(this.widgetTypes, this.selectedType?.id)
+		},
+		canSubmit() {
+			if (!this.widgetType || !this.formIsValid) {
+				return false
+			}
+			return Object.entries(this.widgetType.properties).every(([name, property]) => {
+				if (!property.required) {
+					return true
+				}
+				const value = this.content[name]
+				return property.type === 'target' ? !!value?.id : String(value ?? '').trim() !== ''
+			})
+		},
+	},
+	watch: {
+		showModal(open) {
+			if (open) {
+				this.reset()
+			}
+		},
+	},
+	methods: {
+		...mapActions(useTablesStore, ['loadWidgetTypes']),
+		/**
+		 * Fills the form for a new widget, or with the widget being configured. A widget of a type
+		 * the server does not know keeps no type here, so it can never be saved as another one.
+		 */
+		async reset() {
+			// Awaited only when the types are missing, so the common case fills the form before it renders
+			if (this.widgetTypes.length === 0) {
+				await this.loadWidgetTypes()
+			}
+			if (this.editingWidget) {
+				this.selectedType = this.typeOptions.find(option => option.id === this.editingWidget.type) ?? null
+				this.title = this.editingWidget.configuration?.title ?? ''
+				this.showTitle = !!this.editingWidget.configuration?.showTitle
+				this.content = { ...defaultContent(this.widgetType), ...JSON.parse(JSON.stringify(this.editingWidget.content ?? {})) }
+				return
+			}
+			this.title = ''
+			this.selectType(this.typeOptions[0] ?? null)
+		},
+		/**
+		 * A type the user picks starts from the defaults of that type. Only this resets the form,
+		 * so loading a widget to configure keeps its content.
+		 *
+		 * @param {object|null} option the picked type
+		 */
+		selectType(option) {
+			this.selectedType = option
+			this.showTitle = defaultConfiguration(this.widgetType).showTitle ?? false
+			this.content = defaultContent(this.widgetType)
+		},
+		/**
+		 * Hands the widget to the parent, which places it on the grid.
+		 */
+		submit() {
+			if (!this.canSubmit) {
+				return
+			}
+			this.$emit('submit', {
+				type: this.widgetType.type,
+				// An empty title stays empty; the card shows the type name in the viewer's language instead
+				configuration: { title: this.title.trim(), showTitle: this.showTitle },
+				content: JSON.parse(JSON.stringify(this.content)),
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding-inline-end: 0 !important;
+
+	.add-widget__input {
+		width: 100%;
+	}
+}
+</style>