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>{{--
        --}}<b>{{ $table->name }}</b>
      </small>

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

      <nav>
        @sr(Table actions)

        @if(guest() || user()->ownsTable($table))
          <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Forks"
             data-toggle="tooltip" data-placement="top">
            {{ $table->forks_count ?: '–' }}&nbsp;
            @icon(fa-code-fork, sr:Forks)
          </a>

          <a href="#" class="btn btn-outline-primary py-1 btn-sm"
             title="Favourites" data-toggle="tooltip" data-placement="top">
            {{ $table->favourites_count ?: '–' }}&nbsp;
            @icon(fa-star, sr:Favourites)
          </a>
        @else
          <div class="btn-group" role="group" aria-label="Fork">
            <a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Fork"
               data-toggle="tooltip" data-placement="top">
              @icon(fa-code-fork, sr:Fork)
            </a>
            <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Fork Count"
               data-toggle="tooltip" data-placement="top">
              {{ $table->forks_count ?: '–' }}
            </a>
          </div>

          <div class="btn-group" role="group" aria-label="Favourite">
            @if(user()->favouritesTable($table))
              <a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Un-favourite"
                 data-toggle="tooltip" data-placement="top">
                @icon(fa-star, sr:Un-favourite)
              </a>
            @else
              <a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Favourite"
                 data-toggle="tooltip" data-placement="top">
                @icon(fa-star-o, sr:Favourite)
              </a>
            @endif

            <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Favourite Count"
               data-toggle="tooltip" data-placement="top">
              {{ $table->favourites_count ?: '–' }}
            </a>
          </div>
        @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>
      </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">
        <b>Description</b>
        @if($table->description)
          {!! Widget::collapsible($table->description, 400, '8em') !!}
          @if($table->origin)
            <div class="mt-2"></div>{{-- spacer --}}
          @endif
        @else
          <p>
            <i>No description.</i>
          </p>
        @endif

        @if($table->origin)
          <p>
            <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>
              <span class="pr-1" data-toggle="tooltip" data-placement="right" title="{{ $table->created_at->format("M n, Y \\a\\t G:i") }}">
                {{ $table->created_at->diffForHumans() }}
              </span>
            </td>
          </tr>

          <tr>
            <th class="text-right pr-2">Updated</th>
            <td>
              <span class="pr-1" data-toggle="tooltip" data-placement="right" title="{{ $table->updated_at->format("M n, Y \\a\\t G:i") }}">
                {{ $table->updated_at->diffForHumans() }}
              </span>
            </td>
          </tr>

          <tr>
            <th class="text-right pr-2">Revisions</th>
            <td>{{ $table->revisions_count }}</td>
          </tr>

          <tr>
            <th class="text-right pr-2">Visits</th>
            <td>{{ $table->visits }}&nbsp;&nbsp;{!! Widget::help('Visitors counted once per day') !!}</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 pt-1" 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