datatable.directory/resources/views/table/create.blade.php

{{-- New table form --}}

@extends('layouts.app')

@section('content')
  <form method="POST" action="{{route('table.storeNew')}}" class="row justify-content-center"
        enctype="multipart/form-data"
        aria-label="New Table">

    @csrf
    <div class="col-md-10">
      @php(Widget::setLayout(3, 7))

      {!! Widget::header(1, 'New Table') !!}

      {!! Widget::text('title', 'Title')->autoAlias('name', '-')
            ->help('Unique among your tables') !!}

      {!! Widget::text('name', 'Name')->value('')->prepend(user()->handle.' /')
            ->help('Unique among your tables, and part of the URL; only letters, digits and
                    some symbols are allowed.') !!}

      {!! Widget::textarea('description', 'Description')->height('8em')
            ->help('Description of the table. URLs in a full format will be clickable.') !!}

      {!! Widget::text('license', 'License')
            ->help('License applicable to the table\'s data, if any. By default, all
              tables are CC0 or Public Domain.') !!}

      {!! Widget::text('origin', 'Adapted from')
            ->help('If you took the data from some external site, a book, etc., write it here.
               URLs in a full format will be clickable.') !!}

      <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">
          <div id="column-editor"></div>

          <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::par('
        Initialize the table with pasted CSV lines or an uploaded CSV file,
        using the column order you defined above. This is optional, you can always
        fill or modify the table later.
      ', 'text-muted') !!}

      {!! Widget::textarea('data', 'CSV as text')->value($exampleData)->height('12em') !!}

      {!! Widget::file('csv-file', 'CSV file')->accept("text/csv") !!}

      <div class="row form-group">
        <div class="col-md-7 offset-md-3">
          <button type="submit" class="btn btn-primary">
            @icon(fa-save fa-pr)Create Table
          </button>
        </div>
      </div>
    </div>
  </form>
@endsection

@push('scripts')
  <script>
    ready(function() {
      app.ColumnEditor('#column-editor', {
        name: 'columns',
        xColumns: @json(old_json('columns', $columns)),
        newTable: true,
        //sortable: false,
      })
    });
  </script>
@endpush