Tables

UltraViolet Pro includes comprehensive table components with advanced features like sorting, filtering, pagination, and responsive design.

Basic Tables

Simple Table

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped Table

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

Bordered Table

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Advanced Tables

DataTables Integration

UltraViolet Pro includes @skem9/bs5-datatables for advanced table functionality.

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
});
</script>

Features

• Sorting: Click column headers to sort data
• Searching: Global search across all columns
• Pagination: Navigate through large datasets
• Responsive: Automatically adapts to screen size
• Export: Export data to CSV, Excel, PDF
• Column Visibility: Show/hide columns as needed

Table Variants

Dark Table

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Hoverable Rows

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Responsive Tables

Horizontal Scroll

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

Breakpoint Specific

<div class="table-responsive-sm">
  <table class="table">
    <!-- table content -->
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    <!-- table content -->
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    <!-- table content -->
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    <!-- table content -->
  </table>
</div>

Table Actions

Action Buttons

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td><span class="badge bg-success">Active</span></td>
      <td>
        <button class="btn btn-sm btn-primary">Edit</button>
        <button class="btn btn-sm btn-danger">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Bulk Actions

<table class="table">
  <thead>
    <tr>
      <th>
        <input type="checkbox" class="form-check-input" id="selectAll">
      </th>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="form-check-input">
      </td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td><span class="badge bg-success">Active</span></td>
    </tr>
  </tbody>
</table>

Customization

Custom Styling

.custom-table {
  .table {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }

  .table thead th {
    background-color: var(--bs-primary);
    color: white;
    border: none;
    font-weight: 600;
  }

  .table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
  }
}

JavaScript Enhancements

// Initialize DataTable with custom options
$('#myTable').DataTable({
  responsive: true,
  pageLength: 25,
  order: [[0, 'desc']],
  language: {
    search: "Search:",
    lengthMenu: "Show _MENU_ entries",
    info: "Showing _START_ to _END_ of _TOTAL_ entries",
    paginate: {
      first: "First",
      last: "Last",
      next: "Next",
      previous: "Previous"
    }
  }
});

Best Practices

1. Use semantic HTML: Proper table structure with <thead>, <tbody>, and <th> elements
2. Responsive design: Always wrap tables in responsive containers
3. Accessibility: Include proper ARIA labels and scope attributes
4. Performance: Use pagination for large datasets
5. User experience: Provide clear sorting and filtering options
6. Mobile optimization: Consider card layouts for mobile devices

Integration with Livewire

For dynamic tables with real-time updates:

// Livewire component
class UserTable extends Component
{
    public $users;

    public function render()
    {
        $this->users = User::paginate(10);
        return view('livewire.user-table');
    }
}

<!-- Livewire view -->
<div>
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
            <tr>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->created_at->format('M d, Y') }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{ $users->links() }}
</div>