Как создать тег таблицы представления шаблона без повторения тегов таблицы в каждом файле

Question

Я разрабатываю систему, которая имеет много таблиц, поэтому я должен повторить написание тегов таблиц для всех файлов, которые отображают таблицу. Вот что я делаю для каждого файла, для которого должна отображаться таблица

В таблице "Страны":

  <table class="table table-striped table-hover table-sm" id="table">
                        <thead class="text-uppercase text-center bg-primary">
                        <tr class="text-white">
                            <th scope="col">Name</th>
                            <th scope="col">Slug</th>
                            <th scope="col">Population</th>
                            <th scope="col">Region</th>
                            <th scope="col">Cities</th>
                            <th scope="col">Descriptions</th>
                            <th scope="col" >Actions</th>
                        </tr>
                        {{ csrf_field() }}
                        </thead>
                        <tbody>
                            @foreach ($countries as $country)
                                <tr>
                                    <td class="text-left">{{$country->name}}</td>
                                    <td class="text-center">{{$country->slug}}</td>
                                    <td class="text-right">{{$country->population}}</td>
                                    <td class="text-center">{{$country->region->name}}</td>
                                    <td class="text-center">{{$country->city_count}}</td>
                                    <td class="text-left">{{$country->desc}}</td>
                                    <td class="text-center">
                                        <div class="btn-group">

                                            @can('country-update')
                                                <a class="btn btn-primary btn-sm mr-2" href="{{route('location.countries.edit',$country)}}" title="Edit"><i class="fa fa-edit"></i></a>
                                            @endcan

                                            @can('country-delete')
                                                <form class="form-delete" method="post" action="{{route('location.countries.destroy',$country)}}">
                                                    @method('DELETE')
                                                    @csrf
                                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-alt"></i></button>
                                                </form>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

, затем по городам я сделаю то же самое, но с разными именами заголовков и данными таблиц

 <table class="table table-striped table-hover table-sm" id="table">
                    <thead class="text-uppercase text-center bg-primary">
                    <tr class="text-white">
                        <th scope="col">Name</th>
                        <th scope="col">Slug</th>
                        <th scope="col">Country</th>
                        <th scope="col">Descriptions</th>
                        <th scope="col" >Actions</th>
                    </tr>
                    {{ csrf_field() }}
                    </thead>
                    <tbody>
                        @foreach ($cities as $city)
                            <tr>
                                <td class="text-left">{{$city->name}}</td>
                                <td>{{$city->slug}}</td>
                                <td class="text-center">{{$city->country->name}}</td>
                                <td class="text-left">{{$city->desc}}</td>
                                <td class="text-center">
                                    <div class="btn-group">

                                        @can('city-update')
                                            <a class="btn btn-primary btn-sm mr-3" href="{{route('location.cities.edit',$city)}}" title="Edit"><i class="fa fa-edit"></i></a>
                                        @endcan

                                        @can('city-delete')
                                            <form class="form-delete" method="post" action="{{route('location.cities.destroy',$city)}}">
                                                @method('DELETE')
                                                @csrf
                                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')" title="delete"><i class="fa fa-trash-alt"></i></button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table> 

, но я хотел бы иметь шаблон где я буду заполнять только строки заголовка таблицы и тело таблицы примерно так:

<div class="table-responsive">
    <table class="table table-striped table-hover table-sm" id="table">
        <thead class="text-uppercase text-center">
        <tr>
            //Dynamic table heads
            @if(!is_null($rows))
                @foreach($rows as $row)
                    {{$row}}
                @endforeach
            @endif
        </tr>
        </thead>
        <body>
            //Dynamic table body
            @if(!is_null($datas))
                @foreach($datas as $data)
                    {{$data}}
                @endforeach
            @endif
        </tbody>
    </table>
    <!-- end table -->
</div>

Как лучше всего выполнить sh это

Answer 1

Для этого вы можете использовать компонент Blade. Один из подходов в Laravel 7 - использовать компонент класса Blade. Ссылка на официальные документы по компонентам Blade: https://laravel.com/docs/7.x/blade#components

Вы можете создать универсальный c табличный компонент, используя команду artisan:

php artisan make:component Table

Класс компонентов

Ваш компонент может выглядеть так:

<?php 

namespace App\View\Components;

use Illuminate\View\Component;

class Table extends Component
{
    /**
     * Array of table heading strings
     *
     * @var array
     */
    public $headings;

    /**
     * Table rows
     *
     * @var array
     */
    public $rows;

    /**
     * Create the component instance.
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($headings, $rows)
    {
        $this->headings = $headings;
        $this->rows = $rows;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.table');
    }
}

Представление компонента

Теперь, когда у вас есть класс компонента, вы должны подготовить представление компонента. Вы найдете его в /resources/views/components/table.blade.php.

<div class="table-responsive">
    <table class="table table-striped table-hover table-sm" id="table">

        //Dynamic table heads
        @if($headings)
        <thead class="text-uppercase text-center">
            <tr>
                @if($rows))
                    @foreach($rows as $row)
                        <th>{{$row}}</th>
                    @endforeach
                @endif
            </tr>
        </thead>
        @endif

        <tbody>
            //Dynamic table body
            @foreach($rows as $row)
                <tr>
                    // Render each item from row
                    @foreach($row as $item)
                        <td>{{$item}}</td>
                    @endforeach
                </tr>
            @endif
        </tbody>
    </table>
    <!-- end table -->
</div>

Теперь вы можете использовать свой компонент в своих представлениях:

<x-table :headings="['foo', 'bar']" 
         :data="[['foo1', 'bar1'], ['foo2', 'bar2']]" class="mt-4"/>