demo/rowheight.html

<!doctype html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>LineUp Builder Test</title>

    <link href="./LineUpJS.css" rel="stylesheet" />
    <link href="./demo.css" rel="stylesheet" />
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="./LineUpJS.js"></script>

    <script>
      window.onload = function () {
        const arr = [];
        const cats = ['c1', 'c2', 'c3'];
        for (let i = 0; i < 100; ++i) {
          arr.push({
            a: Math.random() * 10,
            d: 'Row ' + i,
            cat: cats[Math.floor(Math.random() * 3)],
            cat2: cats[Math.floor(Math.random() * 3)],
          });
        }

        const builder = LineUpJS.builder(arr);

        // manually define columns
        builder
          .column(LineUpJS.buildStringColumn('d').label('Label').width(100))
          .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
          .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
          .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'))
          .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('gray').label('test'))
          .rowHeight(50, 2)
          .groupRowHeight(100, 5);

        builder.defaultRanking();

        const lineup = builder.build(document.body);
      };
    </script>
  </body>
</html>