Skip to content

feat(data-grid): add copy/paste - #1031

Merged
sadmann7 merged 24 commits into
mainfrom
add-copy
Nov 21, 2025
Merged

sadmann7 merged 24 commits into
mainfrom
add-copy

Conversation

@sadmann7

Copy link
Copy Markdown
Owner

No description provided.

- Add Airtable-style paste expansion dialog
- Fix onRowAdd to use functional setState for correct ID generation
- Fix onDataUpdate to handle newly added rows
- Add polling mechanism to wait for table state updates
- Support copying focused cells and pasting with automatic row creation
- Show toast notifications for copy and paste operations
- Add React.memo with custom comparison function like other grid components
- Update registry.json to include data-grid-paste-dialog component
- Add dialog to registryDependencies for data-grid component
- Re-enable enablePaste in demo
- Make option text smaller with text-sm class
- Rewrite dialog copy to be more original and concise
- Change title from 'Do you want to expand this table?' to 'Add more rows?'
- Simplify option labels: 'Create new rows' vs 'Keep current rows'
- Update description to be more direct
- Replace querySelector with React refs for radio buttons
- Memoize onCancel and onContinue callbacks with useCallback
- Remove unused noExpandRadioRef (only need to check expandRadioRef)
- Cleaner and more React-idiomatic approach
- Extract RadioItem component for reusable styled radio buttons
- Add label and description structure for better clarity
- Use React 19 ref pattern (no forwardRef needed)
- Improve copy and spacing for better UX
- Style radio buttons to match shadcn design system
- Reorganize selection functions before copy/paste for better structure
- Track paste range during paste operation
- Auto-select pasted cells after paste completes (matches Airtable UX)
- Add TODO for bulk row creation optimization
- Provides immediate visual feedback on pasted range
- Add optional onRowsAdd prop to UseDataGridProps
- Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple)
- Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change)
- Implement onRowsAdd in demo with clear documentation
- Significantly improves performance for large paste operations
Copilot AI review requested due to automatic review settings November 21, 2025 06:51
@vercel

vercel Bot commented Nov 21, 2025 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
shadcn-table Ready Ready Preview Comment Nov 21, 2025 7:08am
tablecn Ready Ready Preview Comment Nov 21, 2025 7:08am

@sadmann7 sadmann7 changed the title feat(data-grid): add copy pasting feat(data-grid): add copy and pasting Nov 21, 2025
@sadmann7 sadmann7 changed the title feat(data-grid): add copy and pasting feat(data-grid): add copy/paste Nov 21, 2025

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

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 copy/paste functionality to the data-grid component, enabling users to copy selected cells to clipboard and paste data from clipboard (with automatic type conversion and row expansion support).

Key changes:

  • Added Ctrl+C/Cmd+C to copy selected cells as TSV format
  • Added Ctrl+V/Cmd+V to paste clipboard data with type conversion
  • Introduced paste dialog to handle cases where more rows are needed than available
  • Added onRowsAdd callback for efficient bulk row creation during paste operations

Reviewed Changes

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

Show a summary per file
File Description
src/types/data-grid.ts Defines PasteDialogState interface and adds paste-related TableMeta properties
src/hooks/use-data-grid.tsx Implements copyCells/pasteCells functions, paste dialog state management, and keyboard shortcuts
src/components/data-grid/data-grid.tsx Integrates DataGridPasteDialog component
src/components/data-grid/data-grid-paste-dialog.tsx New dialog component for paste row expansion options
src/components/data-grid/data-grid-demo.tsx Demonstrates paste functionality with onRowsAdd implementation and updates ID generation to use nanoid
registry.json Adds dialog dependency and paste dialog file to registry
public/r/registry.json Registry updates for public distribution
public/r/data-grid.json Updates component files with new paste functionality

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/hooks/use-data-grid.tsx Outdated
Comment thread src/hooks/use-data-grid.tsx Outdated
Comment thread src/hooks/use-data-grid.tsx Outdated
Comment thread src/hooks/use-data-grid.tsx
Comment thread src/hooks/use-data-grid.tsx Outdated
Comment thread src/components/data-grid/data-grid-demo.tsx Outdated
Comment thread src/hooks/use-data-grid.tsx
Comment thread src/hooks/use-data-grid.tsx Outdated
- Add guard in getFileIcon to handle undefined type values
- Add file cell handling in paste logic with JSON parsing
- Fix copy logic to serialize file cells as JSON instead of [object Object]
- Also serialize multi-select cells and dates properly
- Fix variable shadowing: rename local columnIds to selectedColumnIds
- Add error handling for clipboard API operations
- Remove duplicate PasteDialogState interface (use import from types)
- Fix onRowAdd closure issue in demo to properly return new row index
- Handle empty checkbox values explicitly during paste
@sadmann7
sadmann7 merged commit 3567924 into main Nov 21, 2025
7 checks passed
@sadmann7
sadmann7 deleted the add-copy branch November 21, 2025 07:10
noodleman1991 pushed a commit to noodleman1991/tablecn that referenced this pull request Mar 12, 2026
* feat: add toast notifications for cell copy operations

* fix: copy focused cell when no selection exists

* feat: add Airtable-style paste expansion dialog

* feat: add paste dialog types to data-grid.ts

* fix: correct onClick type for paste dialog cancel button

* chore: lint

* debug: add logging to diagnose paste expansion issue

* debug: add more detailed paste loop logging

* fix: use table row count instead of stale data.length after adding rows

* feat: implement working paste with row expansion

- Add Airtable-style paste expansion dialog
- Fix onRowAdd to use functional setState for correct ID generation
- Fix onDataUpdate to handle newly added rows
- Add polling mechanism to wait for table state updates
- Support copying focused cells and pasting with automatic row creation
- Show toast notifications for copy and paste operations

* feat: add enablePaste flag to control paste functionality

* refactor: use faker nanoid for row creation instead of incremental IDs

* fix: clear cell selections when creating a new row (Airtable behavior)

* refactor: add React.memo to DataGridPasteDialog and update registry

- Add React.memo with custom comparison function like other grid components
- Update registry.json to include data-grid-paste-dialog component
- Add dialog to registryDependencies for data-grid component
- Re-enable enablePaste in demo

* refactor: improve paste dialog copy and styling

- Make option text smaller with text-sm class
- Rewrite dialog copy to be more original and concise
- Change title from 'Do you want to expand this table?' to 'Add more rows?'
- Simplify option labels: 'Create new rows' vs 'Keep current rows'
- Update description to be more direct

* refactor: use refs and memoize callbacks in paste dialog

- Replace querySelector with React refs for radio buttons
- Memoize onCancel and onContinue callbacks with useCallback
- Remove unused noExpandRadioRef (only need to check expandRadioRef)
- Cleaner and more React-idiomatic approach

* chore: rebuild registry

* feat: improve paste dialog styling with radio components

- Extract RadioItem component for reusable styled radio buttons
- Add label and description structure for better clarity
- Use React 19 ref pattern (no forwardRef needed)
- Improve copy and spacing for better UX
- Style radio buttons to match shadcn design system

* feat: auto-select pasted cells and reorganize code

- Reorganize selection functions before copy/paste for better structure
- Track paste range during paste operation
- Auto-select pasted cells after paste completes (matches Airtable UX)
- Add TODO for bulk row creation optimization
- Provides immediate visual feedback on pasted range

* feat: add onRowsAdd for efficient bulk row creation

- Add optional onRowsAdd prop to UseDataGridProps
- Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple)
- Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change)
- Implement onRowsAdd in demo with clear documentation
- Significantly improves performance for large paste operations

* chore: rebuild registry again

* chore: rebuild registry again again again

* fix: file cell copy and paste functionality

- Add guard in getFileIcon to handle undefined type values
- Add file cell handling in paste logic with JSON parsing
- Fix copy logic to serialize file cells as JSON instead of [object Object]
- Also serialize multi-select cells and dates properly

* refactor: address code review feedback

- Fix variable shadowing: rename local columnIds to selectedColumnIds
- Add error handling for clipboard API operations
- Remove duplicate PasteDialogState interface (use import from types)
- Fix onRowAdd closure issue in demo to properly return new row index
- Handle empty checkbox values explicitly during paste
anhdd-kuro pushed a commit to anhdd-kuro/tablecn that referenced this pull request Apr 8, 2026
* feat: add toast notifications for cell copy operations

* fix: copy focused cell when no selection exists

* feat: add Airtable-style paste expansion dialog

* feat: add paste dialog types to data-grid.ts

* fix: correct onClick type for paste dialog cancel button

* chore: lint

* debug: add logging to diagnose paste expansion issue

* debug: add more detailed paste loop logging

* fix: use table row count instead of stale data.length after adding rows

* feat: implement working paste with row expansion

- Add Airtable-style paste expansion dialog
- Fix onRowAdd to use functional setState for correct ID generation
- Fix onDataUpdate to handle newly added rows
- Add polling mechanism to wait for table state updates
- Support copying focused cells and pasting with automatic row creation
- Show toast notifications for copy and paste operations

* feat: add enablePaste flag to control paste functionality

* refactor: use faker nanoid for row creation instead of incremental IDs

* fix: clear cell selections when creating a new row (Airtable behavior)

* refactor: add React.memo to DataGridPasteDialog and update registry

- Add React.memo with custom comparison function like other grid components
- Update registry.json to include data-grid-paste-dialog component
- Add dialog to registryDependencies for data-grid component
- Re-enable enablePaste in demo

* refactor: improve paste dialog copy and styling

- Make option text smaller with text-sm class
- Rewrite dialog copy to be more original and concise
- Change title from 'Do you want to expand this table?' to 'Add more rows?'
- Simplify option labels: 'Create new rows' vs 'Keep current rows'
- Update description to be more direct

* refactor: use refs and memoize callbacks in paste dialog

- Replace querySelector with React refs for radio buttons
- Memoize onCancel and onContinue callbacks with useCallback
- Remove unused noExpandRadioRef (only need to check expandRadioRef)
- Cleaner and more React-idiomatic approach

* chore: rebuild registry

* feat: improve paste dialog styling with radio components

- Extract RadioItem component for reusable styled radio buttons
- Add label and description structure for better clarity
- Use React 19 ref pattern (no forwardRef needed)
- Improve copy and spacing for better UX
- Style radio buttons to match shadcn design system

* feat: auto-select pasted cells and reorganize code

- Reorganize selection functions before copy/paste for better structure
- Track paste range during paste operation
- Auto-select pasted cells after paste completes (matches Airtable UX)
- Add TODO for bulk row creation optimization
- Provides immediate visual feedback on pasted range

* feat: add onRowsAdd for efficient bulk row creation

- Add optional onRowsAdd prop to UseDataGridProps
- Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple)
- Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change)
- Implement onRowsAdd in demo with clear documentation
- Significantly improves performance for large paste operations

* chore: rebuild registry again

* chore: rebuild registry again again again

* fix: file cell copy and paste functionality

- Add guard in getFileIcon to handle undefined type values
- Add file cell handling in paste logic with JSON parsing
- Fix copy logic to serialize file cells as JSON instead of [object Object]
- Also serialize multi-select cells and dates properly

* refactor: address code review feedback

- Fix variable shadowing: rename local columnIds to selectedColumnIds
- Add error handling for clipboard API operations
- Remove duplicate PasteDialogState interface (use import from types)
- Fix onRowAdd closure issue in demo to properly return new row index
- Handle empty checkbox values explicitly during paste

This branch was successfully deployed

2 active deployments
Preview – shadcn-table — 58f79f2e Deployed Nov 21, 2025 by vercel[bot]
Preview – tablecn — 58f79f2e Deployed Nov 21, 2025 by vercel[bot]
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.

2 participants