DONT MERGE: chore(datatable): reproduce issue on playground#1534
DONT MERGE: chore(datatable): reproduce issue on playground#1534chintankavathia wants to merge 1 commit intomainfrom
Conversation
There was a problem hiding this comment.
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.
| [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' }]" |
There was a problem hiding this comment.
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.
| [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" |
|
Documentation. Coverage Reports: |
a6877fc to
d75ab5d
Compare
This is just for reproducing an error. DON'T MERGE