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" id="table-title-container">
    <small class="flex-grow-1" style="font-size: 120%;" id="table-id">
      <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" id="table-title">{{ $table->title }}</h1>

    @include('table._view-action-buttons')
  </div>
</div>

<div class="row col-md-12 infobox" id="table-infobox">

  {{-- Tab panels wrapper --}}
  <div class="col-md-10 tab-content order-1" id="infobox-tabContent">

    <div class="tab-pane show active container" id="infobox-home" role="tabpanel" aria-labelledby="infobox-home-tab">
      @include('table._panel-metadata')
    </div>

    <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">
      @include('table._panel-export')
    </div>

  </div>{{-- End of tab panels wrapper --}}

  {{-- Right column with menu --}}
  <div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2" id="infobox-tab-container">
    <div class="nav flex-md-column flex-row nav-pills pt-1 pb-1" role="tablist"
         aria-label="Tabs for the table info box" id="infobox-tab">

      <a class="nav-link active" data-toggle="pill" role="tab" aria-selected="true"
         id="infobox-home-tab" href="#infobox-home" aria-controls="infobox-home">
        Table Info
      </a>

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

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

    </div>
  </div>{{-- end of menu column --}}

</div>{{-- End of row --}}

<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>{{-- End of row --}}

<div class="row justify-content-center">
  <div class="col-12">
    @include('table._rows')
  </div>
</div>{{-- End of row --}}

<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>{{-- End of row --}}

@endsection