README

Data tables with sorting, searching, and styling options for Laravel applications. Supports striped rows, hover effects, borders, and compact mode. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/table

Livewire Usage

Basic Usage

@php
$columns = [
    'name' => 'Name',
    'email' => 'Email',
    'status' => 'Status',
];

$data = [
    ['name' => 'John Doe', 'email' => 'john@example.com', 'status' => 'Active'],
    ['name' => 'Jane Smith', 'email' => 'jane@example.com', 'status' => 'Pending'],
];
@endphp

<livewire:sb-table :columns="$columns" :data="$data" />

With Sorting

<livewire:sb-table
    :columns="$columns"
    :data="$data"
    :sortable="true"
/>

With Search

<livewire:sb-table
    :columns="$columns"
    :data="$data"
    :searchable="true"
/>

Full Featured

<livewire:sb-table
    :columns="$columns"
    :data="$data"
    :striped="true"
    :hoverable="true"
    :bordered="true"
    :sortable="true"
    :searchable="true"
/>

Compact Mode

<livewire:sb-table :columns="$columns" :data="$data" :compact="true" />

Livewire Props

Vue 3 Usage

Setup

import { SbTable } from './vendor/sb-table';
app.component('SbTable', SbTable);

Basic Usage

<template>
  <SbTable :columns="columns" :data="data" />
</template>

<script setup>
const columns = {
  name: 'Name',
  email: 'Email',
  status: 'Status',
};

const data = [
  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
  { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
];
</script>

With All Options

<template>
  <SbTable
    :columns="columns"
    :data="data"
    :striped="true"
    :hoverable="true"
    :bordered="true"
    :sortable="true"
    :searchable="true"
  />
</template>

Vue Props

Events

Dynamic Data Loading

// In your Livewire component
public function mount()
{
    $this->columns = [
        'name' => 'Name',
        'email' => 'Email',
        'created_at' => 'Joined',
    ];

    $this->data = User::all()->map(fn($user) => [
        'name' => $user->name,
        'email' => $user->email,
        'created_at' => $user->created_at->format('M d, Y'),
    ])->toArray();
}

Styling

The table includes:

• Clean, minimal design
• Sort indicators on column headers
• Search input with icon
• Responsive horizontal scrolling

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License