@tetacom/ng-components 1.3.6 → 1.3.7
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.
package/docs/tableDocs.mdx
CHANGED
|
@@ -1,266 +1,277 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import TableStories from
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import TableStories from '../src/component/table/Table.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={TableStories}/>
|
|
4
|
+
<Meta of={TableStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
6
|
+
# Таблица
|
|
7
|
+
|
|
8
|
+
Table (таблица) — компонент, который отображает данные. Создает на основе двух элементов: Table Header (шапка
|
|
9
|
+
таблицы) и Cell (ячейка).
|
|
10
|
+
|
|
11
|
+
### Правила применения
|
|
12
|
+
|
|
13
|
+
Основные правила применения элементов таблицы:
|
|
14
|
+
|
|
15
|
+
- в ячейке могут быть иконки, текстовые составляющие, выпадающие таблицы, тоглы, чекбоксы и др.;
|
|
16
|
+
- Table Header используется только в шапке таблице.
|
|
17
|
+
|
|
18
|
+
Для упрощения дизайн-процесса лучше всего создать строку из необходимого количества Table Header и объединить в
|
|
19
|
+
компонент. Затем то же самое повторить со строками с Cell и из полученных строк создать компонент таблицы.
|
|
20
|
+
|
|
21
|
+
### Как использовать
|
|
22
|
+
|
|
23
|
+
Для начала нужно создать `<teta-table>`.
|
|
24
|
+
|
|
25
|
+
Для создания таблицы в компонент необходимо передать свойства:
|
|
26
|
+
|
|
27
|
+
- `data` - данные для формирования таблицы.
|
|
28
|
+
- `columns` - каркас данных для таблицы.
|
|
29
|
+
|
|
30
|
+
`columns` принимает в себя массив объектов типа `TableColumn`. Он состоит из:
|
|
31
|
+
|
|
32
|
+
- `width` - ширина поля
|
|
33
|
+
- `flex` - коэффициент растяжения ячейки
|
|
34
|
+
- `headCellClass` - применяет указанный класс к шапке столбца
|
|
35
|
+
- `cellClass` - применяет указанный класс к каждой ячейке столбца
|
|
36
|
+
- `filterType` - тип поля в ячейке (select,datepicker,string и т.д.)
|
|
37
|
+
- `locked` - закрепляет столбец
|
|
38
|
+
- `parentName` - название столбца родителя
|
|
39
|
+
- `unit` - единицы измерения
|
|
40
|
+
- `unitMeasureParameterId` - id измеряемого параметра
|
|
41
|
+
- `unitId` - id единицы измерения
|
|
42
|
+
- `data` - дополнительные данные, свободное описание, доступны внутри компонета ячейки, можно прокинуть callback
|
|
43
|
+
например
|
|
44
|
+
- `editable` - флаг включения/отключения редактирования ячейки
|
|
45
|
+
- `headCellComponent` - компонент кастомной ячейки шапки стобца
|
|
46
|
+
- `headDropdownConfig` - кастомный дропдаун заголовка для столбца
|
|
47
|
+
- `cellComponent` - компонент кастомной ячейки
|
|
48
|
+
- `aggregate` - аггрегирует данные по указанному методу и выводит в последней строчке таблицы.
|
|
49
|
+
- `defaultValue` - данные которые будут выводится при отсутствии данных в ячейке
|
|
50
|
+
- `maxValue` - максимальное значение в ячейке
|
|
51
|
+
- `minValue` - минимальное значение в ячейке
|
|
52
|
+
- `required` - флаг обязательности ввода данных в ячейки
|
|
53
|
+
- `columns` - дочерние колонки
|
|
54
|
+
- `validators` - валидаторы для ячеек таблицы
|
|
55
|
+
- `sortOrder` - порядковый номер
|
|
56
|
+
- `name` - название столбца в строке результатов
|
|
57
|
+
- `caption` - название столбца для заголовка таблицы
|
|
58
|
+
- `hint` - указанный текст появляется при наведении на ячейку.
|
|
59
|
+
- `sortable` - возможность сортировать поле
|
|
60
|
+
- `sortField` - поле для сортировки
|
|
61
|
+
- `filterable` - возможность фильтровать поле
|
|
62
|
+
- `filterField` - поле для фильтрации
|
|
63
|
+
- `stringFilterType` - тип сравнения строкового фильтра
|
|
64
|
+
- `listFilterType` - тип сравнения строкового фильтра
|
|
65
|
+
- `strict` - строгое сравнение
|
|
66
|
+
- `filterComponent` - компонент для рендера фильтра
|
|
67
|
+
|
|
68
|
+
При выборе листа в качестве типа ячейки, то необходимо добавить свойство `dict`, которое отвечает за
|
|
69
|
+
отображаемые элементы списка.
|
|
70
|
+
|
|
71
|
+
### Свойства
|
|
72
|
+
|
|
73
|
+
<table>
|
|
74
|
+
<thead>
|
|
70
75
|
<tr>
|
|
71
76
|
<th>Свойство</th>
|
|
72
77
|
<th>Tип</th>
|
|
73
78
|
<th>Описание</th>
|
|
74
79
|
</tr>
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
</thead>
|
|
81
|
+
<tbody>
|
|
77
82
|
<tr>
|
|
78
|
-
<td class=
|
|
83
|
+
<td class="text-align-center">
|
|
79
84
|
<p>data</p>
|
|
80
85
|
</td>
|
|
81
|
-
<td class=
|
|
86
|
+
<td class="text-align-center">
|
|
82
87
|
<code>any[]</code>
|
|
83
88
|
</td>
|
|
84
|
-
<td class=
|
|
89
|
+
<td class="text-align-center">
|
|
85
90
|
<p>Данные для формирования таблицы</p>
|
|
86
91
|
</td>
|
|
87
92
|
</tr>
|
|
88
93
|
<tr>
|
|
89
|
-
<td class=
|
|
94
|
+
<td class="text-align-center">
|
|
90
95
|
<p>cookieName</p>
|
|
91
96
|
</td>
|
|
92
|
-
<td class=
|
|
97
|
+
<td class="text-align-center">
|
|
93
98
|
<code>string</code>
|
|
94
99
|
</td>
|
|
95
|
-
<td class=
|
|
100
|
+
<td class="text-align-center">
|
|
96
101
|
<p>Будут формироваться куки данных таблицы с указанным именем</p>
|
|
97
102
|
</td>
|
|
98
103
|
</tr>
|
|
99
104
|
<tr>
|
|
100
|
-
<td class=
|
|
105
|
+
<td class="text-align-center">
|
|
101
106
|
<p>columns</p>
|
|
102
107
|
</td>
|
|
103
|
-
<td class=
|
|
108
|
+
<td class="text-align-center">
|
|
104
109
|
<code>TableColumns[]</code>
|
|
105
110
|
</td>
|
|
106
|
-
<td class=
|
|
111
|
+
<td class="text-align-center">
|
|
107
112
|
<p>Шаблон столбцов таблицы</p>
|
|
108
113
|
</td>
|
|
109
114
|
</tr>
|
|
110
115
|
<tr>
|
|
111
|
-
<td class=
|
|
116
|
+
<td class="text-align-center">
|
|
112
117
|
<p>virtual</p>
|
|
113
118
|
</td>
|
|
114
|
-
<td class=
|
|
119
|
+
<td class="text-align-center">
|
|
115
120
|
<code>boolean</code>
|
|
116
121
|
</td>
|
|
117
|
-
<td class=
|
|
122
|
+
<td class="text-align-center">
|
|
118
123
|
<p>Флаг для добавления виртульного скролла</p>
|
|
119
124
|
</td>
|
|
120
125
|
</tr>
|
|
121
126
|
<tr>
|
|
122
|
-
<td class=
|
|
127
|
+
<td class="text-align-center">
|
|
123
128
|
<p>dict</p>
|
|
124
129
|
</td>
|
|
125
|
-
<td class=
|
|
130
|
+
<td class="text-align-center">
|
|
126
131
|
<code>any[]</code>
|
|
127
132
|
</td>
|
|
128
|
-
<td class=
|
|
129
|
-
<p
|
|
133
|
+
<td class="text-align-center">
|
|
134
|
+
<p>
|
|
135
|
+
Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим
|
|
136
|
+
свойством в <code>data</code>. В качестве значения принимает массив объектов id,name.Требуется если вы
|
|
137
|
+
добавляете ячейку типа лист.
|
|
138
|
+
</p>
|
|
130
139
|
</td>
|
|
131
140
|
</tr>
|
|
132
141
|
<tr>
|
|
133
|
-
<td class=
|
|
142
|
+
<td class="text-align-center">
|
|
134
143
|
<p>contextMenu</p>
|
|
135
144
|
</td>
|
|
136
|
-
<td class=
|
|
145
|
+
<td class="text-align-center">
|
|
137
146
|
<code>template</code>
|
|
138
147
|
</td>
|
|
139
|
-
<td class=
|
|
148
|
+
<td class="text-align-center">
|
|
140
149
|
<p>Шаблон контекстного меню </p>
|
|
141
150
|
</td>
|
|
142
151
|
</tr>
|
|
143
152
|
<tr>
|
|
144
|
-
<td class=
|
|
153
|
+
<td class="text-align-center">
|
|
145
154
|
<p>filterOptions</p>
|
|
146
155
|
</td>
|
|
147
|
-
<td class=
|
|
156
|
+
<td class="text-align-center">
|
|
148
157
|
<code>IDictionary<IIdName<any>[]></code>
|
|
149
158
|
</td>
|
|
150
|
-
<td class=
|
|
159
|
+
<td class="text-align-center">
|
|
151
160
|
<p>Список опций для фильтрации, если не задано - берет Dict</p>
|
|
152
161
|
</td>
|
|
153
162
|
</tr>
|
|
154
163
|
<tr>
|
|
155
|
-
<td class=
|
|
164
|
+
<td class="text-align-center">
|
|
156
165
|
<p>editType</p>
|
|
157
166
|
</td>
|
|
158
|
-
<td class=
|
|
167
|
+
<td class="text-align-center">
|
|
159
168
|
<code>EditType</code>
|
|
160
169
|
</td>
|
|
161
|
-
<td class=
|
|
162
|
-
<p>
|
|
170
|
+
<td class="text-align-center">
|
|
171
|
+
<p>
|
|
172
|
+
Тип редактирования - построчно или по ячейкам. При построчном - активируется вся строка для редактирования,
|
|
173
|
+
иначе - по одной ячейке
|
|
174
|
+
</p>
|
|
163
175
|
</td>
|
|
164
176
|
</tr>
|
|
165
177
|
<tr>
|
|
166
|
-
<td class=
|
|
178
|
+
<td class="text-align-center">
|
|
167
179
|
<p>editEvent</p>
|
|
168
180
|
</td>
|
|
169
|
-
<td class=
|
|
181
|
+
<td class="text-align-center">
|
|
170
182
|
<code>EditEvent</code>
|
|
171
183
|
</td>
|
|
172
|
-
<td class=
|
|
184
|
+
<td class="text-align-center">
|
|
173
185
|
<p>Выбор события при котором начинается редактирование ячейки таблицы</p>
|
|
174
186
|
</td>
|
|
175
187
|
</tr>
|
|
176
188
|
<tr>
|
|
177
|
-
<td class=
|
|
189
|
+
<td class="text-align-center">
|
|
178
190
|
<p>selectType</p>
|
|
179
191
|
</td>
|
|
180
|
-
<td class=
|
|
192
|
+
<td class="text-align-center">
|
|
181
193
|
<code>SelectType</code>
|
|
182
194
|
</td>
|
|
183
|
-
<td class=
|
|
195
|
+
<td class="text-align-center">
|
|
184
196
|
<p>Тип выбора строк. Никак, чекбоксами (появляется доп столбец с чеком), или просто мышью.</p>
|
|
185
197
|
</td>
|
|
186
198
|
</tr>
|
|
187
199
|
<tr>
|
|
188
|
-
<td class=
|
|
200
|
+
<td class="text-align-center">
|
|
189
201
|
<p>selectedRows</p>
|
|
190
202
|
</td>
|
|
191
|
-
<td class=
|
|
203
|
+
<td class="text-align-center">
|
|
192
204
|
<code>any[]</code>
|
|
193
205
|
</td>
|
|
194
|
-
<td class=
|
|
206
|
+
<td class="text-align-center">
|
|
195
207
|
<p>Свойство отвечающее за выбранные ячейки</p>
|
|
196
208
|
</td>
|
|
197
209
|
</tr>
|
|
198
210
|
<tr>
|
|
199
|
-
<td class=
|
|
211
|
+
<td class="text-align-center">
|
|
200
212
|
<p>tableService</p>
|
|
201
213
|
</td>
|
|
202
|
-
<td class=
|
|
214
|
+
<td class="text-align-center">
|
|
203
215
|
<code>function</code>
|
|
204
216
|
</td>
|
|
205
|
-
<td class=
|
|
217
|
+
<td class="text-align-center">
|
|
206
218
|
<p>Срабатывает при создании сервиса и отдает его.</p>
|
|
207
219
|
</td>
|
|
208
220
|
</tr>
|
|
209
221
|
<tr>
|
|
210
|
-
<td class=
|
|
222
|
+
<td class="text-align-center">
|
|
211
223
|
<p>cellEditEnd</p>
|
|
212
224
|
</td>
|
|
213
|
-
<td class=
|
|
225
|
+
<td class="text-align-center">
|
|
214
226
|
<code>function</code>
|
|
215
227
|
</td>
|
|
216
|
-
<td class=
|
|
228
|
+
<td class="text-align-center">
|
|
217
229
|
<p>Указанная функция применяется при окончании редактирования ячейки </p>
|
|
218
230
|
</td>
|
|
219
231
|
</tr>
|
|
220
232
|
<tr>
|
|
221
|
-
<td class=
|
|
233
|
+
<td class="text-align-center">
|
|
222
234
|
<p>cellEditStart</p>
|
|
223
235
|
</td>
|
|
224
|
-
<td class=
|
|
236
|
+
<td class="text-align-center">
|
|
225
237
|
<code>function</code>
|
|
226
238
|
</td>
|
|
227
|
-
<td class=
|
|
239
|
+
<td class="text-align-center">
|
|
228
240
|
<p>Указанная функция применяется при начале редактирования ячейки </p>
|
|
229
241
|
</td>
|
|
230
242
|
</tr>
|
|
231
243
|
<tr>
|
|
232
|
-
<td class=
|
|
244
|
+
<td class="text-align-center">
|
|
233
245
|
<p>rowEditEnd</p>
|
|
234
246
|
</td>
|
|
235
|
-
<td class=
|
|
247
|
+
<td class="text-align-center">
|
|
236
248
|
<code>function</code>
|
|
237
249
|
</td>
|
|
238
|
-
<td class=
|
|
250
|
+
<td class="text-align-center">
|
|
239
251
|
<p>Указанная функция применяется при окончании редактирования строчки.</p>
|
|
240
252
|
</td>
|
|
241
253
|
</tr>
|
|
242
254
|
<tr>
|
|
243
|
-
<td class=
|
|
255
|
+
<td class="text-align-center">
|
|
244
256
|
<p>rowEditStart</p>
|
|
245
257
|
</td>
|
|
246
|
-
<td class=
|
|
258
|
+
<td class="text-align-center">
|
|
247
259
|
<code>function</code>
|
|
248
260
|
</td>
|
|
249
|
-
<td class=
|
|
261
|
+
<td class="text-align-center">
|
|
250
262
|
<p>Указанная функция применяется при начале редактирования строчки.</p>
|
|
251
263
|
</td>
|
|
252
264
|
</tr>
|
|
253
265
|
<tr>
|
|
254
|
-
<td class=
|
|
266
|
+
<td class="text-align-center">
|
|
255
267
|
<p>activeRowChange</p>
|
|
256
268
|
</td>
|
|
257
|
-
<td class=
|
|
269
|
+
<td class="text-align-center">
|
|
258
270
|
<code>function</code>
|
|
259
271
|
</td>
|
|
260
|
-
<td class=
|
|
272
|
+
<td class="text-align-center">
|
|
261
273
|
<p>Указанная функция применяется при изменении выбранной строчки.</p>
|
|
262
274
|
</td>
|
|
263
275
|
</tr>
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
</div>
|
|
276
|
+
</tbody>
|
|
277
|
+
</table>
|