jQuery UI TinyTable

Light weight and fully themeable jQuery UI Plugin to generate tables on the fly with fixed columns, header and/or footer. Simple usage and a very small with basic functions like append, prepend or remove one row to the table body.

Make your HTML-Tables more useable!

 

Example

Make some settings in the form below, press "create" and see what is happen.

Try it ...

... to init with params   
... to manipulate or destroy

Code

Result

row 1 - cell 1row 1 - cell 2row 1 - cell 3row 1 - cell 4row 1 - cell 5row 1 - cell 6row 1 - cell 7row 1 - cell 8row 1 - cell 9row 1 - cell 10
row 10 - cell 1row 10 - cell 2row 10 - cell 3row 10 - cell 4row 10 - cell 5row 10 - cell 6row 10 - cell 7row 10 - cell 8row 10 - cell 9row 10 - cell 10
row 2 - cell 1row 2 - cell 2row 2 - cell 3row 2 - cell 4row 2 - cell 5row 2 - cell 6row 2 - cell 7row 2 - cell 8row 2 - cell 9row 2 - cell 10
row 3 - cell 1row 3 - cell 2row 3 - cell 3row 3 - cell 4row 3 - cell 5row 3 - cell 6row 3 - cell 7row 3 - cell 8row 3 - cell 9row 3 - cell 10
row 4 - cell 1row 4 - cell 2row 4 - cell 3row 4 - cell 4row 4 - cell 5row 4 - cell 6row 4 - cell 7row 4 - cell 8row 4 - cell 9row 4 - cell 10
row 5 - cell 1row 5 - cell 2row 5 - cell 3row 5 - cell 4row 5 - cell 5row 5 - cell 6row 5 - cell 7row 5 - cell 8row 5 - cell 9row 5 - cell 10
row 6 - cell 1row 6 - cell 2row 6 - cell 3row 6 - cell 4row 6 - cell 5row 6 - cell 6row 6 - cell 7row 6 - cell 8row 6 - cell 9row 6 - cell 10
row 7 - cell 1row 7 - cell 2row 7 - cell 3row 7 - cell 4row 7 - cell 5row 7 - cell 6row 7 - cell 7row 7 - cell 8row 7 - cell 9row 7 - cell 10
row 8 - cell 1row 8 - cell 2row 8 - cell 3row 8 - cell 4row 8 - cell 5row 8 - cell 6row 8 - cell 7row 8 - cell 8row 8 - cell 9row 8 - cell 10
row 9 - cell 1row 9 - cell 2row 9 - cell 3row 9 - cell 4row 9 - cell 5row 9 - cell 6row 9 - cell 7row 9 - cell 8row 9 - cell 9row 9 - cell 10
 

Example: Basic usage

row 1 - cell 1row 1 - cell 2row 1 - cell 3row 1 - cell 4row 1 - cell 5row 1 - cell 6row 1 - cell 7row 1 - cell 8row 1 - cell 9row 1 - cell 10
row 10 - cell 1row 10 - cell 2row 10 - cell 3row 10 - cell 4row 10 - cell 5row 10 - cell 6row 10 - cell 7row 10 - cell 8row 10 - cell 9row 10 - cell 10
row 2 - cell 1row 2 - cell 2row 2 - cell 3row 2 - cell 4row 2 - cell 5row 2 - cell 6row 2 - cell 7row 2 - cell 8row 2 - cell 9row 2 - cell 10
row 3 - cell 1row 3 - cell 2row 3 - cell 3row 3 - cell 4row 3 - cell 5row 3 - cell 6row 3 - cell 7row 3 - cell 8row 3 - cell 9row 3 - cell 10
row 4 - cell 1row 4 - cell 2row 4 - cell 3row 4 - cell 4row 4 - cell 5row 4 - cell 6row 4 - cell 7row 4 - cell 8row 4 - cell 9row 4 - cell 10
row 5 - cell 1row 5 - cell 2row 5 - cell 3row 5 - cell 4row 5 - cell 5row 5 - cell 6row 5 - cell 7row 5 - cell 8row 5 - cell 9row 5 - cell 10
row 6 - cell 1row 6 - cell 2row 6 - cell 3row 6 - cell 4row 6 - cell 5row 6 - cell 6row 6 - cell 7row 6 - cell 8row 6 - cell 9row 6 - cell 10
row 7 - cell 1row 7 - cell 2row 7 - cell 3row 7 - cell 4row 7 - cell 5row 7 - cell 6row 7 - cell 7row 7 - cell 8row 7 - cell 9row 7 - cell 10
row 8 - cell 1row 8 - cell 2row 8 - cell 3row 8 - cell 4row 8 - cell 5row 8 - cell 6row 8 - cell 7row 8 - cell 8row 8 - cell 9row 8 - cell 10
row 9 - cell 1row 9 - cell 2row 9 - cell 3row 9 - cell 4row 9 - cell 5row 9 - cell 6row 9 - cell 7row 9 - cell 8row 9 - cell 9row 9 - cell 10

Code

Produced HTML

<table style="display: none;" id="table-1" cellpadding="5" cellspacing="0"></table>
<div style="width: 700px; height: 200px;" class="ui-tinytbl" role="table-1">
 <div class="ui-tinytbl-th">
  <div class="ui-tinytbl-th-left ui-widget-header" style="float: left;">
   <div style="width: 95px;" class="ui-tinytbl-content">
    <table style="width: 95px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
     </colgroup>
     <thead>
      <tr class="ui-tinytbl-firstrow ui-tinytbl-lastrow"><th style="height: 26px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 1 - cell 1</th></tr>
     </thead>
    </table>
   </div>
  </div>
  <div class="ui-tinytbl-th-right ui-widget-header" style="float: left; overflow-x: hidden; width: 590px;">
   <div style="width: 862px;" class="ui-tinytbl-content">
    <table style="width: 862px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 102px;" width="102" />
     </colgroup>
     <thead>
      <tr class="ui-tinytbl-firstrow ui-tinytbl-lastrow"><th style="height: 26px;" class="ui-tinytbl-firstcol">row 1 - cell 2</th><th>row 1 - cell 3</th><th>row 1 - cell 4</th><th>row 1 - cell 5</th><th>row 1 - cell 6</th><th>row 1 - cell 7</th><th>row 1 - cell 8</th><th>row 1 - cell 9</th><th class="ui-tinytbl-lastcol">row 1 - cell 10</th></tr>
     </thead>
    </table>
   </div>
  </div>
  <div style="clear: both;"></div>
 </div>
 <div class="ui-tinytbl-tb">
  <div class="ui-tinytbl-tb-left ui-widget-content" style="float: left; overflow: hidden; height: 134px;">
   <div style="width: 95px;" class="ui-tinytbl-content">
    <table style="width: 95px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
     </colgroup>
     <tbody>
      <tr class="ui-tinytbl-firstrow"><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 2 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 3 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 4 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 5 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 6 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 7 - cell 1</th></tr>
      <tr><th style="height: 27px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 8 - cell 1</th></tr>
      <tr class="ui-tinytbl-lastrow"><th style="height: 26px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 9 - cell 1</th></tr>
     </tbody>
    </table>
   </div>
  </div>
  <div class="ui-tinytbl-tb-right ui-widget-content" style="float: left; overflow: auto; width: 604px; height: 148px;">
   <div style="width: 862px;" class="ui-tinytbl-content">
    <table style="width: 862px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 102px;" width="102" />
     </colgroup>
     <tbody>
      <tr class="ui-tinytbl-firstrow"><td style="height: 27px;" class="ui-tinytbl-firstcol">row 2 - cell 2</td><td>row 2 - cell 3</td><td>row 2 - cell 4</td><td>row 2 - cell 5</td><td>row 2 - cell 6</td><td>row 2 - cell 7</td><td>row 2 - cell 8</td><td>row 2 - cell 9</td><td class="ui-tinytbl-lastcol">row 2 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 3 - cell 2</td><td>row 3 - cell 3</td><td>row 3 - cell 4</td><td>row 3 - cell 5</td><td>row 3 - cell 6</td><td>row 3 - cell 7</td><td>row 3 - cell 8</td><td>row 3 - cell 9</td><td class="ui-tinytbl-lastcol">row 3 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 4 - cell 2</td><td>row 4 - cell 3</td><td>row 4 - cell 4</td><td>row 4 - cell 5</td><td>row 4 - cell 6</td><td>row 4 - cell 7</td><td>row 4 - cell 8</td><td>row 4 - cell 9</td><td class="ui-tinytbl-lastcol">row 4 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 5 - cell 2</td><td>row 5 - cell 3</td><td>row 5 - cell 4</td><td>row 5 - cell 5</td><td>row 5 - cell 6</td><td>row 5 - cell 7</td><td>row 5 - cell 8</td><td>row 5 - cell 9</td><td class="ui-tinytbl-lastcol">row 5 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 6 - cell 2</td><td>row 6 - cell 3</td><td>row 6 - cell 4</td><td>row 6 - cell 5</td><td>row 6 - cell 6</td><td>row 6 - cell 7</td><td>row 6 - cell 8</td><td>row 6 - cell 9</td><td class="ui-tinytbl-lastcol">row 6 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 7 - cell 2</td><td>row 7 - cell 3</td><td>row 7 - cell 4</td><td>row 7 - cell 5</td><td>row 7 - cell 6</td><td>row 7 - cell 7</td><td>row 7 - cell 8</td><td>row 7 - cell 9</td><td class="ui-tinytbl-lastcol">row 7 - cell 10</td></tr>
      <tr><td style="height: 27px;" class="ui-tinytbl-firstcol">row 8 - cell 2</td><td>row 8 - cell 3</td><td>row 8 - cell 4</td><td>row 8 - cell 5</td><td>row 8 - cell 6</td><td>row 8 - cell 7</td><td>row 8 - cell 8</td><td>row 8 - cell 9</td><td class="ui-tinytbl-lastcol">row 8 - cell 10</td></tr>
      <tr class="ui-tinytbl-lastrow"><td style="height: 26px;" class="ui-tinytbl-firstcol">row 9 - cell 2</td><td>row 9 - cell 3</td><td>row 9 - cell 4</td><td>row 9 - cell 5</td><td>row 9 - cell 6</td><td>row 9 - cell 7</td><td>row 9 - cell 8</td><td>row 9 - cell 9</td><td class="ui-tinytbl-lastcol">row 9 - cell 10</td></tr>
     </tbody>
    </table>
   </div>
  </div>
  <div style="clear: both;"></div>
 </div>
 <div class="ui-tinytbl-tf">
  <div class="ui-tinytbl-tf-left ui-widget-header" style="float: left;">
   <div style="width: 95px;" class="ui-tinytbl-content">
    <table style="width: 95px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
     </colgroup>
     <tfoot>
      <tr class="ui-tinytbl-firstrow ui-tinytbl-lastrow"><th style="height: 26px;" class="ui-tinytbl-firstcol ui-tinytbl-lastcol">row 10 - cell 1</th></tr>
     </tfoot>
    </table>
   </div>
  </div>
  <div class="ui-tinytbl-tf-right ui-widget-header" style="float: left; overflow-x: hidden; width: 590px;">
   <div style="width: 862px;" class="ui-tinytbl-content">
    <table style="width: 862px; border-collapse: collapse; table-layout: fixed;" border="0" cellpadding="5" cellspacing="0">
     <colgroup>
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 95px;" width="95" />
      <col style="width: 102px;" width="102" />
     </colgroup>
     <tfoot>
      <tr class="ui-tinytbl-firstrow ui-tinytbl-lastrow"><th style="height: 26px;" class="ui-tinytbl-firstcol">row 10 - cell 2</th><th>row 10 - cell 3</th><th>row 10 - cell 4</th><th>row 10 - cell 5</th><th>row 10 - cell 6</th><th>row 10 - cell 7</th><th>row 10 - cell 8</th><th>row 10 - cell 9</th><th class="ui-tinytbl-lastcol">row 10 - cell 10</th></tr>
     </tfoot>
    </table>
   </div>
  </div>
  <div style="clear: both;"></div>
 </div>
</div>
 

Example: Auto-Renderer

To support creating of TinyTables on hidden elements (like ui-tabs) with the correct dimensions, there's the option renderer:true.
But please note: This may slow down your site. It's better to create all TinyTables and than to call function like UI-Tabs.

// Sample usage:
$('.selector').tinytbl({
    direction: 'ltr',
    thead:     true,
    tfoot:     true,
    cols:      1,
    width:     'auto',
    height:    200,
    renderer:  true
});
tbl 1 - row 1 - cell 1tbl 1 - row 1 - cell 2tbl 1 - row 1 - cell 3tbl 1 - row 1 - cell 4tbl 1 - row 1 - cell 5tbl 1 - row 1 - cell 6tbl 1 - row 1 - cell 7tbl 1 - row 1 - cell 8tbl 1 - row 1 - cell 9
tbl 1 - row 9 - cell 1tbl 1 - row 9 - cell 2tbl 1 - row 9 - cell 3tbl 1 - row 9 - cell 4tbl 1 - row 9 - cell 5tbl 1 - row 9 - cell 6tbl 1 - row 9 - cell 7tbl 1 - row 9 - cell 8tbl 1 - row 9 - cell 9
row 2 - cell 1row 2 - cell 2row 2 - cell 3row 2 - cell 4row 2 - cell 5row 2 - cell 6row 2 - cell 7row 2 - cell 8row 2 - cell 9
row 3 - cell 1row 3 - cell 2row 3 - cell 3row 3 - cell 4row 3 - cell 5row 3 - cell 6row 3 - cell 7row 3 - cell 8row 3 - cell 9
row 4 - cell 1row 4 - cell 2row 4 - cell 3row 4 - cell 4row 4 - cell 5row 4 - cell 6row 4 - cell 7row 4 - cell 8row 4 - cell 9
row 5 - cell 1row 5 - cell 2row 5 - cell 3row 5 - cell 4row 5 - cell 5row 5 - cell 6row 5 - cell 7row 5 - cell 8row 5 - cell 9
row 6 - cell 1row 6 - cell 2row 6 - cell 3row 6 - cell 4row 6 - cell 5row 6 - cell 6row 6 - cell 7row 6 - cell 8row 6 - cell 9
row 7 - cell 1row 7 - cell 2row 7 - cell 3row 7 - cell 4row 7 - cell 5row 7 - cell 6row 7 - cell 7row 7 - cell 8row 7 - cell 9
row 8 - cell 1row 8 - cell 2row 8 - cell 3row 8 - cell 4row 8 - cell 5row 8 - cell 6row 8 - cell 7row 8 - cell 8row 8 - cell 9
 

How to install and run

1.) Install jQuery and jQuery UI

Download and/or link to the jQuery and jQuery UI Javascript Libraries in the <head></head> section of your html document.

Sample:

<head>
    <!-- other stuff -->
    <link href="your-path/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <script src="your-path/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="your-path/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <!-- other stuff -->
</head>

2.) Install jQuery UI TinyTable

Download and link to the jQuery UI TinyTable in the <head></head> section of your html document.

Sample:

<head>
    <!-- other stuff -->
    <link href="your-path/jquery.ui.tinytbl.css" rel="stylesheet" type="text/css" />
    <script src="your-path/jquery.ui.tinytbl.js" type="text/javascript"></script>
    <!-- other stuff -->
</head>

3.) Let's run TinyTable

You need a table, which has a <thead>, <tfoot> and a <tbody> section.

Sample:

<!-- other stuff -->
<table class="ui-tinytable">
    <thead>
        <tr>
            <th>row 1 - cell 1</th>
            <th>row 1 - cell 2</th>
            <th>row 1 - cell 3</th>
            <th>row 1 - cell 4</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>row last - cell 1</th>
            <th>row last - cell 2</th>
            <th>row last - cell 3</th>
            <th>row last - cell 4</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>row 2 - cell 1</td>
            <td>row 2 - cell 2</td>
            <td>row 2 - cell 3</td>
            <td>row 2 - cell 4</td>
        </tr>
        <tr>
            <td>row 3 - cell 1</td>
            <td>row 3 - cell 2</td>
            <td>row 3 - cell 3</td>
            <td>row 3 - cell 4</td>
        </tr>
        <tr>
            <td>row 4 - cell 1</td>
            <td>row 4 - cell 2</td>
            <td>row 4 - cell 3</td>
            <td>row 4 - cell 4</td>
        </tr>
        <tr>
            <td>row 5 - cell 1</td>
            <td>row 5 - cell 2</td>
            <td>row 5 - cell 3</td>
            <td>row 5 - cell 4</td>
        </tr>
    </tbody>
</table>
<!-- other stuff -->

To convert the sample table above into a TinyTable with fixed header, footer and/or columns only few lines of Javascript are needed:

<script type="text/javascript">
    $(document).ready(function() {
        $('.ui-tinytable').tinytbl({
            direction: 'ltr',      // text-direction (default: 'ltr')
            thead:     true,       // fixed table thead
            tfoot:     true,       // fixed table tfoot
            cols:      1,          // fixed number of columns
            width:     'auto',     // table width (default: 'auto')
            height:    'auto'      // table height (default: 'auto')
        });
    });
</script>
 

Download

Version 2.1.1, released 2012-09-17

 

API description

Create

$('.selector').tinytbl(object options);
Coverts a normal table into a TinyTable. You can use follow options:

Destroy

$('.selector').tinytbl('destroy');
Removes the TinyTable and restores the original table.

Focus

$('.selector').tinytbl('focus');
Set the focus to the scrollable area.

Append a row

$('.selector').tinytbl('append', object tr-element);
Add a new row to TinyTable to the bottom of the body section.

Prepend a row

$('.selector').tinytbl('prepend', object tr-element);
Add a new row to TinyTable to the top of the body section.

Remove a row

$('.selector').tinytbl('remove', object tr-element);
Removes a specified row from the body section.

 

Changelog

Notes