JSFiddle - React, Tailwind, and code Playground

by Bharat Sewani

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 <div ng-app="myApp" ng-controller="personCtrl">
        <table class="table">
            <thead>
                <th>
                    UserId
                </th>
                <th>
                    UserName
                </th>
                <th>
                    Roll No.
                </th>
            </thead>
            <tbody ng-repeat="user in users">
                <tr ng-click="isOpen=!isOpen">
                    <td>
                        {{user.userId}}
                    </td>
                    <td>
                        {{user.userName}}
                    </td>
                    <td>
                        {{user.rollNo}}
                    </td>
                </tr>
                <tr ng-if="isOpen" class="userDetails">
                    <td colspan="3">
                        {{user.userDetails}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

JavaScript

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.users = [{'userId':1, 'userName':'Bharat', 'rollNo': 14, 'userDetails':'Lorem Ipsum is simply dummy text of the printing and typesetting industry' }, {'userId':2, 'userName':'Raman', 'rollNo': 20, 'userDetails':'Lorem Ipsum is simply dummy text of the printing and typesetting industry'}, {'userId':3, 'userName':'Yogesh', 'rollNo': 24, 'userDetails':'Lorem Ipsum is simply dummy text of the printing and typesetting industry'}]
});