1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue
new file mode 100644
index 00000000000..a2d68972519
--- /dev/null
+++ b/app/assets/javascripts/admin/users/components/users_table.vue
@@ -0,0 +1,63 @@
+<script>
+import { GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const DEFAULT_TH_CLASSES =
+  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
+const thWidthClass = width => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
+
+export default {
+  components: {
+    GlTable,
+  },
+  props: {
+    users: {
+      type: Array,
+      required: true,
+    },
+    paths: {
+      type: Object,
+      required: true,
+    },
+  },
+  fields: [
+    {
+      key: 'name',
+      label: __('Name'),
+      thClass: thWidthClass(40),
+    },
+    {
+      key: 'projectsCount',
+      label: __('Projects'),
+      thClass: thWidthClass(10),
+    },
+    {
+      key: 'createdAt',
+      label: __('Created on'),
+      thClass: thWidthClass(15),
+    },
+    {
+      key: 'lastActivityOn',
+      label: __('Last activity'),
+      thClass: thWidthClass(15),
+    },
+    {
+      key: 'settings',
+      label: '',
+      thClass: thWidthClass(20),
+    },
+  ],
+};
+</script>
+
+<template>
+  <div>
+    <gl-table
+      :items="users"
+      :fields="$options.fields"
+      :empty-text="s__('AdminUsers|No users found')"
+      show-empty
+      stacked="md"
+    />
+  </div>
+</template>