Unobtrusive table column resize with jquery

With this piece of code, simple add the class  ‘resizabletable’ to your table and the columns can be easily resized by drag and drop!

I was inspired by the flexigrid, but wanted a simpler solution. This one also nicely integrates into Wicket DataTable, for example.

Update: fixed the multi table on a page bug, kindly pointed out by Nick (see comments)

To see it working: http://www.audenaerde.org/example.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">
    function resetTableSizes (table, change, columnIndex)
    {
        //calculate new width;
        var tableId = table.attr('id');
        var myWidth = $('#'+tableId+' TR TH').get(columnIndex).offsetWidth;
        var newWidth = (myWidth+change)+'px';

        $('#'+tableId+' TR').each(function()
        {
            $(this).find('TD').eq(columnIndex).css('width',newWidth);
            $(this).find('TH').eq(columnIndex).css('width',newWidth);
        });
        resetSliderPositions(table);
    };

    function resetSliderPositions(table)
    {
        var tableId = table.attr('id');
        //put all sliders on the correct position
        table.find(' TR:first TH').each(function(index)
        {
            var td = $(this);
            var newSliderPosition = td.offset().left+td.outerWidth() ;
            $("#"+tableId+"_id"+(index+1)).css({  left:   newSliderPosition , height: table.height() + 'px'}  );
        });
    }

    function makeResizable(table)
    {        
        //get number of columns
        var numberOfColumns = table.find('TR:first TH').size();

        //id is needed to create id's for the draghandles
        var tableId = table.attr('id');
        for (var i=0; i<=numberOfColumns; i++)
        {
            //enjoy this nice chain :)
            $('<div id="'+tableId+'_id'+i+'"></div>').insertBefore(table).data('tableid', tableId).data('myindex',i).draggable(
            { axis: "x",
              start: function () 
              {
                var tableId = ($(this).data('tableid'));
                $(this).toggleClass( "dragged" );
                //set the height of the draghandle to the current height of the table, to get the vertical ruler
                $(this).css({ height: $('#'+tableId).height() + 'px'} );
              },
              stop: function (event, ui) 
              {
                var tableId = ($(this).data('tableid'));
                $( this ).toggleClass( "dragged" ); 
                var oldPos  = ($( this ).data("draggable").originalPosition.left);
                var newPos = ui.position.left;
                var index =  $(this).data("myindex");
                resetTableSizes($('#'+tableId), newPos-oldPos, index-1);
              }          
            }
            );;
        };

        resetSliderPositions(table);

    }
    $(document).ready(function()
    {
        $(".resizabletable").each(function(index)
        {
            makeResizable($(this));
        });

    });

    </script>
    <style>
        .draghandle.dragged
        {
            border-left: 1px solid #333;
        }

        .draghandle
        {
            position: absolute;
            z-index:5;
            width:5px;
            cursor:e-resize;
        }
        TH
        {
            border-left: 1px solid #333;
            border-bottom: 1px solid #333;
        }
    </style>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
    <table id="mytable" style="width:100%; border: 1px solid red;" border="0" cellspacing="0" cellpadding="0" >
    <thead>
        <tr>
            <th style="">Dit is een interessante zin!</th>
            <th style="">b</th>
            <th style="">b</th>
            <th style="">b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="">Dit is een interessante zin!</td>
            <td style="">b</td>
            <td style="">b</td>
            <td style="">b</td>
        </tr>
        <tr>
            <td style="">b</td>
            <td style="">a</td>
            <td style="">b</td>
            <td style="">b</td>
            </tr>
        <tr>
            <td style="">b</td>
            <td style="">a</td>
            <td style="">b</td>
            <td style="">b</td>
        </tr>
    </tbody>
    </table>
</div>
</body>
</html>

Enjoy :)
Advertisements