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:

<ngx-datatable[columns]="columns" [rows]="courses">
</ngx-datatable>

Thank you!

Hey, consider this example here: https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-dom.component.ts — Amit, Jul 25 '17 at 06:51
You're using the [columns]="columns" method, which defines a columns object, that example uses a template method, define a template for each column, you get access to the row object and can do whatever you want. Not sure if you can mix the two, but it's worth switching if it does the job. — Amit, Jul 25 '17 at 06:52

score 29 · Accepted Answer · answered Jul 26 '17 at 06:46

Figured it out:

To change column names - let-column
Formatting cell content (ex: Date) - let-value
Formatting with multiple properties Ex: Date - let-row

The template:

<ngx-datatable [rows]="courses">
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                סמסטר
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.semesterName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.event}} <br> {{row.eventName}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מועד מפגש
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.where}} <br> {{row.when}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                מרצה
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                <a href="mailto:{{row.lecturerEmail}}">{{row.lecturerName}}</a>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column>
            <ng-template let-column="column" ngx-datatable-header-template>
                חוג
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.hugName}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

No need for [columns] anymore - remove it from the template.

Can you pls explain the let-value property. How does the value select from the object? using the property order or something else? — SajithK, Dec 17 '18 at 09:14
But the problem i am facing here is that the columns (especially the ones were you combine two values) are not sortable anymore since they don't have a prop? How can i make them sortable again? — p.wiesinger, Feb 14 '22 at 00:13

score 1 · Answer 2 · answered Apr 11 '20 at 11:06

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...
]

score 0 · Answer 3 · answered Mar 24 '21 at 09:39

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

<ngx-datatable-column name="Test">
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
    {{ row.propert1 || row.propert2 }}
  </ng-template>
</ngx-datatable-column>

Thanks

Angular ngx-datatable multiple data in one column

3 Answers3

Linked