Update initialColumns default (#5623)

.changeset/cyan-needles-drop.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/admin-ui': patch
+---
+
+Improved the default value for `ui.initialColumns` to show the first three fields, rather than just the label field.

docs/pages/apis/schema.mdx

@@ -114,7 +114,7 @@ Options:
     Can be overridden by per-field values in the `field.ui.listView.fieldMode` config.
     See the [Fields API](./fields) for details.
     Can be one of `['read', 'hidden']`, or an async function with an argument `{ session }` that returns one of `['read', 'hidden']`.
-  - `initialColumns` (default: `[labelField]`). A list of field names to display in columns in the list view. By default only the label column, as determined by `labelField`, is shown.
+  - `initialColumns` (default: The first three fields defined in the list). A list of field names to display in columns in the list view. By default only the label column, as determined by `labelField`, is shown.
   - `initialSort` (default: `undefined`): Sets the field and direction to be used to initially sort the data in the list view.
     Option `field` is the name of the field to sort by, and `direction` is either `'ASC'` or `'DESC'` for ascending and descending sorting respectively.
     If undefined then data will be unsorted.

packages-next/admin-ui/src/system/createAdminMeta.ts

@@ -22,6 +22,24 @@ export function createAdminMeta(config: KeystoneConfig, keystone: BaseKeystone)
         : listConfig.fields.title
         ? 'title'
         : 'id');
+
+    let initialColumns: string[];
+    if (listConfig.ui?.listView?.initialColumns) {
+      // If they've asked for a particular thing, give them that thing
+      initialColumns = listConfig.ui.listView.initialColumns as string[];
+    } else {
+      // Otherwise, we'll start with the labelField on the left and then add
+      // 2 more fields to the right of that. We don't include the 'id' field
+      // unless it happened to be the labelField
+      initialColumns = [
+        labelField,
+        ...Object.keys(listConfig.fields)
+          .filter(fieldKey => listConfig.fields[fieldKey].config.access?.read !== false)
+          .filter(fieldKey => fieldKey !== labelField)
+          .filter(fieldKey => fieldKey !== 'id'),
+      ].slice(0, 3);
+    }
+
     adminMetaRoot.listsByKey[key] = {
       key,
       labelField,
@@ -32,7 +50,7 @@ export function createAdminMeta(config: KeystoneConfig, keystone: BaseKeystone)
       path: list.adminUILabels.path,
       fields: [],
       pageSize: listConfig.ui?.listView?.pageSize ?? 50,
-      initialColumns: (listConfig.ui?.listView?.initialColumns as string[]) ?? [labelField],
+      initialColumns,
       initialSort:
         (listConfig.ui?.listView?.initialSort as
           | { field: string; direction: 'ASC' | 'DESC' }