From a76d96d13c466cca8737813898fff45083258518 Mon Sep 17 00:00:00 2001
From: Alexandr Kozhevnikov <onmotion1@gmail.com>
Date: Wed, 24 Jul 2019 17:40:23 +0300
Subject: [PATCH] Allow use on top elements

For example, it is useful for vuetify v-data-table or the same components when we cannot access to `<table>` element
---
 src/plugins/vue-columns-resizable/index.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/plugins/vue-columns-resizable/index.js b/src/plugins/vue-columns-resizable/index.js
index 0523967..f527cc3 100644
--- a/src/plugins/vue-columns-resizable/index.js
+++ b/src/plugins/vue-columns-resizable/index.js
@@ -2,8 +2,12 @@ export default {
   install(Vue) {
     Vue.directive('columns-resizable', {
       inserted(el) {
-        const nodeName = el.nodeName;
-        if (['TABLE', 'THEAD'].indexOf(nodeName) < 0) return;
+        let nodeName = el.nodeName;
+        if (['TABLE', 'THEAD'].indexOf(nodeName) < 0) {
+            el = el.querySelector('table'); // looking for the closest table
+            if (!el) return;
+            nodeName = 'TABLE';
+        };
 
         const table = nodeName === 'TABLE' ? el : el.parentElement;
         const thead = table.querySelector('thead');