Angular2 make first table column static (plugin for this)

Question

Does anyone know of a plugin for Angular2 in where you can pin or make static the whole first column while leaving the other columns with a horizontal scroll, I have tried already playing with css positions to no success.

I see for angular.js and jquery there are many plugins to achieve this but none that I can find for angular2

Why does it have to be an Angular plugin? Seems more of a CSS thing. — AngularChef, Nov 14 '16 at 16:32
it is a fairly complex table and css position isn't achieving leaving first (left) column static — CommonSenseCode, Nov 14 '16 at 16:38
Alright. Otherwise [this stackoverflow](http://stackoverflow.com/questions/30449054/fix-first-column-of-a-bootstrap-table) has a solution for a fixed table column based on Bootstrap CSS. — AngularChef, Nov 14 '16 at 18:06

score 1 · Accepted Answer · answered May 10 '18 at 17:16

I used this solution, and it works for me.

 .mat-table > mat-header-row:first-child > mat-header-cell:first-child, mat-cell:first-child {
  position: absolute;
  display: flex;
  background-color: white;
  width: 150px;
  min-height: 42px;
  left: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  align-items: center;
  padding: 0 24px;
  margin-top: 4px;
}

.mat-table > mat-header-row:first-child > mat-header-cell:first-child {
  border-bottom: 0;
  margin-top: 0;
}

.mat-table > mat-header-row:nth-child(2) > mat-header-cell:nth-child(2), mat-cell:nth-child(2) {
  margin-left: 160px;
}

You might have to adjust border and padding according to your needs.

Angular2 make first table column static (plugin for this)

1 Answers1