[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Rolagem horizontal

    A Tabela de Dados Ignite UI for Web Components / Suporte à Grade de Dados A rolagem horizontal é ativada definindo a largura total das colunas maior que a largura da grade de dados Web Components.

    Web Components Horizontal Scrolling Example

    Setting Default Column Width

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

    Setting Individual Column Widths

    <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 References