If you want to sort data in your data source array, you can simply invoke an Array.prototype.sort() function and call the render() function to refresh the table. You don't need any plugin for this. However, this operation alters the structure of the data source, and in many cases you want to leave the data source intact, while displaying its content in a specified order.Here's where column sorting plugin comes in handy.
Column sorting plugin works as a proxy between the data source and the Handson table rendering module. It can map indices of displayed rows (called logical indices) to the indices of corresponding rows in data source (called physical indices) and vice versa. This way you can alter the order of rows which are being presented to user, without changing the data source internal structure.
A | B | C | D | |
---|---|---|---|---|
1 | 1 | George Washington | Virginia | Independent |
2 | 2 | John Adams | Massachusetts | Federalist |
3 | 3 | Thomas Jefferson | Virginia | Democratic-Republican |
4 | 4 | James Madison | Virginia | Democratic-Republican |
5 | 5 | James Monroe | Virginia | Democratic-Republican |
6 | 6 | John Quincy Adams | Massachusetts | Democratic-Republican/National Republican |
7 | 7 | Andrew Jackson | Tennessee | Democratic |
8 | 8 | Martin Van Buren | New York | Democratic |
9 | 9 | William Henry Harrison | Ohio | Whig |
10 | 10 | John Tyler | Virginia | Whig |
11 | 11 | James K. Polk | Tennessee | Democratic |
12 | 12 | Zachary Taylor | Louisiana | Whig |
13 | 13 | Millard Fillmore | New York | Whig |
14 | 14 | Franklin Pierce | New Hampshire | Democratic |
15 | 15 | James Buchanan | Pennsylvania | Democratic |
16 | 16 | Abraham Lincoln | Illinois | Republican/National Union |
17 | 17 | Andrew Johnson | Tennessee | Democratic/National Union |
18 | 18 | Ulysses S. Grant | Ohio | Republican |
19 | 19 | Rutherford B. Hayes | Ohio | Republican |
20 | 20 | James A. Garfield | Ohio | Republican |
21 | 21 | Chester A. Arthur | New York | Republican |
22 | 22 | Grover Cleveland | New York | Democratic |
23 | 23 | Benjamin Harrison | Indiana | Republican |
24 | 24 | Grover Cleveland (2nd term) | New York | Democratic |
25 | 25 | William McKinley | Ohio | Republican |
26 | 26 | Theodore Roosevelt | New York | Republican |
27 | 27 | William Howard Taft | Ohio | Republican |
28 | 28 | Woodrow Wilson | New Jersey | Democratic |
29 | 29 | Warren G. Harding | Ohio | Republican |
30 | 30 | Calvin Coolidge | Massachusetts | Republican |
31 | 31 | Herbert Hoover | Iowa | Republican |
32 | 32 | Franklin D. Roosevelt | New York | Democratic |
33 | 33 | Harry S. Truman | Missouri | Democratic |
34 | 34 | Dwight D. Eisenhower | Texas | Republican |
35 | 35 | John F. Kennedy | Massachusetts | Democratic |
36 | 36 | Lyndon B. Johnson | Texas | Democratic |
37 | 37 | Richard Nixon | California | Republican |
The search plugin provides an easy interface to search data across Handson table.
You should first enable the plugin by setting the search option to search. When enabled, searchPlugin exposes a new method query(queryStr), where queryStr is a string to find within the table. By default, the search is case insensitive.
query(queryStr, [callback], [queryMethod]) method does 2 things. First of all, it returns an array of search results. Every element is an objects containing 3 properties:
- row – index of the row where the value has been found
- col – index of the column where the value has been found
- data – the value that has been found
The second thing the query does is set the isSearchResult property for each cell. If a cell is in search results, then its isSearchResult is set to true, otherwise the property is set to false.