Angular ngx-datatable multiple data in one column

前端 未结 2 2057
日久生厌
日久生厌 2021-01-12 11:56

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

columns = [
  { prop: \'semesterName\', name: \'סמסטר\', resizeable: false }         


        
相关标签:
2条回答
  • 2021-01-12 12:40

    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.

    0 讨论(0)
  • 2021-01-12 12:49

    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...
    ]
    
    0 讨论(0)
提交回复
热议问题