问题
I am working on angular ngx-datatables, where I need to achieve its column reorder functionality. But its not working(not getting any error), also column's width is not changing on dragging the line.
I have added below css files in angular.json file. Do it require any js file?
"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"
I am following this link.
@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 },
]
来源:https://stackoverflow.com/questions/50982494/unable-to-reorder-columns-in-angular-ngx-datatable