Merge pull request #423 from vincent99/master

SortableTable Pagination
2020-03-25 20:13:51 -07:00 · 2020-03-25 20:13:51 -07:00 · 7054082ed3
parent 298f54038c 1e3e1b600f
commit 7054082ed3
23 changed files with 313 additions and 59 deletions
--- a/assets/fonts/icons/demo.html
+++ b/assets/fonts/icons/demo.html
@ -9,7 +9,7 @@
    <link rel="stylesheet" href="style.css"></head>
 <body>
    <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icons <small class="fgc1">(Glyphs:&nbsp;39)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icons <small class="fgc1">(Glyphs:&nbsp;41)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
@ -141,8 +141,8 @@
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
-                <span class="icon icon-chevron-checkmark"></span>
-                <span class="mls"> icon-chevron-checkmark</span>
+                <span class="icon icon-checkmark"></span>
+                <span class="mls"> icon-checkmark</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e91b" class="unit size1of2" />
@ -155,8 +155,8 @@
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
-                <span class="icon icon-chevron-warning"></span>
-                <span class="mls"> icon-chevron-warning</span>
+                <span class="icon icon-warning"></span>
+                <span class="mls"> icon-warning</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e91c" class="unit size1of2" />
@ -195,6 +195,34 @@
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon icon-chevron-beginning"></span>
+                <span class="mls"> icon-chevron-beginning</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e927" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe927;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon icon-chevron-end"></span>
+                <span class="mls"> icon-chevron-end</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e928" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe928;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-false">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon icon-chevron-right"></span>
--- a/assets/fonts/icons/fonts/icons.svg
+++ b/assets/fonts/icons/fonts/icons.svg
@ -54,8 +54,8 @@
 <glyph unicode="&#xe918;" glyph-name="sort-down" data-tags="sort-down" d="M512-89.6c-0.016 0-0.035 0-0.054 0-11.293 0-21.516 4.585-28.907 11.996l-229.817 229.816c-7.412 7.412-11.997 17.652-11.997 28.963 0 22.621 18.338 40.959 40.959 40.959 11.31 0 21.55-4.584 28.962-11.996l200.854-200.852 200.854 200.852c7.412 7.412 17.652 11.996 28.962 11.996 22.621 0 40.959-18.338 40.959-40.959 0-11.311-4.585-21.551-11.997-28.963l-229.816-229.815c-7.392-7.412-17.615-11.997-28.908-11.997-0.019 0-0.038 0-0.057 0h0.003z" />
 <glyph unicode="&#xe919;" glyph-name="sort-up" data-tags="sort-up" d="M741.816 417.865c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-200.854 200.853-200.853-200.852c-7.41-7.401-17.642-11.977-28.944-11.977-22.622 0-40.96 18.338-40.96 40.96 0 11.301 4.577 21.533 11.978 28.944v0l229.816 229.815c7.412 7.412 17.652 11.997 28.963 11.997s21.551-4.585 28.963-11.997l229.816-229.815c7.412-7.412 11.997-17.652 11.997-28.963 0-22.622-18.338-40.96-40.96-40.96v0z" />
 <glyph unicode="&#xe91a;" glyph-name="sort" data-tags="sort" d="M511.991-89.6c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-229.817 229.816c-7.401 7.41-11.977 17.642-11.977 28.944 0 22.622 18.338 40.96 40.96 40.96 11.301 0 21.533-4.577 28.944-11.978v0l200.853-200.852 200.853 200.852c7.41 7.401 17.642 11.977 28.944 11.977 22.622 0 40.96-18.338 40.96-40.96 0-11.301-4.577-21.533-11.978-28.944v0l-229.816-229.815c-7.393-7.412-17.616-11.997-28.91-11.997-0.019 0-0.037 0-0.056 0h0.003zM741.807 417.865c-0.016 0-0.035 0-0.053 0-11.294 0-21.517 4.585-28.909 11.996l-200.854 200.853-200.853-200.852c-7.41-7.401-17.642-11.977-28.944-11.977-22.622 0-40.96 18.338-40.96 40.96 0 11.301 4.577 21.533 11.978 28.944v0l229.816 229.815c7.412 7.412 17.652 11.997 28.963 11.997s21.551-4.585 28.963-11.997l229.816-229.815c7.412-7.412 11.997-17.652 11.997-28.963 0-22.622-18.338-40.96-40.96-40.96v0z" />
-<glyph unicode="&#xe91b;" glyph-name="chevron-checkmark" data-tags="chevron-checkmark" d="M386.094 42.385c-11.31 0-21.55 4.584-28.964 11.996l-217.224 217.224c-7.414 7.412-11.998 17.654-11.998 28.964 0 22.622 18.338 40.962 40.962 40.962 11.31 0 21.55-4.584 28.964-11.998l188.26-188.262 442.944 444.346c7.412 7.412 17.652 11.998 28.962 11.998 22.622 0 40.962-18.338 40.962-40.962 0-11.31-4.586-21.552-11.998-28.964l-471.906-473.308c-7.414-7.412-17.652-11.996-28.964-11.996v0z" />
-<glyph unicode="&#xe91c;" glyph-name="chevron-warning" data-tags="chevron-warning" d="M512 583.546l304.316-527.091h-608.633l304.316 527.091zM512 663.546c-28.581 0-54.991-15.248-69.282-40l-304.316-527.091c-14.29-24.752-14.29-55.248 0-80s40.701-40 69.282-40h608.633c28.581 0 54.991 15.248 69.282 40s14.29 55.248 0 80l-304.316 527.091c-14.291 24.752-40.701 40-69.282 40v0zM512 208.049c-22.092 0-40 17.908-40 40v175.667c0 22.092 17.908 40 40 40s40-17.908 40-40v-175.667c0-22.092-17.908-40-40-40zM512 96.281c-1.301 0-2.62 0.080-3.94 0.199-1.28 0.141-2.6 0.32-3.88 0.58-1.26 0.26-2.54 0.58-3.8 0.959-1.24 0.381-2.48 0.842-3.681 1.342-1.199 0.479-2.399 1.039-3.54 1.658-1.159 0.621-2.279 1.281-3.359 2-1.101 0.74-2.16 1.521-3.16 2.342-1.020 0.818-2 1.719-2.92 2.639s-1.82 1.9-2.64 2.92c-0.82 1-1.62 2.080-2.341 3.16s-1.399 2.221-2 3.359c-0.619 1.16-1.18 2.342-1.68 3.541s-0.939 2.439-1.32 3.699c-0.38 1.24-0.699 2.521-0.96 3.781-0.26 1.299-0.46 2.6-0.58 3.9-0.14 1.299-0.199 2.619-0.199 3.92 0 1.299 0.060 2.639 0.199 3.939 0.12 1.299 0.32 2.6 0.58 3.879 0.261 1.281 0.58 2.561 0.96 3.801s0.82 2.48 1.32 3.68c0.5 1.201 1.061 2.4 1.68 3.541 0.601 1.16 1.28 2.279 2 3.359 0.721 1.1 1.521 2.16 2.341 3.16 0.819 1.020 1.72 2 2.64 2.92 0.92 0.939 1.9 1.82 2.92 2.66 1 0.82 2.060 1.6 3.16 2.32 1.080 0.719 2.2 1.398 3.359 2 1.141 0.619 2.341 1.18 3.54 1.68s2.44 0.939 3.681 1.32c1.26 0.379 2.52 0.699 3.8 0.959s2.6 0.461 3.88 0.58c2.62 0.26 5.26 0.26 7.88 0 1.279-0.119 2.6-0.32 3.881-0.58 1.279-0.26 2.539-0.58 3.799-0.959 1.24-0.381 2.48-0.82 3.68-1.32 1.201-0.5 2.4-1.061 3.541-1.68 1.16-0.602 2.279-1.281 3.359-2 1.1-0.721 2.16-1.5 3.16-2.32 1.020-0.84 2-1.721 2.92-2.66 0.92-0.92 1.82-1.9 2.641-2.92 0.82-1 1.619-2.061 2.34-3.16 0.721-1.080 1.4-2.199 2-3.359 0.619-1.141 1.18-2.34 1.68-3.541 0.5-1.199 0.939-2.439 1.32-3.68 0.379-1.24 0.699-2.52 0.959-3.801 0.262-1.279 0.461-2.58 0.58-3.879 0.141-1.301 0.201-2.641 0.201-3.939 0-1.301-0.061-2.621-0.201-3.92-0.119-1.301-0.318-2.602-0.58-3.9-0.26-1.26-0.58-2.541-0.959-3.781-0.381-1.26-0.82-2.5-1.32-3.699s-1.061-2.381-1.68-3.541c-0.6-1.139-1.279-2.279-2-3.359s-1.52-2.16-2.34-3.16c-0.82-1.020-1.721-2-2.641-2.92s-1.9-1.82-2.92-2.639c-1-0.82-2.061-1.602-3.16-2.342-1.080-0.719-2.219-1.379-3.359-2-1.141-0.619-2.34-1.18-3.541-1.658-1.199-0.5-2.439-0.961-3.68-1.342-1.26-0.379-2.539-0.699-3.799-0.959-1.281-0.26-2.602-0.439-3.881-0.58-1.32-0.119-2.64-0.199-3.939-0.199z" />
+<glyph unicode="&#xe91b;" glyph-name="checkmark" data-tags="checkmark" d="M386.094 42.385c-11.31 0-21.55 4.584-28.964 11.996l-217.224 217.224c-7.414 7.412-11.998 17.654-11.998 28.964 0 22.622 18.338 40.962 40.962 40.962 11.31 0 21.55-4.584 28.964-11.998l188.26-188.262 442.944 444.346c7.412 7.412 17.652 11.998 28.962 11.998 22.622 0 40.962-18.338 40.962-40.962 0-11.31-4.586-21.552-11.998-28.964l-471.906-473.308c-7.414-7.412-17.652-11.996-28.964-11.996v0z" />
+<glyph unicode="&#xe91c;" glyph-name="warning" data-tags="warning" d="M512 583.546l304.316-527.091h-608.633l304.316 527.091zM512 663.546c-28.581 0-54.991-15.248-69.282-40l-304.316-527.091c-14.29-24.752-14.29-55.248 0-80s40.701-40 69.282-40h608.633c28.581 0 54.991 15.248 69.282 40s14.29 55.248 0 80l-304.316 527.091c-14.291 24.752-40.701 40-69.282 40v0zM512 208.049c-22.092 0-40 17.908-40 40v175.667c0 22.092 17.908 40 40 40s40-17.908 40-40v-175.667c0-22.092-17.908-40-40-40zM512 96.281c-1.301 0-2.62 0.080-3.94 0.199-1.28 0.141-2.6 0.32-3.88 0.58-1.26 0.26-2.54 0.58-3.8 0.959-1.24 0.381-2.48 0.842-3.681 1.342-1.199 0.479-2.399 1.039-3.54 1.658-1.159 0.621-2.279 1.281-3.359 2-1.101 0.74-2.16 1.521-3.16 2.342-1.020 0.818-2 1.719-2.92 2.639s-1.82 1.9-2.64 2.92c-0.82 1-1.62 2.080-2.341 3.16s-1.399 2.221-2 3.359c-0.619 1.16-1.18 2.342-1.68 3.541s-0.939 2.439-1.32 3.699c-0.38 1.24-0.699 2.521-0.96 3.781-0.26 1.299-0.46 2.6-0.58 3.9-0.14 1.299-0.199 2.619-0.199 3.92 0 1.299 0.060 2.639 0.199 3.939 0.12 1.299 0.32 2.6 0.58 3.879 0.261 1.281 0.58 2.561 0.96 3.801s0.82 2.48 1.32 3.68c0.5 1.201 1.061 2.4 1.68 3.541 0.601 1.16 1.28 2.279 2 3.359 0.721 1.1 1.521 2.16 2.341 3.16 0.819 1.020 1.72 2 2.64 2.92 0.92 0.939 1.9 1.82 2.92 2.66 1 0.82 2.060 1.6 3.16 2.32 1.080 0.719 2.2 1.398 3.359 2 1.141 0.619 2.341 1.18 3.54 1.68s2.44 0.939 3.681 1.32c1.26 0.379 2.52 0.699 3.8 0.959s2.6 0.461 3.88 0.58c2.62 0.26 5.26 0.26 7.88 0 1.279-0.119 2.6-0.32 3.881-0.58 1.279-0.26 2.539-0.58 3.799-0.959 1.24-0.381 2.48-0.82 3.68-1.32 1.201-0.5 2.4-1.061 3.541-1.68 1.16-0.602 2.279-1.281 3.359-2 1.1-0.721 2.16-1.5 3.16-2.32 1.020-0.84 2-1.721 2.92-2.66 0.92-0.92 1.82-1.9 2.641-2.92 0.82-1 1.619-2.061 2.34-3.16 0.721-1.080 1.4-2.199 2-3.359 0.619-1.141 1.18-2.34 1.68-3.541 0.5-1.199 0.939-2.439 1.32-3.68 0.379-1.24 0.699-2.52 0.959-3.801 0.262-1.279 0.461-2.58 0.58-3.879 0.141-1.301 0.201-2.641 0.201-3.939 0-1.301-0.061-2.621-0.201-3.92-0.119-1.301-0.318-2.602-0.58-3.9-0.26-1.26-0.58-2.541-0.959-3.781-0.381-1.26-0.82-2.5-1.32-3.699s-1.061-2.381-1.68-3.541c-0.6-1.139-1.279-2.279-2-3.359s-1.52-2.16-2.34-3.16c-0.82-1.020-1.721-2-2.641-2.92s-1.9-1.82-2.92-2.639c-1-0.82-2.061-1.602-3.16-2.342-1.080-0.719-2.219-1.379-3.359-2-1.141-0.619-2.34-1.18-3.541-1.658-1.199-0.5-2.439-0.961-3.68-1.342-1.26-0.379-2.539-0.699-3.799-0.959-1.281-0.26-2.602-0.439-3.881-0.58-1.32-0.119-2.64-0.199-3.939-0.199z" />
 <glyph unicode="&#xe91d;" glyph-name="minus" data-tags="minus" d="M778.24 279.039h-532.48c-22.622 0-40.96 18.338-40.96 40.96s18.338 40.96 40.96 40.96v0h532.48c22.622 0 40.96-18.338 40.96-40.96s-18.338-40.96-40.96-40.96v0z" />
 <glyph unicode="&#xe91e;" glyph-name="plus" data-tags="plus" d="M778.24 360.959h-225.28v225.28c0 22.622-18.338 40.96-40.96 40.96s-40.96-18.338-40.96-40.96v0-225.28h-225.28c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96v0h225.28v-225.28c0-22.622 18.338-40.96 40.96-40.96s40.96 18.338 40.96 40.96v0 225.28h225.28c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96v0z" />
 <glyph unicode="&#xe91f;" glyph-name="circle-plus" data-tags="circle-plus" d="M512 729.6c-226.216 0-409.6-183.384-409.6-409.6s183.384-409.6 409.6-409.6 409.6 183.384 409.6 409.6c0 226.216-183.384 409.6-409.6 409.6zM675.84 279.039h-122.88v-122.88c0-22.622-18.338-40.96-40.96-40.96s-40.96 18.338-40.96 40.96v0 122.88h-122.88c-22.622 0-40.96 18.338-40.96 40.96s18.338 40.96 40.96 40.96v0h122.88v122.88c0 22.622 18.338 40.96 40.96 40.96s40.96-18.338 40.96-40.96v0-122.88h122.88c22.622 0 40.96-18.338 40.96-40.96s-18.338-40.96-40.96-40.96v0z" />
@ -66,4 +66,6 @@
 <glyph unicode="&#xe924;" glyph-name="globe" data-tags="globe" d="M921.6 320c0 216.933-168.651 394.448-381.987 408.653v0.947h-27.575c-0.013 0-0.026 0-0.039 0v0c-0.010 0-0.019 0-0.029 0h-32.359v-1.271c-211.074-16.512-377.212-193.014-377.212-408.328s166.138-391.816 377.212-408.328v-1.271h32.359c0.010 0 0.019 0 0.029 0s0.019 0 0.029 0h27.584v0.947c213.336 14.205 381.987 191.719 381.987 408.653zM539.613 186.16v103.84h157.019c-1.616-25.521-5.669-62.805-15.638-103.84h-141.381zM479.612 453.839v-103.839h-157.018c1.616 25.521 5.669 62.805 15.637 103.839h141.381zM817.739 350h-61.015c-1.473 25.423-5.158 62.474-14.166 103.839h46.023c15.475-31.92 25.579-66.923 29.158-103.839zM696.586 350h-156.973v103.839h141.477c9.85-40.898 13.871-78.579 15.495-103.839zM262.503 350h-56.242c3.578 36.916 13.683 71.919 29.158 103.839h41.249c-9.007-41.365-12.692-78.416-14.166-103.839zM206.261 290h56.242c1.473-25.424 5.158-62.475 14.166-103.84h-41.249c-15.475 31.92-25.58 66.924-29.158 103.84zM322.641 290h156.972v-103.84h-141.476c-9.85 40.898-13.872 78.58-15.496 103.84zM756.724 290h61.015c-3.578-36.916-13.683-71.919-29.158-103.84h-46.023c9.007 41.365 12.692 78.416 14.166 103.84zM750.314 513.839h-24.164c-4.736 14.161-9.943 27.684-15.613 40.566 14.471-12.269 27.792-25.849 39.777-40.566zM601.080 614.065c27.628-28.48 47.35-63.898 61.442-100.226h-122.909v112.112c21.181-1.887 41.742-5.919 61.467-11.886zM479.612 513.839h-122.785c15.407 39.808 35.235 72.611 59.292 98.080 20.314 6.668 41.557 11.285 63.492 13.583v-111.663zM305.811 547.719c-4.565-10.855-8.811-22.149-12.734-33.88h-19.391c9.844 12.088 20.58 23.421 32.125 33.88zM273.687 126.16h19.39c3.923-11.731 8.169-23.025 12.734-33.879-11.544 10.459-22.28 21.791-32.124 33.879zM416.129 28.078c-26.565 28.106-45.68 62.654-59.424 98.082h122.907v-111.662c-21.932 2.298-43.172 6.914-63.483 13.58zM539.613 126.16h122.784c-15.84-40.928-36.346-74.467-61.325-100.227-19.722-5.966-40.281-9.997-61.459-11.884v112.111zM710.537 85.595c5.67 12.882 10.877 26.405 15.613 40.565h24.164c-11.984-14.716-25.305-28.296-39.776-40.565z" />
 <glyph unicode="&#xe925;" glyph-name="star-open" data-tags="star-open" d="M900.777 426.105l-255.8 37.17-114.397 231.794c-10.261 20.792-26.899 20.792-37.16 0l-114.397-231.794-255.8-37.17c-22.945-3.334-28.087-19.157-11.483-35.341l185.098-180.426-43.696-254.766c-3.92-22.853 9.54-32.632 30.063-21.842l228.794 120.284 228.794-120.284c20.523-10.79 33.983-1.010 30.063 21.842l-43.696 254.766 185.098 180.426c16.604 16.184 11.462 32.007-11.483 35.341zM756.084 350.248l-114.881-111.981 27.121-158.122c1.867-10.887-4.545-15.545-14.322-10.405l-142.002 74.656-142.002-74.656c-9.777-5.14-16.189-0.482-14.322 10.405l27.121 158.122-114.882 111.981c-7.91 7.71-5.461 15.248 5.47 16.836l158.762 23.069 71.001 143.862c4.889 9.905 12.814 9.905 17.703 0l71-143.862 158.763-23.069c10.931-1.588 13.38-9.126 5.47-16.836z" />
 <glyph unicode="&#xe926;" glyph-name="star" data-tags="star" d="M900.777 426.105l-255.8 37.17-114.397 231.794c-10.261 20.792-26.899 20.792-37.16 0l-114.397-231.794-255.8-37.17c-22.945-3.334-28.087-19.157-11.483-35.341l185.098-180.426-43.696-254.766c-3.92-22.853 9.54-32.632 30.063-21.842l228.794 120.284 228.794-120.284c20.523-10.79 33.983-1.010 30.063 21.842l-43.696 254.766 185.098 180.426c16.604 16.184 11.462 32.007-11.483 35.341z" />
+<glyph unicode="&#xe927;" glyph-name="chevron-beginning" data-tags="chevron-beginning" d="M732.229 131.74l-188.262 188.26 188.262 188.26c7.41 7.414 11.996 17.654 11.996 28.964 0 22.624-18.34 40.962-40.962 40.962-11.31 0-21.55-4.584-28.964-11.998l-217.224-217.224c-7.414-7.414-11.998-17.654-11.998-28.964s4.586-21.55 11.998-28.964l217.224-217.226c7.394-7.41 17.62-11.996 28.914-11.996 0.018 0 0.038 0 0.052 0v0.002c0.002 0 0.002 0 0.002 0 22.622 0 40.96 18.338 40.96 40.96 0 11.31-4.584 21.552-11.998 28.964zM320.733 576.2c-22.622 0-40.96-18.338-40.96-40.96v-430.48c0-22.622 18.338-40.96 40.96-40.96s40.96 18.338 40.96 40.96v430.48c0 22.622-18.338 40.96-40.96 40.96z" />
+<glyph unicode="&#xe928;" glyph-name="chevron-end" data-tags="chevron-end" d="M291.771 508.26l188.262-188.26-188.262-188.26c-7.41-7.414-11.996-17.654-11.996-28.964 0-22.624 18.34-40.962 40.962-40.962 11.31 0 21.55 4.584 28.964 11.998l217.224 217.224c7.414 7.414 11.998 17.654 11.998 28.964s-4.586 21.55-11.998 28.964l-217.224 217.226c-7.394 7.41-17.62 11.996-28.914 11.996-0.018 0-0.038 0-0.052 0v-0.002c-0.002 0-0.002 0-0.002 0-22.622 0-40.96-18.338-40.96-40.96 0-11.31 4.584-21.552 11.998-28.964zM703.267 63.8c22.622 0 40.96 18.338 40.96 40.96v430.48c0 22.622-18.338 40.96-40.96 40.96s-40.96-18.338-40.96-40.96v-430.48c0-22.622 18.338-40.96 40.96-40.96z" />
 </font></defs></svg>
--- a/assets/fonts/icons/fonts/icons.ttf
+++ b/assets/fonts/icons/fonts/icons.ttf
--- a/assets/fonts/icons/fonts/icons.woff
+++ b/assets/fonts/icons/fonts/icons.woff
--- a/assets/fonts/icons/selection.json
+++ b/assets/fonts/icons/selection.json
--- a/assets/fonts/icons/style.css
+++ b/assets/fonts/icons/style.css
@ -1,9 +1,9 @@
@font-face {
  font-family: 'icons';
  src:
-    url('fonts/icons.ttf?rocpjg') format('truetype'),
-    url('fonts/icons.woff?rocpjg') format('woff'),
-    url('fonts/icons.svg?rocpjg#icons') format('svg');
+    url('fonts/icons.ttf?14h12e') format('truetype'),
+    url('fonts/icons.woff?14h12e') format('woff'),
+    url('fonts/icons.svg?14h12e#icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@ -51,10 +51,10 @@
 .icon-x:before {
  content: "\e904";
 }
-.icon-chevron-checkmark:before {
+.icon-checkmark:before {
  content: "\e91b";
 }
-.icon-chevron-warning:before {
+.icon-warning:before {
  content: "\e91c";
 }
 .icon-info:before {
@ -63,6 +63,12 @@
 .icon-error:before {
  content: "\e914";
 }
+.icon-chevron-beginning:before {
+  content: "\e927";
+}
+.icon-chevron-end:before {
+  content: "\e928";
+}
 .icon-chevron-right:before {
  content: "\e906";
 }
--- a/assets/fonts/icons/style.scss
+++ b/assets/fonts/icons/style.scss
@ -3,9 +3,9 @@
@font-face {
  font-family: '#{$icomoon-font-family}';
  src:
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?rocpjg') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?rocpjg') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?rocpjg##{$icomoon-font-family}') format('svg');
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?14h12e') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?14h12e') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?14h12e##{$icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@ -71,14 +71,14 @@
    content: $icon-x; 
  }
 }
-.icon-chevron-checkmark {
+.icon-checkmark {
  &:before {
-    content: $icon-chevron-checkmark; 
+    content: $icon-checkmark; 
  }
 }
-.icon-chevron-warning {
+.icon-warning {
  &:before {
-    content: $icon-chevron-warning; 
+    content: $icon-warning; 
  }
 }
 .icon-info {
@ -91,6 +91,16 @@
    content: $icon-error; 
  }
 }
+.icon-chevron-beginning {
+  &:before {
+    content: $icon-chevron-beginning; 
+  }
+}
+.icon-chevron-end {
+  &:before {
+    content: $icon-chevron-end; 
+  }
+}
 .icon-chevron-right {
  &:before {
    content: $icon-chevron-right; 
--- a/assets/fonts/icons/variables.scss
+++ b/assets/fonts/icons/variables.scss
@ -10,10 +10,12 @@ $icon-list-flat: "\e902";
 $icon-list-grouped: "\e903";
 $icon-close: "\e904";
 $icon-x: "\e904";
-$icon-chevron-checkmark: "\e91b";
-$icon-chevron-warning: "\e91c";
+$icon-checkmark: "\e91b";
+$icon-warning: "\e91c";
 $icon-info: "\e905";
 $icon-error: "\e914";
+$icon-chevron-beginning: "\e927";
+$icon-chevron-end: "\e928";
 $icon-chevron-right: "\e906";
 $icon-chevron-left: "\e907";
 $icon-chevron-down: "\e908";
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@ -40,3 +40,21 @@ infoBoxCluster:
  reserved: "{numerator} of {denominator} Reserved"
  used: "{numerator} of {denominator} Used"
  version: Kubernetes Version
+
+sortableTable:
+  paging:
+    generic: |
+      {pages, plural,
+      =0 {No Items}
+      =1 {{count} {count, plural, =1 {Item} other {Items}}}
+      other {{from} - {to} of {count} Items}}
+    resource: |
+      {pages, plural,
+      =0 {No {pluralLabel}}
+      =1 {{count} {count, plural, =1 {{singularLabel}} other {{pluralLabel}}}}
+      other {{from} - {to} of {count} {pluralLabel}}}
+    workload: |
+      {pages, plural,
+      =0 {No Workloads}
+      =1 {{count} {count, plural, =1 {Workload} other {Workloads}}}
+      other {{from} - {to} of {count} Workloads}}
--- a/components/ResourceTable.vue
+++ b/components/ResourceTable.vue
@ -127,6 +127,13 @@ export default {
        { value: 'namespace', icon: 'icon-list-grouped' }
      ];
    },
+
+    pagingParams() {
+      return {
+        singularLabel: this.$store.getters['type-map/singularLabelFor'](this.schema),
+        pluralLabel:   this.$store.getters['type-map/pluralLabelFor'](this.schema),
+      };
+    },
  },

  methods: {
@ -145,6 +152,9 @@ export default {
      :rows="filteredRows"
      :group-by="groupBy"
      :search="search"
+      :paging="true"
+      :paging-params="pagingParams"
+      paging-label="sortableTable.paging.resource"
      :table-actions="tableActions"
      key-field="_key"
      v-on="$listeners"
--- a/components/SortableTable/index.vue
+++ b/components/SortableTable/index.vue
@ -13,7 +13,6 @@ import { get } from '@/utils/object';
 import { dasherize } from '@/utils/string';

 // @TODO:
-// Paging
 // Fixed header/scrolling

 // Data Flow:
@ -152,8 +151,28 @@ export default {
    emphasizedBody: {
      type:    Boolean,
      default: true
-    }
+    },

+    paging: {
+      type:    Boolean,
+      default: false,
+    },
+
+    /**
+     * What translation key to use for displaying the '1 - 10 of 100 Things' pagination info
+     */
+    pagingLabel: {
+      type:    String,
+      default: 'sortableTable.paging.generic'
+    },
+
+    /**
+     * Additional params to pass to the pagingLabel translation
+     */
+    pagingParams: {
+      type:    Object,
+      default: null,
+    }
  },

  data() {
@ -237,7 +256,9 @@ export default {

    classObject() {
      return {
-        'top-divider':     this.topDivider, 'emphasized-body': this.emphasizedBody, 'body-dividers':   this.bodyDividers
+        'top-divider':     this.topDivider,
+        'emphasized-body': this.emphasizedBody,
+        'body-dividers':   this.bodyDividers
      };
    }
  },
@ -408,6 +429,43 @@ export default {
        </template>
      </tbody>
    </table>
+    <div v-if="showPaging" class="paging">
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        :disabled="page == 1"
+        @click="goToPage('first')"
+      >
+        <i class="icon icon-chevron-beginning" />
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        :disabled="page == 1"
+        @click="goToPage('prev')"
+      >
+        <i class="icon icon-chevron-left" />
+      </button>
+      <span>
+        {{ pagingDisplay }}
+      </span>
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        :disabled="page == totalPages"
+        @click="goToPage('next')"
+      >
+        <i class="icon icon-chevron-right" />
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        :disabled="page == totalPages"
+        @click="goToPage('last')"
+      >
+        <i class="icon icon-chevron-end" />
+      </button>
+    </div>
  </div>
 </template>

@ -672,4 +730,14 @@ $divider-height: 1px;
    white-space: nowrap;
  }
 }
+
+.paging {
+  margin-top: 10px;
+  text-align: center;
+
+  SPAN {
+    display: inline-block;
+    min-width: 200px;
+  }
+}
 </style>
--- a/components/SortableTable/paging.js
+++ b/components/SortableTable/paging.js
@ -1,11 +1,65 @@
+import { mapPref, ROWS_PER_PAGE } from '@/store/prefs';
+
 export default {
  computed: {
+    perPage: mapPref(ROWS_PER_PAGE),
+
+    indexFrom() {
+      return Math.max(0, 1 + this.perPage * (this.page - 1));
+    },
+
+    indexTo() {
+      return Math.min(this.arrangedRows.length, this.indexFrom + this.perPage - 1);
+    },
+
+    totalPages() {
+      return Math.ceil(this.arrangedRows.length / this.perPage );
+    },
+
+    showPaging() {
+      return this.paging && this.totalPages > 1;
+    },
+
+    pagingDisplay() {
+      const opt = {
+        ...(this.pagingParams || {}),
+
+        count: this.arrangedRows.length,
+        pages: this.totalPages,
+        from:  this.indexFrom,
+        to:    this.indexTo,
+      };
+
+      return this.$store.getters['i18n/t'](this.pagingLabel, opt);
+    },
+
    pagedRows() {
-      return this.arrangedRows;
+      if ( this.paging ) {
+        return this.arrangedRows.slice(this.indexFrom, this.indexTo);
+      } else {
+        return this.arrangedRows;
+      }
    }
  },

-  data: () => ({ currentPage: 1 }),
+  data: () => ({ page: 1 }),

-  methods: {}
+  methods: {
+    goToPage(which) {
+      switch (which) {
+      case 'first':
+        this.page = 1;
+        break;
+      case 'prev':
+        this.page = Math.max(1, this.page - 1 );
+        break;
+      case 'next':
+        this.page = Math.min(this.totalPages, this.page + 1 );
+        break;
+      case 'last':
+        this.page = this.totalPages;
+        break;
+      }
+    }
+  }
 };
--- a/components/SortableTable/selection.js
+++ b/components/SortableTable/selection.js
@ -61,6 +61,28 @@ export default {

  data: () => ({ prevNode: null, storeName: randomStr() }),

+  watch: {
+    pagedRows() {
+      // When the table contents changes:
+      // - Remove orphaned items that are in the selection but no longer in the table.
+      // - Add items that are selected but weren't shown before
+
+      const content = this.pagedRows;
+      const toAdd = [];
+      const toRemove = [];
+
+      for ( const node of this.selectedNodes ) {
+        if ( content.includes(node) ) {
+          toAdd.push(node);
+        } else {
+          toRemove.push(node);
+        }
+      }
+
+      this.update(toAdd, toRemove);
+    }
+  },
+
  methods: {
    onToggleAll(value) {
      if ( value ) {
--- a/components/form/Checkbox.vue
+++ b/components/form/Checkbox.vue
@ -1,4 +1,6 @@
 <script>
+import $ from 'jquery';
+
 export default {
  props: {
    value: {
@ -24,9 +26,17 @@ export default {
    }
  },
  methods: {
-    clicked() {
+    clicked(event) {
      if (!this.isDisabled) {
-        this.$el.click();
+        const click = $.Event('click');
+
+        click.shiftKey = event.shiftKey;
+        click.altKey = event.altKey;
+        click.ctrlKey = event.ctrlKey;
+        click.metaKey = event.metaKey;
+
+        $(this.$el).trigger(click);
+
        this.$emit('input', !this.value);
      }
    }
@ -53,14 +63,14 @@ export default {
        :aria-label="label"
        :aria-checked="!!value"
        role="checkbox"
-        @keyup.16="clicked"
-        @click.stop="clicked"
+        @keyup.16="clicked($event)"
+        @click.stop="clicked($event)"
      ></span>
    </label>
    <span
      v-if="label"
      class="checkbox-label"
-      @click.stop="clicked"
+      @click.stop="clicked($event)"
    >
      <slot name="label">  {{ label }}</slot>
    </span>
--- a/components/formatter/IconIsDefault.vue
+++ b/components/formatter/IconIsDefault.vue
@ -23,7 +23,7 @@ export default {
 <template>
  <span v-if="row[col.value]">
    <span>
-      <i class="icon icon-2x icon-chevron-checkmark" />
+      <i class="icon icon-2x icon-checkmark" />
    </span>
  </span>
  <span v-else>
--- a/config/type-config.js
+++ b/config/type-config.js
@ -87,13 +87,14 @@ export default function(store) {
  headers(SECRET, [
    STATE,
    NAMESPACE_NAME,
-    KEYS,
    {
      name:  'type',
      label: 'Type',
      value: 'typeDisplay',
      sort:  ['typeDisplay', 'nameSort'],
+      width: 100,
    },
+    KEYS,
    AGE
  ]);
  headers(INGRESS, [STATE, NAME, INGRESS_TARGET, AGE]);
--- a/config/types.js
+++ b/config/types.js
@ -26,10 +26,10 @@ export const NORMAN = {

 // Rancher Management API via Steve, /v1
 export const MANAGEMENT = {
-  CATALOG:          'management.cattle.io.catalog',
+  // CATALOG:          'management.cattle.io.catalog',
  CATALOG_TEMPLATE: 'management.cattle.io.catalogtemplate',
  CLUSTER:          'management.cattle.io.cluster',
-  USER:             'management.cattle.io.user',
+  // USER:             'management.cattle.io.user',
  PREFERENCE:       'userpreference'
 };

--- a/detail/rbac.authorization.k8s.io.clusterrole.vue
+++ b/detail/rbac.authorization.k8s.io.clusterrole.vue
@ -80,7 +80,7 @@ t>
        <span>
          <span v-if="true">
            <span>
-              <i class="icon icon-lg icon-chevron-checkmark" />
+              <i class="icon icon-lg icon-checkmark" />
            </span>
          </span>
          <span v-else>
@ -94,7 +94,7 @@ t>
        <span>
          <span v-if="true">
            <span>
-              <i class="icon icon-lg icon-chevron-checkmark" />
+              <i class="icon icon-lg icon-checkmark" />
            </span>
          </span>
          <span v-else>
--- a/detail/rbac.authorization.k8s.io.role.vue
+++ b/detail/rbac.authorization.k8s.io.role.vue
@ -79,7 +79,7 @@ export default {
        <span>
          <span v-if="true">
            <span>
-              <i class="icon icon-lg icon-chevron-checkmark" />
+              <i class="icon icon-lg icon-checkmark" />
            </span>
          </span>
          <span v-else>
@ -93,7 +93,7 @@ export default {
        <span>
          <span v-if="true">
            <span>
-              <i class="icon icon-lg icon-chevron-checkmark" />
+              <i class="icon icon-lg icon-checkmark" />
            </span>
          </span>
          <span v-else>
--- a/pages/c/_cluster/workloads/index.vue
+++ b/pages/c/_cluster/workloads/index.vue
@ -78,6 +78,12 @@ export default {
        </nuxt-link>
      </div>
    </header>
-    <SortableTable :rows="filteredRows" :headers="headers" key-field="id" />
+    <SortableTable
+      :rows="filteredRows"
+      :headers="headers"
+      key-field="id"
+      :paging="true"
+      paging-label="sortableTable.paging.workload"
+    />
  </div>
 </template>
--- a/pages/prefs.vue
+++ b/pages/prefs.vue
@ -2,7 +2,7 @@
 import day from 'dayjs';
 import ButtonGroup from '@/components/ButtonGroup';
 import {
-  mapPref, THEME, KEYMAP, DEV, DATE_FORMAT, TIME_FORMAT
+  mapPref, THEME, KEYMAP, DEV, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE
 } from '@/store/prefs';
 import { ucFirst } from '@/utils/string';
 import LabeledSelect from '@/components/form/LabeledSelect';
@ -21,6 +21,7 @@ export default {
    dev:        mapPref(DEV),
    dateFormat: mapPref(DATE_FORMAT),
    timeFormat: mapPref(TIME_FORMAT),
+    perPage:    mapPref(ROWS_PER_PAGE),

    themeOptions() {
      return this.$store.getters['prefs/options'](THEME).map((value) => {
@ -60,7 +61,11 @@ export default {
          value
        };
      });
-    }
+    },
+
+    perPageOptions() {
+      return this.$store.getters['prefs/options'](ROWS_PER_PAGE);
+    },
  },
 };
 </script>
@ -72,12 +77,12 @@ export default {
    <h6>Theme</h6>
    <ButtonGroup v-model="theme" :options="themeOptions" />

-    <h6>Date &amp; Time Format</h6>
+    <h6>Formatting</h6>
    <div class="row">
      <div class="col span-3">
        <LabeledSelect
          v-model="dateFormat"
-          label="Date"
+          label="Date Format"
          :options="dateOptions"
          placeholder="Select a date format"
        />
@ -85,18 +90,29 @@ export default {
      <div class="col span-3">
        <LabeledSelect
          v-model="timeFormat"
-          label="Time"
+          label="Time Format"
          :options="timeOptions"
          placeholder="Select a time format"
        />
      </div>
    </div>

-    <h6>YAML Editor Mode</h6>
+    <div class="row">
+      <div class="col span-3">
+        <LabeledSelect
+          v-model="perPage"
+          label="Table Rows per Page"
+          :options="perPageOptions"
+          placeholder="Select a row count"
+        />
+      </div>
+    </div>
+
+    <h6>YAML Editor Key Bindings</h6>
    <ButtonGroup v-model="keymap" :options="keymapOptions" />

    <h6>Advanced</h6>
-    <label><input v-model="dev" type="checkbox"> Developer Tools</label>
+    <label><input v-model="dev" type="checkbox"> Enable Developer Tools</label>
  </div>
 </template>

--- a/store/index.js
+++ b/store/index.js
@ -315,19 +315,20 @@ export const actions = {
      throw new ClusterNotFoundError(id);
    }

-    // Update the Steve client URL
+    // Update the Steve client URLs
    commit('cluster/applyConfig', { baseUrl: clusterBase });
-    await dispatch('cluster/loadSchemas', true);
-    dispatch('cluster/subscribe');
+    isRancher && commit('clusterExternal/applyConfig', { baseUrl: externalBase });

-    if ( isRancher ) {
-      commit('clusterExternal/applyConfig', { baseUrl: externalBase });
-      dispatch('clusterExternal/subscribe');
-      await dispatch('clusterExternal/loadSchemas', false);
-      await dispatch('clusterExternal/findAll', { type: EXTERNAL.PROJECT, opt: { url: 'projects' } });
-    }
+    await Promise.all([
+      dispatch('cluster/loadSchemas', true),
+      isRancher && dispatch('clusterExternal/loadSchemas', false),
+    ]);
+
+    dispatch('cluster/subscribe');
+    isRancher && dispatch('clusterExternal/subscribe');

    const res = await allHash({
+      projects:   isRancher && dispatch('clusterExternal/findAll', { type: EXTERNAL.PROJECT, opt: { url: 'projects' } }),
      counts:     dispatch('cluster/findAll', { type: COUNT, opt: { url: 'counts' } }),
      namespaces: dispatch('cluster/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } })
    });
--- a/store/prefs.js
+++ b/store/prefs.js
@ -54,7 +54,7 @@ export const THEME = create('theme', 'dark', {
 });
 export const LOCALE = create('locale', 'en-us', { asCookie });
 export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] });
-export const ROWS_PER_PAGE = create('per-page', 100);
+export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100, 250, 500, 1000], parseJSON });

 export const DATE_FORMAT = create('date-format', 'ddd, MMM D YYYY', {
  options: [