Divide the output results into two equal horizontal sections within the same HTML table

Question

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually splitting the records between two separate tables.

I am currently using AngularJS 1.1 and open to any solution that can achieve the desired outcome. Please refer to the attached screenshot for clarification:

https://i.sstatic.net/UH2KB.png

Feel free to reach out if you need further details or clarifications.

javascript html css angularjs html-table

Answer 1

Answer №1

One solution for this scenario could involve creating a custom directive with input parameters: items - representing all the input items, and size - indicating the number of rows in the left table.

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    $scope.items = [];
    for(var i = 0; i < 10; i++)
        $scope.items.push({head1:i, head2:i, head3:i});
    $scope.size = 6;
}])
.directive('tables', function(){
  return{
    restrict: 'E',
    scope: {
        size: '=',
        items: '='
    },
    controller: function($scope){
      $scope.$watch('size', function(){
        $scope.tables = [
            $scope.items.slice(0, $scope.size),
            $scope.items.slice($scope.size, $scope.items.length)
        ];
      });
    },
    template: `
      <table ng-repeat='table in tables' style='float:left'>
        <thead>
          <tr>
            <th ng-repeat='head in [1,2,3]'>Head {{head}}</th>            
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='item in table'>
            <td ng-repeat='(key, value) in item'>{{value}}</td>            
          </tr>
        </tbody>
      </table>`
  }
})

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller="ctrl">
    <div>
         size: <input type='text' ng-model='size'/>
    </div>
    <tables items='items' size='size'/>
</div>

Answer 2

One solution for this scenario could involve creating a custom directive with input parameters: items - representing all the input items, and size - indicating the number of rows in the left table.

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    $scope.items = [];
    for(var i = 0; i < 10; i++)
        $scope.items.push({head1:i, head2:i, head3:i});
    $scope.size = 6;
}])
.directive('tables', function(){
  return{
    restrict: 'E',
    scope: {
        size: '=',
        items: '='
    },
    controller: function($scope){
      $scope.$watch('size', function(){
        $scope.tables = [
            $scope.items.slice(0, $scope.size),
            $scope.items.slice($scope.size, $scope.items.length)
        ];
      });
    },
    template: `
      <table ng-repeat='table in tables' style='float:left'>
        <thead>
          <tr>
            <th ng-repeat='head in [1,2,3]'>Head {{head}}</th>            
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='item in table'>
            <td ng-repeat='(key, value) in item'>{{value}}</td>            
          </tr>
        </tbody>
      </table>`
  }
})

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller="ctrl">
    <div>
         size: <input type='text' ng-model='size'/>
    </div>
    <tables items='items' size='size'/>
</div>

Divide the output results into two equal horizontal sections within the same HTML table

Answer №1

Similar questions

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

How do I incorporate global typings when adding type definitions to an npm module?

Alignment of content layout across two wrapper elements

Learn the process of establishing a connection to a remote MongoDB server from an Angular-Spring application running on a separate server

Stable and persistent popup window that remains at the forefront in a Chrome extension

I am looking to enhance my JSON output using JavaScript

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Adjust the color of an SVG icon depending on its 'liked' status

Issue: AngularJS Injector Module Error

What should be done if an image is not wide enough to stretch it to match the width of the window?

Discontinuing the fieldset tab interface feature from a Dexterity content type

Manipulate JSON insertions and character replacements using JavaScript or Python

Reordering sections in a dynamic manner

Modify the color of the footer area and eliminate any underlines present

Redirect to a specific webpage depending on a certain condition

Issue with AngularJS Directive - ng-click not activating within the specified directive

Explore a JSON structure and identify the parent key of a specific key:value pair

Is it possible to extract external JSON data using JQuery's $.getJSON function?

Passing a value from an HTML template to a method within an Angular 4 component

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single