examples/advanced.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Grid.js Vue Component Test</title>
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import NestedHeader from './advanced/nested-header.mjs'
      import ForceRender from './advanced/force-render.mjs'
      import VirtualDom from './advanced/virtual-dom.mjs'
      import MultiColumnSort from './advanced/multi-column-sort.mjs'
      import CustomSort from './advanced/custom-sort.mjs'
      import StockMarket from './advanced/stock-market.mjs'
      import Events from './advanced/events.mjs'
      import VueEvents from './advanced/vue-events.mjs'
      import GlobalEventBus from './advanced/global-event-bus.mjs'

      new window.Vue({
        el: '#app',
        name: 'GridTestAdvanced',
        components: {
          NestedHeader,
          ForceRender,
          VirtualDom,
          MultiColumnSort,
          CustomSort,
          StockMarket,
          Events,
          VueEvents,
          GlobalEventBus
        },
        template: `
          <div>
            <div>
              <h2>Nested Header</h2>
              <nested-header></nested-header>
            </div>

            <div>
              <h2>Force Render</h2>
              <p>This component is innately reactive and updates itself when you change the component's data or options in Vue. Interacting with the Grid.js instance directly should not be necessary but remains optional, as this implementation demonstrates.</p>
              <force-render></force-render>
            </div>

            <div>
              <h2>Virtual DOM</h2>
              <virtual-dom></virtual-dom>
            </div>

            <div>
              <h2>Multi-column Sort</h2>
              <multi-column-sort></multi-column-sort>
            </div>

            <div>
              <h2>Custom Sort</h2>
              <custom-sort></custom-sort>
            </div>

            <div>
              <h2>Stock Market</h2>
              <stock-market></stock-market>
            </div>

            <div>
              <h2>Events</h2>
              <events></events>
            </div>

            <div>
              <h2>Vue Events</h2>
              <vue-events></vue-events>
            </div>

            <div>
              <h2>Global Event Bus</h2>
              <global-event-bus></global-event-bus>
            </div>
          </div>
        `
      })
    </script>
  </body>
</html>