fix: use field label in table view if possible

packages/core/src/components/collections/entries/EntryListing.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { Waypoint } from 'react-waypoint';
 
 import { selectFields, selectInferredField } from '@staticcms/core/lib/util/collection.util';
+import { toTitleCaseFromKey } from '@staticcms/core/lib/util/string.util';
 import Table from '../../common/table/Table';
 import EntryCard from './EntryCard';
 
@@ -122,18 +123,27 @@ const EntryListing = ({
 
   const summaryFieldHeaders = useMemo(() => {
     if ('collection' in otherProps) {
-      return selectFields(otherProps.collection).map(f => f.label ?? f.name);
+      const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
+        acc[f.name] = f;
+        return acc;
+      }, {} as Record<string, Field>);
+      return summaryFields.map(summaryField => {
+        const field = collectionFields[summaryField];
+        return !field
+          ? toTitleCaseFromKey(summaryField)
+          : field.label ?? toTitleCaseFromKey(field.name);
+      });
     }
 
     return [];
-  }, [otherProps]);
+  }, [otherProps, summaryFields]);
 
   if (viewStyle === 'VIEW_STYLE_LIST') {
     return (
       <>
         <Table
           columns={
-            !isSingleCollectionInList ? ['Collection', ...summaryFieldHeaders] : summaryFields
+            !isSingleCollectionInList ? ['Collection', ...summaryFieldHeaders] : summaryFieldHeaders
           }
         >
           {renderedCards}

packages/core/src/components/common/table/Table.tsx

@@ -13,7 +13,7 @@ const TableCell = ({ columns, children }: TableCellProps) => {
   return (
     <div className="relative overflow-x-auto shadow-md sm:rounded-lg border border-slate-200 dark:border-gray-700">
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-300 ">
-        <thead className="text-xs text-gray-700 uppercase bg-slate-50 dark:bg-slate-700 dark:text-gray-300">
+        <thead className="text-xs text-gray-700 bg-slate-50 dark:bg-slate-700 dark:text-gray-300">
           <tr>
             {columns.map((column, index) => (
               <TableHeaderCell key={index}>{column}</TableHeaderCell>