Skip to content

feat: draw grid lines for selected rows cols #1070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

BrianHung
Copy link
Collaborator

@BrianHung BrianHung commented Jul 18, 2025

Explicit borders for column and row selection to match Excel. Default false so users have to opt-in.

CleanShot 2025-07-18 at 15 42 07@2x

@BrianHung BrianHung force-pushed the brian/selected-col-row-grid-lines branch from da42bde to a1c07f1 Compare July 19, 2025 07:18
@BrianHung BrianHung marked this pull request as ready for review July 19, 2025 07:23
@BrianHung BrianHung force-pushed the brian/selected-col-row-grid-lines branch from 3803ddf to 98a84ba Compare July 19, 2025 07:35
@BrianHung
Copy link
Collaborator Author

Might update PR to show grid lines in between singleton column selections, as opposed to continuous column ranges.

@lukasmasuch lukasmasuch requested a review from Copilot August 8, 2025 23:02
Copy link
Contributor

@Copilot 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 support for drawing accent-colored grid lines around selected columns and rows to match Excel-like behavior. The feature is controlled by two new optional boolean props and defaults to false, requiring users to opt-in.

  • Introduces columnSelectionGridLines and rowSelectionGridLines boolean props
  • Modifies the grid line drawing logic to use accent colors for boundaries between selected and unselected columns/rows
  • Adds a demo story to showcase the new functionality

Reviewed Changes

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

Show a summary per file
File Description
scrolling-data-grid.tsx Passes new props through the component hierarchy
draw-grid-arg.ts Adds the new boolean properties to the DrawGridArg interface
data-grid-render.ts Updates drawGridHeaders calls to pass selection data when grid lines are enabled
data-grid-render.lines.ts Implements the core logic for drawing accent-colored grid lines based on selection state
data-grid.tsx Adds prop definitions with defaults and passes them to render function
data-grid-search.tsx Passes new props through to underlying grid component
data-grid-dnd.tsx Passes new props through to underlying grid component
selection-gridlines.stories.tsx Adds Storybook demo showcasing the new feature
data-editor.tsx Adds prop definitions and documentation for the top-level component
Comments suppressed due to low confidence (1)

* When true (default) draws accent-coloured grid lines around selected columns in the header. Set to false to
* revert to the original behaviour where only the header background is accented.
* @group Style
* @defaultValue true
Copy link
Preview

Copilot AI Aug 8, 2025

Choose a reason for hiding this comment

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

The documentation incorrectly states 'true (default)' but the actual default value is false as shown in line 911. The comment should say 'When true draws accent-coloured grid lines...' and '@DefaultValue false'.

Suggested change
* @defaultValue true
* When true draws accent-coloured grid lines around selected columns in the header. Set to false to
* revert to the original behaviour where only the header background is accented.
* @group Style
* @defaultValue false

Copilot uses AI. Check for mistakes.

* When true (default) draws accent-coloured grid lines around selected rows in the header. Set to false to
* revert to the original behaviour where only the header background is accented.
* @group Style
* @defaultValue true
Copy link
Preview

Copilot AI Aug 8, 2025

Choose a reason for hiding this comment

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

The documentation incorrectly states 'true (default)' but the actual default value is false as shown in line 912. The comment should say 'When true draws accent-coloured grid lines...' and '@DefaultValue false'.

Suggested change
* @defaultValue true
* When true draws accent-coloured grid lines around selected rows in the header. Set to false to
* revert to the original behaviour where only the header background is accented.
* @group Style
* @defaultValue false

Copilot uses AI. Check for mistakes.

type: "boolean",
},
},
};
Copy link
Preview

Copilot AI Aug 8, 2025

Choose a reason for hiding this comment

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

[nitpick] Trailing whitespace at the end of the file. Consider removing the space after the semicolon.

Suggested change
};
};

Copilot uses AI. Check for mistakes.

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