mmo-table
1 symbol · generated 30 Sep 2026
mmo-table
mmo-table.jhs:1Table class
- Extends
- CustomAPIElement
Index
| url | an url to a json api or a json stringify object: {collection, repository, filters} | |
| readonly | if true, the table is readonly | |
| ViewDefault static readonly accessor | ||
| readonly accessor | Get the readonly of the table | |
| url accessor | Get the url of the table | |
| data accessor | Get the data of the table | |
| fields accessor | Get the fields of the table | |
| widthsKey readonly accessor | The key this table's column widths are remembered under: the id the page gave it, or the path of the collection it reads -- never the query, so a filter or another page keeps the same widths. | |
| constructor() | ||
| init() | ||
| toggleConfig() | Toggle the configuration of the table | |
| setAPI(api) | Set the API of the table | |
| updateSearch() | Rebuild the query bar, after the schema or the fields it offers have changed. | |
| initColumnResize(view) | Give a column's grip its drag gesture. | |
| resetColumnWidth(grip) | Put a column back to the width its schema asked for, and forget what it was dragged to. | |
| resizeColumnByKey(event, grip) | Resize the focused column from the keyboard: left and right by 16px, 4px with shift, Home back to the schema's width. | |
| setColumnWidth(th, width) | Write a column's width where the header reads it from -- the field model, which the width binding renders -- and remember it for the next visit. | |
| indexOfField(path) | The index of a field, from the data-key its header carries. | |
| getStoredWidths() | The widths this table was left with, by field path. | |
| storeColumnWidth(path, width) | Remember what a column was resized to, or forget it. | |
| deleteField(view) | Delete a field from the table | |
| setApiSort(value) | Set the sort of the table | |
| setApiFields(value) | Set the fields of the table | |
| updateFieldsSort() | Update the sort of the table | |
| updateFields(view) | Update the fields of the table | |
| reload() | Reload the table | |
| getRowIndex(tr) | Get the index of the row | |
| getRowTitle(tr) | Return the text content of the first real column (the 3rd) (first is the line number, second id the checkbox) | |
| gotoTop() | Go to the top of the table | |
| gotoBottom() | Go to the bottom of the table | |
| print() | Print the table | |
| export(ext) | Export the table | |
| bookmark() | Bookmark the table | |
| selectAll(selected) | Select all the rows of the table | |
| getSelectedIndex() | Get the indexes of the selected rows | |
| selectRow(input) | Select a row of the table | |
| focus() | Focus the table This function is not called at all in the code at the moment, but it is here for future reference. | |
| unfocus() | Unfocus the table This function is not called at all in the code at the moment, but it is here for future reference. | |
| setCurrent(td) | Set the current cell of the table | |
| updateRow(tr) | Update a row of the table | |
| editRow(button) | Edit a row of the table | |
| deleteRow(button, permanent) | Delete a row of the table | |
| deleteRowByIndex(index, permanent) | Delete a row of the table by index | |
| deleteRows(indexes) | Delete multiple rows of the table | |
| restoreRow(button) | Restore a row of the table | |
| insertRow() | Insert a row of the table | |
| nextCell(editable) | Go to the next cell of the table | |
| prevCell(editable) | Go to the previous cell of the table | |
| nextRow() | Go to the next row of the table | |
| prevRow() | Go to the previous row of the table | |
| onKeyDown(event) | Allows to navigate through the table using the keyboard | |
| updateLinesSelected() | Update the lines selected | |
| displayIDs() | Display the IDs of the selected rows | |
| changeStatus(value) | Change the status of the selected rows | |
| header | anything above the table, next to the query bar | |
| search | the control the query bar searches with, when the page provides its own | |
| toolbar | the buttons of the dropdown a column header opens | |
| .with-config | add a configuration button to the table | |
| .fullscreen | update the height of the table to 85vh | |
| .no-actions | hide the actions column | |
| .no-query | hide the query | |
| .with-toolbar | rows are selected: the selection toolbar rises from the bottom of the table |
Attributes2
url
mmo-table.jhsan url to a json api or a json stringify object: {collection, repository, filters}
url
readonly
mmo-table.jhsif true, the table is readonly
readonly
Properties6
ViewDefault
staticreadonlyaccessormmo-table.jhs:125readonly
accessormmo-table.jhs:180Get the readonly of the table
- Type
boolean
url
accessormmo-table.jhs:197Get the url of the table
- Type
string
data
accessormmo-table.jhs:213Get the data of the table
- Type
array
fields
accessormmo-table.jhs:249Get the fields of the table
- Type
array
widthsKey
readonlyaccessormmo-table.jhs:369The key this table's column widths are remembered under: the id the page gave it, or the path of the collection it reads -- never the query, so a filter or another page keeps the same widths.
- Type
?string
Methods46
constructor()
mmo-table.jhs:116init()
mmo-table.jhs:129toggleConfig()
mmo-table.jhs:167Toggle the configuration of the table
setAPI(api)
mmo-table.jhs:230Set the API of the table
| api | object | - The API of the table |
updateSearch()
mmo-table.jhs:241Rebuild the query bar, after the schema or the fields it offers have changed.
| returns | void |
initColumnResize(view)
mmo-table.jhs:274Give a column's grip its drag gesture. Called by the header loop for every column it inserts.
| view | object | - the view of the field, one per header cell |
| returns | void |
resetColumnWidth(grip)
mmo-table.jhs:305Put a column back to the width its schema asked for, and forget what it was dragged to.
| grip | HTMLElement | - the grip of the column |
| returns | void |
resizeColumnByKey(event, grip)
mmo-table.jhs:316Resize the focused column from the keyboard: left and right by 16px, 4px with shift, Home back to the schema's width. Without this a column can only be resized with a pointer.
| event | KeyboardEvent | |
| grip | HTMLElement | - the grip of the column |
| returns | void |
setColumnWidth(th, width)
mmo-table.jhs:338Write a column's width where the header reads it from -- the field model, which the width binding renders -- and remember it for the next visit.
| th | HTMLElement | - the header cell |
| width | ?string | - a css width, or null to go back to what the schema asked for |
| returns | void |
indexOfField(path)
mmo-table.jhs:356The index of a field, from the data-key its header carries.
| path | string | - the field's path |
| returns | ?string | null when no field has that path |
getStoredWidths()
mmo-table.jhs:384The widths this table was left with, by field path.
| returns | object | empty when nothing was ever stored |
storeColumnWidth(path, width)
mmo-table.jhs:398Remember what a column was resized to, or forget it.
| path | string | - the field's path |
| width | ?string | - a css width, or null to drop it |
| returns | void |
deleteField(view)
mmo-table.jhs:419Delete a field from the table
| view | object | - The view of the field |
setApiSort(value)
mmo-table.jhs:431Set the sort of the table
| value | string | - The sort of the table |
setApiFields(value)
mmo-table.jhs:441Set the fields of the table
| value | string | - The fields of the table |
updateFieldsSort()
mmo-table.jhs:452Update the sort of the table
updateFields(view)
mmo-table.jhs:475Update the fields of the table
| view | object | - The view of the field |
reload()
mmo-table.jhs:535Reload the table
getRowIndex(tr)
mmo-table.jhs:609Get the index of the row
| tr | Element | - The row of the table |
| returns | number | The index of the row |
getRowTitle(tr)
mmo-table.jhs:623Return the text content of the first real column (the 3rd) (first is the line number, second id the checkbox)
| tr | Element | - The row of the table |
| returns | string | The text content of the first real column |
gotoTop()
mmo-table.jhs:630Go to the top of the table
gotoBottom()
mmo-table.jhs:638Go to the bottom of the table
print()
mmo-table.jhs:650Print the table
export(ext)
mmo-table.jhs:681Export the table
| ext | string | - The extension of the export |
bookmark()
mmo-table.jhs:694Bookmark the table
selectAll(selected)
mmo-table.jhs:706Select all the rows of the table
| selected | boolean | - Whether to select all the rows |
getSelectedIndex()
mmo-table.jhs:727Get the indexes of the selected rows
| returns | array | The indexes of the selected rows |
selectRow(input)
mmo-table.jhs:737Select a row of the table
| input | Element | - The input of the row |
focus()
mmo-table.jhs:756Focus the table This function is not called at all in the code at the moment, but it is here for future reference.
unfocus()
mmo-table.jhs:770Unfocus the table This function is not called at all in the code at the moment, but it is here for future reference.
setCurrent(td)
mmo-table.jhs:781Set the current cell of the table
| td | Element | - The cell of the table |
updateRow(tr)
mmo-table.jhs:808Update a row of the table
| tr | Element | - The row of the table |
editRow(button)
mmo-table.jhs:834Edit a row of the table
| button | Element | - The button of the row |
deleteRow(button, permanent)
mmo-table.jhs:850Delete a row of the table
| button | Element | - The button of the row |
| permanent = false | boolean | - Whether to permanently delete the row |
deleteRowByIndex(index, permanent)
mmo-table.jhs:870Delete a row of the table by index
| index | number | - The index of the row |
| permanent = false | boolean | - Whether to permanently delete the row |
deleteRows(indexes)
mmo-table.jhs:881Delete multiple rows of the table
| indexes | array | - The indexes of the rows |
restoreRow(button)
mmo-table.jhs:920Restore a row of the table
| button | Element | - The button of the row |
insertRow()
mmo-table.jhs:933Insert a row of the table
nextCell(editable)
mmo-table.jhs:1025Go to the next cell of the table
| editable = null | boolean | - Whether the cell is editable |
prevCell(editable)
mmo-table.jhs:1047Go to the previous cell of the table
| editable = null | boolean | - Whether the cell is editable |
nextRow()
mmo-table.jhs:1073Go to the next row of the table
prevRow()
mmo-table.jhs:1092Go to the previous row of the table
onKeyDown(event)
mmo-table.jhs:1112Allows to navigate through the table using the keyboard
| event | Event | - The event |
updateLinesSelected()
mmo-table.jhs:1181Update the lines selected
displayIDs()
mmo-table.jhs:1190Display the IDs of the selected rows
changeStatus(value)
mmo-table.jhs:1217Change the status of the selected rows
| value | string | - The status to change to |
Slots3
header
mmo-table.jhsanything above the table, next to the query bar
<slot name="header">
search
mmo-table.jhsthe control the query bar searches with, when the page provides its own
<slot name="search">
toolbar
mmo-table.jhsthe buttons of the dropdown a column header opens
<slot name="toolbar">
CSS hooks5
.with-config
mmo-table.jhsadd a configuration button to the table
.with-config
.fullscreen
mmo-table.jhsupdate the height of the table to 85vh
.fullscreen
.no-actions
mmo-table.jhshide the actions column
.no-actions
.no-query
mmo-table.jhshide the query
.no-query
.with-toolbar
mmo-table.jhsrows are selected: the selection toolbar rises from the bottom of the table
.with-toolbar