horizontal scroll issue

[sureshhustle]

Hi, I want to display too many rows in table, so how can i use horizontal scroll for table..?

[sushanzh]

I have too many columns in the table, the horizontal scroll doesn't get automatically implemented. Did you get the scroll to work? Can you please share? Thank you.

[sureshhustle]

ya i just create a div on top of table and give overflow-x: scroll in css then it will get horizontal scroll

.card.custom-card { overflow-x: scroll; }

<ba-card class="col-md-12 col-lg-12 col-sm-12 col-xs-12" baCardClass="traffic-panel custom-card">
      <div class="smart-table-container">
      <ng2-smart-table mode="external" 
      [settings]="settings" 
      [source]="source" ></ng2-smart-table>
      </div>
</ba-card>

give that css to this card or that div at top of the ng2-smart table

[lenichols]

The problem with this solution is the pager is hidden when you scroll right.

[DanialV]

any update on this issue ?

[ghost]

Hi, maybe late but I solved my problem with the following configuration.

I wrap the ng2-smart-table component as suggested by @sureshhustle, like this:

<div class="table-container">
    <ng2-smart-table  *ngIf="settings" [settings]="settings" [source]="source" (edit)="onEdit($event)"
     (delete)="onDelete($event)"></ng2-smart-table>
</div>

The I added the configuration attr.class in the settings object like this:

this.settings = {
    columns: { ... },
    attr: {
       class: 'table'
    },
    ...
}

I shared the following styles throught the application (styles.scss file):

.table-container {
  height: auto;
  overflow-x: auto;
  width: auto;
  border-left: 1px solid var(--border-basic-color-3) !important;
  border-right: 1px solid var(--border-basic-color-3) !important;
  border-bottom: 1px solid var(--border-basic-color-3) !important;
  border-top: none !important;
  .table {
    margin-bottom: 0px;
    th {
      background: nb-theme(background-basic-color-1) !important;
      border: 1px solid nb-theme(border-basic-color-3) !important;
      position: sticky;
      top: 0;
    }
    th:first-of-type,
    td:first-of-type {
      position: sticky;
      left: 0;
    }
    th:first-of-type {
      background: nb-theme(background-basic-color-1) !important;
      border: 1px solid nb-theme(border-basic-color-3) !important;
      border-left: none !important;
      z-index: 2;
    }
    td:first-of-type {
      background: nb-theme(background-basic-color-1) !important;
      border: 1px solid nb-theme(border-basic-color-3) !important;
      border-left: none !important;
      z-index: 1;
    }
  }
  ng2-smart-table-pager.ng-star-inserted {
    position: sticky;
    left: 0;
    display: flex !important;
    justify-content: center !important;
  }
}

Finally, if this configuration doesn't work I disable ViewEncapsultation on my component, like this:

@Component({
    selector: 'app-contractors',
    templateUrl: 'contractors.component.html',
    styleUrls: ['contractors.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ContractorsComponent),
            multi: true
        }
    ]
})

And the result, a beatiful sticky Actions column and pagination controls!

Hope I helped!