@props(['headers', 'rows'])

<div class="table-responsive" style="max-height: 400px; overflow-y: auto; font-size: 90%">
    <table class="table table-bordered table-hover">
        <thead class="table-light">
            <tr>
                @foreach($headers as $header)
                    <th>{{ $header }}</th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @foreach($rows as $row)
                <tr>
                    @foreach($headers as $i => $header)
                        <td>{{ str($row[$i])->limit(20) }}</td>
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>