Dynamically table columns and rows [Angular 6 + Bootstrap 3]

Question

I need to create tables with dynamically columns and rows. I have an array of objects, which I need to present in table. But table need to be presented in 3 columns. For example:

        var listItems = [
        { name: 'name1', code: 'code1'},
        { name: 'name2', code: 'code2' },
        { name: 'name3', code: 'code3' },
        { name: 'name4', code: 'code4' }
    ];

And table will look sth like:
[name | code] [name | code] [name | code]
name1 code1 name3 code3 name4 code4
name2 code2

What wil be the best solution?

ssuperczynski · Accepted Answer · 2018-10-11 14:28:10Z

4

If items in the array are uniform then you can iterate over the keys.

const list_items = [{name:'abc',code:'123'},{name:'def',code:'456'}];

let keys = Object.keys(list_items[0]); // Get the column names

<table>
  <thead>
    <th *ngFor = 'let key of keys'>{{key}}</th>
  <thead>
  <tbody>
    <tr *ngFor = 'let item of list_items'>
      <td *ngFor = 'let key of keys'>{{item[key]}}</td>
    </tr>
  </tbody>
</table>

edited Oct 11, 2018 at 14:28

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

answered Oct 11, 2018 at 6:57

vignesh nithyanandan

616 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wojciech Over a year ago

Thanks, but my problem is how to set this list into dynamic table in 3 columns?

ssuperczynski Over a year ago

@Wojciech what do you mean by dynamic?

Wojciech Over a year ago

For example: when you'll have 2 items - you shows only two columns. When you'll have 8 items, you shows 3 columns (3 rows, 3 rows and 2 rows). For 9 items will be 3 columns (3 rows, 3 rows, 3 rows), and so on

Collectives™ on Stack Overflow

Dynamically table columns and rows [Angular 6 + Bootstrap 3]

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related