fix conditional row action artifact

voxel51 · Oct 23, 2024 · f93110f · f93110f
1 parent 866c8c6
commit f93110f
Showing 1 changed file with 37 additions and 31 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx
@@ -123,38 +123,44 @@ export default function TableView(props: ViewPropsType) {
               </TableRow>
             </TableHead>
             <TableBody {...getComponentProps(props, "tableBody")}>
-              {rows.map((item, rowIndex) => (
-                <TableRow
-                  key={item.id}
-                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                  {...getComponentProps(props, "tableBodyRow")}
-                >
-                  {columns.map(({ key }, columnIndex) => {
-                    const coordinate = [rowIndex, columnIndex].join(",");
-                    const isSelected =
-                      selectedCells.has(coordinate) ||
-                      selectedRows.has(rowIndex) ||
-                      selectedColumns.has(columnIndex);
-                    return (
-                      <TableCell
-                        key={key}
-                        sx={{ background: isSelected ? "green" : "unset" }}
-                        onClick={() => {
-                          handleCellClick(rowIndex, columnIndex);
-                        }}
-                        {...getComponentProps(props, "tableBodyCell")}
-                      >
-                        {formatCellValue(item[key], props)}
+              {rows.map((item, rowIndex) => {
+                const rowActions = getRowActions(rowIndex);
+                const currentRowHasActions = rowActions?.length > 0;
+                return (
+                  <TableRow
+                    key={item.id}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    {...getComponentProps(props, "tableBodyRow")}
+                  >
+                    {columns.map(({ key }, columnIndex) => {
+                      const coordinate = [rowIndex, columnIndex].join(",");
+                      const isSelected =
+                        selectedCells.has(coordinate) ||
+                        selectedRows.has(rowIndex) ||
+                        selectedColumns.has(columnIndex);
+                      return (
+                        <TableCell
+                          key={key}
+                          sx={{ background: isSelected ? "green" : "unset" }}
+                          onClick={() => {
+                            handleCellClick(rowIndex, columnIndex);
+                          }}
+                          {...getComponentProps(props, "tableBodyCell")}
+                        >
+                          {formatCellValue(item[key], props)}
+                        </TableCell>
+                      );
+                    })}
+                    {hasRowActions && (
+                      <TableCell align="right">
+                        {currentRowHasActions && (
+                          <ActionsMenu actions={getRowActions(rowIndex)} />
+                        )}
                       </TableCell>
-                    );
-                  })}
-                  {hasRowActions && (
-                    <TableCell align="right">
-                      <ActionsMenu actions={getRowActions(rowIndex)} />
-                    </TableCell>
-                  )}
-                </TableRow>
-              ))}
+                    )}
+                  </TableRow>
+                );
+              })}
             </TableBody>
           </Table>
         </TableContainer>