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 >>
|
JavaScript Projects