how to make table as show in image? - css

Question

I am trying to make table or grid view in ionic framework.I am able to make that table but It is not looking same what I am required please check my table view in image .
here is my code .Actually I have also header "Invoice#" and "account Name" they should become background gray .Actually I saw if we take two column in row it take 50% 50% width of window .But when there is 3 column column take 33.33 % width But in my case they are not able to take where I am doing wrong Actually I am generating column dynamically Now it is two but may be later five .I need they will take equal space of total width .is this possible to add "+" in last column ?
here is code
<div class="row">
<div ng-repeat="d in data | filter:{checked: true}">
<div class="col">{{d.label}}</div>
<div class="row" ng-repeat="column in displayData">
<div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
</div>
</div>
</div>
http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview

Answer 1

Here's a working version of your Plunker. To see the columns added and removed, click the gear icon in the header right.
Plunker
To get your grid to layout properly, you can't nest your repeats. That means you have to slightly change your ng-show to observe the checked values on the data model directly.
In it's most basic form, it would look like this:
<div class="row">
<div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
<div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>
You'll notice that Ionic automatically handles making the grid full width and when properly laid out, it will automatically evenly space your columns. That's because it uses flexbox. That also allows you to tell specific columns how much space they should use. The remaining columns will naturally even distribute to take up the rest of the space. In the demo, I added a column for the gear and the details buttons and gave them col-10 class. This will force these columns to take up 10% of the screen width. For more on how the grid works in Ionic read the docs here.
I also noted that you seemed to have lots of functions where you're trying to do things like manage how the checked values are updated. Stop doing that. That's the beauty of AngularJS and the ng-model directive. If the property doesn't exist on the scope, Angular just creates it for you, and if it does exist, it just updates it. For example, notice how simply I made your search work by setting the ng-model value and passing that to the filter. I didn't have to create a $scope.query because ngModel does that for me. Similarly, I removed all of the functions and references to the 'checked' values from your controller and everything just works because ngModel automatically adds the checked property to the data model.