Pagination Support for Table Component

It would be awesome to add a prop to automatically manage pagination support. Something like

<Table
  {...otherProps}
  pagination
  paginationMaxRowsPerPage={20}
/>

Are there any plans to add this? Or is there any reason why there are only style examples rather than including functionality?

[calvinwhitehurst]

The following jquery is something I have used several times to make the SUI table pagination work. It does not however include the chevron icons. Declare the id of your table as “data” and plug this script in at the bottom of your page where the table is displayed.

$(document).ready(function(){
    $('#data').after('<div class="ui right floated pagination menu"></div>');
    var rowsShown = 10;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('.ui.right.floated.pagination.menu').append('<a href="#/" class="item" rel="'+i+'">'+pageNum+'</a> ');
    }
    $('#data tbody tr').hide();
    $('#data tbody tr').slice(0, rowsShown).show();
    $('.ui.right.floated.pagination.menu a:first').addClass('active');
    $('.ui.right.floated.pagination.menu a').bind('click', function(){

        $('.ui.right.floated.pagination.menu a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
});

[mishaberman]

Nice script Calvin!