examples/tables.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../dist/css/sprintly-ui.css" />
    <link rel="stylesheet" href="./example.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../node_modules/react/dist/react-with-addons.js"></script>
    <script src="../node_modules/react/dist/JSXTransformer.js"></script>
    <script src="../dist/js/sprintly-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.1/lodash.min.js"></script>
  </head>
  <body>
    <style>
    </style>

    <div id="main">
      <div class="example__wrapper">
        <h1>Table Components</h1>
          <p><a href="./index.html">Home</a></p>
          <h2 class="example__title">Sortable Table</h2>
          <p>* sorting in this example is implemented via utils/group_and_sort.js.</p>
          <div id="sortable"></div>
      </div>
    </div>

    <script type="text/jsx">
      (function(){
      var genItem = function(prodId, prodName, num, size, type, user) {
        return {
          product: {
            id: prodId,
            name: prodName
          },
          number: num,
          score: size,
          type: type,
          title: "Test item #" + num,
          tags: ['test', 'feature', 'release-candidate', 'sprint33'],
          created_by: {first_name: user},
          created: new Date()
        };
      };

      this.collection = [
        (genItem(1, 'Product 1', 4, 'L', 'story', 'Amy A.')),
        (genItem(2, 'Product 2', 3, '~', 'defect', 'Beth B.')),
        (genItem(3, 'Product 2', 2, 'S', 'task', 'Cara C.')),
        (genItem(4, 'Product 1', 1, 'M', 'test', 'Darah D.'))
      ];

      var sort = function(tableType, prop, dir) {
        var coll = this.collection;
        this.collection = SprintlyUI.GroupSort.groupSort(coll, prop, dir);
        render();
      }

      var render = function () {
        React.render(
          <SprintlyUI.SortableTable
            key='backlog-table'
            tableType='backlog'
            label='product backlog'
            collection={this.collection}
            columnNames={['product', 'number', 'size', 'title', 'tags', 'created by', 'created']}
            onSortCollection={_.bind(sort, this)}
            rowsExpand={true}
            modelChangerUtilities={{}}
            navigatorUtility={{}}
          />,
          document.getElementById("sortable")
        );
      };
      render();
    })()
    </script>

  </body>
</html>