feat: minor table fixes

Author: transitive-bullshit

src/block.tsx

@@ -269,45 +269,52 @@ export const Block: React.FC<Block> = props => {
       );
     case "collection_view":
       if (!block) return null;
+
       const collectionView = block?.collection?.types[0];
 
       return (
         <div>
           <h3 className="notion-h3">
             {renderChildText(block.collection?.title!)}
           </h3>
+
           {collectionView?.type === "table" && (
             <div style={{ maxWidth: "100%", marginTop: 5 }}>
               <table className="notion-table">
                 <thead>
                   <tr className="notion-tr">
                     {collectionView.format?.table_properties
                       ?.filter(p => p.visible)
-                      .map(gp => (
+                      .map((gp, index) => (
                         <th
                           className="notion-th"
+                          key={index}
                           style={{ minWidth: gp.width }}
                         >
-                          {block.collection?.schema[gp.property].name}
+                          {block.collection?.schema[gp.property]?.name}
                         </th>
                       ))}
                   </tr>
                 </thead>
+
                 <tbody>
-                  {block?.collection?.data.map(row => (
-                    <tr className="notion-tr">
+                  {block?.collection?.data.map((row, index) => (
+                    <tr className="notion-tr" key={index}>
                       {collectionView.format?.table_properties
                         ?.filter(p => p.visible)
-                        .map(gp => (
+                        .map((gp, index) => (
                           <td
+                            key={index}
                             className={
                               "notion-td " +
                               (gp.property === "title" ? "notion-bold" : "")
                             }
                           >
                             {
                               renderChildText(
-                                row[block.collection?.schema[gp.property].name!]
+                                row[
+                                  block.collection?.schema[gp.property]?.name!
+                                ]
                               )!
                             }
                           </td>
@@ -318,6 +325,7 @@ export const Block: React.FC<Block> = props => {
               </table>
             </div>
           )}
+
           {collectionView?.type === "gallery" && (
             <div className="notion-gallery">
               {block.collection?.data.map((row, i) => (

src/styles.css

@@ -476,6 +476,7 @@ img.notion-page-icon {
 }
 
 .notion-table {
+  width: 100%;
   border-left: none;
   border-right: none;
   border-spacing: 0px;