bwsewell / tablecloth

A CSS and JS bootstrap to style and manipulate data tables

tablecloth.js

tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.

We've all been there. Either you're redesigning a large site or working on a completely new one... styling tables is typically tedious and time-consuming. If you'd rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting:

// Without any customizations
$("table").tablecloth();
 
// With customizations
$("table").tablecloth({
  theme: "default",
  bordered: true,
  condensed: true,
  striped: true,
  sortable: true,
  clean: true,
  cleanElements: "th td",
  customClass: "my-table"
});

tablecloth builds off the Twitter Bootstrap. It also includes popular jQuery table manipulation plugins like tablesorter.

tablecloth's Issues

tablecloth added to twitstrap resources

Hello,
We have just add tablecloth to twittstrap resources list
http://www.twittstrap.com/resources/details/tablecloth-js
Under : Components
Regards

Paging for Grid?

Any timeline for this feature? Can I help in any way?

After removing row, Sorting adds it again !!

I am removing a row using jquery remove() method, and it goes away. When I click on column head, to sort the table. Those removed rows are getting added back to table. Please help...

Add bower support

Just follow steps in link:
http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/

Pagination?

Is there a timeline for this? I am using Tablecloth in a membership site, and it would be extremely valuable. Thanks!

Just a question...

What is the point of doing this with JavaScript rather than CSS classes?

Sorting by a UK date doesn't work

I have a UK format date table "13/09/2013" or "13-09-2013", sorting produces random results, inconsistent with US format dates like "2013-09-30".

I'll try to come up with an option to allow UK dates.

Which are the tableclothjs files ?

Which are the files I need to add to my project which already uses Bootstrap to get tableclothjs working ?

License Type?

TableCloth inside AJAX Success Call

Hello Sir,

I just wanna ask I have a table inside my ajax success call just like this below.

`$('#btn-inquire-transmittal-number').click(function(e){
e.preventDefault();
$('#window-transmittal-inquiry').hide(1000);
var inputtextval = $('#transmittal_number_inquiry').val();

        $("#modalTransmittalInquiry").modal('show');
        $.ajax({
              url: "getTransmittalNum.php",
              type: "POST",
              data: {'transmittal_number_inquiry' : inputtextval},
              datatype: 'json',
              success: function(data){
                  $('#modalTransmittalInquiry').modal('show');  
                  $('#modal-content-result').html('<table class="table table-condensed tablehead table-sortable" id="table_inquiry" style="width:99%;">' +
                                                    '<tr>' +
                                                        '<thead>' +
                                                            '<th style="text-wrap:normal">Transmittal #</th>' +
                                                            '<th>Transmittal Date</th>' +
                                                            '<th>Sender Name</th>' +
                                                            '<th>Department</th>' +
                                                            '<th>Invoice #</th>' +
                                                            '<th>Amount</th>' +
                                                            '<th>Document Type</th>' +
                                                            '<th>Vendor Name</th>' +
                                                            '<th>Remark</th>' +
                                                            '<th>Action</th>' +
                                                        '</thead>' +
                                                    '<tr>' +
                                                  '</table>');


                        var trHTML = '<tr>' + 
                                    '<tbody>' +
                                        '<td><h6>' + data.transid + '</h6></td>' +
                                        '<td><h6>' + data.transdate + '</h6></td>' +
                                        '<td><h6>' + data.sender_name + '</h6></td>' +
                                        '<td><h6>' + data.department + '</h6></td>' +
                                        '<td><h6>' + data.document_number + '</h6></td>' +
                                        '<td><h6>' + data.total_amount + '</h6></td>' +
                                        '<td><h6>' + data.document_type + ' - ' + data.document_description + '</h6></td>' +
                                        '<td><h6>' + data.vendor_name + '</h6></td>' +
                                        '<td><h6>' + data.remarks + '</h6></td>' +
                                        '<td><h6>' +
                                            '<a href="acknowledge_process.php?id=$id"><button type="button" class="btn btn-success"><i class="fa fa-check-circle fa-fw"></i></button></a>' +
                                            '<a href="incomplete_process.php?id=$id"><button type="button" class="btn btn-danger" ><i class="incomplete fa fa-times-circle fa-fw"></i></button></a>' +
                                            '<a href="onprocess_process.php?id=$id"><button type="button" class="btn btn-warning" ><i class="onprocess fa fa-cogs fa-fw"></i></button></a>' +
                                        '</h6></td>' +
                                    '</tbody>' +
                                  '</tr>';

                        $('#table_inquiry').append(trHTML);

              },
              error:function(){
                  alert('Error occured..');
              }   
        }); 
    });`

I want to use the jquery plugin I have a problem where I put the code that will call my table id. Thank you in advance.

ENHANCEMENT - Search

Is a search (true, false) flag in the roadmap?