Formatted non-intrusive table

src/app/components/building-passport/FeatureTable.tsx

@@ -46,18 +46,20 @@ export default function FeatureTable<
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
-                );
-              })}
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  style={{
+                    // Style the header to match the column width, if passed
+                    width: `${header.getSize()}px`,
+                  }}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableHead>
+              ))}
             </TableRow>
           ))}
         </TableHeader>

src/app/components/building-passport/FeatureTableColumns.tsx

@@ -47,6 +47,7 @@ export const generalColumns: ColumnDef<GeneralFeature>[] = [
   {
     accessorKey: "feature",
     header: "Feature",
+    size: 100,
   },
   {
     accessorKey: "description",
@@ -58,6 +59,7 @@ export const nonInstrusiveColumns: ColumnDef<NonInstrusiveFeature>[] = [
   {
     accessorKey: "title",
     header: "Feature",
+    size: 100,
   },
   {
     accessorKey: "note",