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 by Using Special Properties of Codethattable

To describe table look use the following properties:

colDef : ARRAY == [
{
	// cols visualization properties
	titleClass : STRING | {
		styleparams
	},
	cellClass : STRING | {
		styleparams
	}
}, ...
],
// rows visualization properties
rowStyle :
{
	markClass : STRING | {
		styleparams
	}, 	 // marked string
	darkClass : STRING | {
		styleparams
	}, 	 // dark string
	lightClass : STRING | {
		styleparams
	}, // light string
	hoverClass : STRING | {
		styleparams
	}
	// active string
},
// visualization properties for table in whole and
// for cells with controls, filters and/or columns
// headers (in case they don't have it's own style)
tableStyle : {
	tableClass : STRING | {
		styleparams
	},
	thClass : STRING | {
		styleparams
	},
	border : INT,
	cellpadding : INT,
	cellspacing : INT
},
...
}; 

Each of these elements can be specified in two ways:

by using string - class name from CSS

by using special structure described below:

{
	// border params
	borderwidth : INT, // make sense only if tableStyle.border > 0
	bordercolor : "#RGB|COLORNAME",
	borderstyle : "none" | "dotted" | "dashed" | "solid"
	| "double" | "groove" | "ridge" | "inset" | "outset",
	// NOT FOR cellClass
	backgroundcolor : "#RGB | COLORNAME",
	backgroundimage : "URL(SRC) ",
	backgroundrepeat : "repeat" | "repeat-x" | "repeat-y" | "no-repeat",
	//color of text (this setting is not useful for set color of a parameters)
	color : "#RGB | COLORNAME",
	// font params
	fontfamily : "FONTNAME",
	fontstyle : "normal" | "italic" | "oblique",
	fontweight : "normal" | "bold" | "bolder" | "lighter"
	| "100" | "200" | "300" | "400" | "500"
	| "600" | "700" | "800" | "900",
	fontsize : "NUMBER + px | pt",
	// text params
	textalign : "left" | "right" | "center" | "justify",
	textdecoration : "none" | "underline" | "overline" | "line-through",
	verticalalign : "bottom" | "top" | "middle"
}

Properties for table controls:

// controls visualization properties
resetSortControl : STRING | {
	img : { }, text : STRING
},
resetSearchControl : STRING | {
	img : { }, text : STRING
},
resetMarkControl : STRING | {
	img : { }, text : STRING
},
amountControl : STRING | {
	img : { }, text : STRING
},
searchControl : STRING | {
	img : { }, text : STRING
}

Each of these elements can be specified in two ways:

string - link for an appropriate control

special structure described below (at least one parameter are required):

{
	// image definition
	img : {
		src : "URL", width : INT, height : INT, alt : "TEXT"
	},
	// text
	text : "TEXT"
}, 

Example - Table decoration properties

You can see an example and complete code here - Table decoration properties [popup]

Read more about CodeThatTable >>

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