@bennerinformatics/ember-fw-table 2.1.4 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/addon/components/fw-table-resort.js +18 -4
  2. package/addon/components/fw-table-sortable.js +23 -0
  3. package/addon/templates/components/fw-table-resort.hbs +3 -0
  4. package/addon/templates/components/fw-table-sortable.hbs +10 -1
  5. package/docs/api.js +61 -0
  6. package/docs/assets/css/custom.css +82 -0
  7. package/docs/assets/css/external-small.png +0 -0
  8. package/docs/assets/css/logo.png +0 -0
  9. package/docs/assets/css/main.css +793 -0
  10. package/docs/assets/css/theme.css +547 -0
  11. package/docs/assets/favicon.ico +0 -0
  12. package/docs/assets/icons/android-icon-144x144.png +0 -0
  13. package/docs/assets/icons/android-icon-192x192.png +0 -0
  14. package/docs/assets/icons/android-icon-36x36.png +0 -0
  15. package/docs/assets/icons/android-icon-48x48.png +0 -0
  16. package/docs/assets/icons/android-icon-72x72.png +0 -0
  17. package/docs/assets/icons/android-icon-96x96.png +0 -0
  18. package/docs/assets/icons/apple-icon-114x114.png +0 -0
  19. package/docs/assets/icons/apple-icon-120x120.png +0 -0
  20. package/docs/assets/icons/apple-icon-144x144.png +0 -0
  21. package/docs/assets/icons/apple-icon-152x152.png +0 -0
  22. package/docs/assets/icons/apple-icon-180x180.png +0 -0
  23. package/docs/assets/icons/apple-icon-57x57.png +0 -0
  24. package/docs/assets/icons/apple-icon-60x60.png +0 -0
  25. package/docs/assets/icons/apple-icon-72x72.png +0 -0
  26. package/docs/assets/icons/apple-icon-76x76.png +0 -0
  27. package/docs/assets/icons/apple-icon-precomposed.png +0 -0
  28. package/docs/assets/icons/apple-icon.png +0 -0
  29. package/docs/assets/icons/browserconfig.xml +2 -0
  30. package/docs/assets/icons/favicon-16x16.png +0 -0
  31. package/docs/assets/icons/favicon-32x32.png +0 -0
  32. package/docs/assets/icons/favicon-96x96.png +0 -0
  33. package/docs/assets/icons/favicon.ico +0 -0
  34. package/docs/assets/icons/manifest.json +41 -0
  35. package/docs/assets/icons/ms-icon-144x144.png +0 -0
  36. package/docs/assets/icons/ms-icon-150x150.png +0 -0
  37. package/docs/assets/icons/ms-icon-310x310.png +0 -0
  38. package/docs/assets/icons/ms-icon-70x70.png +0 -0
  39. package/docs/assets/img/ember-logo.png +0 -0
  40. package/docs/assets/img/fw-logo.png +0 -0
  41. package/docs/assets/img/spinner.gif +0 -0
  42. package/docs/assets/index.html +10 -0
  43. package/docs/assets/js/api-filter.js +56 -0
  44. package/docs/assets/js/api-list.js +255 -0
  45. package/docs/assets/js/api-search.js +98 -0
  46. package/docs/assets/js/apidocs.js +376 -0
  47. package/docs/assets/js/yui-prettify.js +17 -0
  48. package/docs/assets/js/yuidoc-bootstrap.js +274 -0
  49. package/docs/assets/vendor/bootstrap/css/bootstrap.css +6760 -0
  50. package/docs/assets/vendor/bootstrap/css/bootstrap.min.css +6 -0
  51. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
  52. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg +288 -0
  53. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
  54. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
  55. package/docs/assets/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2 +0 -0
  56. package/docs/assets/vendor/bootstrap/img/glyphicons-halflings-white.png +0 -0
  57. package/docs/assets/vendor/bootstrap/img/glyphicons-halflings.png +0 -0
  58. package/docs/assets/vendor/bootstrap/js/bootstrap.js +2363 -0
  59. package/docs/assets/vendor/bootstrap/js/bootstrap.min.js +7 -0
  60. package/docs/assets/vendor/font-awesome/css/font-awesome.css +2199 -0
  61. package/docs/assets/vendor/font-awesome/css/font-awesome.min.css +4 -0
  62. package/docs/assets/vendor/font-awesome/fonts/FontAwesome.otf +0 -0
  63. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.eot +0 -0
  64. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.svg +685 -0
  65. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.ttf +0 -0
  66. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff +0 -0
  67. package/docs/assets/vendor/font-awesome/fonts/fontawesome-webfont.woff2 +0 -0
  68. package/docs/assets/vendor/github-slugger/slugger.js +59 -0
  69. package/docs/assets/vendor/jquery/jquery.min.js +6 -0
  70. package/docs/assets/vendor/jquery-ui/jquery-ui.min.js +6 -0
  71. package/docs/assets/vendor/prettify/CHANGES.html +130 -0
  72. package/docs/assets/vendor/prettify/COPYING +202 -0
  73. package/docs/assets/vendor/prettify/README.html +203 -0
  74. package/docs/assets/vendor/prettify/prettify-min.css +1 -0
  75. package/docs/assets/vendor/prettify/prettify-min.js +1 -0
  76. package/docs/classes/BaseCells.html +484 -0
  77. package/docs/classes/Export.html +457 -0
  78. package/docs/classes/Format.html +577 -0
  79. package/docs/classes/FwCellAction.html +312 -0
  80. package/docs/classes/FwCellBoolean.html +311 -0
  81. package/docs/classes/FwCellNullable.html +312 -0
  82. package/docs/classes/FwCellPermissionIcon.html +321 -0
  83. package/docs/classes/FwColumnSortable.html +358 -0
  84. package/docs/classes/FwColumnTitle.html +314 -0
  85. package/docs/classes/FwDeleteModal.html +485 -0
  86. package/docs/classes/FwExpandableRow.html +307 -0
  87. package/docs/classes/FwPaginationWrapper.html +2129 -0
  88. package/docs/classes/FwRowToggle.html +355 -0
  89. package/docs/classes/FwRowToggleIndex.html +312 -0
  90. package/docs/classes/FwTableExpandedRow.html +307 -0
  91. package/docs/classes/FwTableResort.html +827 -0
  92. package/docs/classes/FwTableSortable.html +1293 -0
  93. package/docs/classes/Row.html +352 -0
  94. package/docs/classes/Table.html +672 -0
  95. package/docs/classes/TableUtil.html +410 -0
  96. package/docs/classes/index.html +10 -0
  97. package/docs/data.json +2324 -0
  98. package/docs/elements/index.html +10 -0
  99. package/docs/files/addon_classes_Row.js.html +318 -0
  100. package/docs/files/addon_classes_Table.js.html +390 -0
  101. package/docs/files/addon_components_fw-cell-action.js.html +257 -0
  102. package/docs/files/addon_components_fw-cell-boolean.js.html +251 -0
  103. package/docs/files/addon_components_fw-cell-nullable.js.html +253 -0
  104. package/docs/files/addon_components_fw-cell-permission-icon.js.html +266 -0
  105. package/docs/files/addon_components_fw-column-sortable.js.html +281 -0
  106. package/docs/files/addon_components_fw-column-title.js.html +259 -0
  107. package/docs/files/addon_components_fw-delete-modal.js.html +318 -0
  108. package/docs/files/addon_components_fw-expandable-row.js.html +248 -0
  109. package/docs/files/addon_components_fw-pagination-wrapper.js.html +838 -0
  110. package/docs/files/addon_components_fw-row-toggle-index.js.html +252 -0
  111. package/docs/files/addon_components_fw-row-toggle.js.html +270 -0
  112. package/docs/files/addon_components_fw-table-expanded-row.js.html +261 -0
  113. package/docs/files/addon_components_fw-table-expanded-rows.js.html +263 -0
  114. package/docs/files/addon_components_fw-table-resort.js.html +457 -0
  115. package/docs/files/addon_components_fw-table-sortable.js.html +663 -0
  116. package/docs/files/addon_documentation.js.html +301 -0
  117. package/docs/files/addon_initializers_responsive.js.html +253 -0
  118. package/docs/files/addon_utils_base-cells.js.html +313 -0
  119. package/docs/files/addon_utils_export.js.html +316 -0
  120. package/docs/files/addon_utils_formats.js.html +335 -0
  121. package/docs/files/addon_utils_table.js.html +274 -0
  122. package/docs/files/index.html +10 -0
  123. package/docs/index.html +252 -0
  124. package/docs/modules/CellComponents.html +313 -0
  125. package/docs/modules/ColumnComponents.html +284 -0
  126. package/docs/modules/Components.html +285 -0
  127. package/docs/modules/Introduction.html +261 -0
  128. package/docs/modules/Utils.html +285 -0
  129. package/docs/modules/index.html +10 -0
  130. package/package.json +64 -64
  131. package/.yalc/ember-sortable/.huskyrc +0 -5
  132. package/.yalc/ember-sortable/CHANGELOG.md +0 -755
  133. package/.yalc/ember-sortable/CODE_OF_CONDUCT.md +0 -6
  134. package/.yalc/ember-sortable/LICENSE.md +0 -9
  135. package/.yalc/ember-sortable/MIGRATION_GUIDE_MODIFIERS.md +0 -95
  136. package/.yalc/ember-sortable/MIGRATION_GUIDE_V2.md +0 -120
  137. package/.yalc/ember-sortable/Makefile +0 -24
  138. package/.yalc/ember-sortable/README.md +0 -423
  139. package/.yalc/ember-sortable/RELEASE.md +0 -60
  140. package/.yalc/ember-sortable/V2_MIGRATION_RFC.md +0 -1100
  141. package/.yalc/ember-sortable/addon/modifiers/sortable-group.js +0 -754
  142. package/.yalc/ember-sortable/addon/modifiers/sortable-handle.js +0 -29
  143. package/.yalc/ember-sortable/addon/modifiers/sortable-item.js +0 -869
  144. package/.yalc/ember-sortable/addon/services/ember-sortable.js +0 -92
  145. package/.yalc/ember-sortable/addon/system/scroll-container.js +0 -53
  146. package/.yalc/ember-sortable/addon/system/scroll-parent.js +0 -33
  147. package/.yalc/ember-sortable/addon/utils/constant.js +0 -9
  148. package/.yalc/ember-sortable/addon/utils/coordinate.js +0 -34
  149. package/.yalc/ember-sortable/addon/utils/css-calculation.js +0 -20
  150. package/.yalc/ember-sortable/addon/utils/defaults.js +0 -26
  151. package/.yalc/ember-sortable/addon/utils/keyboard.js +0 -32
  152. package/.yalc/ember-sortable/addon-test-support/helpers/drag.js +0 -111
  153. package/.yalc/ember-sortable/addon-test-support/helpers/index.js +0 -4
  154. package/.yalc/ember-sortable/addon-test-support/helpers/reorder.js +0 -41
  155. package/.yalc/ember-sortable/addon-test-support/utils/keyboard.js +0 -32
  156. package/.yalc/ember-sortable/addon-test-support/utils/offset.js +0 -14
  157. package/.yalc/ember-sortable/app/modifiers/sortable-group.js +0 -1
  158. package/.yalc/ember-sortable/app/modifiers/sortable-handle.js +0 -1
  159. package/.yalc/ember-sortable/app/modifiers/sortable-item.js +0 -1
  160. package/.yalc/ember-sortable/app/services/ember-sortable-internal-state.js +0 -1
  161. package/.yalc/ember-sortable/config/environment.js +0 -5
  162. package/.yalc/ember-sortable/demo.gif +0 -0
  163. package/.yalc/ember-sortable/index.js +0 -5
  164. package/.yalc/ember-sortable/package.json +0 -65
  165. package/.yalc/ember-sortable/yalc.sig +0 -1
  166. package/yalc.lock +0 -10
package/docs/files/addon_components_fw-table-resort.js.html ADDED
@@ -0,0 +1,457 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>addon\components\fw-table-resort.js - Ember-FW-Table</title>
6
+ <meta name="description" content="A set of components surrounding the functionality of the fw-table-sortable, which is a simplified table, with ember-light-table as its internals.">
7
+ <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
8
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
+ <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
10
+ <link rel="stylesheet" href="../assets/css/custom.css">
11
+ <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
12
+ <link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
13
+ <link rel="stylesheet" href="../assets/css/theme.css">
14
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'>
15
+ <!-- favicon information -->
16
+ <link rel="apple-touch-icon" sizes="57x57" href="/assets/icons/apple-icon-57x57.png">
17
+ <link rel="apple-touch-icon" sizes="60x60" href="/assets/icons/apple-icon-60x60.png">
18
+ <link rel="apple-touch-icon" sizes="72x72" href="/assets/icons/apple-icon-72x72.png">
19
+ <link rel="apple-touch-icon" sizes="76x76" href="/assets/icons/apple-icon-76x76.png">
20
+ <link rel="apple-touch-icon" sizes="114x114" href="/assets/icons/apple-icon-114x114.png">
21
+ <link rel="apple-touch-icon" sizes="120x120" href="/assets/icons/apple-icon-120x120.png">
22
+ <link rel="apple-touch-icon" sizes="144x144" href="/assets/icons/apple-icon-144x144.png">
23
+ <link rel="apple-touch-icon" sizes="152x152" href="/assets/icons/apple-icon-152x152.png">
24
+ <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-icon-180x180.png">
25
+ <link rel="icon" type="image/png" sizes="192x192" href="/assets/icons/android-icon-192x192.png">
26
+ <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
27
+ <link rel="icon" type="image/png" sizes="96x96" href="/assets/icons/favicon-96x96.png">
28
+ <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
29
+ <link rel="manifest" href="/assets/icons/manifest.json">
30
+ <meta name="msapplication-TileImage" content="/assets/icons/ms-icon-144x144.png">
31
+
32
+
33
+ <style>
34
+ body a {
35
+ color: #7E3DB7;
36
+ }
37
+ body a:hover {
38
+ color: #7E3DB7;
39
+ opacity: 0.5;
40
+ }
41
+ .navbar.navbar-default .navbar-nav> li> a:focus, .navbar.navbar-default .navbar-nav> li> a:hover {
42
+ color: #7E3DB7;
43
+ }
44
+ .navbar.navbar-default .navbar-nav> .active> a, .navbar.navbar-default .navbar-nav> .active> a:focus, .navbar.navbar-default .navbar-nav> .active> a:hover {
45
+ color: #7E3DB7;
46
+ }
47
+ #docs-main .page-header {
48
+ color: #7E3DB7;
49
+ }
50
+ #docs-main .page-section .nav-tabs {
51
+ border-bottom: 1px solid #7E3DB7;
52
+ }
53
+ #docs-main .page-section .nav-tabs> li.active a {
54
+ background: #7E3DB7;
55
+ border: 1px solid #7E3DB7;
56
+ }
57
+ #sidebar li.panel .panel-body ol> li.active, #sidebar li.panel .panel-body ol> li:hover {
58
+ background: #efefef;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body>
63
+ <nav class="navbar navbar-default">
64
+ <div class="container-fluid">
65
+ <div class="navbar-header">
66
+ <a href="../" class="navbar-brand">
67
+ <img src="..\assets\img\fw-logo.png" alt="enterprise logo">
68
+ <span>Ember-FW-Table (API)</span>
69
+ </a>
70
+ </div>
71
+
72
+ <div class="collapse navbar-collapse" id="nav">
73
+ <ul class="nav navbar-nav navbar-right">
74
+ <li><a href="https://linformatics.bitbucket.io/docs/">Docs</a></li>
75
+ <li><a href="https://linformatics.bitbucket.io/downloads/">Downloads</a></li>
76
+ <li><a href="https://linformatics.bitbucket.io/api/">API</a></li>
77
+ <li><a href="https://bitbucket.org/linformatics/ember-fw-table" class="fa fa-github github"></a></li>
78
+ </ul>
79
+ </div>
80
+ </div>
81
+ </nav>
82
+ <div id="main-wrapper" class="row">
83
+ <div id="content-wrapper">
84
+ <ol class="panel-group" id="sidebar" role="tablist" aria-multiselectable="true">
85
+ <li class="panel panel-default">
86
+ <div class="panel-heading" role="tab" id="sidebar-search-heading">
87
+ <h4 class="panel-title">
88
+ <a role="button" data-toggle="collapse" href="#sidebar-search" aria-expanded="true" aria-controls="collapseOne">
89
+ Search
90
+ </a>
91
+ </h4>
92
+ </div>
93
+ <div id="sidebar-search" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-search-heading">
94
+ <div class="panel-body">
95
+ <div id="api-tabview-filter">
96
+ <input type="search" id="api-filter" placeholder="Search...">
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </li>
101
+ <li class="panel panel-default">
102
+ <div class="panel-heading" role="tab" id="sidebar-version-heading">
103
+ <h4 class="panel-title">
104
+ <a role="button" href="https://bitbucket.org/linformatics/ember-fw-table/commits/04d3b2ce" target="_blank">
105
+ Tag: 2.1.4.04d3b2ce
106
+ </a>
107
+ </h4>
108
+ </div>
109
+ </li>
110
+ <li class="panel panel-default">
111
+ <div class="panel-heading" role="tab" id="sidebar-modules-heading">
112
+ <h4 class="panel-title">
113
+ <a role="button" data-toggle="collapse" href="#sidebar-modules" aria-expanded="true" aria-controls="collapseOne">
114
+ Modules
115
+ </a>
116
+ </h4>
117
+ </div>
118
+ <div id="sidebar-modules" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-modules-heading">
119
+ <div class="panel-body">
120
+ <ol>
121
+ <li>
122
+ <a href="../modules/CellComponents.html">CellComponents</a>
123
+ </li>
124
+ <li>
125
+ <a href="../modules/ColumnComponents.html">ColumnComponents</a>
126
+ </li>
127
+ <li>
128
+ <a href="../modules/Components.html">Components</a>
129
+ </li>
130
+ <li>
131
+ <a href="../modules/Introduction.html">Introduction</a>
132
+ </li>
133
+ <li>
134
+ <a href="../modules/Utils.html">Utils</a>
135
+ </li>
136
+ </ol>
137
+ </div>
138
+ </div>
139
+ </li>
140
+
141
+ <li class="panel panel-default">
142
+ <div class="panel-heading" role="tab" id="sidebar-classes-heading">
143
+ <h4 class="panel-title">
144
+ <a role="button" data-toggle="collapse" href="#sidebar-classes" aria-expanded="true" aria-controls="collapseOne">
145
+ Classes
146
+ </a>
147
+ </h4>
148
+ </div>
149
+ <div id="sidebar-classes" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-classes-heading">
150
+ <div class="panel-body">
151
+ <ol>
152
+ <li>
153
+ <a href="../classes/BaseCells.html">BaseCells</a>
154
+ </li>
155
+ <li>
156
+ <a href="../classes/Export.html">Export</a>
157
+ </li>
158
+ <li>
159
+ <a href="../classes/Format.html">Format</a>
160
+ </li>
161
+ <li>
162
+ <a href="../classes/FwCellAction.html">FwCellAction</a>
163
+ </li>
164
+ <li>
165
+ <a href="../classes/FwCellBoolean.html">FwCellBoolean</a>
166
+ </li>
167
+ <li>
168
+ <a href="../classes/FwCellNullable.html">FwCellNullable</a>
169
+ </li>
170
+ <li>
171
+ <a href="../classes/FwCellPermissionIcon.html">FwCellPermissionIcon</a>
172
+ </li>
173
+ <li>
174
+ <a href="../classes/FwColumnSortable.html">FwColumnSortable</a>
175
+ </li>
176
+ <li>
177
+ <a href="../classes/FwColumnTitle.html">FwColumnTitle</a>
178
+ </li>
179
+ <li>
180
+ <a href="../classes/FwDeleteModal.html">FwDeleteModal</a>
181
+ </li>
182
+ <li>
183
+ <a href="../classes/FwPaginationWrapper.html">FwPaginationWrapper</a>
184
+ </li>
185
+ <li>
186
+ <a href="../classes/FwRowToggle.html">FwRowToggle</a>
187
+ </li>
188
+ <li>
189
+ <a href="../classes/FwRowToggleIndex.html">FwRowToggleIndex</a>
190
+ </li>
191
+ <li>
192
+ <a href="../classes/FwTableResort.html">FwTableResort</a>
193
+ </li>
194
+ <li>
195
+ <a href="../classes/FwTableSortable.html">FwTableSortable</a>
196
+ </li>
197
+ <li>
198
+ <a href="../classes/Row.html">Row</a>
199
+ </li>
200
+ <li>
201
+ <a href="../classes/Table.html">Table</a>
202
+ </li>
203
+ <li>
204
+ <a href="../classes/TableUtil.html">TableUtil</a>
205
+ </li>
206
+ </ol>
207
+ </div>
208
+ </div>
209
+ </li>
210
+ </ol>
211
+ <div class="content-container">
212
+ <div class="apidocs">
213
+ <div id="docs-main">
214
+ <div class="content">
215
+ <div class="page-header">
216
+ <h1><i class="fa fa-file-code-o" aria-hidden="true"></i> File</h1>
217
+ </div>
218
+
219
+ <div class="file">
220
+ <pre class="prettyprint linenums">
221
+ import Component from &#x27;@ember/component&#x27;;
222
+ import {defineProperty} from &#x27;@ember/object&#x27;;
223
+ import {alias, filter, filterBy, sort} from &#x27;@ember/object/computed&#x27;;
224
+ import layout from &#x27;../templates/components/fw-table-resort&#x27;;
225
+
226
+ /**
227
+ * This table contains client-side logic to resort a &quot;table&quot; of models. This resort table will not call the actual serverside &quot;save&quot; function, so you will need to persist the changes to the database yourself,
228
+ * but it will do everything else for you (ie all you should have to do is call save, and the reorder will work). A basic usage example is the following:
229
+ *
230
+ * &#x60;&#x60;&#x60;handlebars
231
+ * &lt;FwTableResort @items={{items}} @titleKey=&#x27;name&#x27; @sortKey=&#x27;sorted&#x27; /&gt;
232
+ * &#x60;&#x60;&#x60;
233
+ *
234
+ * If used in a block format instead, it is possible to fully define the title area, such as to replace it with input fields, which also adds a cheveron to expand if desired
235
+ * &#x60;&#x60;&#x60;handlebars
236
+ * &lt;FwTableResort @items={{items}} @sortKey=&#x27;sorted&#x27; as |item expanded|&gt;
237
+ * {{input item.name}}
238
+ * &lt;/FwTableResort&gt;
239
+ * &#x60;&#x60;&#x60;
240
+ * Currently the only way to have a display title different from the default sort is to use the block format manually (set the &#x60;titleKey&#x60; to the desired default sort, and then manually display
241
+ * the other desired property).
242
+ * @class FwTableResort
243
+ * @public
244
+ * @module Components
245
+ */
246
+ const TableResort = Component.extend({
247
+ layout,
248
+ tagName: &#x27;section&#x27;,
249
+ classNames: [&#x27;panel-body&#x27;, &#x27;fw-table-resort&#x27;],
250
+ /**
251
+ * Required property. This is what you pass the array of items you wish to sort with the table.
252
+ * @public
253
+ * @property items
254
+ * @type {Boolean}
255
+ */
256
+ /**
257
+ * If true, show an expand button for more fields
258
+ *
259
+ * @public
260
+ * @property allowExpand
261
+ * @type {Boolean}
262
+ */
263
+ allowExpand: false,
264
+
265
+ /**
266
+ * Filter called to check if an item is active
267
+ *
268
+ * @public
269
+ * @property activeFilter
270
+ * @type {Function}
271
+ */
272
+ activeFilter: null,
273
+
274
+ /**
275
+ * Key used to determine if an item is active
276
+ *
277
+ * @public
278
+ * @property activeKey
279
+ * @type {String}
280
+ */
281
+ activeKey: null,
282
+
283
+ /**
284
+ * If defined with an action, adds a delete button to delete items
285
+ *
286
+ * @public
287
+ * @default true
288
+ * @property delete
289
+ * @type {Action}
290
+ */
291
+ delete: () =&gt; {},
292
+
293
+ /**
294
+ * The icon that will be used for the delete button. Useful if you want the button to do something other than delete.
295
+ *
296
+ * @public
297
+ * @default fa-regular fa-trash-can
298
+ * @property deleteIcon
299
+ * @type {String}
300
+ */
301
+ deleteIcon: &#x27;fa-regular fa-trash-can&#x27;,
302
+
303
+ /**
304
+ * String pointer to the model&#x27;s sort key, will be used to sort the items and modify the key later
305
+ *
306
+ * @public
307
+ * @property sortKey
308
+ * @type {String}
309
+ */
310
+ sortKey: &#x27;&#x27;,
311
+
312
+ /**
313
+ * Default sort for if the sort key is undefined and title to display if no block is used
314
+ * @public
315
+ * @property title
316
+ * @type {String}
317
+ */
318
+ titleKey: null,
319
+
320
+ /**
321
+ * Spacing between sortable items
322
+ *
323
+ * @public
324
+ * @property spacing
325
+ * @type {Number}
326
+ */
327
+ spacing: 15,
328
+
329
+ /**
330
+ * Tolerance before dragging starts
331
+ *
332
+ * @public
333
+ * @property distance
334
+ * @type {Number}
335
+ */
336
+ distance: 0,
337
+
338
+ /**
339
+ * An internal list of all items which will be shown in the table (takes into account activeKey and activeFilter)
340
+ *
341
+ * @private
342
+ * @property viewableItems
343
+ * @type {Array}
344
+ */
345
+
346
+ /**
347
+ * Sort order as defined by passed properties
348
+ * @private
349
+ * @property _sortOrder
350
+ * @type {Array}
351
+ */
352
+ _sortOrder: null,
353
+
354
+ /**
355
+ * Sorted list of items in the table
356
+ *
357
+ * @private
358
+ * @property sortedItems
359
+ * @type {Array}
360
+ */
361
+ sortedItems: sort(&#x27;viewableItems&#x27;, &#x27;_sortOrder&#x27;),
362
+
363
+ didReceiveAttrs() {
364
+ this._super(...arguments);
365
+
366
+ // determine the default sort order from the sortkey
367
+ this.set(&#x27;_sortOrder&#x27;, [this.sortKey]);
368
+ // if we have a fallback for default is null, add that as well
369
+ if (this.titleKey) {
370
+ this._sortOrder.pushObject(this.titleKey);
371
+ }
372
+
373
+ // determine how we will filter the viewable items based on what the user gave
374
+ // if its a key, either filter type
375
+ let activeKey = this.activeKey;
376
+ if (activeKey) {
377
+ // have a function? use that
378
+ let activeFilter = this.activeFilter;
379
+ if (activeFilter) {
380
+ defineProperty(this, &#x27;viewableItems&#x27;, filter(&#x60;items.@each.${activeKey}&#x60;, activeFilter));
381
+ } else {
382
+ // otherwise do a flat filterBy
383
+ defineProperty(this, &#x27;viewableItems&#x27;, filterBy(&#x27;items&#x27;, activeKey));
384
+ }
385
+ } else {
386
+ // no key? just display all
387
+ defineProperty(this, &#x27;viewableItems&#x27;, alias(&#x27;items&#x27;));
388
+ }
389
+ },
390
+
391
+ /**
392
+ * Helper function to sort a list of passed items
393
+ * @method reorderItems
394
+ * @param {DS.Model[]} items Model array
395
+ * @private
396
+ */
397
+ reorderItems(items) {
398
+ let activeFilter = this.activeFilter;
399
+ if (activeFilter) {
400
+ items = items.filter(activeFilter);
401
+ }
402
+ items.forEach((item, index) =&gt; {
403
+ item.set(this.sortKey, index + 1);
404
+ });
405
+ },
406
+
407
+ actions: {
408
+ /**
409
+ * Called when the expand button is clicked on any row
410
+ * @param {DS.Model} item Model clicked
411
+ */
412
+ toggleExpanded(item) {
413
+ item.toggleProperty(&#x27;expanded&#x27;);
414
+ },
415
+
416
+ /**
417
+ * Called whenever an item is moved to reorders items based on their index in the array
418
+ * @param {DS.Model[]} items The items to reorder
419
+ */
420
+ reorderItems(items) {
421
+ this.reorderItems(items);
422
+ },
423
+
424
+ /**
425
+ * Called when the delete button is pressed to redirect that call to the passed in action
426
+ * @param {Model} item Model to delete
427
+ */
428
+ deleteItem(item) {
429
+ this.delete(item);
430
+ this.reorderItems(this.sortedItems);
431
+ }
432
+ }
433
+ });
434
+
435
+ TableResort.reopenClass({
436
+ positionalParams: [&#x27;items&#x27;]
437
+ });
438
+
439
+ export default TableResort;
440
+
441
+ </pre>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ <script src="../assets/vendor/prettify/prettify-min.js"></script>
450
+ <script>prettyPrint();</script>
451
+ <script src="../assets/vendor/jquery/jquery.min.js"></script>
452
+ <script src="../assets/vendor/jquery-ui/jquery-ui.min.js"></script>
453
+ <script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
454
+ <script src="../assets/vendor/github-slugger/slugger.js"></script>
455
+ <script src="../assets/js/yuidoc-bootstrap.js"></script>
456
+ </body>
457
+ </html>