o se puede reordenar columnas en la tabla angular ngx-data
Estoy trabajando en angulares ngx-datatables, donde necesito lograr su funcionalidad de reordenamiento de columnas. Pero no funciona (no se produce ningún error), también el ancho de la columna no cambia al arrastrar la línea.
He agregado a continuación los archivos css en el archivo angular.json. ¿Requiere algún archivo js?
"node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css",
"node_modules/@swimlane/ngx-datatable/release/themes/material.css",
"node_modules/@swimlane/ngx-datatable/release/themes/dark.css",
"node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
Estoy siguiendoest enlace.
@Component({
selector: 'app-my-component',
styles: [`
.icon {
position:absolute;
}
.datatable-icon-down {
top: 0px;
}
.datatable-icon-up {
top: 40px;
}
.dragFromLeft .icon {
left:-13px;
}
`],
template: `
<div>
<ngx-datatable
class="material"
[rows]="rows"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[externalPaging]="true"
[externalSorting]="true"
[count]="page.count"
[offset]="page.offset"
[limit]="page.limit"
[sortType]="'single'"
(page)="pageCallback($event)"
(sort)="sortCallback($event)"
[reorderable]="reorderable"
[swapColumns]="swapColumns"
[targetMarkerTemplate]="targetMarkerTemplate"
[loadingIndicator]="loadingIndicator" >
<ngx-datatable-column
*ngFor="let col of columns"
[name]="col.name" [prop]="col.prop">
</ngx-datatable-column>
</ngx-datatable>
<ng-template #targetMarkerTemplate let-class="class">
<div [ngClass]="class">
<div class="icon datatable-icon-down"></div>
<div class="icon datatable-icon-up"></div>
</div>
</ng-template>
<div class='selected-column'>
<h4>Available Columns</h4>
<ul>
<li *ngFor='let col of allcolumns'>
<input
type='checkbox'
[id]="col.name"
(click)='toggle(col)'
[checked]='isChecked(col)'
/>
<label [attr.for]="col.name">{{col.name}}</label>
</li>
</ul>
</div>
</div>
`
})
export class NGXServerSide implements OnInit {
rows: Object[] = [];
loadingIndicator: boolean = false;
reorderable: boolean = true;
swapColumns: boolean = false;
columns = [
{ name: 'EmployeeId', prop: 'EmployeeId' },
{ name: 'Name', prop: 'Name' },
{ name: 'City', prop: 'City' },
{ name: 'Department', prop: 'Department', sortable: false },
{ name: 'Gender', prop: 'Gender', sortable: false },
];
allcolumns = [
{ name: 'EmployeeId', prop: 'EmployeeId' },
{ name: 'Name', prop: 'Name' },
{ name: 'City', prop: 'City' },
{ name: 'Department', prop: 'Department', sortable: false },
{ name: 'Gender', prop: 'Gender', sortable: false },
]