Fixes from review

src/components/Flashpack/Details/index.jsx

@@ -146,7 +146,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={1}
+                colSpan={2}
                 count={totalFlashpackECUMappings}
                 rowsPerPage={pageSize}
                 page={pageIndex}

src/components/Flashpack/__snapshots__/index.test.jsx.snap

@@ -122,6 +122,29 @@ exports[`Flashpack Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Delete
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                 </tr>
               </thead>
               <tbody

src/components/Flashpack/index.jsx

@@ -36,6 +36,10 @@ const tableColumns = [
     id: "car_year",
     label: "Year",
   },
+  {
+    id: "delete",
+    label: "Delete",
+  },
 ];
 
 const PAGE_SIZE = "FLASHPACKS_TABLE_PAGE_SIZE";
@@ -144,7 +148,7 @@ const MainForm = () => {
         />
         <TableBody>
           {flashpacks && flashpacks.map((row, index) => (
-            <TableRow key={index}>
+            <TableRow key={row.flashpack + row.car_model}>
               <TableCell align="center">
                 <Link to={`/tools/flashpack/${row.car_model}/${row.car_year}/${row.flashpack}`}>
                   {row.flashpack}
@@ -156,7 +160,7 @@ const MainForm = () => {
               <TableCell align="center">
                 {row.car_year}
               </TableCell>
-              <TableCell>
+              <TableCell align="center">
                 <RoleWrap
                   groups={groups}
                   providers={providers}
@@ -182,7 +186,7 @@ const MainForm = () => {
             ) : (
               <TablePagination
                 rowsPerPageOptions={[5, 10, 25, 100]}
-                colSpan={1}
+                colSpan={4}
                 count={totalFlashpacks}
                 rowsPerPage={pageSize}
                 page={pageIndex}