Table

It's like a digital spreadsheet where you put stuff in rows and columns to organize data, like your schedule or a list of products.

Adding the component

php artisan spur:add essentials/table essentials/table-header essentials/table-cell

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'essentials/table',
  'essentials/table-header',
  'essentials/table-cell',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Table

Name Job Title Seniority Join Date
John Doe Software Engineer Junior 12.08.2023
Jane Doe UX Designer Senior 03.11.2020
Max Stein Backend Software Engineer Mid-Level 01.07.2022
Olga Stein Product Manager Senior 02.04.2021 
<x-spur.table>
  <x-slot:header>
    <x-spur.table-header>Name</x-spur.table-header>
    <x-spur.table-header>Job Title</x-spur.table-header>
    <x-spur.table-header>Seniority</x-spur.table-header>
    <x-spur.table-header>Join Date</x-spur.table-header>
  </x-slot>

  @foreach ($employees as $employee)
    <tr>
      <x-spur.table-cell>{{$employee->name}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->title}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->seniority}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->date}}</x-spur.table-cell>
    </tr>
  @endforeach
</x-spur.table>

Striped Table

Name Job Title Seniority Join Date
John Doe Software Engineer Junior 12.08.2023
Reply Forward Delete
Jane Doe UX Designer Senior 03.11.2020
Reply Forward Delete
Max Stein Backend Software Engineer Mid-Level 01.07.2022
Reply Forward Delete
Olga Stein Product Manager Senior 02.04.2021
Reply Forward Delete 
<x-spur.table>
  <x-slot:header>
    <x-spur.table-header>Name</x-spur.table-header>
    <x-spur.table-header>Job Title</x-spur.table-header>
    <x-spur.table-header>Seniority</x-spur.table-header>
    <x-spur.table-header>Join Date</x-spur.table-header>
    <x-spur.table-header></x-spur.table-header>
  </x-slot>

  @foreach ($employees as $employee)
    <tr>
      <x-spur.table-cell>{{$employee->name}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->title}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->seniority}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->date}}</x-spur.table-cell>
      <x-spur.dropdown-option class="hover:bg-red-500" onclick="alert('Are you sure?')">Delete</x-spur.dropdown-option>
    </tr>
  @endforeach
</x-spur.table>

Row Link

Name Job Title Seniority Join Date
John Doe Software Engineer Junior 12.08.2023
Jane Doe UX Designer Senior 03.11.2020
Max Stein Backend Software Engineer Mid-Level 01.07.2022
Olga Stein Product Manager Senior 02.04.2021 
<x-spur.table>
  <x-slot:header>
    <x-spur.table-header>Name</x-spur.table-header>
    <x-spur.table-header>Job Title</x-spur.table-header>
    <x-spur.table-header>Seniority</x-spur.table-header>
    <x-spur.table-header>Join Date</x-spur.table-header>
  </x-slot>

  @foreach ($employees as $employee)
    <x-spur.table-row href="#{{$employee->url}}">
      <x-spur.table-cell>{{$employee->name}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->title}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->seniority}}</x-spur.table-cell>
      <x-spur.table-cell>{{$employee->date}}</x-spur.table-cell>
    </x-spur.table-row>
  @endforeach
</x-spur.table>