React Horizontal Scrolling

    The Ignite UI for React Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the React data grid.

    React Horizontal Scrolling Example

    EXAMPLE
    DATA
    TSX

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Setting Default Column Width

    <IgrDataGrid
        height="100%"
        width="100%"
        autoGenerateColumns="true"
        defaultColumnMinWidth={300}
        dataSource={this.data}/>
    tsx
    Ignite UI for React | CTA Banner

    Setting Individual Column Widths

    <IgrDataGrid
        height="100%"
        width="100%"
        autoGenerateColumns="false"
        dataSource={this.data}>
            <IgrTextColumn field="FirstName" headerText="First Name" width="300"/>
            <IgrTextColumn field="LastName" headerText="Last Name" width="300"/>
            <IgrNumericColumn field="Age" headerText="Age" width="300"/>
            <IgrDateTimeColumn field="Birthday" headerText="Birth Date" width="300"/>
            <IgrTextColumn field="Street" headerText="Street Address" width="300"/>
            <IgrTextColumn field="City" headerText="City and State" width="300"/>
            <IgrTextColumn field="Salary" headerText="Salary" width="300"/>
            <IgrTextColumn field="Sales" headerText="Sales" width="300"/>
        </IgrDataGrid>
    tsx

    API References