jQuery datagridview moving columns - maikelbos0/VDT GitHub Wiki

The data grid has an option to allow users to move the columns around in the grid by dragging the header. To enable this behaviour, you can use the data-column-move attribute on the element that will be transformed into a data grid.

<div id="example-table" data-column-move="true"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    });
</script>

When a column has been move (on mouse up after dragging), a datagridview.columnMoved event is triggered. This event provides an array with the column definitions in their new order in the second parameter. This allows you to store the new column definitions per-user if desired.

<script type="text/javascript">
    $('#example-table').on('datagridview.columnMoved', function (event, columns) {
        // Store the new column definition.
    });
</script>

When both moving and resizing columns are available, it is recommended to use the same event handler for both events. They have the same signature and normally both would require you to perform the same action with the new column definitions.