Changes for page RealtimeLivetable
Last modified by Vincent Massol on 2024/02/26 17:54
<
>
edited by Clément Desableau
on 2020/05/25 16:52
on 2020/05/25 16:52
edited by Marius Dumitru Florea
on 2020/05/26 15:50
on 2020/05/26 15:50
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -xwiki:XWiki. cdesableau1 +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