Weave Code
Tables Laravel Package
beartropy/tables
Flexible Livewire table component for the TALL stack (Tailwind, Alpine, Laravel, Livewire). Provides essentials like searching, sorting, filters, bulk actions, and column toggling to build customizable data tables quickly.
At a glance
Frequently asked questions about Tables
- How do I integrate Beartropy/Tables with an existing Laravel Livewire project?
- Install via Composer (`composer require beartropy/tables`), then use the `@livewire` directive to embed the table component in your Blade views. The package provides Eloquent model integration, so you can pass your model directly to the table component. Follow the [official documentation](https://beartropy.com/tables) for step-by-step setup, including Livewire property binding and query scoping.
- Does this package support non-Eloquent data sources like API responses or raw arrays?
- The package is primarily designed for Eloquent models, but you can work around this by converting API responses or arrays into Eloquent collections or using custom query builders. For complex nested data, you may need to pre-process it into a format the table expects. Test thoroughly with your data structure, as Livewire serialization may introduce edge cases with non-standard objects.
- What Laravel and Livewire versions are compatible with Beartropy/Tables?
- The package requires Laravel 10.x+ and Livewire 3.x (or compatible 2.x versions). PHP 8.2+ is mandatory due to features like property_exists() checks. Always check the [Packagist page](https://packagist.org/packages/beartropy/tables) for the latest version’s requirements. For older environments, polyfills or manual adjustments may be needed.
- Can I customize the UI beyond Tailwind CSS, like using Bootstrap or vanilla CSS?
- The package is Tailwind-centric, but you can override styles by targeting its utility classes or using custom CSS. For frameworks like Bootstrap, replace Tailwind classes (e.g., `bg-gray-100` → `table-light`) and adjust Alpine.js interactions. The documentation provides guidance on theming, but expect some trial-and-error for non-Tailwind setups.
- How does performance scale with large datasets (e.g., 10K+ rows)?
- Performance depends on backend query optimization and Livewire’s lazy loading. For large datasets, enable pagination, use `wire:key` for efficient updates, and leverage Eloquent’s `cursor()` for memory efficiency. Bulk actions may slow down without proper indexing or batch processing. Test with your dataset size and consider server-side processing for extreme cases.
- Are there security risks with bulk actions or dynamic column toggling?
- Bulk actions include CSRF protection via Livewire’s built-in mechanisms, but you must manually validate authorization (e.g., `can('delete', $model)`). Dynamic column toggling could expose XSS risks if user-provided column names aren’t sanitized. Always escape dynamic content in Blade templates and validate inputs server-side.
- How do I add custom column types (e.g., a DateColumn with formatting)?
- Extend the base column classes provided by the package. For example, create a `DateColumn` class that overrides the `render()` method to format dates using Carbon or PHP’s `date()`. Register your custom column in the table’s configuration. The package’s modular design makes this straightforward, and examples are available in the [documentation](https://beartropy.com/tables).
- What’s the roadmap for Beartropy/Tables? Will it support Livewire 3.0 or TypeScript?
- The package is actively maintained, with updates aligned to Livewire’s major releases. While TypeScript support isn’t officially planned, the frontend interactions (Alpine.js) could be enhanced with TypeScript definitions if community demand grows. Check the [GitHub repository](https://github.com/beartropy/tables) for release notes and future plans.
- Can I use this package with Inertia.js or Vue/React instead of Livewire?
- The package is Livewire-first, but you can render Livewire components as Inertia resources. For Vue/React, you’d need to wrap the Livewire component in a custom element or use iframes, which may introduce complexity. Alpine.js dependencies could conflict with Vue/React’s reactivity systems, so test thoroughly if exploring non-Livewire integrations.
- How do I handle nested relationships or polymorphic associations in the table?
- Use Eloquent’s `with()` or `load()` methods to eager-load relationships, then access nested data in column renderers (e.g., `{{ $row->relation->attribute }}`). For polymorphic associations, cast the relationship to a consistent type or use conditional rendering. The package doesn’t natively support deep nesting, so pre-process complex data in your model’s `query()` method or component properties.
Weaver
How can I help you explore Laravel packages today?