ngx-datatableで数値の表示を右合わせにしたい。

Question

前提・実現したいこと

Angularでngx-datatableを使用し、一覧を表示するプログラムを作成しています。
一覧の表示はできているのですが、その中である一つの列の値だけ、右合わせで表示がしたいです。

該当のソースコード

  private columns = [
    { name: 'ID', prop: 'id', frozenLeft: true },
    { name: '品名', prop: 'partName' },
    { name: '品番', prop: 'partNumber' },
    { name: '数量', prop: 'quantity' },
  ];

      <ngx-datatable
      class="original"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="50"
      [scrollbarV]="true"
      [scrollbarH]="true"
      [selectionType]="'single'"
      [columns]="columns"
      [rows]="rows"
      (select)="onSelect($event)">
      </ngx-datatable>
      <ngx-datatable-row-detail [rowHeight]="'100%'"></ngx-datatable-row-detail>

試したこと

text-align,angular -angularjsをキーにGoogleで検索したが、回答に当たりませんでした。
https://swimlane.gitbook.io/ngx-datatable/でAPI/Column/Inputsを読んでみたのですが、回答となる箇所が見当たりませんでした。

補足情報（FW/ツールのバージョンなど）

Angular CLI: 6.1.1
Node: 8.11.1
OS: win32 x64
Angular: 6.1.0
@swimlane/ngx-datatable: ^13.1.0

Answer 1

<ngx-datatable
      class="original"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="50"
      [scrollbarV]="true"
      [scrollbarH]="true"
      [selectionType]="'single'"
      [rows]="projects"
      (select)="onSelect($event)">
        <ngx-datatable-column name="ID" prop="id" [frozenLeft]="true"></ngx-datatable-column>
        <ngx-datatable-column name="品名" prop="partName"></ngx-datatable-column>
        <ngx-datatable-column name="品番" prop="partNumber"></ngx-datatable-column>
        <ngx-datatable-column name="数量" prop="quantity">
          <ng-template let-value="value" ngx-datatable-cell-template>
            <div class="numeric">
              {{value}}
            </div>
          </ng-template>
        </ngx-datatable-column>
</ngx-datatable>

.numeric{
text-align: right;
}

typescriptで設定していたカラム情報をHTMLに直接記述するようにし、ng-template内にdivを作成し、そこにCSS設定を行うことで、解決いたしました。

Answer 2

確認されている
https://swimlane.gitbook.io/ngx-datatable/でAPI/Column/Inputs
このページにクラスを付けるInput()が用意されていると思うので、固定文字＋連番などの名前でクラスを付けてCSSで制御してはいかがでしょうか？

Comments

[s.kun]

ご回答頂きありがとうございます。
頂いた情報を元に、
https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/css.component.ts
を参考にしてみましたが、私の知識不足か理解が及びませんでした。
今回は別の方法を使うことで期待する結果が得られました。
折角ご回答頂いたにも関わらず申し訳ありません。
またよろしくお願いします。