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!

Baranowski

Hey, consider this example here: github.com/swimlane/ngx-datatable/blob/master/demo/templates/… – Literature

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. – Literature

Answer 1

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.

Baranowski

Can you pls explain the let-value property. How does the value select from the object? using the property order or something else? – Unlade

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? – Thrower

Answer 2

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

Dunstan

Answer 3

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

Considerable