Skip to content

Fix checking for cell renderer function for table tab navigation #1313

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 2 commits into
base: main
Choose a base branch
from

Conversation

paustint
Copy link
Contributor

Teh actions column and a column with an Id have special behavior and when built the function name changes, so we attached the name to the prototype to gain access to the original name to detect when to have special behavior

Teh actions column and a column with an Id have special behavior and when built the function name changes, so we attached the name to the prototype to gain access to the original name to detect when to have special behavior
@paustint paustint requested a review from Copilot July 27, 2025 19:30
Copy link

@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 fixes the detection of specific cell renderer functions (IdLinkRenderer and ActionRenderer) for handling special keyboard navigation behavior in data tables. The issue was that minification/bundling changes function names, breaking the name-based detection.

  • Changed from checking args.column.renderCell?.name to args.column.renderCell?.prototype?.displayName
  • Added prototype.displayName properties to both IdLinkRenderer and ActionRenderer functions

Reviewed Changes

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

File Description
libs/ui/src/lib/data-table/useDataTable.tsx Updated renderer detection logic to use prototype.displayName instead of function.name
libs/ui/src/lib/data-table/DataTableRenderers.tsx Added prototype.displayName properties to IdLinkRenderer and ActionRenderer

Comment on lines 574 to 576
IdLinkRenderer.prototype = {
displayName: 'IdLinkRenderer',
};
Copy link
Preview

Copilot AI Jul 27, 2025

Choose a reason for hiding this comment

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

Assigning to a function's prototype property can override its existing prototype chain. Consider using a safer approach like adding a static property (IdLinkRenderer.displayName = 'IdLinkRenderer') or using a symbol/WeakMap for function identification.

Suggested change
IdLinkRenderer.prototype = {
displayName: 'IdLinkRenderer',
};
IdLinkRenderer.displayName = 'IdLinkRenderer';

Copilot uses AI. Check for mistakes.

Comment on lines 645 to 647
ActionRenderer.prototype = {
displayName: 'ActionRenderer',
};
Copy link
Preview

Copilot AI Jul 27, 2025

Choose a reason for hiding this comment

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

Assigning to a function's prototype property can override its existing prototype chain. Consider using a safer approach like adding a static property (ActionRenderer.displayName = 'ActionRenderer') or using a symbol/WeakMap for function identification.

Suggested change
ActionRenderer.prototype = {
displayName: 'ActionRenderer',
};
ActionRenderer.displayName = 'ActionRenderer';

Copilot uses AI. Check for mistakes.

@@ -301,11 +301,11 @@ export function useDataTable<T = RowWithKey>({
function handleCellKeydown(args: CellKeyDownArgs<T, unknown>, event: CellKeyboardEvent) {
try {
// Handle renderer-specific keyboard interactions
if (args.column.renderCell?.name === 'IdLinkRenderer' && handleIdLinkRendererKeydown(event)) {
if (args.column.renderCell?.prototype?.displayName === 'IdLinkRenderer' && handleIdLinkRendererKeydown(event)) {
Copy link
Preview

Copilot AI Jul 27, 2025

Choose a reason for hiding this comment

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

[nitpick] The nested optional chaining with prototype access is fragile. If the prototype approach changes, consider using a more robust identification method like a static property or instanceof checks.

Copilot uses AI. Check for mistakes.

Teh actions column and a column with an Id have special behavior and when built the function name changes, so we attached the name to the prototype to gain access to the original name to detect when to have special behavior
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