JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/1.0.0/css/ionic.min.css">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<body ng-app="app">
    <ion-pane ng-controller="myapp">
       <ion-header-bar class="item-input-inset">
            <label class="item-input-wrapper">
                <i class="icon ion-ios-search placeholder-icon"></i>
                <input type="search" placeholder="Search" ng-model="model.search">
            </label>
        </ion-header-bar>
      <ion-content class="padding" overflow-scroll='false'>
      <ion-scroll zooming="false" direction="xy" style="width:800px; height:500px;" locking="true">
      <div style="width:1200px; height:800px;">
        <div class="lead_header_row">
            <div class="lead_col">Date of Enquiry</div>
            <div class="lead_col">Source of Enquiry</div>
            <div class="lead_col">Client's Name</div>
            <div class="lead_col">Contact Number</div>
            <div class="lead_col">Source of Enquiry</div>
            <div class="lead_col">Client's Name</div>
            <div class="lead_col">Contact Number</div>
            <div class="lead_col">Source of Enquiry</div>
            <div class="lead_col">Client's Name</div>
            <div class="lead_col">Contact Number</div>
        </div>        
        <!--<div class="lead_row" ng-repeat="data in testdata | filter: model.search">        -->
        <div class="lead_row" ng-repeat="data in nestedTestdata.leadlist | filter: model.search" >
            
            <div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
            <div class="lead_col">{{data.submission_value.source}}</div>
            <div class="lead_col">{{data.submission_value.full_name}}</div>
            <div class="lead_col">{{data.submission_value.phone}}</div>    
            <div class="lead_col">{{data.submission_value.source}}</div>
            <div...

CSS

/* Styles here */
        .lead_header_row{display:flex;align-items: stretch;min-width:1320px;}
        .lead_row{display:flex;align-items: stretch;min-width:1320px;}
        .lead_row:nth-child(2n){background-color: #edf3fd;}
        .lead_col{padding:5px;width:120px;}
        .lead_header_row .lead_col{font-size:14px;color:#333;}

JavaScript

angular.module('app', ['ionic'])

.controller('myapp',function($scope){
  $scope.nestedTestdata = {
                "leadlist" : [{
                    "submitted_date": "01-01-2160",
                    "submission_value": {
                        "full_name": "Full Name ",
                        "phone": "This is test data.",
                        "source": "I hate you"
                    }
                },
                    {
                        "submitted_date": "01-01-2015",
                        "submission_value": {
                            "full_name": "full name",
                            "phone": "phone.",
                            "source": "I really really hate you"
                        }
                    },
                    {
                        "submitted_date": "01-01-2016",
                        "submission_value": {
                            "full_name": "I am awesome",
                            "phone": "HP phone.",
                            "source": "I hate you"
                        }
                    }]
            };                         
});