diff --git a/src/resources/lang/en/ui.php b/src/resources/lang/en/ui.php
--- a/src/resources/lang/en/ui.php
+++ b/src/resources/lang/en/ui.php
@@ -96,6 +96,7 @@
             . " Please note that this action cannot be undone.",
         'dns-verify' => "Domain DNS verification sample:",
         'dns-config' => "Domain DNS configuration sample:",
+        'list-empty' => "There are no domains in this account.",
         'namespace' => "Namespace",
         'spf-whitelist' => "SPF Whitelist",
         'spf-whitelist-text' => "The Sender Policy Framework allows a sender domain to disclose, through DNS, "
@@ -453,7 +454,6 @@
         'discount-title' => "Account discount",
         'distlists' => "Distribution lists",
         'domains' => "Domains",
-        'domains-none' => "There are no domains in this account.",
         'ext-email' => "External Email",
         'finances' => "Finances",
         'greylisting' => "Greylisting",
@@ -461,6 +461,7 @@
             . "is temporarily rejected. The originating server should try again after a delay. "
             . "This time the email will be accepted. Spammers usually do not reattempt mail delivery.",
         'list-title' => "User accounts",
+        'list-empty' => "There are no users in this account.",
         'managed-by' => "Managed by",
         'new' => "New user account",
         'org' => "Organization",
@@ -492,7 +493,6 @@
         'subscriptions' => "Subscriptions",
         'subscriptions-none' => "This user has no subscriptions.",
         'users' => "Users",
-        'users-none' => "There are no users in this account.",
     ],
 
     'wallet' => [
diff --git a/src/resources/lang/fr/ui.php b/src/resources/lang/fr/ui.php
--- a/src/resources/lang/fr/ui.php
+++ b/src/resources/lang/fr/ui.php
@@ -70,6 +70,7 @@
     'domain' => [
         'dns-verify' => "Exemple de vérification du DNS d'un domaine:",
         'dns-config' => "Exemple de configuration du DNS d'un domaine:",
+        'list-empty' => "Il y a pas de domaines dans ce compte.",
         'namespace' => "Espace de noms",
         'verify' => "Vérification du domaine",
         'verify-intro' => "Afin de confirmer que vous êtes bien le titulaire du domaine, nous devons exécuter un processus de vérification avant de l'activer définitivement pour la livraison d'e-mails.",
@@ -405,7 +406,6 @@
         'discount-title' => "Rabais de compte",
         'distlists' => "Listes de Distribution",
         'domains' => "Domaines",
-        'domains-none' => "Il y a pas de domaines dans ce compte.",
         'ext-email' => "E-mail externe",
         'finances' => "Finances",
         'greylisting' => "Greylisting",
@@ -414,6 +414,7 @@
             . " Le serveur d'origine doit réessayer après un délai cette fois-ci, le mail sera accepté."
             . " Les spammeurs ne réessayent généralement pas de remettre le mail.",
         'list-title' => "Comptes d'utilisateur",
+        'list-empty' => "Il n'y a aucun utilisateur dans ce compte.",
         'managed-by' => "Géré par",
         'new' => "Nouveau compte d'utilisateur",
         'org' => "Organisation",
@@ -440,7 +441,6 @@
         'subscriptions' => "Subscriptions",
         'subscriptions-none' => "Cet utilisateur n'a pas de subscriptions.",
         'users' => "Utilisateurs",
-        'users-none' => "Il n'y a aucun utilisateur dans ce compte.",
     ],
 
     'wallet' => [
diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -240,143 +240,35 @@
             <div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
                 <div class="card-body">
                     <div class="card-text">
-                        <table class="table table-sm table-hover mb-0">
-                            <thead>
-                                <tr>
-                                    <th scope="col">{{ $t('domain.namespace') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord">
-                                    <td>
-                                        <svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
-                                        <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
-                                    </td>
-                                </tr>
-                            </tbody>
-                            <tfoot class="table-fake-body">
-                                <tr>
-                                    <td>{{ $t('user.domains-none') }}</td>
-                                </tr>
-                            </tfoot>
-                        </table>
+                        <domain-list :list="domains" class="mb-0"></domain-list>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
                 <div class="card-body">
                     <div class="card-text">
-                        <table class="table table-sm table-hover mb-0">
-                            <thead>
-                                <tr>
-                                    <th scope="col">{{ $t('form.primary-email') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord">
-                                    <td>
-                                        <svg-icon icon="user" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon>
-                                        <router-link v-if="item.id != user.id" :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
-                                        <span v-else>{{ item.email }}</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                            <tfoot class="table-fake-body">
-                                <tr>
-                                    <td>{{ $t('user.users-none') }}</td>
-                                </tr>
-                            </tfoot>
-                        </table>
+                        <user-list :list="users" :current="user" class="mb-0"></user-list>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists">
                 <div class="card-body">
                     <div class="card-text">
-                        <table class="table table-sm table-hover mb-0">
-                            <thead>
-                                <tr>
-                                    <th scope="col">{{ $t('distlist.name') }}</th>
-                                    <th scope="col">{{ $t('form.email') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="list in distlists" :key="list.id" @click="$root.clickRecord">
-                                    <td>
-                                        <svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon>
-                                        <router-link :to="{ path: '/distlist/' + list.id }">{{ list.name }}</router-link>
-                                    </td>
-                                    <td>
-                                        <router-link :to="{ path: '/distlist/' + list.id }">{{ list.email }}</router-link>
-                                    </td>
-                                </tr>
-                            </tbody>
-                            <tfoot class="table-fake-body">
-                                <tr>
-                                    <td colspan="2">{{ $t('distlist.list-empty') }}</td>
-                                </tr>
-                            </tfoot>
-                        </table>
+                        <distlist-list :list="distlists" class="mb-0"></distlist-list>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-resources" role="tabpanel" aria-labelledby="tab-resources">
                 <div class="card-body">
                     <div class="card-text">
-                        <table class="table table-sm table-hover mb-0">
-                            <thead>
-                                <tr>
-                                    <th scope="col">{{ $t('form.name') }}</th>
-                                    <th scope="col">{{ $t('form.email') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="resource in resources" :key="resource.id" @click="$root.clickRecord">
-                                    <td>
-                                        <svg-icon icon="gear" :class="$root.statusClass(resource)" :title="$root.statusText(resource)"></svg-icon>
-                                        <router-link :to="{ path: '/resource/' + resource.id }">{{ resource.name }}</router-link>
-                                    </td>
-                                    <td>
-                                        <router-link :to="{ path: '/resource/' + resource.id }">{{ resource.email }}</router-link>
-                                    </td>
-                                </tr>
-                            </tbody>
-                            <tfoot class="table-fake-body">
-                                <tr>
-                                    <td colspan="2">{{ $t('resource.list-empty') }}</td>
-                                </tr>
-                            </tfoot>
-                        </table>
+                        <resource-list :list="resources" class="mb-0"></resource-list>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-shared-folders" role="tabpanel" aria-labelledby="tab-shared-folders">
                 <div class="card-body">
                     <div class="card-text">
-                        <table class="table table-sm table-hover mb-0">
-                            <thead>
-                                <tr>
-                                    <th scope="col">{{ $t('form.name') }}</th>
-                                    <th scope="col">{{ $t('form.type') }}</th>
-                                    <th scope="col">{{ $t('form.email') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="folder in folders" :key="folder.id" @click="$root.clickRecord">
-                                    <td>
-                                        <svg-icon icon="folder-open" :class="$root.statusClass(folder)" :title="$root.statusText(folder)"></svg-icon>
-                                        <router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.name }}</router-link>
-                                    </td>
-                                    <td>{{ $t('shf.type-' + folder.type) }}</td>
-                                    <td><router-link :to="{ path: '/shared-folder/' + folder.id }">{{ folder.email }}</router-link></td>
-                                </tr>
-                            </tbody>
-                            <tfoot class="table-fake-body">
-                                <tr>
-                                    <td colspan="3">{{ $t('shf.list-empty') }}</td>
-                                </tr>
-                            </tfoot>
-                        </table>
+                        <shared-folder-list :list="folders" :email="true" class="mb-0"></shared-folder-list>
                     </div>
                 </div>
             </div>
@@ -496,6 +388,11 @@
 <script>
     import { Modal } from 'bootstrap'
     import TransactionLog from '../Widgets/TransactionLog'
+    import { default as DistlistList } from '../Distlist/ListWidget'
+    import { default as DomainList } from '../Domain/ListWidget'
+    import { default as ResourceList } from '../Resource/ListWidget'
+    import { default as SharedFolderList } from '../SharedFolder/ListWidget'
+    import { default as UserList } from '../User/ListWidget'
 
     import { library } from '@fortawesome/fontawesome-svg-core'
 
@@ -508,7 +405,12 @@
 
     export default {
         components: {
-            TransactionLog
+            DistlistList,
+            DomainList,
+            ResourceList,
+            SharedFolderList,
+            TransactionLog,
+            UserList
         },
         beforeRouteUpdate (to, from, next) {
             // An event called when the route that renders this component has changed,
diff --git a/src/resources/vue/Distlist/List.vue b/src/resources/vue/Distlist/List.vue
--- a/src/resources/vue/Distlist/List.vue
+++ b/src/resources/vue/Distlist/List.vue
@@ -10,30 +10,7 @@
                     </btn-router>
                 </div>
                 <div class="card-text">
-                    <table class="table table-sm table-hover">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t('distlist.name') }}</th>
-                                <th scope="col">{{ $t('distlist.email') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="list in lists" :key="list.id" @click="$root.clickRecord">
-                                <td>
-                                    <svg-icon icon="users" :class="$root.statusClass(list)" :title="$root.statusText(list)"></svg-icon>
-                                    <router-link :to="{ path: 'distlist/' + list.id }">{{ list.name }}</router-link>
-                                </td>
-                                <td>
-                                    <router-link :to="{ path: 'distlist/' + list.id }">{{ list.email }}</router-link>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tfoot class="table-fake-body">
-                            <tr>
-                                <td colspan="2">{{ $t('distlist.list-empty') }}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                    <list-widget :list="lists"></list-widget>
                 </div>
             </div>
         </div>
@@ -41,6 +18,7 @@
 </template>
 
 <script>
+    import ListWidget from './ListWidget'
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     library.add(
@@ -48,6 +26,9 @@
     )
 
     export default {
+        components: {
+            ListWidget
+        },
         data() {
             return {
                 lists: []
diff --git a/src/resources/vue/Distlist/ListWidget.vue b/src/resources/vue/Distlist/ListWidget.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/Distlist/ListWidget.vue
@@ -0,0 +1,37 @@
+<template>
+    <list-table :list="list" :setup="setup"></list-table>
+</template>
+
+<script>
+    import { ListTable } from '../Widgets/ListTools'
+    import { library } from '@fortawesome/fontawesome-svg-core'
+
+    library.add(
+        require('@fortawesome/free-solid-svg-icons/faUsers').definition,
+    )
+
+    export default {
+        components: {
+            ListTable
+        },
+        props: {
+            list: { type: Array, default: () => [] }
+        },
+        data() {
+            return {
+                setup: {
+                    model: 'distlist',
+                    cols: [
+                        {
+                            prop: 'name',
+                            icon: 'users'
+                        },
+                        {
+                            prop: 'email',
+                        }
+                    ]
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/Domain/List.vue b/src/resources/vue/Domain/List.vue
--- a/src/resources/vue/Domain/List.vue
+++ b/src/resources/vue/Domain/List.vue
@@ -9,26 +9,7 @@
                     </btn-router>
                 </div>
                 <div class="card-text">
-                    <table class="table table-sm table-hover">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t('domain.namespace') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="domain in domains" :key="domain.id" @click="$root.clickRecord">
-                                <td>
-                                    <svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
-                                    <router-link :to="{ path: 'domain/' + domain.id }">{{ domain.namespace }}</router-link>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tfoot class="table-fake-body">
-                            <tr>
-                                <td>{{ $t('user.domains-none') }}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                    <list-widget :list="domains"></list-widget>
                 </div>
             </div>
         </div>
@@ -36,6 +17,7 @@
 </template>
 
 <script>
+    import ListWidget from './ListWidget'
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     library.add(
@@ -43,6 +25,9 @@
     )
 
     export default {
+        components: {
+            ListWidget
+        },
         data() {
             return {
                 domains: []
diff --git a/src/resources/vue/Domain/ListWidget.vue b/src/resources/vue/Domain/ListWidget.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/Domain/ListWidget.vue
@@ -0,0 +1,34 @@
+<template>
+    <list-table :list="list" :setup="setup"></list-table>
+</template>
+
+<script>
+    import { ListTable } from '../Widgets/ListTools'
+    import { library } from '@fortawesome/fontawesome-svg-core'
+
+    library.add(
+        require('@fortawesome/free-solid-svg-icons/faGlobe').definition,
+    )
+
+    export default {
+        components: {
+            ListTable
+        },
+        props: {
+            list: { type: Array, default: () => [] }
+        },
+        data() {
+            return {
+                setup: {
+                    model: 'domain',
+                    cols: [
+                        {
+                            prop: 'namespace',
+                            icon: 'globe'
+                        }
+                    ]
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/Resource/List.vue b/src/resources/vue/Resource/List.vue
--- a/src/resources/vue/Resource/List.vue
+++ b/src/resources/vue/Resource/List.vue
@@ -10,30 +10,7 @@
                     </btn-router>
                 </div>
                 <div class="card-text">
-                    <table class="table table-sm table-hover">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t('form.name') }}</th>
-                                <th scope="col">{{ $t('form.email') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="resource in resources" :key="resource.id" @click="$root.clickRecord">
-                                <td>
-                                    <svg-icon icon="gear" :class="$root.statusClass(resource)" :title="$root.statusText(resource)"></svg-icon>
-                                    <router-link :to="{ path: 'resource/' + resource.id }">{{ resource.name }}</router-link>
-                                </td>
-                                <td>
-                                    <router-link :to="{ path: 'resource/' + resource.id }">{{ resource.email }}</router-link>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tfoot class="table-fake-body">
-                            <tr>
-                                <td colspan="2">{{ $t('resource.list-empty') }}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                    <list-widget :list="resources"></list-widget>
                 </div>
             </div>
         </div>
@@ -41,6 +18,7 @@
 </template>
 
 <script>
+    import ListWidget from './ListWidget'
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     library.add(
@@ -48,6 +26,9 @@
     )
 
     export default {
+        components: {
+            ListWidget
+        },
         data() {
             return {
                 resources: []
diff --git a/src/resources/vue/Resource/ListWidget.vue b/src/resources/vue/Resource/ListWidget.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/Resource/ListWidget.vue
@@ -0,0 +1,37 @@
+<template>
+    <list-table :list="list" :setup="setup"></list-table>
+</template>
+
+<script>
+    import { ListTable } from '../Widgets/ListTools'
+    import { library } from '@fortawesome/fontawesome-svg-core'
+
+    library.add(
+        require('@fortawesome/free-solid-svg-icons/faGear').definition,
+    )
+
+    export default {
+        components: {
+            ListTable
+        },
+        props: {
+            list: { type: Array, default: () => [] }
+        },
+        data() {
+            return {
+                setup: {
+                    model: 'resource',
+                    cols: [
+                        {
+                            prop: 'name',
+                            icon: 'gear'
+                        },
+                        {
+                            prop: 'email',
+                        }
+                    ]
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/SharedFolder/List.vue b/src/resources/vue/SharedFolder/List.vue
--- a/src/resources/vue/SharedFolder/List.vue
+++ b/src/resources/vue/SharedFolder/List.vue
@@ -5,33 +5,12 @@
                 <div class="card-title">
                     {{ $tc('shf.list-title', 2) }}
                     <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
-                    <btn-router v-if="!$root.isDegraded()" to="shared-folder/new" class="btn-success float-end" icon="gear">
+                    <btn-router v-if="!$root.isDegraded()" to="shared-folder/new" class="btn-success float-end" icon="folder-open">
                         {{ $t('shf.create') }}
                     </btn-router>
                 </div>
                 <div class="card-text">
-                    <table class="table table-sm table-hover">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t('form.name') }}</th>
-                                <th scope="col">{{ $t('form.type') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="folder in folders" :key="folder.id" @click="$root.clickRecord">
-                                <td>
-                                    <svg-icon icon="folder-open" :class="$root.statusClass(folder)" :title="$root.statusText(folder)"></svg-icon>
-                                    <router-link :to="{ path: 'shared-folder/' + folder.id }">{{ folder.name }}</router-link>
-                                </td>
-                                <td>{{ $t('shf.type-' + folder.type) }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot class="table-fake-body">
-                            <tr>
-                                <td colspan="2">{{ $t('shf.list-empty') }}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                    <list-widget :list="folders"></list-widget>
                 </div>
             </div>
         </div>
@@ -39,14 +18,17 @@
 </template>
 
 <script>
+    import ListWidget from './ListWidget'
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     library.add(
         require('@fortawesome/free-solid-svg-icons/faFolderOpen').definition,
-        require('@fortawesome/free-solid-svg-icons/faGear').definition,
     )
 
     export default {
+        components: {
+            ListWidget
+        },
         data() {
             return {
                 folders: []
diff --git a/src/resources/vue/SharedFolder/ListWidget.vue b/src/resources/vue/SharedFolder/ListWidget.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/SharedFolder/ListWidget.vue
@@ -0,0 +1,48 @@
+<template>
+    <list-table :list="list" :setup="setup"></list-table>
+</template>
+
+<script>
+    import { ListTable } from '../Widgets/ListTools'
+    import { library } from '@fortawesome/fontawesome-svg-core'
+
+    library.add(
+        require('@fortawesome/free-solid-svg-icons/faFolderOpen').definition,
+    )
+
+    export default {
+        components: {
+            ListTable
+        },
+        props: {
+            email: { type: Boolean, default: () => false },
+            list: { type: Array, default: () => [] }
+        },
+        computed: {
+            setup() {
+                let cols = [
+                    {
+                        prop: 'name',
+                        icon: 'folder-open'
+                    },
+                    {
+                        prop: 'type',
+                        contentLabel: (item) => {
+                            return 'shf.type-' + item.type
+                        }
+                    }
+                ]
+
+                if (this.email) {
+                    cols.push({ prop: 'email' })
+                }
+
+                return {
+                    cols,
+                    model: 'shared-folder',
+                    prefix: 'shf'
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/User/List.vue b/src/resources/vue/User/List.vue
--- a/src/resources/vue/User/List.vue
+++ b/src/resources/vue/User/List.vue
@@ -12,22 +12,7 @@
                             {{ $t('user.create') }}
                         </btn-router>
                     </div>
-                    <table id="users-list" class="table table-sm table-hover">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t('form.primary-email') }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord">
-                                <td>
-                                    <svg-icon icon="user" :class="$root.statusClass(user)" :title="$root.statusText(user)"></svg-icon>
-                                    <router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <list-foot :text="$t('user.users-none')"></list-foot>
-                    </table>
+                    <list-widget :list="users"></list-widget>
                     <list-more v-if="hasMore" :on-click="loadUsers"></list-more>
                 </div>
             </div>
@@ -37,8 +22,12 @@
 
 <script>
     import ListTools from '../Widgets/ListTools'
+    import ListWidget from './ListWidget'
 
     export default {
+        components: {
+            ListWidget
+        },
         mixins: [ ListTools ],
         data() {
             return {
diff --git a/src/resources/vue/User/ListWidget.vue b/src/resources/vue/User/ListWidget.vue
new file mode 100644
--- /dev/null
+++ b/src/resources/vue/User/ListWidget.vue
@@ -0,0 +1,31 @@
+<template>
+    <list-table :list="list" :current="current" :setup="setup"></list-table>
+</template>
+
+<script>
+    import { ListTable } from '../Widgets/ListTools'
+
+    export default {
+        components: {
+            ListTable
+        },
+        props: {
+            list: { type: Array, default: () => [] },
+            current: { type: Object, default: () => null }
+        },
+        data() {
+            return {
+                setup: {
+                    model: 'user',
+                    cols: [
+                        {
+                            prop: 'email',
+                            icon: 'user',
+                            label: 'form.primary-email'
+                        }
+                    ]
+                }
+            }
+        }
+    }
+</script>
diff --git a/src/resources/vue/Widgets/ListTools.vue b/src/resources/vue/Widgets/ListTools.vue
--- a/src/resources/vue/Widgets/ListTools.vue
+++ b/src/resources/vue/Widgets/ListTools.vue
@@ -4,7 +4,7 @@
 
 <script>
 
-    const ListSearch = {
+    export const ListSearch = {
         props: {
             onSearch: { type: Function, default: () => {} },
             placeholder: { type: String, default: '' }
@@ -20,7 +20,7 @@
             </form>`
     }
 
-    const ListFoot = {
+    export const ListFoot = {
         props: {
             colspan: { type: Number, default: 1 },
             text: { type: String, default: '' }
@@ -28,7 +28,7 @@
         template: `<tfoot class="table-fake-body"><tr><td :colspan="colspan">{{ text }}</td></tr></tfoot>`
     }
 
-    const ListMore = {
+    export const ListMore = {
         props: {
             onClick: { type: Function, default: () => {} }
         },
@@ -37,11 +37,51 @@
             </div>`
     }
 
+    export const ListTable = {
+        components: {
+            ListFoot
+        },
+        props: {
+            current: { type: Object, default: () => null },
+            list: { type: Array, default: () => [] },
+            setup: { type: Object, default: () => {} },
+        },
+        methods: {
+            label(label) {
+                let l = `${this.setup.prefix || this.setup.model}${label}`
+                return this.$te(l) ? l : `form${label}`
+            },
+            url(item) {
+                return `/${this.setup.model}/${item.id}`
+            }
+        },
+        template:
+            `<table class="table table-sm table-hover">
+                <thead>
+                    <tr>
+                        <th v-for="col in setup.cols" scope="col">{{ $t(col.label || label('.' + col.prop)) }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in list" :key="item.id" @click="$root.clickRecord">
+                        <td v-for="col in setup.cols" :key="col.prop + item.id">
+                            <svg-icon v-if="col.icon" :icon="col.icon" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon>
+                            <span v-if="col.contentLabel" >{{ $t(col.contentLabel(item)) }}</span>
+                            <router-link v-else-if="!current || current.id != item.id" :to="url(item)">{{ item[col.prop] }}</router-link>
+                            <span v-else>{{ item[col.prop] }}</span>
+                        </td>
+                    </tr>
+                </tbody>
+                <list-foot :text="$t(label('.list-empty'))" :colspan="setup.cols.length"></list-foot>
+            </table>`
+    }
+
     export default {
         components: {
             ListFoot,
             ListMore,
-            ListSearch
+            ListSearch,
+            ListTable
         },
         data() {
             return {