diff --git a/modules/ticket/front/index/index.html b/modules/ticket/front/index/index.html
index a1c34c43b..63b0b049d 100644
--- a/modules/ticket/front/index/index.html
+++ b/modules/ticket/front/index/index.html
@@ -1,187 +1,155 @@
 <vn-auto-search
     model="model">
 </vn-auto-search>
-<vn-card>
-    <smart-table
-        model="model"
-        view-config-id="ticketIndex"
-        options="$ctrl.smartTableOptions"
-        auto-save="true"
-        expr-builder="$ctrl.exprBuilder(param, value)"
-        default-new-data="$ctrl.defaultNewData()">
-        <slot-table>
-            <table class="vn-table">
-                <thead>
-                    <tr>
-                        <th shrink>
-                            <vn-multi-check 
-                                model="model"
-                                check-field="$checked"> <!-- Change $checked as default prop -->
-                            </vn-multi-check>
-                        </th>
-                        <th class="icon-field"></th>
-                        <th field="id">
-                            <span translate>#ID</span>
-                        </th>
-                        <th field="salesPersonFk">
-                            <span translate>Salesperson</span>
-                        </th>
-                        <th field="shipped" shrink-date>
-                            <span translate>Date</span>
-                        </th>
-                        <th>
-                            <span translate>Hour</span>
-                        </th>
-                        <th field="zoneHour" shrink>
-                            <span translate>Closure</span>
-                        </th>
-                        <th field="nickname">
-                            <span translate>Alias</span>
-                        </th>
-                        <th field="provinceFk">
-                            <span translate>Province</span>
-                        </th>
-                        <th field="stateFk">
-                            <span translate>State</span>
-                        </th>
-                        <th field="zoneFk">
-                            <span translate>Zone</span>
-                        </th>
-                        <th field="warehouseFk">
-                            <span translate>Warehouse</span>
-                        </th>
-                        <th field="totalWithVat" number>
-                            <span translate>Total</span>
-                        </th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr ng-repeat="ticket in model.data | orderBy:'!!id'"
-                        ng-class="{'new-row': ticket.$isNew, 'changed-row': ticket.$oldData}"
-                        vn-anchor="::{
-                            state: 'ticket.card.summary', 
-                            params: {id: ticket.id}
-                        }">
-                        <td>
-                            <vn-check 
-                                ng-model="ticket.$checked"
-                                vn-click-stop>
-                            </vn-check>
-                        </td>
-                        <td class="icon-field">
-                            <vn-icon
-                                ng-show="::ticket.isTaxDataChecked === 0"
-                                translate-attr="{title: 'No verified data'}"
-                                class="bright"
-                                icon="icon-no036">
-                            </vn-icon>
-                            <vn-icon
-                                ng-show="::ticket.hasTicketRequest"
-                                translate-attr="{title: 'Purchase request'}"
-                                class="bright"
-                                icon="icon-100">
-                            </vn-icon>
-                            <vn-icon
-                                ng-show="::ticket.isAvailable === 0"
-                                translate-attr="{title: 'Not available'}"
-                                class="bright"
-                                icon="icon-unavailable">
-                            </vn-icon>
-                            <vn-icon
-                                ng-show="::ticket.isFreezed"
-                                translate-attr="{title: 'Client frozen'}"
-                                class="bright"
-                                icon="icon-frozen">
-                            </vn-icon>
-                            <vn-icon
-                                ng-show="::ticket.risk"
-                                title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
-                                class="bright"
-                                icon="icon-risk">
-                            </vn-icon>
-                            <vn-icon
-                                ng-show="::ticket.hasComponentLack"
-                                translate-attr="{title: 'Component lack'}"
-                                class="bright"
-                                icon="icon-components">
-                            </vn-icon>
-                        </td>
-                        <td shrink>{{::ticket.id}}</td>
-                        <td class="expendable">
-                            <span
-                                title="{{::ticket.userName}}"
-                                vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
-                                class="link">
-                                {{::ticket.userName | dashIfEmpty}}
-                            </span>
-                        </td>
-                        <td shrink-date>
-                            <span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
-                                {{::ticket.shipped | date: 'dd/MM/yyyy'}}
-                            </span>
-                        </td>
-                        <td shrink>{{::ticket.shipped | date: 'HH:mm'}}</td>
-                        <td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</td>
-                        <td>
-                            <span
-                                title="{{::ticket.nickname}}"
-                                vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
-                                class="link">
-                                {{::ticket.nickname}}
-                            </span>
-                        </td>
-                        <td class="expendable">{{::ticket.province}}</td>
-                        <td class="expendable">
-                            <span
-                                ng-show="ticket.refFk"
-                                title="{{::ticket.refFk}}"
-                                vn-click-stop="invoiceOutDescriptor.show($event, ticket.invoiceOutId)"
-                                class="link">
-                                {{::ticket.refFk}}
-                            </span>
-                            <span 
-                                ng-show="!ticket.refFk"
-                                class="chip {{$ctrl.stateColor(ticket)}}">
-                                {{ticket.state}}
-                            </span>
-                        </td>
-                        <td>
-                            <span
-                                title="{{::ticket.zoneName}}"
-                                vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
-                                class="link">
-                                {{::ticket.zoneName | dashIfEmpty}}
-                            </span>
-                        </td>
-                        <td>{{::ticket.warehouse}}</td>
-                        <td number>
-                            <span class="chip {{$ctrl.totalPriceColor(ticket)}}">
-                                {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
-                            </span>
-                        </td>
-                        <td actions>
-                            <vn-icon-button
-                                vn-anchor="::{
-                                    state: 'ticket.card.sale', 
-                                    params: {id: ticket.id}, 
-                                    target: '_blank'
-                                }"
-                                vn-tooltip="Go to lines"
-                                icon="icon-lines">
-                            </vn-icon-button>
-                            <vn-icon-button
-                                vn-click-stop="$ctrl.preview(ticket)"
-                                vn-tooltip="Preview"
-                                icon="preview">
-                            </vn-icon-button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </slot-table>
-    </smart-table>
-</vn-card>
+<vn-data-viewer
+    model="model"
+    class="vn-mb-xl vn-w-xl">
+    <vn-card>
+        <vn-table model="model">
+            <vn-thead>
+                <vn-tr>
+                    <vn-th shrink>
+                        <vn-multi-check 
+                            model="model">
+                        </vn-multi-check>
+                    </vn-th>
+                    <vn-th class="icon-field"></vn-th>
+                    <vn-th field="id">Id</vn-th>
+                    <vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
+                    <vn-th field="shipped" shrink-date>Date</vn-th>
+                    <vn-th>Hour</vn-th>
+                    <vn-th field="zoneHour" shrink>Closure</vn-th>
+                    <vn-th field="nickname">Alias</vn-th>
+                    <vn-th field="provinceFk" class="expendable">Province</vn-th>
+                    <vn-th field="stateFk" >State</vn-th>
+                    <vn-th field="zoneFk">Zone</vn-th>
+                    <vn-th field="warehouseFk">Warehouse</vn-th>
+                    <vn-th number>Total</vn-th>
+                    <vn-th></vn-th>
+                </vn-tr>
+            </vn-thead>
+            <vn-tbody>
+                <a ng-repeat="ticket in model.data"
+                    class="clickable vn-tr search-result"
+                    ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
+                    <vn-td>
+                        <vn-check 
+                            ng-model="ticket.checked"
+                            vn-click-stop>
+                        </vn-check>
+                    </vn-td>
+                    <vn-td class="icon-field">
+                        <vn-icon
+                            ng-show="::ticket.isTaxDataChecked === 0"
+                            translate-attr="{title: 'No verified data'}"
+                            class="bright"
+                            icon="icon-no036">
+                        </vn-icon>
+                        <vn-icon
+                            ng-show="::ticket.hasTicketRequest"
+                            translate-attr="{title: 'Purchase request'}"
+                            class="bright"
+                            icon="icon-100">
+                        </vn-icon>
+                        <vn-icon
+                            ng-show="::ticket.isAvailable === 0"
+                            translate-attr="{title: 'Not available'}"
+                            class="bright"
+                            icon="icon-unavailable">
+                        </vn-icon>
+                        <vn-icon
+                            ng-show="::ticket.isFreezed"
+                            translate-attr="{title: 'Client frozen'}"
+                            class="bright"
+                            icon="icon-frozen">
+                        </vn-icon>
+                        <vn-icon
+                            ng-show="::ticket.risk"
+                            title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
+                            class="bright"
+                            icon="icon-risk">
+                        </vn-icon>
+                        <vn-icon
+                            ng-show="::ticket.hasComponentLack"
+                            translate-attr="{title: 'Component lack'}"
+                            class="bright"
+                            icon="icon-components">
+                        </vn-icon>
+                    </vn-td>
+                    <vn-td shrink>{{::ticket.id}}</vn-td>
+                    <vn-td class="expendable">
+                        <span
+                            title="{{::ticket.userName}}"
+                            vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
+                            class="link">
+                            {{::ticket.userName | dashIfEmpty}}
+                        </span>
+                    </vn-td>
+                    <vn-td shrink-date>
+                        <span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
+                            {{::ticket.shipped | date: 'dd/MM/yyyy'}}
+                        </span>
+                    </vn-td>
+                    <vn-td shrink>{{::ticket.shipped | date: 'HH:mm'}}</vn-td>
+                    <vn-td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</vn-td>
+                    <vn-td>
+                        <span
+                            title="{{::ticket.nickname}}"
+                            vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
+                            class="link">
+                            {{::ticket.nickname}}
+                        </span>
+                    </vn-td>
+                    <vn-td class="expendable">{{::ticket.province}}</vn-td>
+                    <vn-td class="expendable">
+                        <span
+                            ng-show="ticket.refFk"
+                            title="{{::ticket.refFk}}"
+                            vn-click-stop="invoiceOutDescriptor.show($event, ticket.invoiceOutId)"
+                            class="link">
+                            {{::ticket.refFk}}
+                        </span>
+                        <span 
+                            ng-show="!ticket.refFk"
+                            class="chip {{$ctrl.stateColor(ticket)}}">
+                            {{ticket.state}}
+                        </span>
+                    </vn-td>
+                    <vn-td>
+                        <span
+                            title="{{::ticket.zoneName}}"
+                            vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
+                            class="link">
+                            {{::ticket.zoneName | dashIfEmpty}}
+                        </span>
+                    </vn-td>
+                    <vn-td>{{::ticket.warehouse}}</vn-td>
+                    <vn-td number>
+                        <span class="chip {{$ctrl.totalPriceColor(ticket)}}">
+                            {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
+                        </span>
+                    </vn-td>
+                    <vn-td actions>
+                        <vn-icon-button
+                            vn-anchor="::{
+                                state: 'ticket.card.sale', 
+                                params: {id: ticket.id}, 
+                                target: '_blank'
+                            }"
+                            vn-tooltip="Go to lines"
+                            icon="icon-lines">
+                        </vn-icon-button>
+                        <vn-icon-button
+                            vn-click-stop="$ctrl.preview(ticket)"
+                            vn-tooltip="Preview"
+                            icon="preview">
+                        </vn-icon-button>
+                    </vn-td>
+                </a>
+            </vn-tbody>
+        </vn-table>
+    </vn-card>
+</vn-data-viewer>
 <div fixed-bottom-right>
     <vn-vertical style="align-items: center;">
         <vn-button class="round sm vn-mb-sm"
@@ -237,8 +205,7 @@
 <vn-invoice-out-descriptor-popover 
     vn-id="invoiceOutDescriptor">
 </vn-invoice-out-descriptor-popover>
-
-<vn-contextmenu vn-id="contextmenu" targets="['smart-table']" model="model"
+<vn-contextmenu vn-id="contextmenu" targets="['vn-data-viewer']" model="model"
     expr-builder="$ctrl.exprBuilder(param, value)">
     <slot-menu>
         <vn-item translate
diff --git a/modules/ticket/front/index/index.js b/modules/ticket/front/index/index.js
index d076fec5a..2df4de0a5 100644
--- a/modules/ticket/front/index/index.js
+++ b/modules/ticket/front/index/index.js
@@ -7,49 +7,6 @@ export default class Controller extends Section {
     constructor($element, $, vnReport) {
         super($element, $);
         this.vnReport = vnReport;
-        this.smartTableOptions = {
-            activeButtons: {
-                search: true,
-                crud: true,
-                shownColumns: true,
-            },
-            columns: [
-                {
-                    field: 'salesPersonFk',
-                    autocomplete: {
-                        url: 'Workers/activeWithInheritedRole',
-                        where: `{role: 'salesPerson'}`,
-                        searchFunction: '{firstName: $search}',
-                        showField: 'nickname',
-                        valueField: 'id',
-                    }
-                },
-                {
-                    field: 'provinceFk',
-                    autocomplete: {
-                        url: 'Provinces',
-                    }
-                },
-                {
-                    field: 'stateFk',
-                    autocomplete: {
-                        url: 'States',
-                    }
-                },
-                {
-                    field: 'zoneFk',
-                    autocomplete: {
-                        url: 'Zones',
-                    }
-                },
-                {
-                    field: 'warehouseFk',
-                    autocomplete: {
-                        url: 'Warehouses',
-                    }
-                },
-            ]
-        };
     }
 
     setDelivered() {
@@ -107,7 +64,7 @@ export default class Controller extends Section {
         const tickets = this.$.model.data || [];
         const checkedLines = [];
         for (let ticket of tickets) {
-            if (ticket.$checked)
+            if (ticket.checked)
                 checkedLines.push(ticket);
         }
 
@@ -171,12 +128,6 @@ export default class Controller extends Section {
         this.$.summary.show();
     }
 
-    defaultNewData() {
-        return {
-            nickname: 'my nickname',
-        };
-    }
-
     exprBuilder(param, value) {
         switch (param) {
         case 'stateFk':
diff --git a/modules/ticket/front/index/style.scss b/modules/ticket/front/index/style.scss
index 36409ab67..23c4b88b8 100644
--- a/modules/ticket/front/index/style.scss
+++ b/modules/ticket/front/index/style.scss
@@ -7,19 +7,19 @@ vn-ticket-index {
         }
     }
 
-    th.icon-field,
-    th.icon-field *,
-    td.icon-field, 
-    td.icon-field * {
+    vn-th.icon-field,
+    vn-th.icon-field *,
+    vn-td.icon-field, 
+    vn-td.icon-field * {
         padding: 0
     }
 
-    td.icon-field > vn-icon {
+    vn-td.icon-field > vn-icon {
         margin-left: 3px;
         margin-right: 3px;
     }
 
-    tbody a[ng-repeat].vn-tr:focus {
+    vn-tbody a[ng-repeat].vn-tr:focus {
         background-color: $color-primary-light
     }
 }
\ No newline at end of file