-
Notifications
You must be signed in to change notification settings - Fork 348
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
base: main
Are you sure you want to change the base?
feat: draw grid lines for selected rows cols #1070
Conversation
da42bde
to
a1c07f1
Compare
3803ddf
to
98a84ba
Compare
Might update PR to show grid lines in between singleton column selections, as opposed to continuous column ranges. |
There was a problem hiding this 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
androwSelectionGridLines
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 |
There was a problem hiding this comment.
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'.
* @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 |
There was a problem hiding this comment.
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'.
* @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", | ||
}, | ||
}, | ||
}; |
There was a problem hiding this comment.
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.
}; | |
}; |
Copilot uses AI. Check for mistakes.
Explicit borders for column and row selection to match Excel. Default false so users have to opt-in.