<div class="app-card-title mb-4">
	<anglo-title-component title="Pinning"></anglo-title-component>
</div>
<div class="app-card pinning-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
         <h3>{{'Table Pinning'|translate}}</h3>
      </div>
      <div class="card-content p-2">
			<div class="table-responsive overflow-hidden">	
				<ngx-datatable
				class="material pinning" [columnMode]="'force'" [headerHeight]="50"  [footerHeight]="50"
				[rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"  [rows]="rows">
					<ngx-datatable-column
					name="Name" [width]="280" [frozenLeft]="true">
					</ngx-datatable-column>

					<ngx-datatable-column
					name="Gender">
					</ngx-datatable-column>

					<ngx-datatable-column
					name="Age">
					</ngx-datatable-column>

					<ngx-datatable-column
					name="City" [width]="200" prop="address.city">
					</ngx-datatable-column>

					<ngx-datatable-column
					name="State" [width]="280" prop="address.state" [frozenRight]="true">
					</ngx-datatable-column>
				</ngx-datatable>
			</div>	
		</div>	
	</mat-card>
</div>
