Angular ngx-datatable multiple data in one column

Question

I've got a little problem adding more then one prop to column in ngx-datatable:

columns = [
  { prop: 'semesterName', name: 'סמסטר', resizeable: false },
  { prop: 'eventName', name: 'מפגש', resizeable: false },
  { prop: 'when', name: 'מועד מפגש', resizeable: false },
  { prop: 'lecturerName', name: 'מרצה', resizeable: false },
  { prop: 'hugName', name: 'חוג', resizeable: false },
];

I need to display two props in one column. Like 'eventName' and 'when' in one column.

The model:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string;
  lecturerEMail: string;
  authMembers: number;
  eventStatus: string;}

The Html:

Thank you!

user_543763 · Answer

If you want to stick to the usage of columns and rows inputs, you can add the aggregated column to the rows themselves. Without mutating courses, the properties would look something like this:

const rows = courses.map(course => ({
  ...course,
  eventDetails: `${course.eventName} on ${course.when}`
}))

const columns = [
  { prop: 'eventDetails', name: 'Event', resizable: false },
  // the rest of your columns...
]

user_5566965 · Answer

The above accepted answer worked for me too, Thanks!

Sometimes, if anyone looking for multiple properties in one column and where only one value at a time should be displayed can use the following


  
    {{ row.propert1 || row.propert2 }}

Thanks

Angular ngx-datatable multiple data in one column

3 Answers