## SortableTable

This class is used to make a HTML Table sortable.

### Syntax

`new SortableTable([oTable [, oSortTypes]])`

### Parameters

Name | Type | Descripton
`oTable` | `HTMLTableElement` | Optional. The table element that should be sortable
`oSortTypes` | `String[]` | Optional. An array containing strings describing the sort types

### Static Methods

Name | Description
getInnerText

#### Syntax

`object.getInnerText(oNode)`

#### Arguments

Name | Type | Descripton
`oNode` | `Node` | The node to get the text for

#### Return Type

`String`

Returns the text inside the node and its subtree
basicCompare

#### Syntax

`object.basicCompare(n1, n2)`

#### Arguments

Name | Type | Descripton
`n1` | `Object` | The first value to compare
`n2` | `Object` | The second value to compare

#### Return Type

`Number`

Takes two values and compares them using < and returns -1 if the first one is smaller, +1 if the second one is smaller or 0 if they are equal.
idFunction

#### Syntax

`object.idFunction(x)`

#### Arguments

Name | Type | Descripton
`x` | `Object` | The value to return

#### Return Type

`Object`

This just returns the first argument
toUpperCase

#### Syntax

`object.toUpperCase(s)`

#### Arguments

Name | Type | Descripton
`s` | `String` | The string to return in upper case

#### Return Type

`String`

Takes a string and returns it in upper case
toDate

#### Syntax

`object.toDate(s)`

#### Arguments

Name | Type | Descripton
`s` | `String` | The ISO date string

#### Return Type

`Date`

Takes an ISO date formatted string and returns a JS date object

### Static Fields

Name | Type | Descripton
`gecko` | `Boolean` | True if the user agent is based on Gecko, the Mozilla rendering engine
`msie` | `Boolean` | True if the user agent is based on Microsoft Internet Explorer
`removeBeforeSort` | `Boolean` | If true then the table is removed while sorting. Some browser are faster when doing it this way.

### Methods

Name | Description
addSortType

#### Syntax

`object.addSortType(sType [, fGetValueFromString [, fCompareFunction [, fGetRowValue]]])`

#### Arguments

Name | Type | Descripton
`sType` | `String` | The type of the data
`fGetValueFromString` | `Function` | Optional. A function that takes a string and casts it to a desired format. If left out the string is just returned as it is
`fCompareFunction` | `Function` | Optional. A normal JS sort compare function. Takes two values and compares them. If left out less than, <, compare is used
`fGetRowValue` | `Function` | Optional. A function that takes the row and the column index and returns the value used to compare. If left out then the innerText is first taken for the cell and then the fGetValueFromString is used to convert that string the desired value and type

#### Return Type

`void`

Adds a sort type to all instance of SortableTable
asyncSort

#### Syntax

`object.asyncSort(nColumn [, bDescending [, sSortType]])`

#### Arguments

Name | Type | Descripton
`nColumn` | `Number` | The column to sort after
`bDescending` | `Boolean` | Optional. Whether to sort the column descending or ascending
`sSortType` | `String` | Optional. The type to sort the column after. If left out the sort type used in the constructor is used

#### Return Type

`void`

Sorts the table asynchronously after the nColumns column. This method allows the current JS thread to finish before the actual sorting begins. This allows the UI to be updated before the sort.
destroy

#### Syntax

`object.destroy()`

#### Arguments

Name | Type | Descripton

#### Return Type

`void`

Destroys the object. This breaks all references between the DOM and the JavaScript object
destroyCache

#### Syntax

`object.destroyCache(oArray)`

#### Arguments

Name | Type | Descripton
`oArray` | `Array` | The data cache array to destroy

#### Return Type

`void`

Destroys the cache data. This breaks all references between the array and the DOM
getCache

#### Syntax

`object.getCache(sType, nColumn)`

#### Arguments

Name | Type | Descripton
`sType` | `String` | The type to use when sorting the column
`nColumn` | `Number` | The column to sort the table after

#### Return Type

`Array`

Returns an array containing the data to sort the table after
getRowValue

#### Syntax

`object.getRowValue(oRow, sType, nColumn)`

#### Arguments

Name | Type | Descripton
`oRow` | `HTMLTableRowElement` | The table row element which value this method should return
`sType` | `String` | The type to use for the nColumn column
`nColumn` | `Number` | The column we want the value for

#### Return Type

`Object`

Returns the value for this row when sorting the table using the sType type and the nColumn column
getSortFunction

#### Syntax

`object.getSortFunction(sType, nColumn)`

#### Arguments

Name | Type | Descripton
`sType` | `String` | The type of the data
`nColumn` | `Number` | The column to sort after

#### Return Type

`Function`

Returns the function used to compare two items in the data cache array
getSortType

#### Syntax

`object.getSortType(nColumn)`

#### Arguments

Name | Type | Descripton
`nColumn` | `Number` | The index of the column to sort

#### Return Type

`String`

Returns a string representing the type to sort the column after
getValueFromString

#### Syntax

`object.getValueFromString(sText, sType)`

#### Arguments

Name | Type | Descripton
`sText` | `String` | The text to cast to the desired data type
`sType` | `String` | The type that the text should be cast to

#### Return Type

`Object`

Casts a string to the data type used for the comparison in the sort method
headerOnclick

#### Syntax

`object.headerOnclick(e)`

#### Arguments

Name | Type | Descripton
`e` | `MouseEvent` | The mouse event object describing the click event

#### Return Type

`void`

Called when the user clicks on a table header cell
initHeader

#### Syntax

`object.initHeader(oSortTypes)`

#### Arguments

Name | Type | Descripton
`oSortTypes` | `String[]` | An array containing strings describing the sort types

#### Return Type

`void`

Initiates the header cells with event listeners and arrow images
removeSortType

#### Syntax

`object.removeSortType(sType)`

#### Arguments

Name | Type | Descripton
`sType` | `String` | The type of the data

#### Return Type

`void`

Removes a sort type from all instance of SortableTable. Be careful not to remove a type that is needed by some instances of SortableTable.
setSortTypes

#### Syntax

`object.setSortTypes(oSortTypes)`

#### Arguments

Name | Type | Descripton
`oSortTypes` | `String[]` | An array containing the sort types

#### Return Type

`void`

Sets the types to use to sort the different columns by.
setTable

#### Syntax

`object.setTable(oTable)`

#### Arguments

Name | Type | Descripton
`oTable` | `HTMLTableElement` | A table element that should become sortable

#### Return Type

`void`

Sets the table element to use for the sortable table. This in turn calls setTHEad and setTBody using the table head of the table and the first table body of the table.
setTBody

#### Syntax

`object.setTBody(oTable)`

#### Arguments

Name | Type | Descripton
`oTable` | `HTMLTBodyElement` | A table body element that should become sortable

#### Return Type

`void`

Sets the table body element to use for the sortable table.
setTHead

#### Syntax

`object.setTHead(oTable)`

#### Arguments

Name | Type | Descripton
`oTable` | `HTMLTHeadElement` | A table head element that should become sortable

#### Return Type

`void`

Sets the table head element to use for the sortable table. This adds click event handlers to the cells for the table header. It also adds sort arrows as needed to these cells.
sort

#### Syntax

`object.sort(nColumn [, bDescending [, sSortType]])`

#### Arguments

Name | Type | Descripton
`nColumn` | `Number` | The column to sort after
`bDescending` | `Boolean` | Optional. Whether to sort the column descending or ascending
`sSortType` | `String` | Optional. The type to sort the column after. If left out the sort type used in the constructor is used

#### Return Type

`void`

Sorts the table after the nColumns column
uninitHeader

#### Syntax

`object.uninitHeader()`

#### Arguments

Name | Type | Descripton

#### Return Type

`void`

Used to clean up the header when the object is destroyed
updateHeaderArrows

#### Syntax

`object.updateHeaderArrows()`

#### Arguments

Name | Type | Descripton

#### Return Type

`void`

Updates the class names for the header arrow images to reflect the current sort state

### Fields

Name | Type | Descripton
`descending` | `Boolean` | Read only. Whether the currently sorted column is sorted descending. Null if no column is sorted.
`document` | `Document` | Read only. The document where the table resides
`element` | `HTMLTableElement` | Read only. The HTML table used with this object
`sortColumn` | `Number` | Read only. The currently sorted column. Null if none.
`tBody` | `HTMLTableBodyElement` | Read only. The table body of the table
`tHead` | `HTMLTableHeadElement` | Read only. The table head of the table

### Events

Name | Descripton
`onbeforesort` | Called before the table is sorted
`onsort` | Called after the table is sorted

### Remarks

None.

Sortable Table
Implementation
API
Demos
Download

Author: Erik Arvidsson