Better styling for the table (grid lines etc.)

src/Volo.Abp.Identity.Web/Areas/Identity/Views/Users/Index.cshtml

@@ -9,19 +9,15 @@
     <script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
 }
 
-<h2>Users</h2>
-
-<!-- Button trigger modal -->
-<button type="button" class="btn btn-primary create-user" data-toggle="modal">
-    Create User
-</button>
-
-<!-- Modal -->
-<div class="modal fade" id="createUpdateUserModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-
-        </div>
+<div class="row">
+    <div class="col-md-6">
+        <h2>Users</h2>
+    </div>
+    <div class="col-md-6 text-right">
+        <!-- Button trigger modal -->
+        <button type="button" class="btn btn-primary create-user" data-toggle="modal">
+            Create User
+        </button>
     </div>
 </div>
 
@@ -34,4 +30,13 @@
         <th>Phone Number</th>
     </tr>
     </thead>
-</table>
+</table>
+
+<!-- Modal -->
+<div class="modal fade" id="createUpdateUserModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+
+        </div>
+    </div>
+</div>

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.css

@@ -1,4 +1,8 @@
 .dataTable {
   width: 100% !important;
   border-spacing: 0 !important;
+}
+.table td,
+.table th {
+  padding: 8px 10px;
 }

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.js

@@ -2,8 +2,11 @@
     var _identityUserAppService = volo.abp.identity.identityUser;
 
     var dataTable = $('#IdentityUsersTable').DataTable({
-        processing: true,
+        paging: true,
         serverSide: true,
+        processing: true,
+        responsive: true,
+        order: [[1, "asc"]],
         ajax: function (requestData, callback, settings) {
             var inputFilter = {};
 
@@ -38,7 +41,6 @@
                 });
             }
         },
-        responsive: true,
         columnDefs: [
             {
                 targets: 0,
@@ -48,7 +50,7 @@
                 defaultContent: '',
                 render: function (list, type, record, meta) {
                     return '<div class="dropdown">' +
-                        '<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                         'Actions' +
                         '</button>' +
                         '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">' +

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.less

@@ -2,3 +2,7 @@
     width: 100% !important;
     border-spacing: 0 !important;
 }
+
+.table td, .table th {
+    padding: 8px 10px;
+}

src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/users/index.min.css

@@ -1 +1 @@
-.dataTable{width:100% !important;border-spacing:0 !important;}
+.dataTable{width:100% !important;border-spacing:0 !important;}.table td,.table th{padding:8px 10px;}