Reordering

The KendoReact Data Grid enables you to reorder its columns by dragging the header cells.

To enable column reordering, set the reorderable property of the Grid to true.

By default, the column-reordering feature is disabled.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    render() {
        return (
            <Grid
                style={{ height: '400px' }}
                data={products}
                reorderable
            >
                <GridColumn field="ProductID" title="ID" width="45px" />
                <GridColumn field="ProductName" title="Name" width="250px" />
                <GridColumn field="Category.CategoryName" title="CategoryName" />
                <GridColumn field="UnitPrice" title="Price" width="80px" />
                <GridColumn field="UnitsInStock" title="In stock" width="80px" />
            </Grid>
        );
    }
}

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