switching between config objects causing issues with sorting

[jackjamieson]

I have a single table that switches between config objects to display different tables in a single component. They all replace a single configObject. When I switch the config object I get some unexpected results. Mostly the sorting stops working, occasionally I get an error trying to sort undefined field or the sort just doesn't actually sort anything even though it says it is applied.

Any thoughts?

[hjalmers]

Hmm, I haven't tried that myself but it should work although it might depend a bit on how you're updating the configuration. Usually I've created to separate tables and just toggled them using *ngIf. Do you have some code I can look at perhaps?

[jackjamieson]

I ended up doing the same thing but with a lot of tables it gets a little messy.

        <div class="row">
                <div class="col-md-12 pb-2">
                  <span class="pull-left">
                    <small>
                      <gt-table-info class="form-text text-muted mb-2" [genericTable]="homeTable"></gt-table-info>
                    </small>
                  </span>

                  <button class="btn btn-secondary btn-sm pull-right" (click)="columnSettings.toggleColumnSettings()">
                    <i class="fa fa-columns" aria-hidden="true"></i> Columns</button>
                  <div class="pull-right pr-4" style="min-width:9rem;">
                    <span class="pull-right">
                      <small> Per page</small>
                    </span>
                    <select #perPage class="form-control form-control-sm" style="max-width:4rem" (change)="homeTable.changeRowLength(perPage.value)">
                      <option>20</option>
                      <option>40</option>
                      <option>60</option>
                    </select>
                  </div>

                </div>
              </div>
              <ng-template #gtColumnItem let-column let-index="index" let-name="name">
                <div class="btn-group mb-1 col-12 p-0" role="group">
                  <label class="form-check-label small" style="cursor: move;">
                    <input type="checkbox" name="{{column.objectKey}}" class="form-check-input" [(ngModel)]="column.visible" (change)="homeTable.redraw()"> {{configObject.fields | gtProperty:column.objectKey:'name'}}
                  </label>
                </div>
              </ng-template>

              <gt-column-settings [genericTable]="homeTable" #columnSettings [gtColumnItem]="gtColumnItem" [gtHeaderClasses]="'px-3 pt-3 pb-2 bg-faded'"
                [gtTexts]="{title: 'Columns - Select & Re Order', help:'Click to show/hide, drag to re-order.'}" [gtWrapperClasses]="'px-3 pb-2 bg-faded h-50'">

                <div class="table-responsive" style="font-size:.85rem">

                  <generic-table #homeTable [gtTexts]="{tableInfo:'#recordFrom - #recordTo of #recordsAfterSearch rows', noMatchingData: 'No records found in the current bucket for that filter.', noData: 'All caught up.', tableInfoAfterSearch: '#recordFrom - #recordTo of #recordsAfterSearch row (filtered from a total of #recordsAll rows)'}"
                    [gtClasses]="'table-hover table-bordered table-sm table-striped table-fixed'" [gtSettings]="configObject.settings"
                    [gtFields]="configObject.fields" [gtData]="configObject.data" [gtOptions]="{numberOfRows:20, highlightSearch: true}"></generic-table>
                </div>

                <div class=" text-center ">
                  <gt-pagination [gtClasses]=" 'pagination-sm justify-content-center' " [genericTable]="homeTable"></gt-pagination>
                  <small>
                    <gt-table-info class="form-text text-muted mb-2 " [genericTable]="homeTable"></gt-table-info>
                  </small>

                </div>
              </gt-column-settings>

I tried to use this one table with a single configObject, then when I wanted to switch the table I'd just do something like

this.configObject = { settings: newSettings(), fields: newFields(), data: [] };

but that gave me issues. It didn't seem to take all of the settings and fields correctly.

[michmosh]

i have the same issue does it have a solution other then ngIf ??

[hjalmers]

It should definitely work with out ngIf, not sure it does now though but I'll look into it, hopefully by the end of the week:)

[jackjamieson]

Some progress on this... maybe we could close it.

I am now using a single ngIf and switching a single config object. To make sure the default sort order is correct I set

• this.configObject = null; and this.data = []; before changing the table
• call the endpoint to get the data
• push all data this.data.push(row);
• and within the subscription at the bottom set the new configObject= {...};

It seems that it was trying to use the previous table's columns to perform the sort on the updated table even though I tried setting the configObject to null previously. It only started working when I moved the configObject setting to inside the subscription. Seems like having all of the data before and then setting all parts of the configObject ensure that it will get set up correctly as opposed to just setting this.configObject.data = this.data;.

For reference I am using version 4.10.0 for this.

[michmosh]

Ok i will definetly try it and it and let you know how it worked . Thank you very much for your reply.

Regards Moshe Michalovich

בתאריך יום ג׳, 29 במאי 2018, 20:55, מאת Jack Jamieson ‏< notifications@github.com>:

Some progress on this... maybe we could close it.

I am now using a single ngIf and switching a single config object. To make sure the default sort order is correct I set

• this.configObject = null; and this.data = []; before changing the table
• call the endpoint to get the data
• push all data this.data.push(row);
• and within the subscription at the bottom set the new configObject= {...};

It seems that it was trying to use the previous table's columns to perform the sort on the updated table even though I tried setting the configObject to null previously. It only started working when I moved the configObject setting to inside the subscription. Seems like having all of the data before and then setting all parts of the configObject ensure that it will get set up correctly.

For reference I am using version 4.10.0 for this.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/hjalmers/angular-generic-table/issues/194#issuecomment-392875013, or mute the thread https://github.com/notifications/unsubscribe-auth/AQhCIZlbQm4pU9AVvQZF6JE_HLdRxRcBks5t3YuXgaJpZM4R3pMf .