JSFiddle - React, Tailwind, and code Playground

by Jonathan S.

HTML

<div ng-app>
  <h3>Here's what I want it to be</h3>
  <table ng-controller="MainCtrl">
    <thead>
      <tr>
        <td rowspan=2>Movement</td>
        <td colspan=3>Products</td>
        <td rowspan=2>Supplier</td>
        <td rowspan=2>Cost</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>Quantity</td>
        <td>Condition</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan=2>Sell</td>
        <td>Cup</td>
        <td>4</td>
        <td>New</td>
        <td rowspan=2>XCLIENT</td>
        <td rowspan=2>$100</td>
      </tr>
      <tr>
        <td>Shirt</td>
        <td>10</td>
        <td>New</td>
      </tr>
      <tr>
        <td rowspan=2>Buy</td>
        <td>Cup</td>
        <td>2</td>
        <td>New</td>
        <td rowspan=2>XSUPPLIER</td>
        <td rowspan=2>$40</td>
      </tr>
      <tr>
        <td>Pants</td>
        <td>5</td>
        <td>New</td>
      </tr>
    </tbody>
  </table>
  <h4>This data isn't loaded from the controller, I'd like to know how to use ng-repead in this case</h4>

</div>

CSS

table,
th,
td {
  border: 1px solid black;
}

JavaScript

function MainCtrl() {
  var vm = this;
  vm.hello = 123;
  vm.transactions = [{
    id: 1,
    cost: 100,
    transaction_type: {
      id: 1,
      name: 'Sell'
    },
    client: {
      id: 2,
      name: 'XCLIENT'
    },
    invetory: [{
      id: 1,
      quantity: 4,
      product: {
        id: 1,
        name: 'Cup'
      },
      product_condition: {
        id: 2,
        name: 'New'
      }
    }, {
      id: 2,
      quantity: 10,
      product: {
        id: 2,
        name: 'Shirt'
      },
      product_condition: {
        id: 2,
        name: 'New'
      }
    }]
  }, {
    id: 2,
    cost: 40,
    transaction_type: {
      id: 2,
      name: 'Buy'
    },
    supplier: {
      id: 3,
      name: 'XSUPPLIER'
    },
    invetory: [{
      id: 1,
      quantity: 2,
      product: {
        id: 1,
        name: 'Cup'
      },
      product_condition: {
        id: 2,
        name: 'New'
      }
    }, {
      id: 2,
      quantity: 5,
      product: {
        id: 6,
        name: 'Pants'
      },
      product_condition: {
        id: 2,
        name: 'New'
      }
    }]
  }];
}