feat(admin): show configured fields in content lists

Author: logelog

.changeset/collection-list-columns.md

@@ -0,0 +1,6 @@
+---
+"emdash": minor
+"@emdash-cms/admin": minor
+---
+
+Adds collection-configured custom field columns to admin content lists. Collection seeds and schema APIs can declare up to four supported fields through `admin.listColumns`; EmDash validates them when building the manifest and renders their stored values between the title and status columns.

packages/admin/src/components/ContentList.tsx

@@ -42,6 +42,13 @@ export interface ContentListSort {
 	direction: "asc" | "desc";
 }
 
+export interface ContentListColumn {
+	slug: string;
+	label: string;
+	kind: string;
+	options?: Array<{ value: string; label: string }>;
+}
+
 /** Status filter values. `"all"` clears the status filter. */
 export type ContentStatusFilter = "all" | "published" | "draft" | "scheduled" | "archived";
 
@@ -63,6 +70,8 @@ export interface ContentListProps {
 	collection: string;
 	collectionLabel: string;
 	items: ContentItem[];
+	/** Validated custom-field columns from the collection manifest. */
+	listColumns?: ContentListColumn[];
 	trashedItems?: TrashedContentItem[];
 	isLoading?: boolean;
 	isTrashedLoading?: boolean;
@@ -157,6 +166,7 @@ export function ContentList({
 	collection,
 	collectionLabel,
 	items,
+	listColumns = [],
 	trashedItems = [],
 	isLoading,
 	isTrashedLoading,
@@ -315,7 +325,7 @@ export function ContentList({
 			}
 		})();
 	};
-	const colSpan = (i18n ? 5 : 4) + (bulkEnabled ? 1 : 0);
+	const colSpan = (i18n ? 5 : 4) + listColumns.length + (bulkEnabled ? 1 : 0);
 
 	return (
 		<div className="space-y-4">
@@ -504,6 +514,15 @@ export function ContentList({
 										onSortChange={onSortChange}
 										label={t`Title`}
 									/>
+									{listColumns.map((column) => (
+										<th
+											key={column.slug}
+											scope="col"
+											className="px-4 py-3 text-start text-sm font-medium"
+										>
+											{column.label}
+										</th>
+									))}
 									<SortableTh
 										field="status"
 										sort={sort}
@@ -575,6 +594,7 @@ export function ContentList({
 											onDuplicate={onDuplicate}
 											showLocale={!!i18n}
 											urlPattern={urlPattern}
+											listColumns={listColumns}
 											selectable={bulkEnabled}
 											selected={selectedIds.has(item.id)}
 											onToggleSelect={toggleOne}
@@ -943,6 +963,7 @@ interface ContentListItemProps {
 	onDuplicate?: (id: string) => void;
 	showLocale?: boolean;
 	urlPattern?: string;
+	listColumns: ContentListColumn[];
 	selectable?: boolean;
 	selected?: boolean;
 	onToggleSelect?: (id: string) => void;
@@ -955,6 +976,7 @@ function ContentListItem({
 	onDuplicate,
 	showLocale,
 	urlPattern,
+	listColumns,
 	selectable,
 	selected,
 	onToggleSelect,
@@ -984,6 +1006,9 @@ function ContentListItem({
 					{title}
 				</Link>
 			</td>
+			{listColumns.map((column) => (
+				<ContentListCustomCell key={column.slug} column={column} value={item.data[column.slug]} />
+			))}
 			<td className="px-4 py-3">
 				<StatusBadge
 					status={item.status}
@@ -1071,6 +1096,74 @@ function ContentListItem({
 	);
 }
 
+function ContentListCustomCell({
+	column,
+	value,
+}: {
+	column: ContentListColumn;
+	value: unknown;
+}): React.ReactNode {
+	const text = formatListColumnValue(column, value);
+	return (
+		<td className="max-w-48 px-4 py-3 text-sm">
+			<span className="block truncate" title={text}>
+				{text}
+			</span>
+		</td>
+	);
+}
+
+function formatListColumnValue(column: ContentListColumn, value: unknown): string {
+	if (value === null || value === undefined || value === "") return "—";
+
+	const optionLabel = (optionValue: unknown): string => {
+		const text = scalarListColumnValue(optionValue);
+		if (text === undefined) return "—";
+		return column.options?.find((option) => option.value === text)?.label ?? text;
+	};
+
+	switch (column.kind) {
+		case "select":
+			return optionLabel(value);
+		case "multiSelect": {
+			let values: unknown[];
+			if (Array.isArray(value)) {
+				values = value;
+			} else if (typeof value === "string") {
+				try {
+					const parsed: unknown = JSON.parse(value);
+					values = Array.isArray(parsed) ? parsed : [value];
+				} catch {
+					values = [value];
+				}
+			} else {
+				values = [value];
+			}
+			return values.length > 0 ? values.map(optionLabel).join(", ") : "—";
+		}
+		case "boolean":
+			return value === true || value === 1 || value === "1" || value === "true" ? "✓" : "—";
+		case "datetime": {
+			const text = scalarListColumnValue(value);
+			if (text === undefined) return "—";
+			const date = new Date(text);
+			return Number.isNaN(date.getTime()) ? text : date.toLocaleDateString();
+		}
+		case "number":
+		case "string":
+		default:
+			return scalarListColumnValue(value) ?? "—";
+	}
+}
+
+function scalarListColumnValue(value: unknown): string | undefined {
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "bigint" || typeof value === "boolean") {
+		return String(value);
+	}
+	return undefined;
+}
+
 interface TrashedListItemProps {
 	item: TrashedContentItem;
 	onRestore?: (id: string) => void;

packages/admin/src/components/index.ts

@@ -5,7 +5,7 @@ export { Header } from "./Header";
 
 // Page components
 export { Dashboard, type DashboardProps } from "./Dashboard";
-export { ContentList, type ContentListProps } from "./ContentList";
+export { ContentList, type ContentListColumn, type ContentListProps } from "./ContentList";
 export { ContentEditor, type ContentEditorProps, type FieldDescriptor } from "./ContentEditor";
 export { MediaLibrary, type MediaLibraryProps } from "./MediaLibrary";
 export { MediaPickerModal, type MediaPickerModalProps } from "./MediaPickerModal";

packages/admin/src/lib/api/client.ts

@@ -93,6 +93,7 @@ export interface AdminManifest {
 			supports: string[];
 			hasSeo: boolean;
 			urlPattern?: string;
+			listColumns?: string[];
 			fields: Record<
 				string,
 				{

packages/admin/src/lib/api/schema.ts

@@ -32,6 +32,7 @@ export interface SchemaCollection {
 	labelSingular?: string;
 	description?: string;
 	icon?: string;
+	admin?: CollectionAdminConfig;
 	supports: string[];
 	source?: string;
 	urlPattern?: string;
@@ -44,6 +45,10 @@ export interface SchemaCollection {
 	updatedAt: string;
 }
 
+export interface CollectionAdminConfig {
+	listColumns?: string[];
+}
+
 export interface SchemaField {
 	id: string;
 	collectionId: string;
@@ -80,6 +85,7 @@ export interface CreateCollectionInput {
 	labelSingular?: string;
 	description?: string;
 	icon?: string;
+	admin?: CollectionAdminConfig;
 	supports?: string[];
 	urlPattern?: string;
 	hasSeo?: boolean;
@@ -90,6 +96,7 @@ export interface UpdateCollectionInput {
 	labelSingular?: string;
 	description?: string;
 	icon?: string;
+	admin?: CollectionAdminConfig;
 	supports?: string[];
 	urlPattern?: string;
 	hasSeo?: boolean;

packages/admin/src/router.tsx

@@ -571,6 +571,19 @@ function ContentListPage() {
 		return <ErrorScreen error={error.message} />;
 	}
 
+	const listColumns = (collectionConfig.listColumns ?? []).flatMap((slug) => {
+		const field = collectionConfig.fields[slug];
+		if (!field) return [];
+		return [
+			{
+				slug,
+				label: field.label ?? slug,
+				kind: field.kind,
+				options: Array.isArray(field.options) ? field.options : undefined,
+			},
+		];
+	});
+
 	const handleLocaleChange = (locale: string) => {
 		// Update URL search params without full navigation
 		void navigate({
@@ -585,6 +598,7 @@ function ContentListPage() {
 			collection={collection}
 			collectionLabel={collectionConfig.label}
 			items={items}
+			listColumns={listColumns}
 			trashedItems={trashedData?.items || []}
 			isLoading={isLoading || isFetchingNextPage}
 			isTrashedLoading={isTrashedLoading}

packages/admin/tests/components/ContentList.test.tsx

@@ -111,6 +111,47 @@ describe("ContentList", () => {
 			await expect.element(screen.getByText("Second")).toBeInTheDocument();
 			await expect.element(screen.getByText("Third")).toBeInTheDocument();
 		});
+
+		it("renders configured custom fields using their field metadata", async () => {
+			const items = [
+				makeItem({
+					data: {
+						title: "Support request",
+						ticket_number: "SUP-1042",
+						priority: "urgent",
+						labels: ["bug", "unknown"],
+						vip: true,
+					},
+				}),
+			];
+			const screen = await render(
+				<ContentList
+					{...defaultProps}
+					items={items}
+					listColumns={[
+						{ slug: "ticket_number", label: "Ticket", kind: "string" },
+						{
+							slug: "priority",
+							label: "Priority",
+							kind: "select",
+							options: [{ value: "urgent", label: "Urgent" }],
+						},
+						{
+							slug: "labels",
+							label: "Labels",
+							kind: "multiSelect",
+							options: [{ value: "bug", label: "Bug" }],
+						},
+						{ slug: "vip", label: "VIP", kind: "boolean" },
+					]}
+				/>,
+			);
+
+			await expect.element(screen.getByText("SUP-1042")).toBeInTheDocument();
+			await expect.element(screen.getByText("Urgent")).toBeInTheDocument();
+			await expect.element(screen.getByText("Bug, unknown")).toBeInTheDocument();
+			await expect.element(screen.getByText("✓")).toBeInTheDocument();
+		});
 	});
 
 	describe("empty states", () => {

packages/core/src/api/schemas/schema.ts

@@ -10,6 +10,12 @@ const collectionSupportValues = z.enum(["drafts", "revisions", "preview", "sched
 
 const collectionSourcePattern = /^(template:.+|import:.+|manual|discovered|seed)$/;
 
+const collectionAdminConfig = z.object({
+	listColumns: z
+		.array(z.string().min(1).max(63).regex(slugPattern, "Invalid field slug format"))
+		.optional(),
+});
+
 const fieldTypeValues = z.enum([
 	"string",
 	"text",
@@ -82,6 +88,7 @@ export const createCollectionBody = z
 		labelSingular: z.string().optional(),
 		description: z.string().optional(),
 		icon: z.string().optional(),
+		admin: collectionAdminConfig.optional(),
 		supports: z.array(collectionSupportValues).optional(),
 		source: z.string().regex(collectionSourcePattern).optional(),
 		urlPattern: z.string().optional(),
@@ -95,6 +102,7 @@ export const updateCollectionBody = z
 		labelSingular: z.string().optional(),
 		description: z.string().optional(),
 		icon: z.string().optional(),
+		admin: collectionAdminConfig.optional(),
 		supports: z.array(collectionSupportValues).optional(),
 		urlPattern: z.string().nullish(),
 		hasSeo: z.boolean().optional(),
@@ -175,6 +183,7 @@ export const collectionSchema = z
 		labelSingular: z.string().nullable(),
 		description: z.string().nullable(),
 		icon: z.string().nullable(),
+		admin: collectionAdminConfig.optional(),
 		supports: z.array(z.string()),
 		source: z.string().nullable(),
 		urlPattern: z.string().nullable(),

packages/core/src/astro/types.ts

@@ -31,6 +31,8 @@ export interface ManifestCollection {
 	supports: string[];
 	hasSeo: boolean;
 	urlPattern?: string;
+	/** Valid custom field slugs to render in the admin content list. */
+	listColumns?: string[];
 	fields: Record<
 		string,
 		{

packages/core/src/cli/commands/export-seed.ts

@@ -314,6 +314,7 @@ async function exportCollections(db: Kysely<Database>): Promise<SeedCollection[]
 			labelSingular: collection.labelSingular || undefined,
 			description: collection.description || undefined,
 			icon: collection.icon || undefined,
+			admin: collection.admin,
 			supports: collection.supports.length > 0 ? collection.supports : undefined,
 			urlPattern: collection.urlPattern || undefined,
 			fields: fields.map(