CODEWITHSUNDEEP
htmlangular
Josip Maričević
Josip Maričević

Reputation: 417

How to make table with 4 cells in row, in html using angularJS

I have to make a table, where the first cell in a row is the name of the store, and other cells are names of terminals related to that store. Below you can see how it looks now. Stores is a list of stores, where every store has a list of terminals.

        <tbody>
          <tr *ngFor="let store of stores; let i = index">
            <td>
              <label>{{ store.name }}</label
              >
            </td>
            <td *ngFor="let terminal of store.terminals">
              <label>{{ terminal.name }}</label
              >
            </td>
          </tr>
        </tbody>

It's working perfectly until there aren't too many terminals. Now I need to break that row in more of them.

Now the table looks like this:

Store1   Terminal1   Terminal2   terminal3   terminal4   Terminal5   Terminal6   terminal7   terminal8
Store2   Terminal1   Terminal2   terminal3   terminal4   Terminal5   Terminal6   terminal7   terminal8

And I need to make it look like this:

Store1   Terminal1   Terminal2   terminal3   terminal4   
         Terminal5   Terminal6   terminal7   terminal8
Store2   Terminal1   Terminal2   terminal3   terminal4   
         Terminal5   Terminal6   terminal7   terminal8

I thought, that I could make another table, only for terminals, but that didn't work as I thought it would.

Upvotes: 0

Views: 45

Answers (1)

Sitaram
Sitaram

Reputation: 448

Instead of repeating the "td" with terminal data. Add a div inside that td and repeat the terminal data inside that.

<table>
   <tbody>
      <tr *ngFor="let store of stores; let i = index">
        <td>
          <label >{{ store.name }}</label>
        </td>
        <td>
            <div class="terminals">
              <span class="terminals_value" *ngFor="let terminal of store.terminals">{{ terminal.name }}</span></div>
        </td>
      </tr>
    </tbody>
  </table>

Add the css to style the div block as appropriate

.terminals{
  width:500px;
  display:flex;
  flex-wrap: wrap;
}

.terminals_value{
  width:100px;
  padding:2px;
}

I have created a stackblitz project as a solution, you can check it out here - https://stackblitz.com/edit/table-structure

Upvotes: 1

Related Questions