Repository navigation
feat(data-grid): add url-cell - #1028
Merged
Merged
Conversation
- Add UrlCell component with smart URL validation - Auto-normalize URLs (adds https:// prefix if missing) - Display URLs as clickable links opening in new tab - Show error state for invalid URLs - Add URL variant to type definitions - Update cell renderer and column header to support URL type - Add website column to demo with faker-generated URLs
- Added missing range.selectNodeContents() call in UrlCell useEffect - This ensures proper cursor positioning without visual glitches - Matches the working implementation in ShortTextCell
- Modified normalizeUrl to strip trailing slash when it's just the root path - Preserves trailing slash if user explicitly includes it - Prevents URLs like 'example.com' from becoming 'https://example.com/'
- Remove URL validation and normalization on save - Accept any text as URL without transformation - Store exactly what user types (no trailing slashes added) - Add http:// prefix only when rendering link href - Remove invalid state and error UI - Simpler, more predictable behavior
- Separate link element from contentEditable div - When not editing: render <a> tag outside contentEditable div - When editing: render contentEditable div for text input - Prevents conflict between React rendering and manual textContent manipulation - Fixes 'testtest' duplication bug when typing in focused cell
- Add stopPropagation() to link click handler - Prevents grid event handlers from interfering with link navigation - Links now properly open in new tab when clicked
- Wrap link in container div instead of making link fill entire cell - Link now only covers the text itself - Clicking empty cell space focuses for editing - Clicking link text opens URL in new tab
- Change link color to foreground when cell is focused - Makes it more visible which link is currently focused - Better visual feedback for keyboard navigation
- Replace conditional className logic with data-focused attribute - Cleaner CSS without linter warnings - Same visual behavior with better code structure
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request adds a new URL cell variant to the data grid component, enabling users to store and interact with clickable hyperlinks within grid cells. The implementation follows the existing cell variant patterns established in the codebase.
Key Changes
- Added new "url" cell variant with editable text input and clickable link display
- Refactored type naming to avoid conflicts with @tanstack/react-table (renamed
Cell→CellOpts) - Extracted
CellVariantPropsinterface to shared types for better code organization
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/data-grid.ts | Added "url" variant to CellOpts, renamed type to avoid naming conflict with imported Cell, extracted CellVariantProps interface |
| src/components/data-grid/data-grid-cell-variants.tsx | Implemented UrlCell component with getUrlHref helper, refactored to use shared CellVariantProps, moved CheckboxCell definition |
| src/components/data-grid/data-grid-cell.tsx | Added "url" case to cell variant switch, reordered cases, added UrlCell import |
| src/components/data-grid/data-grid-column-header.tsx | Added LinkIcon import and "url" case to getColumnVariant function, reordered switch cases |
| src/components/data-grid/data-grid-demo.tsx | Added website field to demo data using faker.internet.url() |
| public/r/data-grid.json | Updated registry file with new component content |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Reject javascript:, data:, vbscript:, and file: protocols - Defense-in-depth approach (already safe due to http:// prefixing) - Prevents potential XSS vectors - Returns empty string for dangerous URLs (link won't be clickable)
- Show error toast when user clicks on dangerous URL - Visual indicator: dangerous URLs appear in red with cursor-not-allowed - Provides clear feedback: 'URL contains a dangerous protocol' - Improves UX by informing users why their link doesn't work
- More standard naming convention - Cleaner data attribute approach avoids CSS class conflicts - No biome linter warnings
noodleman1991
pushed a commit
to noodleman1991/tablecn
that referenced
this pull request
Mar 12, 2026
* feat: add URL cell variant with validation and auto-normalization - Add UrlCell component with smart URL validation - Auto-normalize URLs (adds https:// prefix if missing) - Display URLs as clickable links opening in new tab - Show error state for invalid URLs - Add URL variant to type definitions - Update cell renderer and column header to support URL type - Add website column to demo with faker-generated URLs * refactor: variant position * refactor: variant type * fix: resolve URL cell re-rendering issue on each keystroke - Added missing range.selectNodeContents() call in UrlCell useEffect - This ensures proper cursor positioning without visual glitches - Matches the working implementation in ShortTextCell * fix: remove extra trailing slash from normalized URLs - Modified normalizeUrl to strip trailing slash when it's just the root path - Preserves trailing slash if user explicitly includes it - Prevents URLs like 'example.com' from becoming 'https://example.com/' * refactor: simplify URL cell following Airtable pattern - Remove URL validation and normalization on save - Accept any text as URL without transformation - Store exactly what user types (no trailing slashes added) - Add http:// prefix only when rendering link href - Remove invalid state and error UI - Simpler, more predictable behavior * fix: resolve URL cell text duplication issue - Separate link element from contentEditable div - When not editing: render <a> tag outside contentEditable div - When editing: render contentEditable div for text input - Prevents conflict between React rendering and manual textContent manipulation - Fixes 'testtest' duplication bug when typing in focused cell * fix: allow URL cell links to open in new tab - Add stopPropagation() to link click handler - Prevents grid event handlers from interfering with link navigation - Links now properly open in new tab when clicked * fix: make only link text clickable, not entire cell - Wrap link in container div instead of making link fill entire cell - Link now only covers the text itself - Clicking empty cell space focuses for editing - Clicking link text opens URL in new tab * refactor: improve URL cell structure and behavior * feat: highlight URL link when cell is focused - Change link color to foreground when cell is focused - Makes it more visible which link is currently focused - Better visual feedback for keyboard navigation * refactor: use data-focused attribute for URL link styling - Replace conditional className logic with data-focused attribute - Cleaner CSS without linter warnings - Same visual behavior with better code structure * chore: rebuild registry * security: add explicit protection against dangerous URL protocols - Reject javascript:, data:, vbscript:, and file: protocols - Defense-in-depth approach (already safe due to http:// prefixing) - Prevents potential XSS vectors - Returns empty string for dangerous URLs (link won't be clickable) * feat: add toast notification for dangerous URLs - Show error toast when user clicks on dangerous URL - Visual indicator: dangerous URLs appear in red with cursor-not-allowed - Provides clear feedback: 'URL contains a dangerous protocol' - Improves UX by informing users why their link doesn't work * refactor: use data-invalid instead of data-dangerous - More standard naming convention - Cleaner data attribute approach avoids CSS class conflicts - No biome linter warnings * chore: rebuild registry again
anhdd-kuro
pushed a commit
to anhdd-kuro/tablecn
that referenced
this pull request
Apr 8, 2026
* feat: add URL cell variant with validation and auto-normalization - Add UrlCell component with smart URL validation - Auto-normalize URLs (adds https:// prefix if missing) - Display URLs as clickable links opening in new tab - Show error state for invalid URLs - Add URL variant to type definitions - Update cell renderer and column header to support URL type - Add website column to demo with faker-generated URLs * refactor: variant position * refactor: variant type * fix: resolve URL cell re-rendering issue on each keystroke - Added missing range.selectNodeContents() call in UrlCell useEffect - This ensures proper cursor positioning without visual glitches - Matches the working implementation in ShortTextCell * fix: remove extra trailing slash from normalized URLs - Modified normalizeUrl to strip trailing slash when it's just the root path - Preserves trailing slash if user explicitly includes it - Prevents URLs like 'example.com' from becoming 'https://example.com/' * refactor: simplify URL cell following Airtable pattern - Remove URL validation and normalization on save - Accept any text as URL without transformation - Store exactly what user types (no trailing slashes added) - Add http:// prefix only when rendering link href - Remove invalid state and error UI - Simpler, more predictable behavior * fix: resolve URL cell text duplication issue - Separate link element from contentEditable div - When not editing: render <a> tag outside contentEditable div - When editing: render contentEditable div for text input - Prevents conflict between React rendering and manual textContent manipulation - Fixes 'testtest' duplication bug when typing in focused cell * fix: allow URL cell links to open in new tab - Add stopPropagation() to link click handler - Prevents grid event handlers from interfering with link navigation - Links now properly open in new tab when clicked * fix: make only link text clickable, not entire cell - Wrap link in container div instead of making link fill entire cell - Link now only covers the text itself - Clicking empty cell space focuses for editing - Clicking link text opens URL in new tab * refactor: improve URL cell structure and behavior * feat: highlight URL link when cell is focused - Change link color to foreground when cell is focused - Makes it more visible which link is currently focused - Better visual feedback for keyboard navigation * refactor: use data-focused attribute for URL link styling - Replace conditional className logic with data-focused attribute - Cleaner CSS without linter warnings - Same visual behavior with better code structure * chore: rebuild registry * security: add explicit protection against dangerous URL protocols - Reject javascript:, data:, vbscript:, and file: protocols - Defense-in-depth approach (already safe due to http:// prefixing) - Prevents potential XSS vectors - Returns empty string for dangerous URLs (link won't be clickable) * feat: add toast notification for dangerous URLs - Show error toast when user clicks on dangerous URL - Visual indicator: dangerous URLs appear in red with cursor-not-allowed - Provides clear feedback: 'URL contains a dangerous protocol' - Improves UX by informing users why their link doesn't work * refactor: use data-invalid instead of data-dangerous - More standard naming convention - Cleaner data attribute approach avoids CSS class conflicts - No biome linter warnings * chore: rebuild registry again
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.