new table fix

src/App.vue

@@ -26,6 +26,7 @@ import MdField from "vue-material/dist/components/MdField";
 import MdSteppers from "vue-material/dist/components/MdSteppers";
 import MdTable from "vue-material/dist/components/MdTable";
 import MdContent from "vue-material/dist/components/MdContent";
+import MdRipple from "vue-material/dist/components/MdRipple";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
@@ -41,6 +42,7 @@ Vue.use(MdField);
 Vue.use(MdSteppers);
 Vue.use(MdTable);
 Vue.use(MdContent);
+Vue.use(MdRipple);
 
 import TabsMenu from "@/components/TabsMenu.vue";
 import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";

src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <md-dialog :md-active.sync="showPlayerDialog">
+    <md-dialog :md-active.sync="showPlayerDialog" v-if="player!==null">
       <div class="md-layout md-alignment-bottom-center"  style="z-index: 1">
         <div class="md-layout-item md-size-5 md-small-hide"/>
         <div class="md-layout-item rounded-and-colored md-size-60 md-small-size-90">

src/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue

@@ -1,10 +1,5 @@
 <template>
-  <md-table-row v-on:click="openPEI()" class="clickable">
-    <md-table-cell md-label="Очки">{{ player['score'] }}</md-table-cell>
-    <md-table-cell md-label="Никнейм">{{ player['name'] }}</md-table-cell>
-    <md-table-cell md-label="Время">{{ player['duration'] }}</md-table-cell>
     <PlayerExtendedInfo ref="pei" :player="player"/>
-  </md-table-row>
 </template>
 
 <script>

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -39,14 +39,14 @@
           <div>
             <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
             <hr width="30%">
-            <md-table md-height="10">
-              <md-table-row>
-                <md-table-head>Очки</md-table-head>
-                <md-table-head>Никнейм</md-table-head>
-                <md-table-head>Наиграно</md-table-head>
+            <md-table v-model="players" md-sort="score" md-sort-order="desc" md-card md-fixed-header @md-selected="openPlayer" md-height="150px">
+              <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
+                <md-table-cell style="font-family: tf2secondary" md-label="Имя" md-sort-by="name">{{ item.name }}</md-table-cell>
+                <md-table-cell style="font-family: tf2secondary" md-label="Очки" md-sort-by="score">{{ item.score }}</md-table-cell>
+                <md-table-cell style="font-family: tf2secondary" md-label="Наиграно" md-sort-by="duration">{{ item.duration }}</md-table-cell>
               </md-table-row>
-              <PlayerTableInfo v-for="player in serverData['players']" :key="player['steam']['steam2']" :player="player"/>
             </md-table>
+            <PlayerExtendedInfo ref="pei" :player="selected_player"/>
           </div>
         </div>
       </div>
@@ -57,20 +57,23 @@
 <script>
 import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
 import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue";
-import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue";
+import PlayerExtendedInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue";
 
 export default {
   name: "ServerFullInfo",
-  components: {PlayerTableInfo, TerminalSvg, SteamSvg},
+  components: {PlayerExtendedInfo, TerminalSvg, SteamSvg},
   props: {
     serverData: Object,
   },
   data: () => ({
     showServerDialog: false,
-    expandPlayers: false
+    expandPlayers: false,
+    players: [{score:0, name:"", duration:""}],
+    selected_player: null
   }),
   methods: {
     openFIF() {
+      this.players = this.serverData['players'];
       this.showServerDialog = true;
     },
     closeFIF() {
@@ -82,6 +85,10 @@ export default {
         case 'workshop': return window.open(this.serverData['workshop'], '_blank').focus();
         case 'fastdl': return window.open(`https://tf2.pblr-nyk.pro/tf/maps/${this.serverData['map']}.bsp.bz2`, '_blank').focus();
       }
+    },
+    openPlayer(item) {
+      this.selected_player = item;
+      this.$refs.pei.showPlayerDialog = true;
     }
   }
 }