Question

174

Angular ngx-datatable multiple data in one column

rated 0 times [ 175] [ 1] / answers: 1 / hits: 22325 / 7 Years ago, tue, july 25, 2017, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 7 Years ago anikas · Accepted Answer

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.