diff --git a/README.md b/README.md index c90b8ef4..2aa13ab6 100644 --- a/README.md +++ b/README.md @@ -84,3 +84,182 @@ grunt test-only:test.html,test-sort.html ## License MIT +## Documentation + +### Configuration + +#### Filters appearance +
Property | +Type | +Description | +Remarks | +Example | +
---|---|---|---|---|
base_path | +string | +new defines the path to the script's directory (default: 'TableFilter/') | ++ | var tfConfig = { base_path: 'myDir/' } |
+
stylesheet | +string | +new defines the global stylesheet (default: 'filtergrid.css') | ++ | var tfConfig = { stylesheet: 'myDir/myStylesheet.css' } |
+
fixed_headers | +boolean | +enables / disables fixed headers and table body scrolling (default + -false) | +Table needs to have thead and tbody tags
+ defined. Table headers are fixed with a light css solution. It doesn't
+ seem to work on browsers such as Opera and Chrome. In any case, it
+ is not the intent of this script to implement a fully tested solution
+ for generating fixed headers. A simple and easy alternative is to
+ place a table with same number of columns and widths above the data
+ table and use the external_flt_grid property to generate
+ filters in the corresponding columns (external_flt_grid_ids)!
+ Check this example. |
+ var tfConfig = { fixed_headers: true } |
+
tbody_height | +number | +defines the height of the table body when fixed headers are enabled + (default - 200) | ++ | var tfConfig = { fixed_headers: true, tbody_height: 300 } |
+
filters_cell_tag | +string | +specifies the tag of the cell containing a filter ('td' / 'th') | ++ | var tfConfig = { filters_cell_tag: 'th' } |
+
col_width | +array | +this property defines column widths. It accepts an array containing + width values (['150px','10%']) | ++ | var tfConfig = { col_width: ["150px","15%",null,null]
+ } |
+
inf_div_css_class | +string | +defines the css class of div containing paging elements, rows counter + etc. | +This div contains the paging elements, subdivided in 3 divs (left, + middle and right). | + var tfConfig = { inf_div_css_class: "myclass" } |
+
left_div_css_class | +string | +defines the css class of left div | +This div contains the rows counter | + var tfConfig = { left_div_css_class: "myclass" } |
+
right_div_css_class | +string | +defines the css class of right div | +This div contains the Clear button and the results + per page drop-down list if paging is enabled | + var tfConfig = { right_div_css_class: "myclass" } |
+
middle_div_css_class | +string | +defines the css class of middle div | +This div contains the pages drop-down list and paging navigation + buttons | + var tfConfig = { middle_div_css_class: "myclass" } |
+
flts_row_css_class | +string | +defines the css class of filters row | ++ | var tfConfig = { flts_row_css_class: "myclass" } |
+
flt_css_class | +string | +defines the css class of filters (inputs and selects) | ++ | var tfConfig = { flt_css_class: "myclass" } |
+
flt_small_css_class | +string | +defines the css class of smaller filters (if validation button + is generated in the same column of a filter) | ++ | var tfConfig = { flt_small_css_class: "myclass" } |
+
flt_multi_css_class | +string | +defines css class of multiple select filters | ++ | var tfConfig = { flt_multi_css_class: "myclass" } |
+
single_flt_css_class | +string | +defines the css class of the single filter when the single_search_filter property is on | ++ | var tfConfig = { single_flt_css_class: "myclass" } |
+
highlight_css_class | +string | +defines the css class of highlighted keywords | ++ | var tfConfig = { highlight_css_class: "myclass" } |
+
even_row_css_class | +string | +defines the css class for even rows | ++ | var tfConfig = { even_row_css_class: "myclass" } |
+
odd_row_css_class | +string | +defines the css class for odd rows | ++ | var tfConfig = { odd_row_css_class: "myclass" } |
+
input_watermark_css_class | +string | +defines the css class of the watermark in input filters (default - + fltWatermark) | ++ | var tfConfig = { input_watermark_css_class: "myclass" } |
+
active_columns_css_class | +string | +defines the css class of the active column headers (default - + activeHeader) | ++ | var tfConfig = { active_columns_css_class: "myclass" } |
+