jQuery datagridview resizing columns

The data grid has an option to allow users to resize the columns in the grid by dragging the edge of the header. To enable this behaviour, you can use the data-column-resize attribute on the element that will be transformed into a data grid. When a columns grows, the grid size automatically adjusts; this means that the total width of the grid can then exceed 100% width. When a column shrinks, the grid automatically adjusts the columns to ensure the minimum width of 100%. When a column shrinks to size 0, the column is automatically hidden. To restore visibility, see Manipulating the datagridview after creating.

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

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

When a column has been resized (on mouse up after dragging), a datagridview.columnResized event is triggered. This event provides an array with the new column definitions with their new widths 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.columnResized', 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.