Laravel-Training-Project/resources/views/livewire/show-reports.blade.php

<div>
    <div id="datatable-config"
         data-datatable-name="{{ $datatableName }}"
         data-datatable-columns-config='@json($datatableColumnsConfig)'>
    </div>

    <table id="{{$datatableName}}-table" class="bg-white border border-gray-300">
        <thead>
        <tr>
        @foreach($datatableHeadersConfig as $headerConfig)
            <th wire:key="{{$headerConfig['header']}}" class="border border-gray-300 px-4 py-2">{{$headerConfig['header']}}</th>
        @endforeach
        </tr>

        <tr>
            @foreach($datatableHeadersConfig as $index=>$headerConfig)
                <th wire:key="{{$headerConfig['header']}}" class="border border-gray-300 px-4 py-2">
                @if($headerConfig['searchable'] === true)

                    @switch($headerConfig['searchtype'])
                        @case("text")
                            <input type="text" id="{{$headerConfig['header']}}Filter"  wire:model.live.debounce.250ms="searchTerms.{{ $index }}" placeholder="{{$headerConfig['header']}} Search" />
                            @break
                        @case("date")
                            <input type="date" id="{{$headerConfig['header']}}FilterStartDate" wire:model.live="searchTerms.{{ $index }}.start" placeholder="{{$headerConfig['header']}} Start Date" />
                            -
                            <input type="date" id="{{$headerConfig['header']}}FilterEndDate" wire:model.live="searchTerms.{{ $index }}.end" placeholder="{{$headerConfig['header']}} End Date" />
                            @break
                    @endswitch

                @endif
                </th>
            @endforeach
        </tr>
        </thead>
        <tbody></tbody>

    </table>


</div>