simple vue-based column editor

resources/views/table/create.blade.php

@@ -30,7 +30,7 @@
             ->help('If you took the data from some external site, a book, etc., write it here.
                URLs in a full format will be clickable.') !!}
 
-      {!! Widget::textarea('columns', 'Columns')->value($exampleColumns)->height('8em')
+      {{--!! Widget::textarea('columns', 'Columns')->value($exampleColumns)->height('8em')
             ->help('
               <div class="text-left">
                 Column parameters in CSV format:
@@ -39,7 +39,34 @@
                   <li><b>column data type</b><br>int, string, float, bool
                   <li><b>column title</b><br>used for display (optional)
                 </ul>
-              </div>') !!}
+              </div>') !!--}}
+
+      <div class="row form-group">
+        <label for="field-columns" class="col-md-3 col-form-label text-md-right">
+          Columns
+        </label>
+        <div class="col-md-8">
+          <column-editor name="columns" :initial-columns="{{old('columns', toJSON($columns))}}"></column-editor>
+
+          <noscript>
+            You have JavaScript disabled; enter columns as JSON array<br>
+            <textarea class="form-control" name="columns" rows="10">{{ old('columns', toJSON($columns)) }}</textarea>
+          </noscript>
+
+          @if ($errors->has('columns'))
+            <span class="invalid-feedback" role="alert">
+              <strong>{{ $errors->first('columns') }}</strong>
+            </span>
+          @endif
+
+          @if($errors->has('columns'))
+            <span class="text-danger">
+              @icon(fa-warning, sr:Validation error:)
+              {{$errors->first('columns')}}
+            </span>
+          @endif
+        </div>
+      </div>
 
       {!! Widget::textarea('data', 'Initial data')->value($exampleData)->height('12em')
             ->help('