Skip to content

Give clickable table rows a pointer cursor automatically - #77

Open
methodofaction wants to merge 1 commit into
mainfrom
table-clickable-cursor
Open

Give clickable table rows a pointer cursor automatically#77
methodofaction wants to merge 1 commit into
mainfrom
table-clickable-cursor

Conversation

@methodofaction

Copy link
Copy Markdown
Contributor

What

Clickable table rows now advertise themselves with cursor: pointer automatically — no more remembering to add it by hand (which kept biting us).

The table styles detect click wiring from the attributes the supported stacks put on the row:

  • onclick (plain JS)
  • hx-get / hx-post / hx-put / hx-patch / hx-delete (HTMX)
  • @click / x-on:click (Alpine — escaped attribute selectors)
  • data-clickable — explicit opt-in for rows whose listener is attached programmatically, where there's no attribute for CSS to see

Scoped to .popui-table-row-hover tbody tr, which every popui.Table applies, so consumers get it for free. Plain rows keep cursor: auto.

Docs

The "Clickable Rows" example previously told consumers to pass [&_tr:hover_td]:cursor-pointer via the Class prop; it now demonstrates onclick rows and the data-clickable opt-in instead.

Verification

Checked computed styles in the docs site: rows with onclick, data-clickable, hx-get, hx-delete, @click, and x-on:click all compute cursor: pointer; rows without any wiring stay auto.

🤖 Generated with Claude Code

A body row that carries click wiring — onclick, the hx-* verbs, or
Alpine's @click / x-on:click — now gets cursor: pointer from the table
styles themselves, so consumers no longer have to remember to add it by
hand. Rows whose listener is attached programmatically (no attribute to
detect) opt in with data-clickable.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@netlify

netlify Bot commented Sep 3, 2026

Copy link
Copy Markdown

Deploy Preview for popui-go ready!

Name Link
🔨 Latest commit 646b99f
🔍 Latest deploy log https://app.netlify.com/projects/popui-go/deploys/6a9939684d2ab80007103ea8
😎 Deploy Preview https://deploy-preview-77--popui-go.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.

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.

1 participant