Laravel Component to display Tailwind Tables

Route::get('/products', [ProductController::class, 'index'])
->middleware(['auth'])
->name('products');
class ProductController extends Controller
{
//
public function index()
{
$products = Product::paginate();
return view('product.index', [
'products' => $products
]);
}
}
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Products') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<table>
<thead>
<tr>
<td>Name</td>
<td>SKU</td>
<td>Category</td>
<td>Status</td>
</tr>
</thead>
@foreach($products as $product)
<tr>
<td>{{$product->name}}</td>
<td>{{$product->sku}}</td>
<td>{{$product->category}}</td>
<td>{{$product->status ? 'Active' : 'Not Active'}}</td>
</tr>
@endforeach
</table>
<div class="mt-6">
{{$products->links()}}
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
<table class="w-full whitespace-no-wrapw-full whitespace-no-wrap">
<thead>
<tr class="text-center font-bold">
<td class="border px-6 py-4">Name</td>
<td class="border px-6 py-4">SKU</td>
<td class="border px-6 py-4">Category</td>
<td class="border px-6 py-4">Status</td>
</tr>
</thead>
@foreach($products as $product)
<tr>
<td class="border px-6 py-4">{{$product->name}}</td>
<td class="border px-6 py-4">{{$product->sku}}</td>
<td class="border px-6 py-4">{{$product->category}}</td>
<td class="border px-6 py-4">{{$product->status ? 'Active' : 'Not Active'}}</td>
</tr>
@endforeach
</table>
  1. We have given classes to the top most element so that it takes full width & to prevent the text from wrapping within an element.
  2. We have given border to each td element as well as vertical & horizontal padding.
  3. Also we made heading as bold & center aligned.
<td class="border px-6 py-4">
{{$slot}}
</td>
<table class="w-full whitespace-no-wrapw-full whitespace-no-wrap">
<thead>
<tr class="text-center font-bold">
<x-table-column>Name</x-table-column>
<x-table-column>SKU</x-table-column>
<x-table-column>Category</x-table-column>
<x-table-column>Status</x-table-column>
</tr>
</thead>
@foreach($products as $product)
<tr>
<x-table-column>{{$product->name}}</x-table-column>
<x-table-column>{{$product->sku}}</x-table-column>
<x-table-column>{{$product->category}}</x-table-column>
<x-table-column>{{$product->status ? 'Active' : 'Not Active'}}</x-table-column>
</tr>
@endforeach
</table>
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-left font-bold">
{{$header}}
</tr>
</thead>
<tbody>
{{$slot}}
</tbody>
</table>
<x-table>
<x-slot name="header">
<x-table-column>Name</x-table-column>
<x-table-column>SKU</x-table-column>
<x-table-column>Category</x-table-column>
<x-table-column>Status</x-table-column>
</x-slot>
@foreach($products as $product)
<tr>
<x-table-column>{{$product->name}}</x-table-column>
<x-table-column>{{$product->sku}}</x-table-column>
<x-table-column>{{$product->category}}</x-table-column>
<x-table-column>{{$product->status ? 'Active' : 'Not Active'}}</x-table-column>
</tr>
@endforeach
</x-table>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store