Locked columns

Locked (frozen or sticky) columns are the columns that are visible at all times while the user scrolls the Grid horizontally.

By default, the columns of the Grid are not locked.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import products from './products.json';

class App extends React.Component {

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /