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)'
         data-datatable-headers-config='@json($datatableHeadersConfig)'>
    </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="{{str_replace(" ", "-", $headerConfig['header'])}}Filter"  oninput="getFilterInput(this.value, {{$index}},'text', null)" placeholder="{{$headerConfig['header']}} Search" />
                            @break
                        @case("date")
                            <input type="date" id="{{str_replace(" ", "-", $headerConfig['header'])}}FilterStartDate" onchange="getFilterInput(this.value, {{$index}},'date', 'start')" placeholder="{{$headerConfig['header']}} Start Date" />
                            -
                            <input type="date" id="{{str_replace(" ", "-", $headerConfig['header'])}}FilterEndDate" onchange="getFilterInput(this.value, {{$index}},'date', 'end')" placeholder="{{$headerConfig['header']}} End Date" />
                            @break
                        @case("dropdown")
                            <select id="{{str_replace(" ", "-", $headerConfig['header'])}}FilterDropdown" onchange="getFilterInput(this.value, {{$index}},'dropdown', null)">

                            </select>
                            @break
                    @endswitch

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

    </table>


</div>