Changes for page RealtimeLivetable

Last modified by Vincent Massol on 2024/02/26 17:54

<
From version < 74.1 >
edited by Clément Desableau
on 2020/05/25 16:52
To version < 75.1 >
edited by Marius Dumitru Florea
on 2020/05/26 15:50
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.cdesableau
1 +xwiki:XWiki.mflorea
Content
... ... @@ -287,11 +287,131 @@
287 287  {{/code}}
288 288  )))
289 289  
290 +The live table widget configuration could look like this:
291 +
292 +{{code language="none"}}
293 +{
294 + //
295 + // Modifiable
296 + //
297 +
298 + // The list of available columns to choose from when adding a column, along with their descriptor.
299 + // Creating a new column adds a new entry (descriptor) to this list.
300 + columnDescriptors: [
301 + {
302 + // Used when displaying and filtering the live table rows.
303 + id: 'doc.title',
304 +
305 + // Displayed in the table header.
306 + name: 'Title',
307 +
308 + // Displayed on hover over the column name, if specified.
309 + description: '...',
310 +
311 + // Displayed before the column name, if specified.
312 + icon: '...',
313 +
314 + // The column type, chosen when creating the column. The live table widget uses this only to prefill the column
315 + // descriptor. When the column is mapped to an xclass property this specifies the property type.
316 + type: 'String',
317 +
318 + // If not specified then the column is not sortable.
319 + sortable: true,
320 +
321 + // Used to compute the name of the RequireJS module that will be used to display/edit the values from this column.
322 + // If not specified then the default 'text' displayer is used.
323 + displayer: 'link',
324 +
325 + // This is used only by the 'link' displayer (which receives the row data and the column descriptor).
326 + linkType: '...',
327 +
328 + // Used to compute the name of the RequireJS module that will be used to filter the values from this column.
329 + // If this is not set or set to false then the column is not filterable.
330 + filter: 'text',
331 +
332 + // This is used only by the 'text' filter (which receives the column descriptor).
333 + match: 'prefix',
334 +
335 + // Optional CSS class name to add to the TH element.
336 + styleName: '...'
337 + }, {
338 + id: 'birthdate',
339 + name: 'Birthdate',
340 + icon: '...',
341 + sortable: true,
342 + displayer: 'date-timeago',
343 + filter: 'date-range'
344 + }, {
345 + ...
346 + }, {
347 + id: '_actions',
348 + name: 'Actions',
349 +
350 + displayer: 'actions',
351 + // This is used only by the 'actions' displayer (which receives the row data and the column descriptor).
352 + actions: [
353 + {id: 'delete', label: 'Delete', icon: '...'},
354 + ...
355 + ]
356 + }
357 + ],
358 +
359 + // The list of columns to display.
360 + columns: ['doc.title', 'birthdate', ...],
361 +
362 + // The list of columns to sort on. The sort order can be optionally specified.
363 + sort: ['birthdate:desc'],
364 +
365 + // The values used to filter the live table rows. The live table filters are prefilled with these values. When a new
366 + // filter is applied this configuration is updated.
367 + filterValues: {
368 + birthdate: ['...', ...],
369 + ...
370 + },
371 +
372 + //
373 + // Read-only
374 + //
375 +
376 + // The list of known column types. If this is specified then allow the user to choose the column type when creating a
377 + // column (and prefill the column descriptor with the settings from the column type).
378 + columnTypes: [
379 + {id: 'String', name: 'String', icon: '...', sortable: true, displayer: 'text', filter: 'text'},
380 + {id: 'Date', name: 'Date', icon: '...', sortable: true, displayer: 'date', filter: 'date-range'},
381 + ...
382 + ],
383 +
384 + // The list of known filters to choose from when creating a new column.
385 + filters: ['text', 'date-range', 'user', ...],
386 +
387 + // The list of known displayers to choose from when creating a new column
388 + displayers: ['text', 'html', 'link', 'date', 'date-timeago', 'user', ...],
389 +
390 + // Limit the number of rows displayed.
391 + limit: 10,
392 +
393 + // The maximum number of page links to display in the pagination.
394 + maxPages: 10,
395 +
396 + // Used to build the page size drop down.
397 + pageSizeBounds: {min: 10, max: 100, step: 10},
398 +
399 + // This is used to compute the name of the RequireJS module that will be used to get the live table data. If not
400 + // specified, a default source is used.
401 + source: '...',
402 +
403 + // This is used by the live table source module to get the live table data.
404 + url: '...'
405 +}
406 +{{/code}}
407 +
290 290  The live table widget needs to trigger some events. See the current list of [[live table events>>xwiki:Documentation.DevGuide.FrontendResources.JavaScriptAPI.WebHome||anchor="HLivetableevents28livetable.js29"]] for details.
291 291  
292 292  * when the live table is ready (initialized)
293 293  * whenever the live table rows are updated (due to pagination, sorting, filtering, etc.)
294 294  * after a row is displayed
413 +* when a column is created, added, removed, edited or deleted
414 +* when a row is created
295 295  
296 296  The live table widget is currently implemented by [[livetable.js>>https://github.com/xwiki/xwiki-platform/blob/xwiki-platform-12.3/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/js/xwiki/table/livetable.js]].
297 297  

Get Connected