Skip to content

Conversation

@interim17
Copy link
Contributor

Problem

Closes #329

Solution

Added a little CSS and and onCell property for the table cells.

It feels like by having the onCell we could potentially do away with the anchor tag approach but leaving it in felt like it was more in line with accessibility standards, and we would have to rewrite more of the CSS if we took it out.

  • New feature (non-breaking change which adds functionality)

@netlify
Copy link

netlify bot commented Oct 10, 2025

Deploy Preview for cell-catalog ready!

Name Link
🔨 Latest commit 59cc06f
🔍 Latest deploy log https://app.netlify.com/projects/cell-catalog/deploys/68f91c375cde720007d40539
😎 Deploy Preview https://deploy-preview-346--cell-catalog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@interim17 interim17 marked this pull request as ready for review October 10, 2025 00:37
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds pointer cursor styling and click handlers to order column cells in table components, allowing users to click anywhere within the cell to open order links.

  • Added CSS styling for action column cells with pointer cursor
  • Implemented onCell click handlers that open order links in new tabs
  • Enhanced user experience by making entire table cells clickable instead of just anchor elements

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
src/style/table.module.css Added cursor pointer styling for action columns and disabled state handling
src/components/CellLineTable/SharedColumns.tsx Added onCell click handler to obtainLineColumn for opening order links
src/components/CellLineTable/NormalTableColumns.tsx Added onCell click handler to obtainPlasmidColumn for opening order links

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Comment on lines +89 to +91
.container .action-column:has(.action-button.disabled) {
cursor: not-allowed;
}

This comment was marked as resolved.

Comment on lines 99 to 103
onClick: () => {
if (record.orderLink) {
window.open(record.orderLink, "_blank", "noopener,noreferrer");
}
},

This comment was marked as resolved.

Comment on lines 51 to 57
onCell: (record: UnpackedNormalCellLine) => ({
onClick: () => {
if (record.orderPlasmid) {
window.open(record.orderPlasmid, "_blank", "noopener,noreferrer");
}
},
}),

This comment was marked as resolved.

@interim17 interim17 changed the title and pointer and click handler to order column cells add pointer and click handler to order column cells Oct 10, 2025
@interim17 interim17 merged commit 4ae46d8 into main Oct 22, 2025
4 checks passed
@interim17 interim17 deleted the fix/order-click-target branch October 22, 2025 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Click target for main table buttons too small

4 participants