I rightly do not know what this all is

composer.json

@@ -18,6 +18,7 @@
     "symfony/uid": "^7.1",
     "php-curl-class/php-curl-class": "^9.19",
     "symfony/cache": "^7.1",
-    "phpoffice/phpspreadsheet": "^2.1"
+    "phpoffice/phpspreadsheet": "^2.1",
+    "symfony/polyfill-iconv": "^1.31"
   }
 }

src/js/pages/keys/index.ts

@@ -6,6 +6,7 @@ import { Tab } from 'bootstrap';
 import {init as initImport} from "./import";
 import {init as initTable} from "./table";
 import {init as initUserLists} from "./userlists";
+import {initShare} from "./share";
 
 document.addEventListener('DOMContentLoaded', () => {
     const triggerTabList = document.querySelectorAll('#key-tab button')
@@ -21,4 +22,5 @@ document.addEventListener('DOMContentLoaded', () => {
     initImport();
     initTable();
     initUserLists();
+    initShare();
 })

src/js/pages/keys/share.ts

@@ -0,0 +1,24 @@
+import DataTable from "datatables.net-bs5";
+
+export function initShare() {
+    const table = document.querySelector<HTMLTableElement>('#shared-users-table');
+    if (!table) {
+        return;
+    }
+
+    new DataTable(table, {
+        columns: [
+            {
+                name: '',
+                data: 'icon',
+                searchable: false,
+                orderable: false,
+            },
+            {
+                name: 'Name',
+                data: 'name',
+            }
+        ],
+        order: [ [1, "desc"] ]
+    });
+}

src/js/pages/keys/table.ts

@@ -68,7 +68,8 @@ export function init() {
         columns: [
             {
                 data: 'gamePicture',
-                searchable: false
+                searchable: false,
+                orderable: false
             },
             {
                 data: 'name',
@@ -82,7 +83,6 @@ export function init() {
                 searchable: false,
             }
         ],
-        ordering: false,
         order: [ [1, 'asc'] ],
         createdRow(row: Node, data: any) {
             const tableRow = <HTMLTableRowElement>row;

src/templates/pages/key-manager.php

@@ -62,10 +62,10 @@ $this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
         <table class="table table-striped key-table">
             <thead>
                 <tr>
-                    <td></td>
-                    <td>Game Name</td>
-                    <td>Amount Keys</td>
-                    <td>IGDB State</td>
+                    <th></th>
+                    <th>Game Name</th>
+                    <th>Amount Keys</th>
+                    <th>IGDB State</th>
                 </tr>
             </thead>
             <tbody></tbody>
@@ -86,9 +86,9 @@ $this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
             <table class="table table-striped w-100" id="import-attribute-table">
                 <thead>
                     <tr>
-                        <td>Column</td>
-                        <td>Header</td>
-                        <td>Attribute</td>
+                        <th>Column</th>
+                        <th>Header</th>
+                        <th>Attribute</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
@@ -105,11 +105,21 @@ $this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
         </h2>
 
         <label for="share-user-search">Search for a user...</label>
-        <div class="input-group">
+        <div class="input-group mb-3">
             <input type="text" class="form-control" id="share-user-search" placeholder="">
             <button class="btn btn-primary js--search-shared-user">Search</button>
         </div>
 
+        <h3>Users shared to</h3>
+        <table id="shared-users-table" class="table table-striped w-100">
+            <thead>
+                <tr>
+                    <th width="2.4rem"></th>
+                    <th>Name</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
 
     </div>
 </div>