In this example, an instance of the Uize.Widget.TableSort widget class is being spawned and attached to a table of data. This use of the Uize.Widget.TableSort class is notable in that the table's markup is rather complex in a number of ways. Firstly, there is a separator table row between each row of data. Secondly, there is a separator row between every three rows of data. When you click the column headings to sort different columns, notice how the separator rows are not included in the sort and do not budge. To add another wrinkle, the fruit names in the first column are buried deep inside nested tables, yet the text is still found and sorting by fruit works as expected. Finally, there is a thead tag that contains the title for the table, and the table's data is contained inside the tbody tag. None of these little kinks throw off the table sorting logic.
| Fruit Nutritional Information (per 8oz serving) |
| Fruit |
Calories |
Total Fat |
Sat. Fat |
Salt |
Total Carbs |
Fiber |
Sugars |
Protein |
Calcium |
Potassium |
|
|
52 kcal |
0.17 g |
0.028 g |
1 mg |
13.81 g |
2.4 g |
10.39 g |
0.26 g |
6 mg |
107 mg |
| |
|
|
160 kcal |
14.66 g |
2.126 g |
7 mg |
8.53 g |
6.7 g |
0.66 g |
2 g |
12 mg |
485 mg |
| |
|
|
89 kcal |
0.33 g |
0.112 g |
1 mg |
22.84 g |
2.6 g |
12.23 g |
1.09 g |
5 mg |
358 mg |
| |
|
|
277 kcal |
0.15 g |
0 g |
1 mg |
74.97 g |
6.7 g |
66.47 g |
1.81 g |
64 mg |
696 mg |
| |
|
|
42 kcal |
0.14 g |
0.021 g |
0 mg |
10.66 g |
1.6 g |
6.89 g |
0.77 g |
22 mg |
135 mg |
| |
|
|
67 kcal |
0.35 g |
0.114 g |
2 mg |
17.15 g |
0.9 g |
16.25 g |
0.63 g |
14 mg |
191 mg |
| |
|
|
65 kcal |
0.27 g |
0.066 g |
2 mg |
17 g |
1.8 g |
14.8 g |
0.51 g |
10 mg |
156 mg |
| |
|
|
49 kcal |
0.15 g |
0.017 g |
1 mg |
12.54 g |
2.2 g |
8.5 g |
0.91 g |
43 mg |
166 mg |
| |
|
|
58 kcal |
0.12 g |
0.006 g |
1 mg |
15.46 g |
3.1 g |
9.8 g |
0.38 g |
9 mg |
119 mg |
| |
|
|
46 kcal |
0.28 g |
0.017 g |
0 mg |
11.42 g |
1.4 g |
9.92 g |
0.7 g |
6 mg |
157 mg |
| |
|
|
52 kcal |
0.65 g |
0.019 g |
1 mg |
11.94 g |
6.5 g |
4.42 g |
1.2 g |
25 mg |
151 mg |
| |
|
|
32 kcal |
0.3 g |
0.015 g |
1 mg |
7.68 g |
2 g |
4.89 g |
0.67 g |
16 mg |
153 mg |
| |
|
|
239 kcal |
0.6 g |
0.272 g |
1 mg |
62.5 g |
5.1 g |
57.4 g |
2.8 g |
74 mg |
628 mg |
| |
|
|
53 kcal |
0.31 g |
0.039 g |
2 mg |
13.34 g |
1.8 g |
10.58 g |
0.81 g |
37 mg |
166 mg |
| |
|
|
30 kcal |
0.15 g |
0.016 g |
1 mg |
7.55 g |
0.4 g |
6.2 g |
0.61 g |
7 mg |
112 mg |
| |