affordable web development services
| About Us | Services | Download | Order | Support | Subscribe to News Feed Follow us on Twitter Join us on Facebook |
 

Tigra Tables PRO v2.1 - Documentation

Description

Tigra Tables PRO is flexible JavaScript cross-browser client side table data manipulation offering rows sorting, filtering, paged output, altering rows coloring and other visual effects. Tigra Tables PRO component saves development time and greatly reduces network load. With highly optimized algorithms script offers good results on large data sets.

Features

Tigra Tables PRO offers many advanced features that can't be found elsewhere. Some of them are:

Compatibility Table

For best browsing experience Tigra Tables PRO utilizes maximum of capabilities offered by the client software used. Offering the best compatibility on the market script can work with any browser capable of generic DHTML.

Here is a table of the application compatibility:

Compatibility Table

For best browsing experience Tigra Tables PRO utilizes maximum of capabilities offered by the client software used. Offering the best compatibility on the market script can work with any browser capable of generic DHTML.
Here is a table of the application compatibility:

Platform Browser
MS IE Netscape Mozilla Opera Konqueror AOL
Windows 95/98/ME/2000/XP 5.0+ 4.08+ 0.9+ 5.0+ n/a 4+
Mac OS 8/9/X 5.0+ 4.08+ 0.9+ 5.0+ n/a 4+
KDE on Linux/FreeBSD n/a 4.08+ 0.9+ 5.0+ 3.0.1 n/a

Performance tests

Tigra Tables PRO uses quick sorting algorithm with indexing. That results in extremely high data sorting speed allowing to process data sets large enough for JavaScript application. Tigra Tables PRO sorting speed has been measured on a dataset of 21,000 records, 4 fields.
Below there is a table of sorting times on a platform of AMD Athlontm XP 1600+ 1.4GHz, RAM 256Mb, MS Windows XP Professional:

Browser Average time for 10 tries, seconds
Numbers Strings
First sort After first sort First sort After first sort
MS IE 6.0 7 1 10 1
Netscape 7.0 3 < 1 5 < 1
Mozilla 1.3 3 < 1 4 < 1

Minimum Requirements

Some minimum computer knowledge is required to configure Tigra Tables PRO:

Note: No JavaScript or other programming knowledge is required for typical Tigra Tables PRO setup. Basic JavaScript skills may be required if developer wants to extend product with the custom properly sorted types of data. You can enjoy Tigra Tables PRO in your application even if you don't meet requirements above. All you need is to order product customization from SoftComplex and we'll do the rest.

Getting Started

The most natural way to get started with Tigra Tables PRO is step-by-step modifications of the demo that goes with the distribution package. Create backup copies of the files before each modification and check your results after modification to roll back if you've made some configuration error.
To configure Tigra Tables PRO, please, follow steps below:

  1. Read this documentation to the end before starting
  2. Create directory for Tigra Tables PRO files on your local computer
  3. Extract files and directories from the distribution package you've received within order confirmation message
  4. Review product's features and plan your table. Decide what features you want to use, compose the list of columns and determine what data type columns are of
  5. Describe columns of your table
  6. Create table data file
  7. Configure features
  8. Tune visual aspects of your table for your application
  9. Carefully test all the functionality
  10. Move Tigra Tables PRO configuration to the HTML document you want to use it with

Files

Tigra Tables PRO script consists of several files. This makes script maintenance easier and reduces network load.
Default distribution package contains:

Where ? and * are wildcards for single character and substring respectively.

Configuration and script files can be located anywhere in the site hierarchy but they should remain in the same directory and naming convention should be carefully followed. To rename or move default script directory modify path_to_files variable in table.js file:

// set correct path to Tigra Tables PRO files
var path_to_files = 'ttp_files/'

Script files should be attached to HTML document with appropriate tags in the header:

<head>
  <!-- some header data -->
  <link rel="stylesheet" href="ttp_files/table.css">
  <script language="JavaScript" src="ttp_files/table.js"></script>
  <script language="JavaScript" src="ttp_files/template.js"></script>
  <script language="JavaScript" src="ttp_files/content.js"></script>

</head>

Notes:

If some of table columns are planned to be of date format there also date processing add-on module should be attached to HTML document together with rest script files:

<head>
  <!-- some header data -->
  <link rel="stylesheet" href="ttp_files/table.css">
  <script language="JavaScript" src="ttp_files/table.js"></script>

  <script language="JavaScript" src="ttp_files/dt_parser.js"></script>
  <script language="JavaScript" src="ttp_files/template.js"></script>
  <script language="JavaScript" src="ttp_files/content.js"></script>
</head>

Initialization

Script initialization block creates table instance at the location in the HTML document where it is placed. Table will be positioned relatively to the containing tag:

<!-- some body data -->
<SCRIPT LANGUAGE="JavaScript">
  new TTable(TABLE_CAPT, TABLE_CONTENT, TABLE_LOOK);
</SCRIPT>

Configuration structure names should be passed in exact order:

General Information about Configuration Structures

Tigra Tables PRO is configured with several JavaScript structures described below. Configuration structures can have any names and they can reside in any *.js file(s) or they can be directly defined in <script> tag of the HTML document. Make sure all files are linked properly and component initialization is in the scope of all structures passed. All/Any structure(s) can be generated by the server side script to display data taken from any dynamic source (database, file system etc).

Describing Columns

Table columns are described with a JavaScript array each cell of which is a structure to describe one table column. Such structure may contain column title, data sorting mode, conditional formatting function or/and specify if the column is hidden. In demo configuration column describing array resides in file template.js and is named TABLE_CAPT:

var TABLE_CAPT = [
  // 0-th column definition
  {
    // title

    'name' : '<img src="img/folder.gif" border="0"> name',
    // standard type (STR, NUM, DATE, CURRENCY) or custom cast function
    'type' : STR 
  },
  // 1-st column definition
  {
    'name' : 'directory',
    // if the column is hidden

    'hide' : true
  },
  // 2-nd column definition
  {
    'name'         : '<img src="img/date_and_time.gif" border="0"> date',
    'type'         : DATE,
    // date input format
    'format_input' : 'Y-m-d',
    // date output format

    'format_output': 'd M Y, D'
  },
  // 3-rd column definition
  {
    'name'   : '<img src="img/currency.gif" border="0"> cost',
    'type'   : CURRENCY,
    // conditional formatting function
    'format' : function (n) {
      return n < 0 ? 'tabBody0Col3neg' : null
    }
  }
];

Note: column indexes specified in above example are zero-based.

Columns (fields) are described one by one with the following keys:

Key Description Accepted values Default value
 
General
name Column caption Any string (key is required)
type Column type STR, NUM, DATE, CURRENCY and function sorting is off
hide Is used if you want column to be hidden - optional true and false false
format Conditional formatting function returning a style class name to be applied depending on its argument value - optional function none
Date specific
format_input The key is used for DATE type only. It sets how a date is represented in particular column of TABLE_CONTENT structure. A DATE format string none
format_output The key is used for DATE type only. It sets how a date will be displayed on the screen. A DATE format string none

Sorting option for a particular column is automatically on when type key has been defined. In other case sorting options are off

Internally Supported Column Types

Column type in Tigra Tables PRO defines only sorting algorithm for a corresponding column. There are 4 column types internally supported by the application:

There is also a way to define an output format for DATE cells. Both input and output DATE formats should be defined as values for format_input and format_output keys of corresponding column scope settings respectively. Otherwise the column will be sorted like STR typed, even if specified to be of DATE type.

Note: to use DATE column type there date processing add-on module has to be attached to HTML document. Otherwise the column will be sorted like STR typed, even if specified to be of DATE type.

DATE Formats

A DATE format string is an ordinary string that consists of accepted set of special format characters and delimiters. The format characters instruct the input or output routine to read or to display a number (set of numbers, strings) instead of the format character. The format characters in a DATE format string follow in any order and non-format characters are translated as delimiters.
The following table represents all available format characters and their descriptions.
Format characters ARE case sensitive.

Char Description Values to be replaced with
 
Format characters for time
a "am" or "pm" string am or pm
A "AM" or "PM" string AM or PM
h an hour in 12-hour format 1 to 12
H an hour in 24-hour format 0 to 23
i minutes 00 to 59
s seconds 00 to 59
Format characters for a day of the week
d a day of the month, 2 digits with leading zero 00 to 31
D a short week day name, textual, 3 letters "Fri", "Mon" etc.
l a full week day name, textual "Friday", "Monday" etc.
Format characters for a date
F a full month name, textual "January", "February" etc.
M a short month name, textual "Jan", "Feb" etc.
m a month number with leading zero, 2 digits 01, 02 etc.
Y four digits year 1999, 2000 etc.
y two digits year 99, 00 etc.

The following examples show format string usage:

Custom sorting (cast) routines

More sorting methods can be added by just providing cast routines for custom data types (i.e. dates of different formats) in corresponding place of ‘types’ list. Cast routine should represent table cell value as a simple number or string for quick sorting. In other words cast routine converts cell value into its weight which can be than easy sorted.

Custom casting routine if supplied for a certain column will be called on data preparation procedure, once for each cell. Hence, such a routine will be supplied with one parameter, what is the value to be casted, on its call. The function should return a JavaScript Number (desired for faster sorting) or String.

For example, we have a column consisting of values "no" (bad), "ok" (OK) and "ex" (excellent) and need it to be sorted if ascending then in the order they are named ("no", "ok", "ex"). So we can make the following correspondences:

Then, have a casting function code:

function sortByQuality (a) {
  var weights = {
    'no' : 0,
    'ok' : 1,
    'ex' : 2
  }
  return weights[a]
}
var TABLE_CAPT = [
  // previous column definitions
  ...
  {
    'name' : 'Quality',
    'type' : sortByQuality
  },
  // next column definitions
  ...
];

Conditional formatting routines

Cells of each table column can be formatted depending on their values with a style class differing from the one defined for the entire column. In order to do so conditional formatting function (routine) should be assigned to 'format' value while describing the column.

Conditional formatting routine is called before each column cell drawing out process if defined. Only one parameter is passed which is a cell value to be drawn out. The task of the routine is to check if its argument value meets certain condition and then return appropriate style class name. If no formatting should be applied (column class should be used) the routine should return JavaScript null.

For example, we have got a column of numbers and need to mark all negatives with a red color. First thing to solve the problem is adding a style class definition for that - does not matter whether to a document <style> section or to a file of style for the Table:

.tabBody0Negatives {
  color: red;
  font-family: tahoma, verdana, arial;
  font-size: 12px;
  text-align: right;
  width: 60px;
}

Notes:

After class has been defined it is left to compose the routine:

function formatNegatives (n_) {
  // return a name of tabBody0Negatives if negative
  return n_ < 0 ? 'tabBody0Negatives' : null
}

And then just specify a reference to composed:

var TABLE_CAPT = [
  // previous column definitions
  ...
  {
    'name' : 'Quality',
    'type' : NUM,
	'format' : formatNegatives
  },
  // next column definitions
  ...
];

Defining Data

Another parameter passed to Tigra Tables PRO component is an array which describes content of the table. Even if you plan to use dynamic source of table data we suggest to use some static data file during initial setup process and switch to server side script later time. In demo configuration table data structure resides in file content.js and is named TABLE_CONTENT:

// table data
var TABLE_CONTENT = [
	["copyright","ABRAMOWICHM","58","665"],
	["day7","ABRAMOWICHM","96","167909"],
	["galilea","ABRAMOWICHM","88","0"],
	["copyright","ADAMS","67","1558"],
	["dayz1_","ADAMS","88","23746"],
	...
	["MusorschikiLuny","ANDERSON","62","77286"],
	["NelimitirovannayaOrbita","ANDERSON","73","398078"]
];

Notes:

Table scope settings

Most of visual aspects of the table are configured with CSS, some other are configured with the table scope settings structure that in demo configuration resides in file template.js and is named TABLE_LOOK.

The structure consists of several sections
Text or html indicating that the column is ...
Key Description Accepted Values Default Value
key Key field zero-based index A non-negative integer number 0
onclick A reference or definition of a function to call on table row click function none
multy_mark Indicates if multiple row selection mode for a table is on true or false false
structure Arranges table elements. The array can have a repeated values from list of acceptable values. For example you can have two captions: one on upper part, another on lower part of table. The array looks like: [0, 1, 2, 3, 4, 5, 0] An array of non-negative integer numbers. Each cell can be one of the following values:
0 - caption
1 - header
2 - body
3 - footer rows to be skipped at the bottom when applying effects
4 - paging
5 - filters
(key is required)
params Values to set for <table> tag attribute of ... An array of 2 cells (key is required)
0 ... cellpadding A positive integer number 0
1 ... cellspacing A positive integer number 0
colors A color for ... JavaScript object (key is required)
even ... background of even rows HTML color value #FFFFFF
odd ... background of odd rows HTML color value #DDDDDD
hovered ... background of rows having mouse over HTML color value #FFAAAA
marked ... background of marked rows HTML color value #FFFF00
freeze Numbers of table rows to skip when applying data effects and manipulations ... An array of 2 cells (key is required)
0 .. at the top of the table A non-negative integer number 0
1 ... at the bottom of the table A non-negative integer number 0
paging Setting for the paging feature JavaScript object (key is required)
by Size of the page A non-negative integer number
Set 0 to turn paging feature off
0
pf Text or html for first page link A HTML string ««
pp Text or html for previous page link A HTML string «
pn Text or html for next page link A HTML string »
pl Text or html for last page link A HTML string »»
tt A pattern for paging info string
May contain the following internal variables:
%pgs - total pages index
%ind - current page index
%rcs - total records found
A string '' (empty string)
sorting JavaScript object (key is required)
as HTML for ascending sorted state icon (text) A HTML string '' (empty string)
ds HTML for descending sorted state icon (text) A HTML string '' (empty string)
no HTML for unsorted state icon (text) A HTML string '' (empty string)
cl Index of column to sort initially A non-negative integer number or null (means none) null
or Specifies if sort order is descending if initial sorting is needed false - ascending, true - descending false
filter Defines what filtering options should be allowed for the table. A bitmap value composed by adding numbers:
1 ? allow filtering by substring match;
2 ? allow filtering by exact match;
4 ? allow filtering by regular expression match;
So specifying 0 will turn off filtering feature and specifying 7 will allow all options listed above.
(key is required)
css Binding of table elements to user defined CSS class JavaScript object (key is required)
main Whole table style CSS class name '' (empty string)
body Styles for each column. CSS class name array. A number of array elements must be the same as a number of defined columns An array of CSS class name '' (empty string)
captCell Style for a column caption cell CSS class name '' (empty string)
captText Style for column caption text CSS class name '' (empty string)
head Style for "freezen" rows on top CSS class name '' (empty string)
foot Style for "freezen" rows on bottom CSS class name '' (empty string)
pagnCell Style for paging section CSS class name '' (empty string)
pagnText Style for paging text CSS class name '' (empty string)
pagnPict Style for paging buttons CSS class name '' (empty string)
filtCell Style for filter section CSS class name '' (empty string)
filtPatt Style for filter pattern input box CSS class name '' (empty string)
filtSelc Style for filter selection boxes CSS class name '' (empty string)

Below is table scope setting structure definition example:

// structure that describes visual aspects of the table
var TABLE_LOOK = {
  'onclick' : function (a_row, a_marked) {
    alert('Current row data:\n    ['+a_row.join(', ') + ']\nAll selected rows keys:\n    [' + a_marked+']\n');
  },
  'key' : 0,
  // 0 - caption,
  // 1 - header rows to be skipped at the top when applying effects,
  // 2 - body,
  // 3 - footer rows to be skipped at the bottom when applying effects,
  // 4 - paging,
  // 5 - filters
  'structure' : [0,1,2, 3, 4, 5],
  'params' : [3, 1], // [cellpadding,cellspacing]
  'colors' : {
    'even'    : 'white',
    'odd'     : '#DBEAF5',
    'hovered' : '#FFAAAA',
    'marked'  : '#FFFF00'
  },
  'multy_mark' : true,
  'freeze' : [0, 0], // how many rows to skip [at_the_top, at_the_bottom] when applying effects
  'paging' : {
    'by' : 23, // page size (0 - no paging)
    'pp' : ' «',  // html for previous page link
    'pn' : '» ', // html for next page link
    'tt' : ' Page %ind of %pgs ' /* in this line your can use the following variables:
      %pgs total pages index
      %ind current page index
      %rcs total records found
      */
  },
  'sorting' : {
    // HTML for ascending sorted state icon
    'as' : '<img src=ttp_files/custom_imgs/asc.gif border=0 height=4 width=8 alt="sort descending">',
    // HTML for descending sorted state icon
    'ds' : '<img src=ttp_files/custom_imgs/desc.gif border=0 height=4 width=8 alt="sort ascending">',
    // Column for initial sorting
   'cl' : 1,
   // Order of sorted: true - ascending sorted, false descending sorted
   'or' : true

  },
  'filter' : 1 + 4, // filter 0 - off, 1 - substring, 2 - match, 4 - regexp filter (e.g. 1+2+4 means all filters on)
  //Styles binding
  'css' : {
    'main'     : 'tabTable0',
    'body'     : ['tabBody0Col0','tabBody0Col1','tabBody0Col2','tabBody0Col3'],
    'captCell' : 'tabCaptionCell0',
    'captText' : 'tabCaptionLink0',
    'head'     : 'tabHeadCell0',
    'foot'     : 'tabFootCell0',
    'pagnCell' : 'tabPaging0',
    'pagnText' : 'tabPagingText0',
    'pagnPict' : 'tabPagingArrowCell0',
    'filtCell' : 'tabFilter0',
    'filtPatt' : 'tabFilterPattern0',
    'filtSelc' : 'tabFilterSelect0'
  }
};

Note: If several filter options selected they are collected in a drop down list (<:select> tag). Single option is displayed as static text.

Handling table row click event

There is a way to handle a processing function on table row click event. It can be done by assigning a reference or definition of that function to 'onclick' key of table scope setting structure.

The function is called after clicking any table row and gives an info about which rows are currently marked and what the clicked row is filled with. To identify a table row there is no need to use entire row content, it is enough to use one column of unique values for each row. Such column index if other than 0 should be specified as a value for 'key' key of table scope setting structure.

There are two parameters passed to handling function call:

1) an array of marked row keys,
2) just marked row content (is passed only on mark, not on unmark)

Any processing can be done to the both parameters. No return value is required for click handling function.

Below is an example of such a function used to show a dialogue box displaying all marked row IDs and just marked row content consequently:

function row_clck(marked_all, marked_one) {
  alert('marked IDs: ' + marked_all);
  alert('just marked row: ' + marked_one);
}

Making the above function to work fragment:

var TABLE_LOOK = {
  // IDs are stored in 0-th column
  'key' : 0,
	// a reference to row_clck
  'onclick' : row_clck,
  // other table scope setting structure data
  ...
}

API - controlling data from custom scripts

Tigra Tables PRO supports the API (Application Programming Interface) to manipulate the table from the outside scripts. You can initiate table sorting, paging or filtering from your own JavaScript routine. Each Tigra Table PRO instance is a JavaScript object of TTable type. This allows to create as many table instances on one page as you need. And because of it all API references are made as calls of TTable object methods:

TTable_object_reference.method_name()

Hence, to be able to use API Tigra Table PRO object reference has to be assigned to a variable once initialized:

var myTTP = new TTable(TABLE_CAPT, TABLE_CONTENT, TABLE_LOOK);

After that table instance can be refereed by that variable name (myTTP in the example).

There three TTable methods (functions) are available in API:

Paging control (exePage function)

Paging control method of Tigra Tables PRO table instance is named exePage().

Its call should be supplied with one parameter meaning page to be navigated to zero-based index. According to the above code example a sample code for navigating table to page 3 (zero-based) when clicking a link will look so:

<a href="#" onclick="myTTP.exePage(3);return false;">Browse page #4</a>

"return false;" code is included above just to prevent following the link.

Sorting control (exeSort function)

Sorting control method of Tigra Tables PRO table instance is named exeSort().

It has to be supplied with two parameters when being called:

1) index of a table column to sort, positive integer, zero-based
2) sort order, boolean, values equal to true mean "descending", all other values mean "ascending"

If myTTP is a reference to certain table instance a sample code to perform sorting of 2-nd (zero-based) table column in descending order when clicking a link will look so:

<a href="#" onclick="myTTP.exeSort(2, true);return false;">Sort 3-rd column descending</a>

"return false;" code is included above just to prevent following the link.

Filtering control (exeFilt function)

Filtering control Tigra Tables PRO table instance method's name is exeFilt(). It requires any value equal to JavaScript true if filter should be applied as a parameter when being called. If you need to clear a filter applied call exeFilt() with no parameters.

However, to make filter to work there has to be a HTML form which input fields will contain filtering preferences. So, below sample sequence of steps for organizing Tigra Table PRO named myTTP filtering feature access is described:

1) Create a HTML form. Suppose its name is "myTTPForm", for example:

<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)">
</form>

2) Decide which table columns should be filtered and what type of filter you will need. Choose the type of the following:

You can choose several or all filter types.

3) Required filtering parameters are:

So insert into the form appropriate input field for entering or selecting values for each filtering parameter. If during previous step there only one column or only one filter type has been chosen there is no need to use drop-down select boxes to specify values corresponding to the choice. It will be enough to place hidden input field(s) of appropriate value(s).

Continuing our example, suppose we have to have an ability to filter by a substring inclusion or exact match and only on 2-nd (zero-based) column. The code will look similar to the following:

<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)">
  <!-- any HTML here except form closing tag (</form>) -->
  <input type="text" name="myTTPPattern">
  <!-- any HTML here except form closing tag (</form>) -->

  <select name="myTTPFilter">
    <option value="0">substring inclusion 
    <option value="1">exact match
  </select>
  <!-- any HTML here except form closing tag (</form>) -->
  <input type="hidden" name="myTTPColumn" value="2">

  <!-- any HTML here except form closing tag (</form>) -->
</form>

The above form has myTTP.exeFilt(true) fired on submit event to execute filtration when user presses "Enter" key or "Submit" button.

4) Now, the form and its fields has to be attached to a desired table. Use attachForm(ref, nameC, nameP, nameT) method of Tigra Table PRO object instance where parameters mean the following:

According to our example, the code will be the following:

myTTP.attachForm(document.forms['myTTPForm'], 'myTTPColumn', 'myTTPPattern', 'myTTPFilter')

Note: attachForm() can be called only after both the form and the table object instance have been rendered out on a page. So, the best place for the code call is directly before closing </body> tag.

5)After the form has been attached to the table the only thing do to is to handle exeFilt(true) calls on events that should initiate filtration and exeFilt() calls on events that should clear the filter.

Finishing the example line suppose we want two buttons in the form, one for starting filtration process and one for clearing the filter:

<form name="myTTPForm" onsubmit="return myTTP.exeFilt(true)">
  <!-- any HTML here except form closing tag (</form>) -->
  <input type="text" name="myTTPPattern">
  <!-- any HTML here except form closing tag (</form>) -->
  <select name="myTTPFilter">

    <option value="0">substring inclusion 
    <option value="1">exact match
  </select>
  <!-- any HTML here except form closing tag (</form>) -->
  <input type="hidden" name="myTTPColumn" value="2">
  <!-- any HTML here except form closing tag (</form>) -->

  <input type="button" value="Apply filter" onclick="myTTP.exeFilt(true)">
  <!-- any HTML here except form closing tag (</form>) -->
  <input type="reset" value="Undo filter" onclick="myTTP.exeFilt()">
  <!-- any HTML here except form closing tag (</form>) -->
</form>

Filtering API concept described above allows even more than one filtering forms to be used for one table or one form to be used for more than one table.

Content change(changeCont function)

You can dynamically change content of Tigra Tables PRO table. Use a changeCont(name,rows) method of Tigra Table PRO object instance with the following parameters:

If myTTP is a reference to certain table instance a sample code to perform content changing of 2-nd (zero-based) table column in descending order when clicking a link will look so:

<a href="#" onclick="myTTP.changeCont('TABLE_CONTENT2', 4);return false;">Load content from TABLE_CONTENT2 array and set rows per page to 4</a>

"return false;" code is included above just to prevent following the link.

Configuring Table Appearance

As mentioned above most of visual aspects of the table are configured with CSS. To HTML elements of the table are assigned particular classes for which you can define styles. Note that each class name has zero based table index in its name making possible to have multiple independently configured tables on the same page.
Use illustration below and comments in the demo CSS file to understand the way classes are mapped to the table elements.

/* Main table */
.tabTable0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	color: black;
	width: 400px;
}

/* Table containing column caption text and sorting arrows */
.tabCaption0 {
	background: #4682B4;
	height: 22px;
}

/* Table cell containing column caption text */
.tabCaptionText0 {
	font-family: tahoma, verdana, arial;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	color: #DBEAF5;
}

/* Table cell containing sorting arrow */
.tabSortArrowCell0 {
	width: 12px;
	padding-left: 2px
}

/* Cell of table with no effects applied at the top of the table */
.tabHeadCell0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	height: 18px;
}

/* Cell of table with no effects applied at the bottom of the table */
.tabFootCell0 {
	height: 18px;
}

/* Table containing paging arrows and text */
.tabPaging0 {
	background: #4682B4;
}

/* Table cell containing paging text */
.tabPagingText0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	text-align: center;
	color: #DBEAF5;
}

/* Table cell containing paging arrow */
.tabPagingArrowCell0 {
	text-align: center;
	width: 10px;
}

/* Table containing filtering form */
.tabFilter0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	color: black;
	background: white;
	height: 18px;
}

/* Input field for filtering pattern */
.tabFilterPattern0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
}

/* Dropdown list in a filtering form */
.tabFilterSelect0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	height: 16px;
}

/* --- Styles for data cells -- */

/* Cell of table body, column 0 */
.tabBody0Col0 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	color: black;
	width: 150px;
}

/* Cell of table body, column 1 */
.tabBody0Col1 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
}

/* Cell of table body, column 2 */
.tabBody0Col2 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	text-align: center;
	width: 60px;
}

/* Cell of table body, column 3 */
.tabBody0Col3 {
	font-family: tahoma, verdana, arial;
	font-size: 12px;
	text-align: right;
	width: 60px;
}

Notes:

Terms and Conditions

Regular License

One Regular Tigra Tables PRO script license gives the right to use one copy of the script (files: ttp_files/table.js, ttp_files/table.do.*.js, ttp_files/table.dflt.js) within single domain boundaries.

Demo of Licensing Cases:
First Site URL Second Site URL Number of Licenses Required
http://www.domain.com/site_1/ http://www.domain.com/site_2/ one
http://www.domain1.com/ http://www.domain2.com/ two
http://subdomain1.domain.com/ http://subdomain2.domain.com/ two

Notes:

Developer License

Developer license gives the right to include unlimited number of Tigra Tables PRO instances in the products of license owner. Such kind of license is obtained automatically by those who have 9 or more regular licenses.

Usage

As owner of the Tigra Tables PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:

Technical Support

You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full customization services are provided on customer's request at additional charge.

Violations of Terms and Conditions

Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.

Links and References