User Manual
Samples

Introduction    Configure table look    Table decoration properties

Table general features    Table keys    User types    Data from the DB / CSV / XML / form

Using XML    Table reference    What's new?    Standard vs PRO

123Guide   

Order PRO Now   

CODETHATTABLE USER MANUAL

Configure Table Look

Here we describe GridDef properties that specify table look:

CSS styles

marked rows

table images

Also we show column structure.

var gridDef =
{
	datatype : INT, 		 //  0 - array (default), 1 - csv string,
	// (in develop - 2 -cvs file, 3 - xml file)
	data : ARRAY == [][] || STRING // (*) data for columns
	...

At the data array you put all the data you'd like to show at the table. For example:

data : [
	["1", "Stiles James", "01.01.2002", "jstiles@necasting.com", "270 $"],
	["2", "Alexander Jacklynn", "12.05.2003", "speedracer1979@iwon.com", " $"],
	["3", "Martin Barney", "01.01.2002", "bmartin1@maine.rr.com", "92 $"]
]

Full GridDef structure description you can find here.

Column definitions array structure:

colDef : ARRAY == [
{
	title : STRING, 		// (*) column title
	titleClass : "", 	// (*)
	type : STRING, 		// (*) data type
	width : INT, 		// (*) column width
	alignment : STRING, 	// (*) column alignment
	compareFunction : FUNCTION, // (*) compare function
	isVisible : BOOLEAN, 	 // (*) whether column is visible
	useAutoIndex : BOOLEAN, // (*) auto sort
	useAutoFilter : BOOLEAN // (*) auto filter
} ]

titleClass - CSS class for column header. Default value = "" (default <TH> tag).

Possible values for type - String || Number || Currency || Date || Image || HTML || Email || URL

Default value for width = 0 (auto width for columns)

Possible values for alignment - left || center || right

Possible values for compareFunction - compare || compareImage || userFunc () => {1 || 0 || -1}

For example:

colDef :
[
{
	title : "ID",
	titleClass : "", //default for th
	type : "Number",
	width : 75, //auto
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Name",
	titleClass : "",
	type : "String",
	width : 150, //auto
	alignment : "",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : false,
	useAutoFilter : false
},
{
	title : "Reg. date",
	titleClass : "", //default for th
	type : "Date",
	width : 120, //auto
	alignment : "center",
	compareFunction : compare,
	isVisible : true,
	useAutoIndex : true,
	useAutoFilter : true
} ]

CSS classes for rows visualization

rowStyle :
{
	markClass : "", 	// (*) marked string
	darkClass : "", 	 // (*) dark string
	lightClass : "", 	// (*) light string
	hoverClass : ""	 // (*) active string
}

Here is a structure to describe images for Table:

{
	src : <file name>,
	width : <image width, px>,
	height : <image height, px>
}

To set table images you can use a structure like at the example below:

imgSortAsc : 	 	// sort A-Z
{
	src : "img/sortasc.gif",
	width : 10,
	height : 10
},
imgSortDesc : // sort Z-A
{
	src : "img/sortdesc.gif",
	width : 10,
	height : 10
},
imgSortAscActive : 	// sort A-Z active
{
	src : "img/sortasca.gif",
	width : 10,
	height : 10
},
imgSortDescActive : 	 // sort Z-A active
{
	src : "img/sortdesca.gif",
	width : 10,
	height : 10
},
imgMultiSortAscActive : 	// multi-sort A-Z active
{
	src : "img/sortascma.gif",
	width : 10,
	height : 10
},
imgMultiSortDescActive : 	// multi-sort Z-A active
{
	src : "img/sortdescma.gif",
	width : 10,
	height : 10
},
imgFirstPage : 	 // go to the first page
{
	src : "img/firstpage.gif",
	width : 10,
	height : 10
},
imgLastPage : 	 // go to the last page
{
	src : "img/lastpage.gif",
	width : 10,
	height : 10
},
imgPrevPage : 	 // go to the previous page
{
	src : "img/prevpage.gif",
	width : 10,
	height : 10
},
imgNextPage : 	 // go to the next page
{
	src : "img/nextpage.gif",
	width : 10,
	height : 10
}
}; 

Example - CSS, Marked Rows and Table Images

You can see an example and complete code here - CSS, Marked Rows and Table Images [popup]

Read more about CodeThatTable >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.