Skip to content

DONT MERGE: chore(datatable): reproduce issue on playground#1534

Draft
chintankavathia wants to merge 1 commit intomainfrom
playground/issue/reproduce
Draft

DONT MERGE: chore(datatable): reproduce issue on playground#1534
chintankavathia wants to merge 1 commit intomainfrom
playground/issue/reproduce

Conversation

@chintankavathia
Copy link
Member

This is just for reproducing an error. DON'T MERGE

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request adds a new example to reproduce an issue, as indicated by the title. The code is straightforward for its purpose. I've suggested one improvement to move hardcoded data from the template to the component class for better maintainability and readability. Even for temporary or debugging code, following best practices can be beneficial.

Comment on lines +23 to +37
[rows]="[
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 }
]"
[columns]="[{ prop: 'name' }, { prop: 'age' }]"
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

For better readability and separation of concerns, it's recommended to move the hardcoded data for the ngx-datatable from the template to the component's TypeScript file. This makes the template cleaner and the data easier to manage.

You can define the data in your SampleComponent class:

export class SampleComponent {
  // ...
  logEvent = inject(LOG_EVENT);

  tableRows = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
  ];

  tableColumns = [{ prop: 'name' }, { prop: 'age' }];
}

Then use these properties in the template.

Suggested change
[rows]="[
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 }
]"
[columns]="[{ prop: 'name' }, { prop: 'age' }]"
[rows]="tableRows"
[columns]="tableColumns"

@github-actions
Copy link

@chintankavathia chintankavathia force-pushed the playground/issue/reproduce branch from a6877fc to d75ab5d Compare February 17, 2026 07:15
@github-actions
Copy link

Code Coverage

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

Comments