@spark-web/data-table 5.2.1 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @spark-web/data-table
 
+## 5.2.2
+
+### Patch Changes
+
+- [#798](https://github.com/brighte-labs/spark-web/pull/798)
+  [`a8425fd`](https://github.com/brighte-labs/spark-web/commit/a8425fd4c279ce5df76467b40aa114c14ef5e069)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  `DataTable` now automatically zeroes the `<td>` padding on cells whose direct
+  child is an `<a>`, so consumers using the row-as-link pattern can let the link
+  itself provide the cell padding. Without this, the cell's 16px padding ring
+  was unclickable. Nested anchors (deeper than direct child) are unaffected. See
+  the package's `CLAUDE.md` for the full pattern.
+
 ## 5.2.1
 
 ### Patch Changes

package/CLAUDE.md

@@ -80,6 +80,48 @@ Tailwind.
   `theme.border.color.standard`
 - Vertical align: `middle` (inline CSS)
 - Text align: `left` (inline CSS)
+- **Padding auto-zero for link cells**: when a cell's direct child is an `<a>`
+  (the "row-as-link" pattern), `DataTable` automatically zeroes the `<td>`
+  padding via `&:has(> a)`. The link is expected to provide the visible padding
+  itself, which extends the clickable area over the cell's would-be padding
+  ring. Nested anchors (`<a>` deeper than direct child) do NOT trigger the rule.
+  See "Row-as-link navigation" below.
+
+### Row-as-link navigation
+
+When a row's purpose is to navigate to a URL, `onRowClick` is the wrong tool —
+it gives the row no `href`, so right-click → "Open link in new tab",
+cmd/ctrl-click, and middle-click don't work.
+
+Use anchor semantics instead:
+
+- Wrap each cell's content in your router's `<Link>` component (TanStack Router,
+  React Router, Next.js, etc.) with the row's destination. The `<Link>` must be
+  the **direct child** of the cell so the auto-padding-zero rule (see "Cell")
+  picks it up.
+- Style the link as a block that supplies the cell padding itself:
+  `display: block; padding: {theme.spacing.large}; color: inherit; text-decoration: none;`.
+  With the `<td>`'s built-in padding zeroed out under the `:has(> a)` rule and
+  the link's own padding filling that space, the link covers the entire cell —
+  including what would have been the dead 16px padding ring — so clicks anywhere
+  in the cell hit the anchor. Row height and text wrapping stay identical to the
+  default layout. Do NOT add `width: 100%` / `box-sizing: border-box` / negative
+  margins: any of these alters the cell's effective content width and causes
+  visible row-spacing or wrap differences.
+- Make only the **first** cell's link keyboard-focusable (`tabIndex={0}`); set
+  all other cell links to `tabIndex={-1}` so one row = one tab stop. N cells per
+  row should not produce N tab stops to the same destination.
+- Action-only cells (meatball menus, inline buttons) must NOT be wrapped in the
+  row link. Since they don't render an `<a>` as a direct child, the
+  auto-padding-zero rule won't fire on them and they keep their normal padding
+  (unless you've separately zeroed the action column via a `className` rule).
+- Drop `onRowClick` and `enableClickableRow` for that table — the anchors take
+  over navigation. Replicate the hover affordance with a `rowClassName` that
+  applies `theme.color.background.inputPressed` on hover (mirroring the
+  `:hover:not(:has(button:hover))` rule documented in "Row states").
+
+Reference implementation: `apps/admin-portal/src/components/RowLink` in the
+portal-hub repo (uses TanStack Router).
 
 ### Sort icons
 
@@ -208,6 +250,9 @@ The distinction:
   `enableClickableRow` get hover
 - NEVER let row hover fire when the cursor is over a button inside the row — use
   `:hover:not(:has(button:hover))` to suppress it
+- NEVER use `onRowClick` for URL-destination navigation — it breaks "Open in new
+  tab", cmd/ctrl-click, and middle-click. Wrap cell content in your router's
+  `<Link>` instead. See "Row-as-link navigation".
 - NEVER put pagination inside `DataTable` — caller handles it externally
 - NEVER render an external `<Spinner>` alongside a mounted `DataTable` — use the
   `isLoading` prop instead. An external Spinner is only correct before the table

package/dist/spark-web-data-table.cjs.dev.js

@@ -167,7 +167,11 @@ function DataTable(_ref) {
                     borderBottomStyle: 'solid',
                     borderColor: theme$1.border.color.standard,
                     verticalAlign: 'middle',
-                    textAlign: 'left'
+                    textAlign: 'left',
+                    // row-as-link: the anchor supplies its own padding
+                    '&:has(> a)': {
+                      padding: 0
+                    }
                   }),
                   children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
                 }, cell.id);

package/dist/spark-web-data-table.cjs.prod.js

@@ -167,7 +167,11 @@ function DataTable(_ref) {
                     borderBottomStyle: 'solid',
                     borderColor: theme$1.border.color.standard,
                     verticalAlign: 'middle',
-                    textAlign: 'left'
+                    textAlign: 'left',
+                    // row-as-link: the anchor supplies its own padding
+                    '&:has(> a)': {
+                      padding: 0
+                    }
                   }),
                   children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
                 }, cell.id);

package/dist/spark-web-data-table.esm.js

@@ -160,7 +160,11 @@ function DataTable(_ref) {
                     borderBottomStyle: 'solid',
                     borderColor: theme.border.color.standard,
                     verticalAlign: 'middle',
-                    textAlign: 'left'
+                    textAlign: 'left',
+                    // row-as-link: the anchor supplies its own padding
+                    '&:has(> a)': {
+                      padding: 0
+                    }
                   }),
                   children: flexRender(cell.column.columnDef.cell, cell.getContext())
                 }, cell.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/data-table",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",