From 00196ad0b1406c3bb181c1d8b466f1579736e2ac Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Mon, 19 Oct 2020 14:48:21 +0200
Subject: [PATCH] lists + editors work now in a raw state

---
 zero.Debug/appsettings.Development.json       |   2 +-
 .../App/components/buttons/add-button.vue     |   2 +-
 .../components/tables/table-filter-old.vue    | 238 +++++++
 .../App/components/tables/table-filter.vue    | 328 ++++-----
 .../App/components/tables/table-old.vue       | 623 ++++++++++++++++++
 .../App/components/tables/table-value.js      | 104 +--
 zero.Web.UI/App/components/tables/table.vue   | 292 +++-----
 zero.Web.UI/App/core/editor-field.js          |   2 +-
 zero.Web.UI/App/core/editor.js                |   8 +-
 zero.Web.UI/App/core/list-column.js           | 202 ++++++
 zero.Web.UI/App/core/list.js                  | 110 ++++
 zero.Web.UI/App/core/plugin.js                |  24 +
 zero.Web.UI/App/core/plugin.zero.js           |   6 +-
 zero.Web.UI/App/core/zero.js                  |  24 +-
 zero.Web.UI/App/editor/editor-component.vue   |   2 +-
 zero.Web.UI/App/editor/editor.vue             |  38 +-
 zero.Web.UI/App/editors/all.js                |  18 -
 zero.Web.UI/App/editors/country.js            |  77 ---
 zero.Web.UI/App/editors/language.js           |  70 --
 zero.Web.UI/App/editors/media.js              |  36 -
 zero.Web.UI/App/editors/translation.js        |  29 -
 zero.Web.UI/App/editors/user.js               | 108 ---
 zero.Web.UI/App/editors/userRole.js           |  58 --
 .../App/pages/settings/application.vue        |   6 +-
 zero.Web.UI/App/pages/settings/countries.vue  |  16 +-
 zero.Web.UI/App/pages/settings/country.vue    |   8 +-
 zero.Web.UI/App/pages/settings/languages.vue  |  16 +-
 zero.Web.UI/App/pages/settings/role.vue       |   8 +-
 .../App/pages/settings/translations.vue       |  16 +-
 zero.Web.UI/App/pages/settings/user.vue       |   8 +-
 zero.Web.UI/App/pages/settings/users.vue      |  29 +-
 zero.Web.UI/App/renderers/editors/all.js      |  18 +
 .../{ => renderers}/editors/application.js    |  12 +-
 zero.Web.UI/App/renderers/editors/country.js  |  11 +
 .../App/renderers/editors/customers-filter.js |  43 ++
 zero.Web.UI/App/renderers/editors/language.js |  12 +
 zero.Web.UI/App/renderers/editors/media.js    |  12 +
 zero.Web.UI/App/renderers/editors/user.js     |  22 +
 zero.Web.UI/App/renderers/editors/userRole.js |  22 +
 zero.Web.UI/App/renderers/lists/all.js        |  12 +
 zero.Web.UI/App/renderers/lists/countries.js  |  19 +
 zero.Web.UI/App/renderers/lists/languages.js  |  17 +
 .../App/renderers/lists/translations.js       |  16 +
 zero.Web.UI/App/renderers/lists/users.js      |  18 +
 zero.Web.UI/Sass/Settings/_shadows.scss       |   1 +
 45 files changed, 1810 insertions(+), 933 deletions(-)
 create mode 100644 zero.Web.UI/App/components/tables/table-filter-old.vue
 create mode 100644 zero.Web.UI/App/components/tables/table-old.vue
 create mode 100644 zero.Web.UI/App/core/list-column.js
 create mode 100644 zero.Web.UI/App/core/list.js
 delete mode 100644 zero.Web.UI/App/editors/all.js
 delete mode 100644 zero.Web.UI/App/editors/country.js
 delete mode 100644 zero.Web.UI/App/editors/language.js
 delete mode 100644 zero.Web.UI/App/editors/media.js
 delete mode 100644 zero.Web.UI/App/editors/translation.js
 delete mode 100644 zero.Web.UI/App/editors/user.js
 delete mode 100644 zero.Web.UI/App/editors/userRole.js
 create mode 100644 zero.Web.UI/App/renderers/editors/all.js
 rename zero.Web.UI/App/{ => renderers}/editors/application.js (56%)
 create mode 100644 zero.Web.UI/App/renderers/editors/country.js
 create mode 100644 zero.Web.UI/App/renderers/editors/customers-filter.js
 create mode 100644 zero.Web.UI/App/renderers/editors/language.js
 create mode 100644 zero.Web.UI/App/renderers/editors/media.js
 create mode 100644 zero.Web.UI/App/renderers/editors/user.js
 create mode 100644 zero.Web.UI/App/renderers/editors/userRole.js
 create mode 100644 zero.Web.UI/App/renderers/lists/all.js
 create mode 100644 zero.Web.UI/App/renderers/lists/countries.js
 create mode 100644 zero.Web.UI/App/renderers/lists/languages.js
 create mode 100644 zero.Web.UI/App/renderers/lists/translations.js
 create mode 100644 zero.Web.UI/App/renderers/lists/users.js

diff --git a/zero.Debug/appsettings.Development.json b/zero.Debug/appsettings.Development.json
index 91818a4b..9afd4250 100644
--- a/zero.Debug/appsettings.Development.json
+++ b/zero.Debug/appsettings.Development.json
@@ -2,7 +2,7 @@
   "Zero": {
     "Raven": {
       "Url": "http://127.0.0.1:9800",
-      "Database": "zero"
+      "Database": "laolazero"
     }
   },
   "Logging": {
diff --git a/zero.Web.UI/App/components/buttons/add-button.vue b/zero.Web.UI/App/components/buttons/add-button.vue
index e06b4eaf..1f55c143 100644
--- a/zero.Web.UI/App/components/buttons/add-button.vue
+++ b/zero.Web.UI/App/components/buttons/add-button.vue
@@ -60,7 +60,7 @@
       },
       hasDropdown()
       {
-        return this.decision && zero.apps.shared;
+        return this.decision && true; // TODO zero.apps.shared; moved to zero instance afaik
       }
     },
 
diff --git a/zero.Web.UI/App/components/tables/table-filter-old.vue b/zero.Web.UI/App/components/tables/table-filter-old.vue
new file mode 100644
index 00000000..1deaa6fe
--- /dev/null
+++ b/zero.Web.UI/App/components/tables/table-filter-old.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="ui-table-filter">
+    <ui-search v-if="!hideSearch" v-model="value.search" class="onbg" />
+    <ui-dropdown v-if="!hideFilter && filters.length" align="right">
+      <template v-slot:button>
+        <ui-button v-if="!hideFilter" type="light onbg" :label="filterLabel" caret="down" />
+      </template>
+      <ui-dropdown-button v-if="filters.length" v-for="(filter, index) in filters" :key="index" :value="filter" :label="filter.name" @click="onFiltered" />
+      <ui-dropdown-separator v-if="filters.length" />
+      <ui-dropdown-button label="@ui.add" icon="fth-plus" @click="openFilter()" />
+      <ui-dropdown-button v-if="filter" label="Edit filter" icon="fth-edit-2" @click="openFilter(filter.id)" />
+      <ui-dropdown-button label="Clear filter" icon="fth-x" @click="onFilterClear" />
+    </ui-dropdown>
+    <ui-button v-if="!hideFilter && !filters.length" type="light onbg" label="Filter" @click="openFilter()" />
+    <ui-dropdown v-if="!hideSelection && selection.length > 0" align="right">
+      <template v-slot:button>
+        <ui-button type="light" :label="selectedText" caret="down" />
+      </template>
+      <slot name="actions"></slot>
+    </ui-dropdown>
+    <ui-dropdown v-if="value.actions && value.actions.length > 0" align="right">
+      <template v-slot:button>
+        <ui-button type="light onbg" icon="fth-more-horizontal" />
+      </template>
+      <ui-dropdown-button v-for="(action, index) in value.actions" :key="index" :value="action" :prevent="action.autoclose === false" :label="action.label" :icon="action.icon" @click="onActionClicked" />
+    </ui-dropdown>
+  </div>
+</template>
+
+
+<script>
+  import Overlay from 'zero/services/overlay';
+  import Strings from 'zero/services/strings';
+  import FilterOverlay from './table-filter-overlay';
+  import { isArray as _isArray } from 'underscore';
+
+  export default {
+    name: 'uiTableFilter',
+
+    props: {
+      value: {
+        type: Object,
+        required: true,
+        default: () =>
+        {
+          return {
+            filter: {},
+            actions: [],
+            selectable: false,
+            search: null
+          }
+        }
+      },
+      selection: {
+        type: Array,
+        default: () => []
+      },
+      alias: {
+        type: String,
+        default: null
+      }
+    },
+
+    watch: {
+      value: function (value)
+      {
+        this.reload();
+      }
+    },
+
+    data: () => ({
+      hideFilter: true,
+      hideSearch: true,
+      hideSelection: true,
+      filters: [],
+      filter: null
+    }),
+
+    created()
+    {
+      this.reload();
+    },
+
+    computed: {
+      selectedText()
+      {
+        return this.selection.length + ' selected'; 
+      },
+      storageKey()
+      {
+        return 'zero.ui-table-filter.' + this.alias;
+      },
+      filterLabel()
+      {
+        return this.filter ? 'Filter: <span>' + this.filter.name + "</span>" : 'Filter';
+      }
+    },
+
+    methods: {
+
+      reload()
+      {
+        this.hideFilter = typeof this.value.filter !== 'object';
+        this.hideSearch = typeof this.value.search === false;
+        this.hideSelection = this.value.selectable !== true;
+        this.filters = JSON.parse(localStorage.getItem(this.storageKey) || "[]");
+      },
+
+      onActionClicked(action, opts)
+      {
+        action.action(opts);
+      },
+
+      onFilterClear()
+      {
+        this.updateFilter(null);
+      },
+
+      onFiltered(value)
+      {
+        this.updateFilter(value);
+      },
+
+      openFilter(id)
+      {
+        let model = {
+          name: null,
+          filter: this.value.filter.model
+        };
+
+        if (id)
+        {
+          model = this.filters.find(x => x.id === id);
+        }
+
+        return Overlay.open({
+          component: FilterOverlay,
+          display: 'editor',
+          title: 'Filter',
+          defaults: this.value.filter.model,
+          model: model,
+          fields: this.value.filter.fields,
+          canSave: !!this.alias,
+          isCreate: !id
+        }).then(value =>
+        {
+          if (value.remove && id)
+          {
+            this.removeFilter(id);
+            return;
+          }
+
+          if (!!value.filterName)
+          {
+            id = this.saveFilter(value.filterName, value.model, id);
+          }
+
+          this.updateFilter({
+            id: id,
+            name: value.filterName,
+            filter: value.model
+          });
+        });
+      },
+
+
+      saveFilter(name, filter, id)
+      {
+        id = id || Strings.guid();
+
+        let savedFilter = this.filters.find(x => x.id === id);
+        let index = this.filters.indexOf(savedFilter);
+
+        let model = {
+          id: id,
+          name: name,
+          filter: filter
+        };
+
+        if (index > -1)
+        {
+          this.filters.splice(index, 1, model);
+        }
+        else
+        {
+          this.filters.push(model);
+        }
+
+        localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
+
+        return id;
+      },
+
+
+      removeFilter(id)
+      {
+        let savedFilter = this.filters.find(x => x.id === id);
+        let index = this.filters.indexOf(savedFilter);
+        this.filters.splice(index, 1);
+        localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
+
+        if (this.filter && this.filter.id === id)
+        {
+          this.updateFilter(null);
+        }
+      },
+
+
+      updateFilter(value)
+      {
+        if (!value)
+        {
+          this.filter = null;
+          this.$emit('filter', null);
+        }
+        else
+        {
+          this.filter = JSON.parse(JSON.stringify(value));
+          this.$emit('filter', this.filter.filter);
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-table-filter
+  {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    > * + *
+    {
+      margin-left: 15px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tables/table-filter.vue b/zero.Web.UI/App/components/tables/table-filter.vue
index 1deaa6fe..9a22a0aa 100644
--- a/zero.Web.UI/App/components/tables/table-filter.vue
+++ b/zero.Web.UI/App/components/tables/table-filter.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="ui-table-filter">
-    <ui-search v-if="!hideSearch" v-model="value.search" class="onbg" />
-    <ui-dropdown v-if="!hideFilter && filters.length" align="right">
+  <div v-if="loaded" class="ui-table-filter">
+    <ui-search v-if="!hideSearch" v-model="attach.filter.search" class="onbg" />
+    <!--<ui-dropdown v-if="!hideFilter && filters.length" align="right">
       <template v-slot:button>
         <ui-button v-if="!hideFilter" type="light onbg" :label="filterLabel" caret="down" />
       </template>
@@ -17,13 +17,13 @@
         <ui-button type="light" :label="selectedText" caret="down" />
       </template>
       <slot name="actions"></slot>
-    </ui-dropdown>
-    <ui-dropdown v-if="value.actions && value.actions.length > 0" align="right">
+    </ui-dropdown>-->
+    <!--<ui-dropdown v-if="value.actions && value.actions.length > 0" align="right">
       <template v-slot:button>
         <ui-button type="light onbg" icon="fth-more-horizontal" />
       </template>
       <ui-dropdown-button v-for="(action, index) in value.actions" :key="index" :value="action" :prevent="action.autoclose === false" :label="action.label" :icon="action.icon" @click="onActionClicked" />
-    </ui-dropdown>
+    </ui-dropdown>-->
   </div>
 </template>
 
@@ -38,188 +38,190 @@
     name: 'uiTableFilter',
 
     props: {
-      value: {
-        type: Object,
-        required: true,
-        default: () =>
-        {
-          return {
-            filter: {},
-            actions: [],
-            selectable: false,
-            search: null
-          }
-        }
-      },
-      selection: {
-        type: Array,
-        default: () => []
-      },
-      alias: {
-        type: String,
-        default: null
+      attach: [Object, undefined],
+      hideSearch: {
+        type: Boolean,
+        default: false
       }
     },
 
     watch: {
-      value: function (value)
+      attach: function (value)
       {
-        this.reload();
+        this.setup();
       }
     },
 
     data: () => ({
-      hideFilter: true,
-      hideSearch: true,
-      hideSelection: true,
-      filters: [],
-      filter: null
+      loaded: false
+      //hideFilter: true,
+      //hideSelection: true,
+      //filters: [],
+      //filter: null
     }),
 
     created()
     {
-      this.reload();
+      //this.reload();
     },
 
-    computed: {
-      selectedText()
-      {
-        return this.selection.length + ' selected'; 
-      },
-      storageKey()
-      {
-        return 'zero.ui-table-filter.' + this.alias;
-      },
-      filterLabel()
-      {
-        return this.filter ? 'Filter: <span>' + this.filter.name + "</span>" : 'Filter';
-      }
+    mounted()
+    {
+      this.setup();
     },
 
     methods: {
 
-      reload()
+      setup()
       {
-        this.hideFilter = typeof this.value.filter !== 'object';
-        this.hideSearch = typeof this.value.search === false;
-        this.hideSelection = this.value.selectable !== true;
-        this.filters = JSON.parse(localStorage.getItem(this.storageKey) || "[]");
-      },
-
-      onActionClicked(action, opts)
-      {
-        action.action(opts);
-      },
-
-      onFilterClear()
-      {
-        this.updateFilter(null);
-      },
-
-      onFiltered(value)
-      {
-        this.updateFilter(value);
-      },
-
-      openFilter(id)
-      {
-        let model = {
-          name: null,
-          filter: this.value.filter.model
-        };
-
-        if (id)
+        if (!this.attach)
         {
-          model = this.filters.find(x => x.id === id);
+          return;
         }
 
-        return Overlay.open({
-          component: FilterOverlay,
-          display: 'editor',
-          title: 'Filter',
-          defaults: this.value.filter.model,
-          model: model,
-          fields: this.value.filter.fields,
-          canSave: !!this.alias,
-          isCreate: !id
-        }).then(value =>
-        {
-          if (value.remove && id)
-          {
-            this.removeFilter(id);
-            return;
-          }
-
-          if (!!value.filterName)
-          {
-            id = this.saveFilter(value.filterName, value.model, id);
-          }
-
-          this.updateFilter({
-            id: id,
-            name: value.filterName,
-            filter: value.model
-          });
-        });
-      },
-
-
-      saveFilter(name, filter, id)
-      {
-        id = id || Strings.guid();
-
-        let savedFilter = this.filters.find(x => x.id === id);
-        let index = this.filters.indexOf(savedFilter);
-
-        let model = {
-          id: id,
-          name: name,
-          filter: filter
-        };
-
-        if (index > -1)
-        {
-          this.filters.splice(index, 1, model);
-        }
-        else
-        {
-          this.filters.push(model);
-        }
-
-        localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
-
-        return id;
-      },
-
-
-      removeFilter(id)
-      {
-        let savedFilter = this.filters.find(x => x.id === id);
-        let index = this.filters.indexOf(savedFilter);
-        this.filters.splice(index, 1);
-        localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
-
-        if (this.filter && this.filter.id === id)
-        {
-          this.updateFilter(null);
-        }
-      },
-
-
-      updateFilter(value)
-      {
-        if (!value)
-        {
-          this.filter = null;
-          this.$emit('filter', null);
-        }
-        else
-        {
-          this.filter = JSON.parse(JSON.stringify(value));
-          this.$emit('filter', this.filter.filter);
-        }
+        this.loaded = true;
+        console.info(this.attach);
       }
     }
+
+    //computed: {
+    //  selectedText()
+    //  {
+    //    return this.selection.length + ' selected'; 
+    //  },
+    //  storageKey()
+    //  {
+    //    return 'zero.ui-table-filter.' + this.alias;
+    //  },
+    //  filterLabel()
+    //  {
+    //    return this.filter ? 'Filter: <span>' + this.filter.name + "</span>" : 'Filter';
+    //  }
+    //},
+
+    //methods: {
+
+    //  reload()
+    //  {
+    //    this.hideFilter = typeof this.value.filter !== 'object';
+    //    this.hideSelection = this.value.selectable !== true;
+    //    this.filters = JSON.parse(localStorage.getItem(this.storageKey) || "[]");
+    //  },
+
+    //  onActionClicked(action, opts)
+    //  {
+    //    action.action(opts);
+    //  },
+
+    //  onFilterClear()
+    //  {
+    //    this.updateFilter(null);
+    //  },
+
+    //  onFiltered(value)
+    //  {
+    //    this.updateFilter(value);
+    //  },
+
+    //  openFilter(id)
+    //  {
+    //    let model = {
+    //      name: null,
+    //      filter: this.value.filter.model
+    //    };
+
+    //    if (id)
+    //    {
+    //      model = this.filters.find(x => x.id === id);
+    //    }
+
+    //    return Overlay.open({
+    //      component: FilterOverlay,
+    //      display: 'editor',
+    //      title: 'Filter',
+    //      defaults: this.value.filter.model,
+    //      model: model,
+    //      fields: this.value.filter.fields,
+    //      canSave: !!this.alias,
+    //      isCreate: !id
+    //    }).then(value =>
+    //    {
+    //      if (value.remove && id)
+    //      {
+    //        this.removeFilter(id);
+    //        return;
+    //      }
+
+    //      if (!!value.filterName)
+    //      {
+    //        id = this.saveFilter(value.filterName, value.model, id);
+    //      }
+
+    //      this.updateFilter({
+    //        id: id,
+    //        name: value.filterName,
+    //        filter: value.model
+    //      });
+    //    });
+    //  },
+
+
+    //  saveFilter(name, filter, id)
+    //  {
+    //    id = id || Strings.guid();
+
+    //    let savedFilter = this.filters.find(x => x.id === id);
+    //    let index = this.filters.indexOf(savedFilter);
+
+    //    let model = {
+    //      id: id,
+    //      name: name,
+    //      filter: filter
+    //    };
+
+    //    if (index > -1)
+    //    {
+    //      this.filters.splice(index, 1, model);
+    //    }
+    //    else
+    //    {
+    //      this.filters.push(model);
+    //    }
+
+    //    localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
+
+    //    return id;
+    //  },
+
+
+    //  removeFilter(id)
+    //  {
+    //    let savedFilter = this.filters.find(x => x.id === id);
+    //    let index = this.filters.indexOf(savedFilter);
+    //    this.filters.splice(index, 1);
+    //    localStorage.setItem(this.storageKey, JSON.stringify(this.filters));
+
+    //    if (this.filter && this.filter.id === id)
+    //    {
+    //      this.updateFilter(null);
+    //    }
+    //  },
+
+
+    //  updateFilter(value)
+    //  {
+    //    if (!value)
+    //    {
+    //      this.filter = null;
+    //      this.$emit('filter', null);
+    //    }
+    //    else
+    //    {
+    //      this.filter = JSON.parse(JSON.stringify(value));
+    //      this.$emit('filter', this.filter.filter);
+    //    }
+    //  }
+    //}
   }
 </script>
 
diff --git a/zero.Web.UI/App/components/tables/table-old.vue b/zero.Web.UI/App/components/tables/table-old.vue
new file mode 100644
index 00000000..8c82d5fc
--- /dev/null
+++ b/zero.Web.UI/App/components/tables/table-old.vue
@@ -0,0 +1,623 @@
+<template>
+  <div class="ui-table-outer">
+    <div class="ui-table" :class="{'is-inline': inline }">
+      <header class="ui-table-row ui-table-head">      
+        <div v-for="column in columns" :key="column.key" class="ui-table-cell" :table-field="column.field" :style="column.flex">
+          {{ column.label | localize }}
+          <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="tableFilter.orderBy == column.field ? 'sort-' + (tableFilter.orderIsDescending ? 'desc' : 'asc') : null">
+            <i class="arrow arrow-down"></i>
+          </button>
+        </div>
+        <button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-head is-selectable" @click="select()">
+          <i class="fth-check-square"></i>
+        </button>
+      </header>
+
+      <div class="ui-table-row" v-for="item in items" :class="{ 'is-selected': configuration.selectable && selected.indexOf(item) > -1 }">
+        <component :is="column.tag" type="button" :to="getLink(column, item)" @click="onClick($event, column, item)" v-for="column in columns" :key="column.key" 
+                   class="ui-table-cell" :style="column.flex" :table-field="column.field" :field-type="column.as" v-table-value="{ item, column }"></component>
+        <button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-selectable" @click="select(item)">
+          <i class="fth-check-square"></i>
+        </button>
+      </div>
+
+      <div class="ui-table-empty" v-if="!isLoading && items.length < 1">
+        <i class="ui-table-empty-icon fth-list"></i>
+        There are no items to show in this list
+      </div>
+
+      <div class="ui-table-loading" v-if="isLoading">
+        <ui-loading />
+      </div>
+    </div>
+
+    <footer class="ui-table-pagination" v-if="pages > 1">
+      <ui-pagination :pages="pages" :page="tableFilter.page" @change="setPage" :inline="inline" />
+    </footer>
+
+  </div>
+</template>
+
+
+<script>
+  import TableValueDirective from './table-value.js';
+  import UiPagination from 'zero/components/pagination.vue';
+  import { each as _each, extend as _extend, debounce as _debounce } from 'underscore';
+
+  const defaultConfig = {
+    order: {
+      // allow sorting of columns (asc + desc)
+      enabled: true,
+      // default order by
+      by: 'createdDate',
+      // order is descending
+      isDescending: true
+    },
+    // default items per page
+    pageSize: 25,
+    // define columns and how they are displayed
+    columns: {},
+    // prefix for column header translations
+    labelPrefix: '',
+    // scroll to top on page change
+    scrollToTop: true,
+    // promise which returns items based on the current filter and sorting
+    items: null,
+    // ability to select items
+    selectable: false
+  };
+
+  export default {
+    name: 'uiTable',
+
+    props: {
+      value: {
+        type: Object,
+        required: true,
+        default: () => { }
+      },
+      inline: {
+        type: Boolean,
+        default: false
+      },
+      filter: {
+        type: Object,
+        default: () =>
+        {
+          return {};
+        }
+      },
+      search: {
+        type: String,
+        default: null
+      }
+    },
+
+    components: { UiPagination },
+
+    watch: {
+      'value.columns': function (val)
+      {
+        this.generateColumns(val);
+      },
+      'value.search': function (val)
+      {
+        this.tableFilter.search = val;
+      },
+      'value.items': function (val)
+      {
+        this.initialize();
+      },
+      'tableFilter.search': function (val)
+      {
+        this.debouncedUpdate();
+      },
+      'filter': {
+        deep: true,
+        handler: function (val)
+        {
+          this.tableFilter.filter = val;
+          this.debouncedUpdate();
+        }
+      },
+      'search': function (val)
+      {
+        this.tableFilter.search = val;
+      },
+      $route(to, from)
+      {
+        this.initialize();
+      }
+    },
+
+    data: () => ({
+      configuration: {},
+      columns: [],
+      items: [],
+      isLoading: true,
+      pages: 1,
+      count: 0,
+      tableFilter: {
+        orderBy: null,
+        orderIsDescending: true,
+        page: 1,
+        pageSize: 1,
+        search: null
+      },
+      debouncedUpdate: null,
+      selected: []
+    }),
+
+    mounted()
+    {
+      this.initialize();
+    },
+
+    directives: {
+      'table-value': TableValueDirective
+    },
+
+    methods: {
+
+      getLink(column, item)
+      {
+        if (column.tag !== 'router-link')
+        {
+          return null;
+        }
+
+        return column.link(item);
+      },
+
+      onClick(e, column, item)
+      {
+        e.preventDefault();
+
+        if (typeof column.action === 'function')
+        {
+          column.action(item);
+        }
+      },
+
+      initialize()
+      {
+        this.debouncedUpdate = _debounce(this.update, 300);
+
+        this.configuration = _extend(JSON.parse(JSON.stringify(defaultConfig)), this.value);
+
+        this.tableFilter.pageSize = this.configuration.pageSize;
+
+        if (this.configuration.order.enabled)
+        {
+          this.tableFilter.orderBy = this.configuration.order.by;
+          this.tableFilter.orderIsDescending = this.configuration.order.isDescending;
+        }
+
+        this.generateColumns(this.configuration.columns);
+
+        this.load(true);
+      },
+
+      // load items based on the current filter
+      load(initial)
+      {
+        this.tableFilter.filter = this.filter;
+
+        this.configuration.items(this.tableFilter).then(result =>
+        {
+          this.$emit('loaded', result);
+          this.pages = result.totalPages;
+          this.count = result.totalItems;
+
+          this.$emit('count', this.count);
+
+          this.isLoading = false;
+          this.items = result.items;
+          this.selected = [];
+
+          if (!initial && this.configuration.scrollToTop)
+          {
+            let container = document.querySelector('.app-main');
+
+            if (container)
+            {
+              this.$nextTick(() => container.scrollTo({ top: 0, behavior: 'smooth' }));
+            }
+          }
+        });
+      },
+
+      // updates the list (debounced)
+      update()
+      {
+        if (!this.isLoading)
+        {
+          this.load();
+        }
+      },
+
+      // generate columns from the given config
+      generateColumns(columns)
+      {
+        this.columns = [];
+
+        _each(columns, (column, key) =>
+        {
+          let data = column;
+
+          if (typeof column === 'string')
+          {
+            data = {
+              as: column
+            };
+          }
+
+          if (data.as === 'shared')
+          {
+            data.width = 56;
+            data.label = null;
+            data.sort = false;
+          }
+
+          this.columns.push(_extend(data, {
+            key: key,
+            tag: typeof data.link !== 'undefined' ? 'router-link' : (typeof data.action !== 'undefined' ? 'button' : 'div'),
+            label: typeof data.label !== 'undefined' ? data.label : (this.configuration.labelPrefix + key),
+            field: key,
+            canSort: typeof data.sort === 'boolean' ? data.sort : this.configuration.order.enabled,
+            flex: data.width ? { 'flex': '0 1 ' + data.width + 'px' } : {}
+          }));
+        });
+      },
+
+      // set the active page
+      setPage(index)
+      {
+        this.tableFilter.page = index;
+        this.debouncedUpdate();
+      },
+
+      // sort by a column
+      sort(column)
+      {
+        if (this.tableFilter.orderBy === column.field && this.tableFilter.orderIsDescending)
+        {
+          this.tableFilter.orderIsDescending = false;
+        }
+        else if (this.tableFilter.orderBy === column.field)
+        {
+          this.tableFilter.orderBy = null;
+        }
+        else
+        {
+          this.tableFilter.orderBy = column.field;
+          this.tableFilter.orderIsDescending = true;
+        }
+
+        this.debouncedUpdate();
+      },
+
+      // toggle selection of an item
+      select(item)
+      {
+        if (!item)
+        {
+          if (this.selected.length >= this.items.length)
+          {
+            this.selected = [];
+          }
+          else
+          {
+            this.selected = [];
+            this.items.forEach(item =>
+            {
+              this.selected.push(item);
+            });
+          }
+        }
+        else
+        {
+          const index = this.selected.indexOf(item);
+
+          if (index > -1)
+          {
+            this.selected.splice(index, 1);
+          }
+          else
+          {
+            this.selected.push(item);
+          }
+        }
+
+        this.$emit('select', this.selected, this);
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-table
+  {
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    position: relative;
+    background: var(--color-table);
+    flex-wrap: nowrap;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    min-width: auto;
+    border-radius: var(--radius);
+    table-layout: fixed;
+    word-wrap: break-word;
+    font-size: var(--font-size);
+    width: 100%;
+    box-shadow: var(--shadow-short);
+
+    &.is-inline
+    {
+      box-shadow: none;
+      border: 1px solid var(--color-line);
+    }
+  }
+
+  .ui-table-row
+  {
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    flex-flow: row nowrap;
+    -webkit-box-align: center;
+    align-items: stretch;
+    width: 100%;
+    border-bottom: 1px solid var(--color-table-line-horizontal);
+    position: relative;
+    transition: outline 0.1s ease, box-shadow 0.1s ease;
+
+    &:last-child
+    {
+      border-bottom: none;
+    }
+  }
+
+
+  .ui-table-head
+  {
+    font-weight: 700;
+    border-radius: 5px 5px 0 0;
+    color: var(--color-text);
+    position: sticky;
+    top: 0;
+    //border-bottom: 1px solid var(--color-line);
+    z-index: 2;
+    background: var(--color-table-head);
+
+    .ui-table-cell
+    {
+      display: inline-flex;
+      justify-content: space-between;
+    }
+  }
+
+  .ui-table-cell
+  {
+    display: inline-flex;
+    align-items: center;
+    flex: 1 1 5%;
+    position: relative;
+    text-align: left;
+    padding: 18px 20px 17px 20px;
+    border-left: 1px solid var(--color-table-line-vertical);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 20px;
+    line-height: 20px;
+
+    &:first-child
+    {
+      border-left: none;
+    }
+
+    &.is-multiline
+    {
+      white-space: normal;
+      overflow: auto;
+      text-overflow: initial;
+    }
+
+    &.is-bold
+    {
+      font-weight: bold;
+    }
+
+    &.is-selectable
+    {
+      font-size: var(--font-size-l);
+      flex: 0 1 40px;
+      text-align: center;
+      padding: 0;
+      justify-content: center;
+    }
+  }
+
+  .ui-table-row:not(.is-selected) .ui-table-cell:not(.is-head).is-selectable i
+  {
+    color: var(--color-text);
+    margin-right: 1px;
+
+    &:before
+    {
+      content: "\e8cb";
+    }
+  }
+
+  a.ui-table-cell,
+  button.ui-table-cell
+  {
+    color: var(--color-text);
+    transition: none;
+   
+    &:hover
+    {
+      color: var(--color-primary);
+      background: var(--color-table-hover);
+    }
+  }
+
+  .ui-table-sort
+  {
+    height: 20px;
+    width: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: -10px;
+    border-radius: 15px;
+    transition: background 0.2s ease;
+
+    &[disabled]
+    {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .arrow
+    {
+      border-top-color: var(--color-text);
+      transition: opacity 0.2s ease, transform 0.3s ease;
+      opacity: 0.2;
+    }
+
+    /*&:hover
+    {
+      background: var(--color-bg);
+    }*/
+
+    &:hover .arrow
+    {
+      opacity: 0.5;
+    }
+
+    &.sort-desc .arrow, &.sort-asc .arrow, 
+    {
+      opacity: 1;
+    }
+
+    &.sort-asc .arrow
+    {
+      transform: scaleY(-1) translateY(5px);
+    }
+  }
+
+  .ui-table-empty, .ui-table-loading
+  {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 250px;
+    text-align: center;
+    padding: 0 20px;
+  }
+
+  .ui-table-empty-icon
+  {
+    font-size: 34px;
+    margin-bottom: 20px;
+  }
+
+
+  /* special styling for display types */
+
+  .ui-table-field-bool
+  {
+    font-family: var(--font-icon);
+    color: var(--color-text-dim);
+
+    &:before
+    {
+      content: "\e8f6";
+    }
+
+    &.is-checked
+    {
+      color: var(--color-text);
+
+      &:before
+      {
+        content: "\e83f";
+      }
+    }
+
+    &.is-colored
+    {
+      color: var(--color-accent-error);
+
+      &.is-checked
+      {
+        color: var(--color-accent-success);
+      }
+    }
+  }
+
+  .ui-table-field-shared
+  {
+    font-size: 16px;
+    color: var(--color-text-dim-one);
+
+    &.is-inline
+    {
+      margin-left: 0.5em;
+      font-size: 18px;
+      position: relative;
+      top: -1px;
+    }
+  }
+
+  .ui-table-field-shared-2
+  {
+    align-self: center;
+    display: inline-block;
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    background: var(--color-box-nested);
+    color: var(--color-text-dim-one);
+    height: 22px;
+    line-height: 22px;
+    padding: 0 10px;
+    border-radius: 16px;
+    letter-spacing: .5px;
+    font-style: normal;
+    margin-left: 12px;
+
+    /*&.is-inline
+    {
+      margin-left: 0.5em;
+      position: relative;
+    }*/
+  }
+
+  .ui-table-cell[field-type="datetime"]
+  {
+    display: inline;
+
+    .-minor
+    {
+      color: var(--color-text-dim);
+    }
+  }
+
+  .ui-table-cell .-minor
+  {
+    color: var(--color-text-dim);
+  }
+
+  .ui-table-field-image
+  {
+    border-radius: 3px;
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tables/table-value.js b/zero.Web.UI/App/components/tables/table-value.js
index 5e77702c..d5384919 100644
--- a/zero.Web.UI/App/components/tables/table-value.js
+++ b/zero.Web.UI/App/components/tables/table-value.js
@@ -1,96 +1,34 @@
 import { warn } from 'zero/services/debug';
 import MediaApi from 'zero/resources/media';
-import Strings from 'zero/services/strings';
-import Localization from 'zero/services/localization';
 
 export default function (el, binding)
 {
   const item = binding.value.item;
-  const column = binding.value.column;
-  const value = item[column.field];
-  const isEmpty = typeof value === 'undefined' || value === null;
+  const column = binding.value.column.column;
+  const value = item[column.path];
 
-  let render = (value, asHtml) =>
+  if (column.isHtml)
   {
-    if (asHtml)
-    {
-      el.innerHTML = value;
-    }
-    else
-    {
-      el.innerText = value;
-    }
-  };
-
-  // set multiline for cell
-  el.classList.toggle('is-multiline', column.multiline === true);
-  el.classList.toggle('is-bold', column.bold === true);
-
-
-  // render empty
-  //if (isEmpty)
-  //{
-  //  render(column.default || value);
-  //}
-  // output text string or HTML
-  if (!column.as || column.as === 'text' || column.as === 'html')
-  {
-    const hasFunc = typeof column.render === 'function';
-    const hasSharedIndicator = column.shared === true && item.blueprint != null; //item.appId === zero.sharedAppId;
-
-    let html = hasFunc ? column.render(item, column) : value;
-    let isHtml = column.as === 'html' || hasSharedIndicator;
-
-    if (column.localize === true)
-    {
-      html = Localization.localize(html, column.tokens || {});
-    }
-
-    if (hasSharedIndicator)
-    {
-      //html = html + ' <i class="ui-table-field-shared is-inline fth-radio"></i>';
-      html = html + ' <i class="ui-table-field-shared-2 is-inline">SYNCED</i>';
-    }
-
-    render(html, isHtml);
-  }
-  // formatted date
-  else if (column.as === 'date')
-  {
-    render(Strings.date(value, 'short'));
-  }
-  // formatted date with time
-  else if (column.as === 'datetime')
-  {
-    render(Strings.date(value, 'short') + ' <span class="-minor">' + Strings.date(value, 'time') + '</span>', true);
-  }
-  // render formatted price
-  else if (column.as === 'price')
-  {
-    let price = isNaN(value) ? 0 : value;
-    let hasDecimals = ~~price !== price;
-
-    price = hasDecimals ? (price / 1).toFixed(2) : ~~price;
-
-    render(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "&nbsp;") + "&nbsp;&euro;", true);
-  }
-  // render checkbox
-  else if (column.as === 'bool')
-  {
-    render('<span class="ui-table-field-bool' + (value === true ? ' is-checked' : '') + (column.colored ? ' is-colored' : '') + '"></span>', true);
-  }
-  // render an image
-  else if (column.as === 'image')
-  {
-    render(value ? `<img src="${MediaApi.getImageSource(value)}" class="ui-table-field-image">` : '', true);
-  }
-  // render global flag
-  else if (column.as === 'shared')
-  {
-    render(item.appId === zero.sharedAppId ? '<i class="ui-table-field-shared fth-radio"></i>' : '', true);
+    el.innerHTML = column.render(value, item);
   }
   else
   {
-    warn(`ui-table: Column display type ("${column.as}") is not supported`, this);
+    el.innerText = column.render(value, item);
   }
+
+  //let render = (value, asHtml) =>
+  //{
+  //  if (asHtml)
+  //  {
+  //    el.innerHTML = value;
+  //  }
+  //  else
+  //  {
+  //    el.innerText = value;
+  //  }
+  //};
+
+  // set multiline for cell
+  //el.classList.toggle('is-multiline', column.multiline === true);
+  //el.classList.toggle('is-bold', column.bold === true);
 }
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tables/table.vue b/zero.Web.UI/App/components/tables/table.vue
index 8c82d5fc..86598871 100644
--- a/zero.Web.UI/App/components/tables/table.vue
+++ b/zero.Web.UI/App/components/tables/table.vue
@@ -2,24 +2,23 @@
   <div class="ui-table-outer">
     <div class="ui-table" :class="{'is-inline': inline }">
       <header class="ui-table-row ui-table-head">      
-        <div v-for="column in columns" :key="column.key" class="ui-table-cell" :table-field="column.field" :style="column.flex">
+        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :table-field="column.path" :style="column.flex" :class="column.options.class">
           {{ column.label | localize }}
-          <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="tableFilter.orderBy == column.field ? 'sort-' + (tableFilter.orderIsDescending ? 'desc' : 'asc') : null">
+          <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="filter.orderBy == column.path ? 'sort-' + (filter.orderIsDescending ? 'desc' : 'asc') : null">
             <i class="arrow arrow-down"></i>
           </button>
         </div>
-        <button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-head is-selectable" @click="select()">
+        <!--<button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-head is-selectable" @click="select()">
           <i class="fth-check-square"></i>
-        </button>
+        </button>-->
       </header>
 
-      <div class="ui-table-row" v-for="item in items" :class="{ 'is-selected': configuration.selectable && selected.indexOf(item) > -1 }">
-        <component :is="column.tag" type="button" :to="getLink(column, item)" @click="onClick($event, column, item)" v-for="column in columns" :key="column.key" 
-                   class="ui-table-cell" :style="column.flex" :table-field="column.field" :field-type="column.as" v-table-value="{ item, column }"></component>
-        <button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-selectable" @click="select(item)">
+      <component :is="component" v-for="item in items" :to="getLink(item)" class="ui-table-row" :class="{ 'is-selected': selected.indexOf(item) > -1 }">
+        <div v-for="column in columns" :key="column.path" class="ui-table-cell" :class="column.options.class" :style="column.flex" :table-field="column.path" :field-type="column.type" v-table-value="{ column, item }"></div>
+        <!--<button type="button" v-if="configuration.selectable" table-field="table_selectable" class="ui-table-cell is-selectable" @click="select(item)">
           <i class="fth-check-square"></i>
-        </button>
-      </div>
+        </button>-->
+      </component>
 
       <div class="ui-table-empty" v-if="!isLoading && items.length < 1">
         <i class="ui-table-empty-icon fth-list"></i>
@@ -32,7 +31,7 @@
     </div>
 
     <footer class="ui-table-pagination" v-if="pages > 1">
-      <ui-pagination :pages="pages" :page="tableFilter.page" @change="setPage" :inline="inline" />
+      <ui-pagination :pages="pages" :page="filter.page" @change="setPage" :inline="inline" />
     </footer>
 
   </div>
@@ -40,170 +39,97 @@
 
 
 <script>
-  import TableValueDirective from './table-value.js';
   import UiPagination from 'zero/components/pagination.vue';
-  import { each as _each, extend as _extend, debounce as _debounce } from 'underscore';
-
-  const defaultConfig = {
-    order: {
-      // allow sorting of columns (asc + desc)
-      enabled: true,
-      // default order by
-      by: 'createdDate',
-      // order is descending
-      isDescending: true
-    },
-    // default items per page
-    pageSize: 25,
-    // define columns and how they are displayed
-    columns: {},
-    // prefix for column header translations
-    labelPrefix: '',
-    // scroll to top on page change
-    scrollToTop: true,
-    // promise which returns items based on the current filter and sorting
-    items: null,
-    // ability to select items
-    selectable: false
-  };
+  import List from 'zero/core/list.js';
+  import TableValue from './table-value.js';
+  import { debounce as _debounce } from 'underscore';
 
   export default {
     name: 'uiTable',
 
     props: {
-      value: {
-        type: Object,
-        required: true,
-        default: () => { }
+      config: {
+        type: [String, List],
+        required: true
       },
       inline: {
         type: Boolean,
         default: false
-      },
-      filter: {
-        type: Object,
-        default: () =>
-        {
-          return {};
-        }
-      },
-      search: {
-        type: String,
-        default: null
       }
     },
 
+    directives: {
+      'table-value': TableValue
+    },
+
     components: { UiPagination },
 
-    watch: {
-      'value.columns': function (val)
-      {
-        this.generateColumns(val);
-      },
-      'value.search': function (val)
-      {
-        this.tableFilter.search = val;
-      },
-      'value.items': function (val)
-      {
-        this.initialize();
-      },
-      'tableFilter.search': function (val)
-      {
-        this.debouncedUpdate();
-      },
-      'filter': {
-        deep: true,
-        handler: function (val)
-        {
-          this.tableFilter.filter = val;
-          this.debouncedUpdate();
-        }
-      },
-      'search': function (val)
-      {
-        this.tableFilter.search = val;
-      },
-      $route(to, from)
-      {
-        this.initialize();
-      }
-    },
-
     data: () => ({
-      configuration: {},
+      loaded: false,
+      listConfig: {},
       columns: [],
+      filter: {},
+
       items: [],
+      component: 'div',
       isLoading: true,
+
       pages: 1,
       count: 0,
-      tableFilter: {
-        orderBy: null,
-        orderIsDescending: true,
-        page: 1,
-        pageSize: 1,
-        search: null
-      },
+
       debouncedUpdate: null,
       selected: []
     }),
 
-    mounted()
+    created()
     {
-      this.initialize();
+      this.setup();
     },
 
-    directives: {
-      'table-value': TableValueDirective
+    mounted()
+    {
+      this.load(true);
+    },
+
+    watch: {
+      filter: {
+        deep: true,
+        handler: function (val)
+        {
+          this.debouncedUpdate();
+        }
+      },
+      $route(to, from)
+      {
+        this.setup();
+      }
     },
 
     methods: {
 
-      getLink(column, item)
-      {
-        if (column.tag !== 'router-link')
-        {
-          return null;
-        }
-
-        return column.link(item);
-      },
-
-      onClick(e, column, item)
-      {
-        e.preventDefault();
-
-        if (typeof column.action === 'function')
-        {
-          column.action(item);
-        }
-      },
-
-      initialize()
+      setup()
       {
         this.debouncedUpdate = _debounce(this.update, 300);
-
-        this.configuration = _extend(JSON.parse(JSON.stringify(defaultConfig)), this.value);
-
-        this.tableFilter.pageSize = this.configuration.pageSize;
-
-        if (this.configuration.order.enabled)
+        this.listConfig = typeof this.config === 'string' ? this.zero.getList(this.config) : this.config;
+        this.columns = this.listConfig.columns.map(column =>
         {
-          this.tableFilter.orderBy = this.configuration.order.by;
-          this.tableFilter.orderIsDescending = this.configuration.order.isDescending;
-        }
-
-        this.generateColumns(this.configuration.columns);
-
-        this.load(true);
+          return {
+            ...column,
+            column: column,
+            label: column.options.hideLabel ? null : (column.options.label || this.listConfig.templateLabel(column.path)),
+            flex: column.options.width ? { 'flex': '0 1 ' + column.options.width + 'px' } : {}
+          };
+        });
+        this.filter = { ...this.listConfig.filter };
+        this.component = typeof !!this.listConfig.link ? 'router-link' : 'div';
+        this.loaded = true;
       },
 
+
       // load items based on the current filter
       load(initial)
       {
-        this.tableFilter.filter = this.filter;
-
-        this.configuration.items(this.tableFilter).then(result =>
+        this.listConfig.fetch(this.filter).then(result =>
         {
           this.$emit('loaded', result);
           this.pages = result.totalPages;
@@ -215,18 +141,19 @@
           this.items = result.items;
           this.selected = [];
 
-          if (!initial && this.configuration.scrollToTop)
-          {
-            let container = document.querySelector('.app-main');
+          //if (!initial && this.configuration.scrollToTop)
+          //{
+          //  let container = document.querySelector('.app-main');
 
-            if (container)
-            {
-              this.$nextTick(() => container.scrollTo({ top: 0, behavior: 'smooth' }));
-            }
-          }
+          //  if (container)
+          //  {
+          //    this.$nextTick(() => container.scrollTo({ top: 0, behavior: 'smooth' }));
+          //  }
+          //}
         });
       },
 
+
       // updates the list (debounced)
       update()
       {
@@ -236,62 +163,48 @@
         }
       },
 
-      // generate columns from the given config
-      generateColumns(columns)
+
+      getLink(item)
       {
-        this.columns = [];
-
-        _each(columns, (column, key) =>
+        if (!this.listConfig.link)
         {
-          let data = column;
-
-          if (typeof column === 'string')
-          {
-            data = {
-              as: column
-            };
+          return null;
+        }
+        else if (typeof this.listConfig.link === 'function')
+        {
+          return this.listConfig.link(item);
+        }
+        return {
+          name: this.listConfig.link,
+          params: {
+            id: item.id
           }
-
-          if (data.as === 'shared')
-          {
-            data.width = 56;
-            data.label = null;
-            data.sort = false;
-          }
-
-          this.columns.push(_extend(data, {
-            key: key,
-            tag: typeof data.link !== 'undefined' ? 'router-link' : (typeof data.action !== 'undefined' ? 'button' : 'div'),
-            label: typeof data.label !== 'undefined' ? data.label : (this.configuration.labelPrefix + key),
-            field: key,
-            canSort: typeof data.sort === 'boolean' ? data.sort : this.configuration.order.enabled,
-            flex: data.width ? { 'flex': '0 1 ' + data.width + 'px' } : {}
-          }));
-        });
+        };
       },
 
+
       // set the active page
       setPage(index)
       {
-        this.tableFilter.page = index;
+        this.filter.page = index;
         this.debouncedUpdate();
       },
 
       // sort by a column
       sort(column)
       {
-        if (this.tableFilter.orderBy === column.field && this.tableFilter.orderIsDescending)
+        if (this.filter.orderBy === column.path && this.filter.orderIsDescending)
         {
-          this.tableFilter.orderIsDescending = false;
+          this.filter.orderIsDescending = false;
         }
-        else if (this.tableFilter.orderBy === column.field)
+        else if (this.filter.orderBy === column.path)
         {
-          this.tableFilter.orderBy = null;
+          this.filter.orderBy = null;
         }
         else
         {
-          this.tableFilter.orderBy = column.field;
-          this.tableFilter.orderIsDescending = true;
+          this.filter.orderBy = column.path;
+          this.filter.orderIsDescending = true;
         }
 
         this.debouncedUpdate();
@@ -374,6 +287,7 @@
     border-bottom: 1px solid var(--color-table-line-horizontal);
     position: relative;
     transition: outline 0.1s ease, box-shadow 0.1s ease;
+    color: var(--color-text);
 
     &:last-child
     {
@@ -381,6 +295,12 @@
     }
   }
 
+  a.ui-table-row:hover
+  {
+    box-shadow: var(--shadow-mid);
+    z-index: 2;
+  }
+
 
   .ui-table-head
   {
@@ -414,6 +334,7 @@
     text-overflow: ellipsis;
     min-width: 20px;
     line-height: 20px;
+    color: var(--color-text);
 
     &:first-child
     {
@@ -453,19 +374,6 @@
     }
   }
 
-  a.ui-table-cell,
-  button.ui-table-cell
-  {
-    color: var(--color-text);
-    transition: none;
-   
-    &:hover
-    {
-      color: var(--color-primary);
-      background: var(--color-table-hover);
-    }
-  }
-
   .ui-table-sort
   {
     height: 20px;
diff --git a/zero.Web.UI/App/core/editor-field.js b/zero.Web.UI/App/core/editor-field.js
index 51b3ad4d..ec1dc1f8 100644
--- a/zero.Web.UI/App/core/editor-field.js
+++ b/zero.Web.UI/App/core/editor-field.js
@@ -255,7 +255,7 @@ class EditorField
    * Renders a culture picker
    * @returns {EditorField}
    */
-  culturePicker(limit)
+  culturePicker()
   {
     return this._setComponent(CulturePicker);
   }
diff --git a/zero.Web.UI/App/core/editor.js b/zero.Web.UI/App/core/editor.js
index d82761da..4eb24f09 100644
--- a/zero.Web.UI/App/core/editor.js
+++ b/zero.Web.UI/App/core/editor.js
@@ -4,23 +4,25 @@ import EditorField from './editor-field.js';
 class Editor
 {
   #alias;
+  #prefix;
 
   /**
    * Overrides the string generation for the label
    */
-  templateLabel = field => field;
+  templateLabel = field => this.#prefix + field;
   /**
    * Overrides the string generation for the description
    */
-  templateDescription = field => field;
+  templateDescription = field => this.#prefix + field + '_text';
 
   tabs = [];
   fields = [];
 
 
-  constructor(alias)
+  constructor(alias, prefix)
   {
     this.#alias = alias;
+    this.#prefix = prefix || '';
   }
 
 
diff --git a/zero.Web.UI/App/core/list-column.js b/zero.Web.UI/App/core/list-column.js
new file mode 100644
index 00000000..839013e5
--- /dev/null
+++ b/zero.Web.UI/App/core/list-column.js
@@ -0,0 +1,202 @@
+
+import MediaApi from 'zero/resources/media';
+import Strings from 'zero/services/strings';
+import Localization from 'zero/services/localization';
+
+class ListColumn
+{
+  path = null;
+  options = {
+    label: null,
+    hideLabel: false,
+    width: null,
+    canSort: true,
+    class: ''
+  };
+
+  #type = null;
+  #func = () => { };
+  #funcOptions = {};
+  #asHtml = false;
+
+  constructor(path, options)
+  {
+    this.path = path;
+    this.options = { ...this.options, ...options };
+  }
+
+
+  get isHtml()
+  {
+    return this.#asHtml;
+  }
+
+  get type()
+  {
+    return this.#type;
+  }
+
+
+  /**
+   * Render the output by passing the value and the whole entity
+   * @param {any} value - The value to process
+   * @param {any} model - The model entity
+   * @returns {string}
+   */
+  render(value, model)
+  {
+    return this.#func(value, this.#funcOptions, model);
+  }
+
+
+  /**
+   * Render a custom component
+   * @param {Function} renderFunc - The function which renders the output (parameter is value)
+   * @param {boolean} [asHtml] - Render as a plain string or as HTML
+   * @param {string} [type] - Pass the type name which will be added in the HTML as [field-type="type"]
+   * @returns {ListColumn}
+   */
+  custom(renderFunc, asHtml, type)
+  {
+    this.#type = type || 'custom';
+    this.#asHtml = asHtml || false;
+    this.#func = (value, opts, model) =>
+    {
+      return renderFunc(value, model, opts);
+    };
+    return this;
+  }
+
+
+  /**
+   * Render a text output
+   * @param {object} [options] - Custom options
+   * @param {boolean} [options.localize] - Localize the value in case it is a translation
+   * @param {string} [options.tokens] - For localized values you can pass in replacement tokens here
+   * @param {boolean} [options.wrap] - Allow text wrapping / multi-line
+   * @returns {ListColumn}
+   */
+  text(options)
+  {
+    this.#type = 'text';
+    this.#funcOptions = { localize: false, tokens: {}, wrap: false, ...options };
+    this.#func = (value, opts) =>
+    {
+      let result = value;
+      if (opts.localize)
+      {
+        result = Localization.localize(value, opts.tokens || {});
+      }
+      return result;
+    }
+    return this;
+  }
+
+
+  /**
+   * Render a text (as HTML) output
+   * @param {object} [options] - Custom options
+   * @param {boolean} [options.localize] - Localize the value in case it is a translation
+   * @param {string} [options.tokens] - For localized values you can pass in replacement tokens here
+   * @param {boolean} [options.wrap] - Allow text wrapping / multi-line
+   * @returns {ListColumn}
+   */
+  html(options)
+  {
+    this.#type = 'html';
+    this.#asHtml = true;
+    return this.text(options);
+  }
+
+
+  /**
+   * Output a date
+   * @param {object} [options] - Custom options
+   * @param {string} [options.format] - Date format for the output (can also be "long" for a full date and "short" for full date-time)
+   * @returns {ListColumn}
+   */
+  date(options)
+  {
+    this.#type = 'date';
+    this.#funcOptions = { format: 'short', ...options };
+    this.#func = (value, opts) => Strings.date(value, opts.format);
+    return this;
+  }
+
+
+  /**
+   * Output a currency value
+   * @returns {ListColumn}
+   */
+  currency()
+  {
+    this.#type = 'currency';
+    this.#asHtml = true;
+    this.#func = (value, opts) =>
+    {
+      let price = isNaN(value) ? 0 : value;
+      let hasDecimals = ~~price !== price;
+
+      price = hasDecimals ? (price / 1).toFixed(2) : ~~price;
+
+      return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "&nbsp;") + "&nbsp;&euro;";
+    };
+    return this;
+  }
+
+
+  /**
+   * Output a boolean value by displaying a checkmark
+   * @param {object} [options] - Custom options
+   * @param {string} [options.colored] - Green color for check and red color for cross
+   * @returns {ListColumn}
+   */
+  boolean(options)
+  {
+    this.#type = 'boolean';
+    this.#asHtml = true;
+    this.#funcOptions = { colored: false, ...options };
+    this.#func = (value, opts) => '<span class="ui-table-field-bool' + (value === true ? ' is-checked' : '') + (opts.colored ? ' is-colored' : '') + '"></span>';
+    return this;
+  }
+
+
+  /**
+   * Output an image by using the value media ID
+   * @returns {ListColumn}
+   */
+  image()
+  {
+    this.#type = 'image';
+    this.#asHtml = true;
+    this.#func = (value, opts) => value ? `<img src="${MediaApi.getImageSource(value)}" class="ui-table-field-image">` : '';
+    return this;
+  }
+
+
+  /**
+   * Shortcut for text() with predefined label and class
+   * @returns {ListColumn}
+   */
+  name()
+  {
+    this.options.label = '@ui.name';
+    this.options.class = 'is-bold';
+    return this.text();
+  }
+
+
+  /**
+   * Shortcut for boolean() with predefined label and width
+   * @returns {ListColumn}
+   */
+  active()
+  {
+    this.options.label = '@ui.active';
+    this.options.width = 200;
+    return this.boolean();
+  }
+}
+
+
+export default ListColumn;
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/list.js b/zero.Web.UI/App/core/list.js
new file mode 100644
index 00000000..61795010
--- /dev/null
+++ b/zero.Web.UI/App/core/list.js
@@ -0,0 +1,110 @@
+
+import Editor from './editor.js';
+import ListColumn from './list-column.js';
+
+class List
+{
+  #alias;
+  #fetch;
+  #filterOptions;
+
+  /**
+   * Set the default filter options which are passed to the fetch function.
+   * You can extend it to your needs
+   */
+  filter = {
+    // default order by
+    orderBy: 'createdDate',
+    // order is descending
+    isDescending: true,
+    // current page index
+    page: 1,
+    // default items per page
+    pageSize: 25,
+    // search term
+    search: null,
+    // custom filter 
+    filter: null
+  };
+
+  /**
+   * Overrides the string generation for the label
+   */
+  templateLabel = field => field;
+
+  /**
+   * Build a link for a row (returns options passed to <router-link /> or a route name where id-param is automatically inserted)
+   */
+  link = null;
+
+  columns = [];
+
+
+  constructor(alias)
+  {
+    this.#alias = alias;
+  }
+
+
+  get alias()
+  {
+    return this.#alias;
+  }
+
+  get filterOptions()
+  {
+    return this.#filterOptions;
+  }
+
+
+  /**
+   * Specify a list column
+   * @param {string} path - Model path
+   * @param {object} [options] - Custom options
+   * @param {string} [options.label] - A custom label for this column (otherwise it's generated via `templateLabel`)
+   * @param {boolean} [options.hideLabel=false] - Hide the column label
+   * @param {number} [options.width] - Custom width of the column in px
+   * @param {boolean} [options.canSort=true] - Disable/enable sorting within this column
+   * @param {string} [options.class] - Append HTML class to the generated cells
+   * @returns {ListColumn}
+   */
+  column(path, options)
+  {
+    const column = new ListColumn(path, options);
+    this.columns.push(column);
+    return column;
+  }
+
+
+  /**
+   * Get list items with this function
+   * @param {function} callback - This function is called when the list is requested (parameter is the filter object). You should either return a Promise or an Array here.
+   */
+  onFetch(callback)
+  {
+    this.#fetch = callback;
+  }
+
+
+  /**
+   * Fetch items with the specified filter
+   */
+  fetch(filter)
+  {
+    return this.#fetch(filter);
+  }
+
+
+  /**
+   * Filter a list by providing an editor renderer and a default template.
+   * This activates the Filter button and overlay in the <ui-table-filter /> component.
+   * @param {Editor} editor - An editor renderer which opens in an overlay
+   * @param {object} template - The default template to use when creating a new filter
+   */
+  useFilter(editor, template)
+  {
+    this.#filterOptions = { editor, template };
+  }
+};
+
+export default List;
\ No newline at end of file
diff --git a/zero.Web.UI/App/core/plugin.js b/zero.Web.UI/App/core/plugin.js
index cecca522..ed87246c 100644
--- a/zero.Web.UI/App/core/plugin.js
+++ b/zero.Web.UI/App/core/plugin.js
@@ -6,6 +6,7 @@ class Plugin
 
   routes = [];
   editors = [];
+  lists = [];
 
 
   constructor(name)
@@ -38,6 +39,7 @@ class Plugin
     this.editors.push(config);
   }
 
+
   /*
    * Adds new form renderers to the global configuration 
    * Can either by an array (where a key of the child object is `alias`) or an object where the key is the renderer alias
@@ -48,6 +50,27 @@ class Plugin
     items.forEach(item => this.addEditor(item));
   }
 
+
+  /*
+   * Add a new vue list renderer to the global configuration 
+   */
+  addList(config)
+  {
+    this.lists.push(config);
+  }
+
+
+  /*
+   * Adds new list renderers to the global configuration
+   * Can either by an array (where a key of the child object is `alias`) or an object where the key is the renderer alias
+   */
+  addLists(lists)
+  {
+    let items = !Array.isArray(lists) ? Object.values(lists) : lists;
+    items.forEach(item => this.addList(item));
+  }
+
+
   /*
    * Add a new route to vue-router 
    */
@@ -56,6 +79,7 @@ class Plugin
     this.routes.push(route);
   }
 
+
   /*
    * Adds new routes to vue-router 
    */
diff --git a/zero.Web.UI/App/core/plugin.zero.js b/zero.Web.UI/App/core/plugin.zero.js
index 561fcc60..e997ab58 100644
--- a/zero.Web.UI/App/core/plugin.zero.js
+++ b/zero.Web.UI/App/core/plugin.zero.js
@@ -1,6 +1,7 @@
 
 import Plugin from './plugin.js';
-import editors from '../editors/all.js';
+import editors from '../renderers/editors/all.js';
+import lists from '../renderers/lists/all.js';
 import routes from './routes.js';
 
 const plugin = new Plugin('zero');
@@ -8,6 +9,9 @@ const plugin = new Plugin('zero');
 // add renderers
 plugin.addEditors(editors);
 
+// add renderers
+plugin.addLists(lists);
+
 // add routes
 plugin.addRoutes(routes);
 
diff --git a/zero.Web.UI/App/core/zero.js b/zero.Web.UI/App/core/zero.js
index 73ff3f26..3858d2b8 100644
--- a/zero.Web.UI/App/core/zero.js
+++ b/zero.Web.UI/App/core/zero.js
@@ -20,6 +20,7 @@ class Zero
   #vue = null;
   #plugins = [];
   #editors = [];
+  #lists = [];
   #routes = [];
   #router = null;
 
@@ -98,12 +99,15 @@ class Zero
     // append editors
     plugin.editors.forEach(x => this.#editors.push(x));
 
+    // append lists
+    plugin.lists.forEach(x => this.#lists.push(x));
+
     console.log(`[zero] Installed %c${plugin.name}%cplugin`, 'font-style:italic;');
   }
 
 
   /*
-   * Returns a renderer
+   * Returns an editor renderer
    */
   getEditor(alias)
   {
@@ -111,7 +115,23 @@ class Zero
 
     if (!renderer)
     {
-      console.warn(`[zero] Could not find renderer ${alias}`);
+      console.warn(`[zero] Could not find editor renderer ${alias}`);
+    }
+
+    return renderer;
+  }
+
+
+  /*
+  * Returns a list renderer
+  */
+  getList(alias)
+  {
+    const renderer = this.#lists.find(x => x.alias === alias);
+
+    if (!renderer)
+    {
+      console.warn(`[zero] Could not find list renderer ${alias}`);
     }
 
     return renderer;
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index 115c5cba..a2b3f981 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -96,7 +96,7 @@
       },
       description()
       {
-        return this.config.options.description || this.editor.templateDescription(this.config.path);
+        return Localization.localize(this.config.options.description || this.editor.templateDescription(this.config.path), { hideEmpty: true });
       }
     },
 
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index df141709..4fa661de 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -1,10 +1,9 @@
 <template>
   <div>
-    <div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': true }">
+    <div class="editor-outer" v-if="loaded" :class="{ 'has-tabs': hasTabs }">
       <ui-tabs class="editor">
         <ui-tab v-if="!tab.disabled(value)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :key="index">
           <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value" />
-          <!--<component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />-->
         </ui-tab>
       </ui-tabs>
     </div>
@@ -28,7 +27,7 @@
     },
 
     props: {
-      editor: {
+      config: {
         type: [String, Editor],
         required: true
       },
@@ -46,21 +45,36 @@
     data: () => ({
       editorConfig: null,
       loaded: false,
+      hasTabs: false,
       tabs: []
     }),
 
     created()
     {
-      this.editorConfig = typeof this.editor === 'string' ? this.zero.getEditor(this.editor) : this.editor;
-      this.tabs = this.editorConfig.tabs.map(tab =>
+      this.editorConfig = typeof this.config === 'string' ? this.zero.getEditor(this.config) : this.config;
+
+      if (this.editorConfig.tabs.length > 0)
       {
-        return {
-          ...tab,
-          count: value => typeof tab.count === 'number' ? tab.count : (typeof tab.count === 'function' ? tab.count(value) : 0),
-          disabled: value => typeof tab.disabled === 'boolean' ? tab.disabled : (typeof tab.disabled === 'function' ? tab.disabled(value) : false),
-          fields: this.editorConfig.getFields(tab)
-        };
-      });
+        this.hasTabs = true;
+        this.tabs = this.editorConfig.tabs.map(tab =>
+        {
+          return {
+            ...tab,
+            count: value => typeof tab.count === 'number' ? tab.count : (typeof tab.count === 'function' ? tab.count(value) : 0),
+            disabled: value => typeof tab.disabled === 'boolean' ? tab.disabled : (typeof tab.disabled === 'function' ? tab.disabled(value) : false),
+            fields: this.editorConfig.getFields(tab)
+          };
+        });
+      }
+      else
+      {
+        this.tabs = [{
+          name: '_',
+          count: value => 0,
+          disabled: value => false,
+          fields: this.editorConfig.getFields()
+        }];
+      }
 
       this.loaded = true;
     },
diff --git a/zero.Web.UI/App/editors/all.js b/zero.Web.UI/App/editors/all.js
deleted file mode 100644
index a46add92..00000000
--- a/zero.Web.UI/App/editors/all.js
+++ /dev/null
@@ -1,18 +0,0 @@
-
-import application from './application.js';
-//import country from './country.js';
-//import language from './language.js';
-//import media from './media.js';
-//import translation from './translation.js';
-//import user from './user.js';
-//import userRole from './userRole.js';
-
-export default {
-  application,
-  //country,
-  //language,
-  //media,
-  //translation,
-  //user,
-  //userRole
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/country.js b/zero.Web.UI/App/editors/country.js
deleted file mode 100644
index cd981948..00000000
--- a/zero.Web.UI/App/editors/country.js
+++ /dev/null
@@ -1,77 +0,0 @@
-export default {
-  alias: 'country',
-
-  labelTemplate(field)
-  {
-    return "@country.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@country.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true,
-      maxLength: 120
-    },
-    {
-      field: 'alias',
-      display: 'alias',
-      label: '@ui.alias',
-      required: true
-    },
-    {
-      field: 'code',
-      display: 'text',
-      required: true,
-      maxLength: 2
-    },
-    {
-      field: 'isPreferred',
-      display: 'toggle'
-    }
-  ],
-
-  list: {
-    labelPrefix: '@country.fields.',
-    allowOrder: false,
-    search: null,
-    columns: {
-      flag: {
-        label: '',
-        as: 'html',
-        render: item => `<i class="flag flag-${item.code.toLowerCase()}"></i>`,
-        width: 62,
-        sort: false
-      },
-      name: {
-        label: '@ui.name',
-        as: 'text',
-        bold: true,
-        link: item =>
-        {
-          return {
-            name: zero.alias.settings.countries + '-edit',
-            params: { id: item.id }
-          };
-        },
-        shared: true
-      },
-      code: 'text',
-      isPreferred: {
-        as: 'bool',
-        width: 200
-      },
-      isActive: {
-        as: 'bool',
-        label: '@ui.active',
-        width: 200
-      }
-    },
-  }
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/language.js b/zero.Web.UI/App/editors/language.js
deleted file mode 100644
index 842a4d42..00000000
--- a/zero.Web.UI/App/editors/language.js
+++ /dev/null
@@ -1,70 +0,0 @@
-
-import LanguagesApi from 'zero/resources/languages';
-
-export default {
-  alias: 'language',
-
-  labelTemplate(field)
-  {
-    return "@language.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@language.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true,
-      maxLength: 60
-    },
-    {
-      field: 'code',
-      display: 'text',
-      required: true,
-      maxLength: 10
-    },
-    {
-      field: 'inheritedLanguageId',
-      display: 'language'
-    },
-    {
-      field: 'isDefault',
-      display: 'toggle'
-    },
-    {
-      field: 'isOptional',
-      display: 'toggle'
-    }
-  ],
-
-  list: {
-    items: LanguagesApi.getAll,
-    labelPrefix: '@language.fields.',
-    search: null,
-    columns: {
-      name: {
-        label: '@ui.name',
-        as: 'text',
-        bold: true,
-        shared: true,
-        link: item =>
-        {
-          return {
-            name: zero.alias.settings.languages + '-edit',
-            params: { id: item.id }
-          };
-        }
-      },
-      code: 'text',
-      isDefault: {
-        as: 'bool',
-        width: 200
-      }
-    }
-  }
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/media.js b/zero.Web.UI/App/editors/media.js
deleted file mode 100644
index 928786d2..00000000
--- a/zero.Web.UI/App/editors/media.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
-  alias: 'media',
-
-  labelTemplate(field)
-  {
-    return "@media.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@media.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'source',
-      display: 'custom',
-      required: true,
-      path: '@zero/pages/media/upload.vue'
-    },
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true
-    },
-    {
-      field: 'alternativeText',
-      display: 'text'
-    },
-    {
-      field: 'caption',
-      display: 'textarea'
-    }
-  ]
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/translation.js b/zero.Web.UI/App/editors/translation.js
deleted file mode 100644
index 1e55cffc..00000000
--- a/zero.Web.UI/App/editors/translation.js
+++ /dev/null
@@ -1,29 +0,0 @@
-let link = item =>
-{
-  return {
-    name: zero.alias.settings.translations + '-edit',
-    params: { id: item.id }
-  };
-};
-
-export default {
-  alias: 'translation',
-
-  list: {
-    labelPrefix: '@translation.fields.',
-    order: {
-      enabled: false
-    },
-    columns: {
-      key: {
-        as: 'text',
-        shared: true,
-        link: link
-      },
-      value: {
-        as: 'text',
-        link: link
-      }
-    },
-  }
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/user.js b/zero.Web.UI/App/editors/user.js
deleted file mode 100644
index 2e77bd8b..00000000
--- a/zero.Web.UI/App/editors/user.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { filter as _filter } from 'underscore';
-
-export default {
-  alias: 'user',
-
-  tabs: [
-    {
-      name: 'general',
-      label: '@ui.tab_general'
-    },
-    {
-      name: 'permissions',
-      label: '@user.tab_permissions',
-      count: x =>
-      {
-        return _filter(x.claims || [], claim =>
-        {
-          const value = claim.value.split(':')[1];
-          return value !== 'none' && value !== 'false' && !!value;
-        }).length;
-      }
-    }
-  ],
-
-  labelTemplate(field)
-  {
-    return "@user.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@user.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true,
-      maxLength: 80
-    },
-    {
-      field: 'email',
-      display: 'text',
-      required: true,
-      maxLength: 120
-    },
-    {
-      field: 'languageId',
-      display: 'culture',
-      required: true
-    },
-    {
-      field: 'avatarId',
-      display: 'media',
-      type: 'image'
-    },
-    {
-      tab: 'permissions',
-      field: 'claims',
-      display: 'custom',
-      hideLabel: true,
-      path: '@zero/components/permissions.vue'
-    }
-  ],
-
-  list: {
-    labelPrefix: '@user.fields.',
-    search: null,
-    columns: {
-      avatarId: {
-        label: '',
-        as: 'image',
-        width: 70,
-        link: item =>
-        {
-          return {
-            name: zero.alias.settings.users + '-edit',
-            params: { id: item.id }
-          };
-        },
-        sort: false
-      },
-      name: {
-        label: '@ui.name',
-        as: 'text',
-        bold: true,
-        link: item =>
-        {
-          return {
-            name: zero.alias.settings.users + '-edit',
-            params: { id: item.id }
-          };
-        },
-        shared: true
-      },
-      email: 'text',
-      roles: {
-        as: 'text'
-      },
-      isActive: {
-        as: 'bool',
-        width: 200
-      }
-    },
-  }
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/userRole.js b/zero.Web.UI/App/editors/userRole.js
deleted file mode 100644
index b5576e6a..00000000
--- a/zero.Web.UI/App/editors/userRole.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { filter as _filter } from 'underscore';
-
-export default {
-  alias: 'userRole',
-
-  tabs: [
-    {
-      name: 'general',
-      label: '@ui.tab_general'
-    },
-    {
-      name: 'permissions',
-      label: '@role.tab_permissions',
-      count: x =>
-      {
-        return _filter(x.claims || [], claim =>
-        {
-          const value = claim.value.split(':')[1];
-          return value !== 'none' && value !== 'false' && !!value;
-        }).length;
-      }
-    }
-  ],
-
-  labelTemplate(field)
-  {
-    return "@role.fields." + field;
-  },
-
-  descriptionTemplate(field)
-  {
-    return "@role.fields." + field + "_text";
-  },
-
-  fields: [
-    {
-      field: 'name',
-      display: 'text',
-      label: '@ui.name',
-      required: true
-    },
-    {
-      field: 'description',
-      display: 'text'
-    },
-    {
-      field: 'icon',
-      display: 'iconpicker'
-    },
-    {
-      tab: 'permissions',
-      field: 'claims',
-      display: 'custom',
-      hideLabel: true,
-      path: '@zero/components/permissions.vue'
-    }
-  ]
-};
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/application.vue b/zero.Web.UI/App/pages/settings/application.vue
index 9f83fe9d..67efcffd 100644
--- a/zero.Web.UI/App/pages/settings/application.vue
+++ b/zero.Web.UI/App/pages/settings/application.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="application" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor editor="application" v-model="model" :meta="meta" :disabled="disabled" />
+    <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
+    <ui-editor config="application" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
@@ -45,7 +45,7 @@
       onDelete(item, opts)
       {
         opts.hide();
-        this.$refs.form.onDelete(ApplicationsApi.delete.bind(this, this.id));
+        this.$refs.form.onDelete(ApplicationsApi.delete.bind(this, this.$route.params.id));
       }
     }
   }
diff --git a/zero.Web.UI/App/pages/settings/countries.vue b/zero.Web.UI/App/pages/settings/countries.vue
index 47b3d170..f753cce9 100644
--- a/zero.Web.UI/App/pages/settings/countries.vue
+++ b/zero.Web.UI/App/pages/settings/countries.vue
@@ -1,29 +1,21 @@
 <template>
   <div class="countries">
     <ui-header-bar title="@country.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :attach="$refs.table" />
       <ui-add-button :route="createRoute" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table ref="table" v-model="tableConfig" @count="count = $event" />
+      <ui-table ref="table" config="countries" @count="count = $event" />
     </div>
   </div>
 </template>
 
 
 <script>
-  import CountriesApi from 'zero/resources/countries.js';
-
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.settings.countries + '-create',
-      tableConfig: zero.renderers.country.list
-    }),
-
-    created()
-    {
-      this.tableConfig.items = CountriesApi.getAll;
-    }
+      createRoute: zero.alias.settings.countries + '-create'
+    })
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/country.vue b/zero.Web.UI/App/pages/settings/country.vue
index 84549bab..a50c23d4 100644
--- a/zero.Web.UI/App/pages/settings/country.vue
+++ b/zero.Web.UI/App/pages/settings/country.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form ref="form" class="country" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" title="@country.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
+    <ui-form-header v-model="model" title="@country.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
     <ui-editor config="country" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
@@ -11,8 +11,6 @@
   import UiEditor from 'zero/editor/editor';
 
   export default {
-    props: ['id'],
-
     components: { UiEditor },
 
     data: () => ({
@@ -26,7 +24,7 @@
 
       onLoad(form)
       {
-        form.load(!this.id ? CountriesApi.getEmpty() : CountriesApi.getById(this.id)).then(response =>
+        form.load(!this.$route.params.id ? CountriesApi.getEmpty() : CountriesApi.getById(this.$route.params.id)).then(response =>
         {
           this.disabled = !response.meta.canEdit;
           this.meta = response.meta;
@@ -44,7 +42,7 @@
       onDelete(item, opts)
       {
         opts.hide();
-        this.$refs.form.onDelete(CountriesApi.delete.bind(this, this.id));
+        this.$refs.form.onDelete(CountriesApi.delete.bind(this, this.$route.params.id));
       }     
     }
   }
diff --git a/zero.Web.UI/App/pages/settings/languages.vue b/zero.Web.UI/App/pages/settings/languages.vue
index ed49504a..4681b837 100644
--- a/zero.Web.UI/App/pages/settings/languages.vue
+++ b/zero.Web.UI/App/pages/settings/languages.vue
@@ -1,29 +1,21 @@
 <template>
   <div class="languages">
     <ui-header-bar title="@language.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :attach="$refs.table" />
       <ui-add-button :route="createRoute" :decision="false" :shared="true" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table v-model="tableConfig" @count="count = $event" />
+      <ui-table ref="table" config="languages" @count="count = $event" />
     </div>
   </div>
 </template>
 
 
 <script>
-  import LanguagesApi from 'zero/resources/languages.js';
-
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.settings.languages + '-create',
-      tableConfig: null
-    }),
-
-    created()
-    {
-      this.tableConfig = this.zero.getRenderer('language').list;
-    }
+      createRoute: zero.alias.settings.languages + '-create'
+    })
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/role.vue b/zero.Web.UI/App/pages/settings/role.vue
index 84b47d1f..b3dd1e6c 100644
--- a/zero.Web.UI/App/pages/settings/role.vue
+++ b/zero.Web.UI/App/pages/settings/role.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form ref="form" class="role" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" title="@role.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
+    <ui-form-header v-model="model" title="@role.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
     <ui-editor config="userRole" v-model="model" :meta="meta" :active-toggle="false" :disabled="disabled" />
   </ui-form>
 </template>
@@ -12,8 +12,6 @@
   import UiEditor from 'zero/editor/editor';
 
   export default {
-    props: ['id'],
-
     components: { UiEditor },
 
     data: () => ({
@@ -27,7 +25,7 @@
 
       onLoad(form)
       {
-        form.load(!this.id ? UserRolesApi.getEmpty() : UserRolesApi.getById(this.id)).then(response =>
+        form.load(!this.$route.params.id ? UserRolesApi.getEmpty() : UserRolesApi.getById(this.$route.params.id)).then(response =>
         {
           this.disabled = !response.meta.canEdit;
           this.meta = response.meta;
@@ -45,7 +43,7 @@
       onDelete(item, opts)
       {
         opts.hide();
-        this.$refs.form.onDelete(UserRolesApi.delete.bind(this, this.id));
+        this.$refs.form.onDelete(UserRolesApi.delete.bind(this, this.$route.params.id));
       }     
     }
   }
diff --git a/zero.Web.UI/App/pages/settings/translations.vue b/zero.Web.UI/App/pages/settings/translations.vue
index 3e837896..e042f928 100644
--- a/zero.Web.UI/App/pages/settings/translations.vue
+++ b/zero.Web.UI/App/pages/settings/translations.vue
@@ -1,30 +1,26 @@
 <template>
   <div class="translations">
     <ui-header-bar title="@translation.list" :count="count" :back-button="true">
-      <ui-table-filter v-model="tableConfig" />
+      <ui-table-filter :attach="$refs.table" />
       <ui-add-button :route="createRoute" />
     </ui-header-bar>
     <div class="ui-blank-box">
-      <ui-table v-model="tableConfig" @count="count = $event" />
+      <ui-table ref="table" config="translations" @count="count = $event" />
     </div>
   </div>
 </template>
 
 
 <script>
-  import TranslationsApi from 'zero/resources/translations.js';
   import Overlay from 'zero/services/overlay.js';
   import AddOverlay from './translation';
 
   export default {
     data: () => ({
       count: 0,
-      createRoute: zero.alias.settings.translations + '-create',
-      tableConfig: zero.renderers.translation.list
+      createRoute: zero.alias.settings.translations + '-create'
     }),
 
-    props: ['id'],
-
     watch: {
       '$route': function (route)
       {
@@ -34,8 +30,6 @@
 
     created()
     {
-      this.tableConfig.items = TranslationsApi.getAll;
-
       this.handleRouteChange();
     },
 
@@ -47,9 +41,9 @@
 
       handleRouteChange()
       {
-        if (this.id)
+        if (this.$route.params.id)
         {
-          this.edit(this.id);
+          this.edit(this.$route.params.id);
         }
         else if (this.$route.name === this.createRoute)
         {
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index d9ce0f24..a21d6e6c 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form ref="form" class="user" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" title="@user.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete">
+    <ui-form-header v-model="model" title="@user.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete">
       <template v-slot:actions>
         <ui-dropdown-button v-if="model.isActive" label="Disable" icon="fth-minus-circle" @click="onActiveChange" :disabled="disabled" />
         <ui-dropdown-button v-if="!model.isActive" label="Enable" icon="fth-plus-circle" @click="onActiveChange" :disabled="disabled" />
@@ -31,8 +31,6 @@
   import UiEditor from 'zero/editor/editor';
 
   export default {
-    props: ['id'],
-
     components: { UiEditor },
 
     data: () => ({
@@ -59,7 +57,7 @@
 
       onLoad(form)
       {
-        form.load(!this.id ? UsersApi.getEmpty() : UsersApi.getById(this.id)).then(response =>
+        form.load(!this.$route.params.id ? UsersApi.getEmpty() : UsersApi.getById(this.$route.params.id)).then(response =>
         {
           this.disabled = !response.meta.canEdit;
           this.meta = response.meta;
@@ -84,7 +82,7 @@
       onDelete(item, opts)
       {
         opts.hide();
-        this.$refs.form.onDelete(UsersApi.delete.bind(this, this.id));
+        this.$refs.form.onDelete(UsersApi.delete.bind(this, this.$route.params.id));
       },
 
 
diff --git a/zero.Web.UI/App/pages/settings/users.vue b/zero.Web.UI/App/pages/settings/users.vue
index 7ad101dd..3bd90038 100644
--- a/zero.Web.UI/App/pages/settings/users.vue
+++ b/zero.Web.UI/App/pages/settings/users.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="users">
     <ui-header-bar title="Users & Permissions" :back-button="true">
-      <ui-table-filter v-model="usersConfig" />
+      <ui-table-filter :attach="$refs.usersTable" />
       <ui-add-button type="light onbg" :route="createRoleRoute" label="Add role" />
       <ui-button type="primary" label="Add user" />
     </ui-header-bar>
@@ -19,7 +19,7 @@
 
     <div class="ui-blank-box">
       <h2 class="ui-headline users-group-headline" v-localize="'@user.users'"></h2>
-      <ui-table v-model="usersConfig" />
+      <ui-table ref="usersTable" config="users" />
     </div>
   </div>
 </template>
@@ -27,14 +27,12 @@
 
 <script>
   import UserRolesApi from 'zero/resources/userRoles.js';
-  import UsersApi from 'zero/resources/users.js';
   import { filter as _filter, map as _map } from 'underscore';
 
   export default {
     data: () => ({
       createRoleRoute: 'roles-create',
-      roles: [],
-      usersConfig: zero.renderers.user.list
+      roles: []
     }),
 
     created()
@@ -44,16 +42,15 @@
         this.roles = items;
       });
 
-      this.usersConfig.items = UsersApi.getAll;
-      let roleColumn = this.usersConfig.columns.roles;
-      if (roleColumn)
-      {
-        roleColumn.render = item =>
-        {
-          const roles = _filter(this.roles, role => item.roles.indexOf(role.alias) > -1);
-          return _map(roles, role => role.name).join(', ');
-        };
-      }
+      //let roleColumn = this.usersConfig.columns.roles;
+      //if (roleColumn)
+      //{
+      //  roleColumn.render = item =>
+      //  {
+      //    const roles = _filter(this.roles, role => item.roles.indexOf(role.alias) > -1);
+      //    return _map(roles, role => role.name).join(', ');
+      //  };
+      //}
     },
 
     methods: {
@@ -73,7 +70,7 @@
 <style lang="scss">
   h2.users-group-headline
   {
-    margin-bottom: 30px;
+    margin-bottom: 30px !important;
   }
 
   .users .ui-table-field-image
diff --git a/zero.Web.UI/App/renderers/editors/all.js b/zero.Web.UI/App/renderers/editors/all.js
new file mode 100644
index 00000000..3e94a0ef
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/all.js
@@ -0,0 +1,18 @@
+
+import application from './application.js';
+import country from './country.js';
+import language from './language.js';
+import media from './media.js';
+//import translation from './translation.js';
+import user from './user.js';
+import userRole from './userRole.js';
+
+export default {
+  application,
+  country,
+  language,
+  media,
+  //translation,
+  user,
+  userRole
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/editors/application.js b/zero.Web.UI/App/renderers/editors/application.js
similarity index 56%
rename from zero.Web.UI/App/editors/application.js
rename to zero.Web.UI/App/renderers/editors/application.js
index cfbbfce9..05587bc4 100644
--- a/zero.Web.UI/App/editors/application.js
+++ b/zero.Web.UI/App/renderers/editors/application.js
@@ -1,12 +1,8 @@
 
-import Editor from '../core/editor.js';
-import ApplicationFeatures from '../pages/settings/application-features.vue';
+import Editor from 'zero/core/editor.js';
+import ApplicationFeatures from 'zero/pages/settings/application-features.vue';
 
-const editor = new Editor('application');
-const prefix = '@application.fields.';
-
-editor.templateLabel = x => prefix + x;
-editor.templateDescription = x => prefix + x + '_text';
+const editor = new Editor('application', '@application.fields.');
 
 const general = editor.tab('general', '@ui.tab_general');
 const domains = editor.tab('domains', '@application.tab_domains', x => x.domains.length);
@@ -17,7 +13,7 @@ general.field('fullName').text(120);
 general.field('email').text(120).required();
 general.field('imageId').image();
 general.field('iconId').image();
-domains.field('domains', { helpText: prefix + 'domains_help' }).inputList(10, null, prefix + 'domains_add').required();
+domains.field('domains', { helpText: '@application.fields.domains_help' }).inputList(10, null, '@application.fields.domains_add').required();
 features.field('features').custom(ApplicationFeatures);
 
 export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/country.js b/zero.Web.UI/App/renderers/editors/country.js
new file mode 100644
index 00000000..cac797f6
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/country.js
@@ -0,0 +1,11 @@
+
+import Editor from 'zero/core/editor.js';
+
+const editor = new Editor('country', '@country.fields.');
+
+editor.field('name', { label: '@ui.name' }).text(120).required();
+//editor.field('alias', { label: '@ui.alias' }).text().required();
+editor.field('code').text(2).required();
+editor.field('isPreferred').toggle();
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/customers-filter.js b/zero.Web.UI/App/renderers/editors/customers-filter.js
new file mode 100644
index 00000000..a8000772
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/customers-filter.js
@@ -0,0 +1,43 @@
+
+import ListFilter from 'zero/core/list-filter.js';
+
+const filter = new ListFilter('country', '@country.fields.');
+
+filter.template = {
+  date: {
+    from: null,
+    to: null
+  },
+  countryId: null,
+  turnover: {
+    from: null,
+    to: null
+  },
+  search: null
+};
+
+filter.for('date').dateRangePicker({ inline: true }).preview({
+  hasValue: x => x.from || x.to,
+  icon: 'fth-calendar',
+  render: Localization.localize(!x.from && !x.to ? null : (x.from && !x.to ? '@ui.date.x' : (!x.from && x.to ? '@ui.date.y' : '@ui.date.xtoy')), { tokens: { x: Strings.date(x.from), y: Strings.date(x.to) } })
+});
+
+filter.for('countryId').countryPicker().preview({
+  hasValue: x => !!x,
+  icon: 'fth-globe',
+  render: x => x != null ? 'Selected' : null 
+});
+
+filter.for('turnover').custom(null /* '@shop/editor/pricerange.vue' */).preview({
+  hasValue: x => x.from || x.to,
+  icon: 'fth-dollar-sign',
+  render: Localization.localize(!x.from && !x.to ? null : (x.from && !x.to ? '@ui.price.x' : (!x.from && x.to ? '@ui.price.y' : '@ui.price.xtoy')), { tokens: { x: Strings.currency(x.from), y: Strings.currency(x.to) } })
+});
+
+filter.for('search').text(null, 'Enter a search term...').preview({
+  hasValue: x => !!x,
+  icon: 'fth-search',
+  preview: x => x
+});
+
+return filter;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/language.js b/zero.Web.UI/App/renderers/editors/language.js
new file mode 100644
index 00000000..f2b60180
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/language.js
@@ -0,0 +1,12 @@
+
+import Editor from 'zero/core/editor.js';
+
+const editor = new Editor('language', '@language.fields.');
+
+editor.field('name', { label: '@ui.name' }).text(60).required();
+editor.field('code').text(10).required();
+editor.field('inheritedLanguageId').languagePicker();
+editor.field('isDefault').toggle();
+editor.field('isOptions').toggle();
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/media.js b/zero.Web.UI/App/renderers/editors/media.js
new file mode 100644
index 00000000..77f54843
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/media.js
@@ -0,0 +1,12 @@
+
+import Editor from 'zero/core/editor.js';
+import MediaUpload from 'zero/pages/media/upload.vue';
+
+const editor = new Editor('media', '@media.fields.');
+
+editor.field('source').custom(MediaUpload).required();
+editor.field('name', { label: '@ui.name' }).text().required();
+editor.field('alternativeText').text();
+editor.field('caption').textarea();
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/user.js b/zero.Web.UI/App/renderers/editors/user.js
new file mode 100644
index 00000000..19a9e081
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/user.js
@@ -0,0 +1,22 @@
+
+import Editor from 'zero/core/editor.js';
+import Permissions from 'zero/components/permissions.vue';
+
+const editor = new Editor('user', '@user.fields.');
+
+const permissionsCount = x => (x.claims || []).filter(claim =>
+{
+  const value = claim.value.split(':')[1];
+  return value !== 'none' && value !== 'false' && !!value;
+}).length;
+
+const general = editor.tab('general', '@ui.tab_general');
+const permissions = editor.tab('permissions', '@user.tab_permissions', permissionsCount);
+
+general.field('name', { label: '@ui.name' }).text(80).required();
+general.field('email').text(120).required();
+general.field('languageId').culturePicker().required();
+general.field('avatarId').image();
+permissions.field('claims', { hideLabel: true }).custom(Permissions);
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/editors/userRole.js b/zero.Web.UI/App/renderers/editors/userRole.js
new file mode 100644
index 00000000..678ff1c0
--- /dev/null
+++ b/zero.Web.UI/App/renderers/editors/userRole.js
@@ -0,0 +1,22 @@
+
+import Editor from 'zero/core/editor.js';
+import Permissions from 'zero/components/permissions.vue';
+
+const editor = new Editor('userRole', '@role.fields.');
+
+const permissionsCount = x => (x.claims || []).filter(claim =>
+{
+  const value = claim.value.split(':')[1];
+  return value !== 'none' && value !== 'false' && !!value;
+}).length;
+
+const general = editor.tab('general', '@ui.tab_general');
+const permissions = editor.tab('permissions', '@role.tab_permissions', permissionsCount);
+
+general.field('name', { label: '@ui.name' }).text(60).required();
+general.field('description').text(120);
+general.field('icon').iconPicker();
+general.field('avatarId').image();
+permissions.field('claims', { hideLabel: true }).custom(Permissions);
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/all.js b/zero.Web.UI/App/renderers/lists/all.js
new file mode 100644
index 00000000..331bbe5d
--- /dev/null
+++ b/zero.Web.UI/App/renderers/lists/all.js
@@ -0,0 +1,12 @@
+
+import countries from './countries.js';
+import languages from './languages.js';
+import translations from './translations.js';
+import users from './users.js';
+
+export default {
+  countries,
+  languages,
+  translations,
+  users
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/countries.js b/zero.Web.UI/App/renderers/lists/countries.js
new file mode 100644
index 00000000..0ed91a48
--- /dev/null
+++ b/zero.Web.UI/App/renderers/lists/countries.js
@@ -0,0 +1,19 @@
+
+import List from 'zero/core/list.js';
+import CountriesApi from 'zero/resources/countries.js';
+
+const list = new List('countries');
+const prefix = '@country.fields.';
+
+list.templateLabel = x => prefix + x;
+list.link = zero.alias.settings.countries + '-edit';
+
+list.onFetch(filter => CountriesApi.getAll(filter));
+
+list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="flag flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
+list.column('name').name();
+list.column('code').text();
+list.column('isPreferred', { width: 200 }).boolean();
+list.column('isActive').active();
+
+export default list;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/languages.js b/zero.Web.UI/App/renderers/lists/languages.js
new file mode 100644
index 00000000..003735da
--- /dev/null
+++ b/zero.Web.UI/App/renderers/lists/languages.js
@@ -0,0 +1,17 @@
+
+import List from 'zero/core/list.js';
+import LanguagesApi from 'zero/resources/languages';
+
+const list = new List('languages');
+const prefix = '@language.fields.';
+
+list.templateLabel = x => prefix + x;
+list.link = zero.alias.settings.languages + '-edit';
+
+list.onFetch(filter => LanguagesApi.getAll(filter));
+
+list.column('name').name();
+list.column('code').text();
+list.column('isDefault', { width: 200 }).boolean();
+
+export default list;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/translations.js b/zero.Web.UI/App/renderers/lists/translations.js
new file mode 100644
index 00000000..0ea9b887
--- /dev/null
+++ b/zero.Web.UI/App/renderers/lists/translations.js
@@ -0,0 +1,16 @@
+
+import List from 'zero/core/list.js';
+import TranslationsApi from 'zero/resources/translations.js';
+
+const list = new List('translations');
+const prefix = '@translation.fields.';
+
+list.templateLabel = x => prefix + x;
+list.link = zero.alias.settings.translations + '-edit';
+
+list.onFetch(filter => TranslationsApi.getAll(filter));
+
+list.column('key').name();
+list.column('value').text();
+
+export default list;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/users.js b/zero.Web.UI/App/renderers/lists/users.js
new file mode 100644
index 00000000..0c834490
--- /dev/null
+++ b/zero.Web.UI/App/renderers/lists/users.js
@@ -0,0 +1,18 @@
+
+import List from 'zero/core/list.js';
+import UsersApi from 'zero/resources/users.js';
+
+const list = new List('users');
+const prefix = '@user.fields.';
+
+list.templateLabel = x => prefix + x;
+list.link = zero.alias.settings.users + '-edit';
+
+list.onFetch(filter => UsersApi.getAll(filter));
+
+list.column('avatarId', { width: 70, canSort: false }).image();
+list.column('name').name();
+list.column('email').text();
+list.column('isActive').active();
+
+export default list;
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Settings/_shadows.scss b/zero.Web.UI/Sass/Settings/_shadows.scss
index 4c905a36..d0965f34 100644
--- a/zero.Web.UI/Sass/Settings/_shadows.scss
+++ b/zero.Web.UI/Sass/Settings/_shadows.scss
@@ -2,6 +2,7 @@
 :root
 {
   --shadow: 0 3px 20px rgba(0, 0, 0, 0.07);
+  --shadow-mid: 0 1px 12px rgba(0, 0, 0, 0.03);
   --shadow-short: 0.5px 0.5px 1.5px 0 rgba(0, 0, 0, 0.06);
   //--shadow-dropdown: rgba(0, 0, 0, 0.15);
   --shadow-dropdown: 3px 6px 15px rgba(0, 0, 0, 0.07);