[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Web Components 水平方向のスクロール

    Ignite UI for Web Components Data Table / Data Grid は、Web Components データ グリッドの幅より大きい列の合計幅を設定することにより Horizontal Scrolling を有効にできます。

    Web Components 水平方向のスクロールの例

    デフォルト列幅の設定

     <igc-data-grid id="grid"
          height="100%"
          width="100%"
          default-column-min-width=200>
     </igc-data-grid>
    

    各列の幅の設定

    <igc-data-grid id="grid"
         width="100%"
         height="100%"
         auto-generate-columns="false">
          <igc-text-column id="FirstName" width="300"></igc-text-column>
          <igc-text-column id="LastName" width="300"></igc-text-column>
          <igc-numeric-column id="Age" width="300"></igc-numeric-column>
          <igc-date-time-column id="OrderDate" width="300"></igc-date-time-column>
          <igc-text-column id="Street" width="300"></igc-text-column>
          <igc-text-column id="City" width="300"></igc-text-column>
          <igc-text-column id="Salary" width="300"></igc-text-column>
          <igc-text-column id="Sales" width="300"></igc-text-column>
    </igc-data-grid>
    

    API リファレンス