이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

    Web Components 가로 스크롤

    Ignite UI for Web Components 데이터 테이블/데이터 그리드가 수평 스크롤을 지원하려면 열의 총 너비를 Web Components 데이터 그리드의 너비보다 크게 설정하면 됩니다.

    Web Components 수평 스크롤링 예제

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    기본 열 너비 설정

     <igc-data-grid id="grid"
          height="100%"
          width="100%"
          default-column-min-width=200>
     </igc-data-grid>
    html
    Ignite UI for Web Components | CTA 배너

    개별 열 너비 설정

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

    API 참조