<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Source: components/Grid.component.js</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Source: components/Grid.component.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>import {Component} from '../../lib/vues6.js' /** * An enum representing the different grid cell renderer types for the shared grid. * @type {object} */ const GridCellRenderType = { Simple: Symbol('simple'), HTML: Symbol('html'), Component: Symbol('component'), } export {GridCellRenderType} const template = ` <div class="component-app-grid"> <table> <tr> <th v-if="show_row_numbers">#</th> <th v-for="col of column_defs" :title="col.title || ''">{{ col.header || '' }}</th> </tr> <tr v-for="(row, idx) of data"> <td v-if="show_row_numbers">{{ idx + 1 }}</td> <td v-for="col of column_defs"> <div v-if="!col.type || col.type === GridCellRenderType.Simple">{{ row[col.key] }}</div> <div v-if="col.type === GridCellRenderType.HTML" v-html="col.renderer(row[col.key], row)"></div> <div v-if="col.type === GridCellRenderType.Component"> <component :is="col.component" :row="row" :col="col" :idx="idx" @click="on_col_click(col, $event)"></component> </div> </td> </tr> </table> </div> ` /** * Shared grid component used to show tables in various interfaces. * @extends Component */ class GridComponent extends Component { static get selector() { return 'app-grid' } static get template() { return template } static get props() { return [ 'show_row_numbers', 'column_defs', 'data', ] } GridCellRenderType = GridCellRenderType /** * Called when the component is instantiated. * @return {Promise<void>} */ async vue_on_create() { } /** * Called when the component renderer emits a click event, to pass it along to the column definition. * @param {object} col - the column definition * @param {object} row - the row clicked * @param {object} passcol - the column emitted from the component */ on_col_click(col, [row, passcol]) { col.on_click(row, passcol) } } export default GridComponent </code></pre> </article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-routing.html">routing</a></li><li><a href="module-util.html">util</a></li></ul><h3>Classes</h3><ul><li><a href="AddPlayersComponent.html">AddPlayersComponent</a></li><li><a href="DraftBoardComponent.html">DraftBoardComponent</a></li><li><a href="GridActionButtonComponent.html">GridActionButtonComponent</a></li><li><a href="GridComponent.html">GridComponent</a></li><li><a href="LeagueComponent.html">LeagueComponent</a></li><li><a href="LinkComponent.html">LinkComponent</a></li><li><a href="module-routing-Router.html">Router</a></li><li><a href="MyTeamComponent.html">MyTeamComponent</a></li><li><a href="ScoresComponent.html">ScoresComponent</a></li><li><a href="TopLevelComponent.html">TopLevelComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#GridCellRenderType">GridCellRenderType</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.5</a> on Sun Oct 25 2020 12:32:18 GMT-0500 (Central Daylight Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>