index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Hello TablesController!{% endblock %}

{% block body %}
<div class="row">
    <div class="col-lg-12 jumbotron">
        <h1>Azure Table storage</h1>
        <p class="lead">You can use Table storage to store flexible datasets like user data for web applications, address books, device information, or other types of metadata your service requires. You can store any number of entities in a table, and a storage account may contain any number of tables, up to the capacity limit of the storage account.</p>
    </div>
</div>
<div class="row">
    <div class="col">
        <form action="/add/entity" method="post" class="form-inline">
        <label class="sr-only" for="firstName">First Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="firstName" name="firstName" placeholder="First name">
        <label class="sr-only" for="lastName">Last Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="lastName" name="lastName" placeholder="Last name">
        <button type="submit" class="btn btn-primary mb-2">Submit</button>
        </form>
    </div>
</div>
<div class="row" style="margin-top:10px">
     {% for entity in entities %}
        <div class="col-sm-3" style="margin-bottom:5px">
            <div class="list-group">
                <a hred="#" class="list-group-item list-group-item-action active">{{entity.getPartitionKey()}}</a>
                <a href="#" class="list-group-item list-group-item-action"><strong>First name</strong>: {{entity.getProperty("firstName").getValue()}}</a>
                <a href="#" class="list-group-item list-group-item-action"><strong>Last name</strong>: {{entity.getProperty("lastName").getValue()}}</a>
            </div>          
        </div>
      {% endfor %}
</div>
{% endblock %}