JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <button type="button" 
            class="btn btn-secondary"
            ng-click="select(null); selectTable()"
    >
      Выделить таблицу
    </button>
    <table class="table">
      <thead ng-click="select(null)">
        <tr>
          <th width="33%">Col 1</th>
          <th width="33%">Col 2</th>
          <th width="33%">Col 3</th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="row in rows">
          <td ng-repeat="item in row" ng-click="select(item)">
            <span ng-if="selected !== item">
              {{item.value}}
            </span>
            
            <input ng-if="selected === item" ng-model="item.value" />
          </td>
        </tr>         
      </tbody>
    </table>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var myApp = angular.module('myApp', []);


var MyCtrl = myApp.controller('MyCtrl', function MyCtrl($scope) {
		$scope.selected = null;
    $scope.rows = [
    	[	{	value: 1 }, {	value: 2 }, {	value: 3 } ],
      [	{	value: 4 }, {	value: 5 }, {	value: 6 } ],
      [	{	value: 7 }, {	value: 8 }, {	value: 9 } ],
      [	{	value: 10 }, {	value: 11 }, {	value: 12 } ]
    ]
    
    $scope.select = select;
    $scope.selectTable = selectTable;
    
    function select( item ) {
    	$scope.selected = item;
    }
    
    function selectTable () {
      var table = document.querySelector('table')
    	var selection = window.getSelection();
      var range = document.createRange();
      
      range.selectNodeContents(table);
      selection.removeAllRanges();
      selection.addRange(range);
    }
});