LiveTable Overview
View SourceLiveTable is a powerful Phoenix LiveView component library that transforms data presentation in your web applications. It provides everything you need to build sophisticated, interactive data tables with minimal code.
What is LiveTable?
LiveTable is designed for developers who need to present complex data in an intuitive, interactive way. Whether you're building admin dashboards, e-commerce catalogs, or analytics platforms, LiveTable provides the tools to create rich data experiences without the complexity.
Key Benefits
- Developer-Friendly - Minimal boilerplate, maximum functionality
- Performance-First - Optimized for large datasets with streaming and pagination
- Highly Customizable - Adapt to any design system or use case
- Real-time Ready - Built for Phoenix LiveView's real-time capabilities
- Production-Tested - Handles millions of records efficiently
Core Features
🔍 Smart Filtering
Create powerful filter interfaces with minimal configuration:
- Boolean filters for toggle states (active/inactive, featured/regular)
- Range filters for numeric values, dates, and times
- Select filters with static options or dynamic database queries
- Transformers for complex custom filters that can modify entire queries
- Full-text search across multiple fields
- URL persistence so users can bookmark and share filtered views
📊 Advanced Sorting
Flexible sorting options that scale:
- Single-column sorting with visual indicators
- Multi-column sorting with shift+click
- Custom sort logic for computed fields
- Database-optimized queries for performance
📄 Intelligent Pagination
Handle datasets of any size:
- Configurable page sizes (10, 25, 50, 100+)
- Efficient querying with LIMIT/OFFSET optimization
- User preferences maintained across sessions
- Performance monitoring for large datasets
📤 Professional Exports
Generate reports without blocking your UI:
- CSV exports for spreadsheet analysis
- PDF reports with professional formatting using Typst
- Background processing via Oban for large datasets
- Custom formatting and filtering in exports
🎨 Flexible Display Modes
Present data the way your users need it:
- Table mode for traditional row/column layouts
- Card mode for rich, visual presentations
- Custom components for specialized displays
- Complete UI customization with custom headers, content, and footers
- Responsive design that works on all devices
⚡ Real-time Updates
Built for modern web applications:
- LiveView integration with automatic updates
- Streams or assigns support for flexible data handling
- Event handling for user interactions
- State management with URL synchronization
Architecture Overview
LiveTable uses a three-tier architecture that separates concerns and maximizes flexibility:
1. Data Layer
- Schema Integration - Direct Ecto schema support for simple tables
- Custom Queries - Full control with complex joins and computed fields
- Data Providers - Flexible functions that return queryable data
2. Configuration Layer
- Fields - Define what data to display and how
- Filters - Configure filtering options and behavior
- Options - Control pagination, sorting, exports, and display modes
3. Presentation Layer
- Components - Customizable UI components for every element
- Templates - Override default layouts with your own
- Styling - Full Tailwind CSS integration with custom themes
Usage Patterns
Simple Tables
Perfect for basic CRUD operations and data browsing:
defmodule YourAppWeb.ProductLive.Index do
use YourAppWeb, :live_view
use LiveTable.LiveResource, schema: YourApp.Product
def fields do
[
name: %{label: "Product Name", sortable: true, searchable: true},
price: %{label: "Price", sortable: true},
stock: %{label: "Stock", sortable: true}
]
end
end
Complex Analytics
For advanced reporting and data analysis:
defmodule YourAppWeb.SalesReportLive.Index do
use YourAppWeb, :live_view
use LiveTable.LiveResource
def mount(_params, _session, socket) do
socket = assign(socket, :data_provider, {Reports, :sales_summary, []})
{:ok, socket}
end
def fields do
[
product_name: %{label: "Product", sortable: true, searchable: true},
revenue: %{label: "Revenue", sortable: true, renderer: &format_currency/1},
units_sold: %{label: "Units", sortable: true},
avg_price: %{label: "Avg Price", sortable: true, renderer: &format_currency/1}
]
end
end
When to Use LiveTable
✅ Perfect For
- Admin interfaces with user, order, and product management
- E-commerce catalogs with filtering and search
- Analytics dashboards with large datasets and custom metrics
- CRM systems with customer and lead tracking
- Inventory management with stock monitoring
- Financial reports with complex calculations and transformations
- Any data-heavy application requiring advanced filtering and customization
⚠️ Consider Alternatives For
- Simple lists without sorting or filtering needs
- Static data that doesn't change frequently
- Non-tabular data better suited for other presentations
- Real-time streaming data that updates continuously
Performance Characteristics
LiveTable is designed to handle real-world application demands:
Scalability
- Large datasets - Tested with 1M+ records
- Complex queries - Efficient handling of joins and aggregations
- Concurrent users - Optimized for multi-user environments
- Memory efficiency - Streaming exports for large files
Optimization Strategies
- Query optimization - Automatic LIMIT/OFFSET for pagination
- Index-aware - Designed to work with database indexes
- Lazy loading - Components render only when needed
- Background processing - Exports don't block the UI
Integration Requirements
Dependencies
- Phoenix LiveView 1.0+ - Core framework dependency
- Ecto 3.10+ - Database query interface
- Oban 2.19+ - Background job processing for exports
- Tailwind CSS - Styling framework
Optional Dependencies
- Typst - PDF generation engine for reports
- Phoenix PubSub - Real-time updates across users
- Custom CSS frameworks - Alternative to Tailwind
Learning Path
1. Start Here
- Installation Guide - Get LiveTable running
- Quick Start - Build your first table in 5 minutes
- Simple Examples - Basic patterns and usage
2. Core Concepts
- Fields API - Configure data display
- Filters API - Add filtering capabilities
- Table Options - Control behavior and appearance
3. Advanced Features
- Complex Queries - Joins and computed fields
- Transformers API - Ultimate filtering power
- Exports API - PDF and CSV generation
- Custom Components - Complete UI control
4. Production Ready
- Performance Guide - Optimize for scale
- Troubleshooting - Solve common issues
- Configuration Reference - Complete options guide
Real-World Examples
E-commerce Product Catalog
# Feature-rich product listing with category filtering,
# price ranges, stock status, and bulk actions
def fields do
[
image: %{label: "Image", renderer: &product_image/1},
name: %{label: "Product", sortable: true, searchable: true},
category: %{label: "Category", sortable: true},
price: %{label: "Price", sortable: true, renderer: ¤cy/1},
stock: %{label: "Stock", sortable: true, renderer: &stock_status/2},
actions: %{label: "Actions", renderer: &product_actions/2}
]
end
Customer Analytics Dashboard
# Customer lifetime value analysis with cohort filtering,
# revenue tracking, and churn prediction
def fields do
[
customer_name: %{label: "Customer", sortable: true, searchable: true},
total_orders: %{label: "Orders", sortable: true},
lifetime_value: %{label: "LTV", sortable: true, renderer: ¤cy/1},
last_order: %{label: "Last Order", sortable: true, renderer: &date/1},
churn_risk: %{label: "Churn Risk", sortable: true, renderer: &risk_score/1}
]
end
Inventory Management System
# Stock monitoring with reorder alerts, supplier tracking,
# and automated inventory actions
def fields do
[
sku: %{label: "SKU", sortable: true, searchable: true},
product_name: %{label: "Product", sortable: true, searchable: true},
current_stock: %{label: "Stock", sortable: true, renderer: &stock_level/2},
reorder_point: %{label: "Reorder At", sortable: true},
supplier: %{label: "Supplier", sortable: true, searchable: true},
last_restock: %{label: "Last Restock", sortable: true, renderer: &date/1}
]
end
Community and Support
Getting Help
- Documentation - Comprehensive guides and API reference
- GitHub Issues - Bug reports and feature requests
- GitHub Discussions - Community Q&A and tips
- Examples Repository - Real-world implementation patterns
Key Documentation
- Transformers API - Most powerful filtering feature
- Configuration Guide - Streams vs assigns, custom components
- Field & Filter APIs - Complete reference for all filter types
Contributing
LiveTable is open source and welcomes contributions:
- Bug fixes and performance improvements
- Feature development for new capabilities
- Documentation improvements and examples
- Testing across different environments
Roadmap
- Enhanced filtering with date ranges and custom operators
- Advanced exports with custom templates and scheduling
- Real-time collaboration features
- Mobile-optimized responsive layouts
- Accessibility improvements for better WCAG compliance
LiveTable empowers Phoenix developers to build sophisticated data interfaces without sacrificing simplicity or performance. Whether you're creating admin panels, customer dashboards, or analytics platforms, LiveTable provides the foundation for exceptional user experiences.
Ready to get started? Check out the Installation Guide and build your first table in minutes.