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

{{-- Basic table view --}}

@extends('layouts.app')

@php
/** @var \App\Models\Table $table */
@endphp

@section('content')
  <div class="row justify-content-start px-3">
    <div class="d-flex w-100 align-items-center">
      <small class="flex-grow-1" style="font-size: 120%;">
        <a href="{{route('profile.view', $table->owner->name)}}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
        --}}<span class="px-1">/</span>{{--
        --}}{{ $table->name }}
      </small>

      <h1 class="mx-3">{{ $table->title }}</h1>

      <nav>
        @sr(Table actions){{--
        --}}<ul class="sr-list">

          <li>
            <div class="btn-group" role="group" aria-label="Table Actions">
              @if(!guest() && !user()->ownsTable($table))
                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Fork"
                   data-toggle="tooltip" data-placement="top">
                  {{ $table->forks()->count() ?: '–' }}&nbsp;
                  @icon(fa-code-fork, sr:Fork)
                </a>
              @endif

              @if($table->favouritingUsers()->where('id', user()->getKey())->exists())
                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Un-favourite"
                   data-toggle="tooltip" data-placement="top">
                  {{ $table->favouritingUsers()->count() ?: '–' }}&nbsp;
                  @icon(fa-star, sr:Un-favourite)
                </a>
              @else
                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Favourite"
                   data-toggle="tooltip" data-placement="top">
                  {{ $table->favouritingUsers()->count() ?: '–' }}&nbsp;
                  @icon(fa-star-o, sr:Favourite)
                </a>
              @endif

              <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Comments"
                 data-toggle="tooltip" data-placement="top">
                {{ $table->comments()->count() ?: '–' }}&nbsp;
                @icon(fa-comment, sr:Comments)
              </a>
            </div>

          @if(!guest())
            <li>
              <div class="btn-group" role="group" aria-label="Change Proposals">
                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Change Proposals"
                   data-toggle="tooltip" data-placement="top">
                  {{ $table->proposals()->count() ?: '–' }}&nbsp;
                  @icon(fa-inbox, sr:Change Proposals)
                </a>
                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Draft Change"
                   data-toggle="tooltip" data-placement="top">
                  @icon(fa-pencil, sr:Propose Change)
                </a>
              </div>
          @endif
          </ul>
        </nav>
      </div>
    </div>

    <div class="row mx-auto col-md-12 justify-content-center mb-1 border rounded px-0 py-2 box-shadow mb-3">
      <div class="col-md-10 tab-content order-1" id="infobox-tabContent">

        {{-- Tab pane --}}
        <div class="tab-pane show active container" id="infobox-home" role="tabpanel" aria-labelledby="infobox-home-tab">
          <div class="row">

            {{-- Description field --}}
            <div class="col-md-8 pl-md-0">
              @if($table->description)
                <b>Description</b>
                {!! Widget::collapsible($table->description, 400, '8em') !!}
                @if($table->origin)
                  <div class="mt-2"></div>{{-- spacer --}}
                @endif
              @endif

              @if($table->origin)
                <p class="last-p-mb-0">
                  <b>Adapted From</b><br>
                  {!! Widget::tryLink($table->origin) !!}
                </p>
              @endif
            </div>

            {{-- Info table --}}
            <div class="col-md-4 border-left my-md-0 my-2 pr-md-0 mobile-no-border">
              <table>
                <tbody>

                <tr>
                  <th class="text-right pr-2">Author</th>
                  <td>
                    {{ $table->owner->title }}
                    (<a href="{{route('profile.view', $table->owner->name)}}">{{ $table->owner->handle }}</a>)
                  </td>
                </tr>

                <tr>
                  <th class="text-right pr-2">License</th>
                  <td>{{ $table->license ?: 'CC0' }}</td>
                </tr>

                <tr>
                  <th class="text-right pr-2">Created</th>
                  <td>{{ $table->created_at->format("M j, Y") }}</td>
                </tr>

                <tr>
                  <th class="text-right pr-2">Updated</th>
                  <td>{{ $table->updated_at->format("M j, Y") }}</td>
                </tr>

                <tr>
                  <th class="text-right pr-2">Revisions</th>
                  <td>{{ $table->revisions()->count() }}</td>
                </tr>

                </tbody>
              </table>
            </div>

          </div>{{-- inner row --}}
        </div>{{-- Tab container --}}

        <div class="tab-pane container" id="infobox-columns" role="tabpanel" aria-labelledby="infobox-columns-tab">
          Column toggles, sort, filtering … coming soon
        </div>

        <div class="tab-pane container" id="infobox-export" role="tabpanel" aria-labelledby="infobox-export-tab">
          Export … coming soon
        </div>

      </div>{{-- Tab panel --}}

      {{-- Right column with menu --}}
      <div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2">

        <div class="nav flex-md-column flex-row nav-pills" id="infobox-tab" role="tablist" aria-orientation="vertical">
          <a class="nav-link active"
             id="infobox-home-tab"
             data-toggle="pill" href="#infobox-home"
             role="tab" aria-controls="infobox-home"
             aria-selected="true">Table Info</a>

          <a class="nav-link"
             id="infobox-columns-tab"
             data-toggle="pill" href="#infobox-columns"
             role="tab" aria-controls="infobox-columns"
             aria-selected="false">Columns</a>

          <a class="nav-link"
             id="infobox-export-tab"
             data-toggle="pill" href="#infobox-export"
             role="tab" aria-controls="infobox-export"
             aria-selected="false">Export</a>
        </div>

      </div>

    </div>

    <div class="row justify-content-center mb-2">
      <div class="col-md-12 d-flex">
        <nav class="text-center" aria-label="Pages of the table">
          {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
        </nav>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-12">
        <table class="table table-hover table-sm">
          <thead>
          <tr>
            @foreach($columns as $col)
              <th>{{ $col->title }}</th>
            @endforeach
          </tr>
          </thead>
          <tbody>
            @foreach($rows as $row)
              <tr>
                @php($rdata = json_decode($row['data'], true))
                @foreach($columns as $col)
                  <td data-id="{{ $row->id }}">{{ $rdata[$col->name] }}</td>
                @endforeach
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  @endsection