Core Table Extensions
This document covers the custom table extensions built on top of Inertia Table. These components extend the base functionality with application-specific features like stats, row styling, domain object integration, and advanced column types.Base Documentation: See Inertia Table API Reference for core functionality.
CoreTable Class
TheCoreTable class extends the base Inertia Table with additional functionality through traits:
Automatic Table Naming
CoreTable automatically names tables based on their class name to prevent query string conflicts when multiple tables are on the same page. The naming convention:
- Removes the
Tablesuffix from the class name (e.g.,TransactionTable→Transaction) - Converts to kebab-case (e.g.,
AccountTransactionRequest→account-transaction-request)
TransactionTable→ automatically namedtransactionAccountTransactionRequestTable→ automatically namedaccount-transaction-requestUserTable→ automatically nameduser
Overriding the Default Name
You can override the automatic name in several ways: 1. OverridegetDefaultName() method:
as() method after instantiation:
onMake() hook:
Why Table Names Matter
When you have multiple tables on the same page, each table maintains its own state (pagination, sorting, filtering) via query string parameters. Without unique names, tables would share the same query parameters, causing conflicts:Core Actions
CoreTable supports adding CoreAction instances directly to tables via the coreActions() method. These actions are automatically rendered in the table’s row actions and/or bulk actions bar based on their configuration.
Basic Usage
With WithTableAction Trait
For actions that operate on table rows, use theWithTableAction trait to get automatic authorization, validation, and query building:
How It Works
- Actions are serialized with the table via
toArray()and passed to the frontend - Row actions receive
idparam automatically when triggered from a row - Bulk actions receive
idsarray (or['*']for select all) when triggered from bulk actions bar - Actions with
asBulkAction(true)appear in the bulk actions bar when rows are selected
See: Core Action Documentation for complete WithTableAction usage.
Exports
CoreTable automatically includes a CSV export via CoreTableExport. The export:
- Exports all visible table columns
- Generates filename based on the model’s collection title (e.g.,
users_2024-01-15.csv) - Always queues the export to prevent timeouts
- Sends an email notification when the export is ready
exports() method:
Helper Methods
getFilterValue()
Retrieves the value of an active filter by its attribute name. Returnsnull if the filter is not active or not enabled. Throws a 400 error if the filter exists but is disabled.
Traits
WithStats Trait
Adds statistical information to your tables that can be displayed in the frontend.Basic Usage
Frontend Usage
Stats are automatically included in the table resource and can be accessed in your frontend:WithRowStyles Trait
Provides default row styling based on model state, particularly for soft-deleted models.Default Behavior
CSS Styling
The trait works with CSS classes defined inapp.css:
Custom Row Styling
Override the method to add custom row attributes:SearchUsingScout Trait
Enables Laravel Scout search functionality instead of the default database LIKE queries.Basic Usage
Custom Scout Configuration
Override the search behavior if needed:Custom Columns
CoreColumn Base Class
Base class for all custom columns that provides enhanced constructor parameters:DetailedLinkColumn
Displays rich content with title, subtitle, icon, and optional user avatar. Perfect for entity references with navigation.Basic Usage
With Avatar
Frontend Rendering
The column renders as a clickable component with:- Title: Primary text (bold)
- Subtitle: Secondary text (smaller, muted)
- Avatar/Icon: Displays in order of priority:
- Avatar image (if provided)
- Avatar with initials from fallback name (if provided)
- Icon (if provided)
- Navigation: Automatic routing via URL
ObjectColumn
Automatically extracts display information from models implementing the domain object pattern. ExtendsDetailedLinkColumn with automatic data population.
Model Requirements
Models must implement theHasDomainObject trait and required methods:
Column Usage
CoreBadgeColumn
Displays badge components with automatic enum support or manual configuration.Automatic Enum Usage
Works automatically with enums implementing theSerializeAsBadge trait:
Manual Configuration
Export Behavior
Exports only the label text, making it suitable for CSV/Excel exports.InlineEditColumn
Enables inline editing of column values directly in the table.Basic Usage
Configuration Options
Backend Handling
The column will send requests to your resource routes:Custom Actions
CoreTableAction
Base class for all custom table actions. Extends InertiaUI’sAction class and provides a hook method (onMake()) for post-construction customization.
Purpose
CoreTableAction serves as the foundation for building custom action classes. It provides an onMake() hook that is called after the action is instantiated, allowing subclasses to perform custom initialization logic.
Basic Usage
When creating custom action classes, extendCoreTableAction instead of the base Action class:
The onMake() Hook
The onMake() method is automatically called after an action is instantiated via make(). Override this method to perform custom setup:
When to Use
- Creating custom action classes: Extend
CoreTableActionwhen building reusable action classes with custom behavior - Post-construction setup: Use
onMake()when you need to configure actions after instantiation but before they’re used - Base for specialized actions: Use as a base class for actions with specific functionality (like
CoreModalAction)
Available Methods
CoreTableAction inherits all methods from InertiaUI’s Action class, including:
url(Closure $url)- Set the action URLhandle(Closure $handle)- Set the action handlerasRowAction()- Show in row actionsasBulkAction()- Show in bulk actions dropdownicon(string $icon)- Set the iconhidden(Closure|bool $hidden)- Control visibilityauthorize(Closure|bool $authorize)- Control authorizationconfirmationRequired()- Require confirmation before execution- And many more…
CoreModalAction
Enables table actions that open modals (dialogs or sheets) instead of navigating to a new page. ExtendsCoreTableAction and supports both URL-based modals (server-rendered) and local modals (client-side).
URL-Based Modal (Server-Rendered)
Opens a modal that loads content from a route.CoreModalAction is modal by default (opens as a centered dialog). The selectedItems (for bulk actions) or row ID (for row actions) are automatically passed to the modal page via the selectedItems prop:
selectedItems are automatically available:
selectedItems via props:
Modal with Custom Width
Sheet (Slideover) Modal
Opens a modal as a slideover panel instead of a centered dialog:Local Modal (Client-Side)
Opens a modal defined directly on the page (useful for forms that don’t require a full page load):Action Configuration
CoreModalAction supports all standard action configuration methods:
Available Methods
sheet(bool $isSheet = true, SheetPosition|string|null $position = null)- Opens as a slideover panel instead of a centered dialog (default is dialog). Position can be specified directly as the second parameter.modalClassName(string $className)- Sets the modal max-width (e.g.,'sm:max-w-sm','sm:max-w-2xl lg:max-w-4xl')localModal(string $name)- References a local modal by name (without#prefix)position(SheetPosition|string $position)- Sets sheet position (SheetPosition::RIGHT,SheetPosition::LEFT,SheetPosition::TOP, orSheetPosition::BOTTOM) - only valid whensheet()is calledurl(Closure $url)- Sets the URL for URL-based modals- All standard action methods:
asRowAction(),asBulkAction(),icon(),hidden(),authorize(), etc.
Note:CoreModalActionis modal by default (opens as a centered dialog). Callsheet()to open as a slideover panel instead.
Frontend Integration
Local Modals
When using local modals, the table provides a context (TableActionProvider) that allows modals to access:
- Row Action ID: The ID of the row that triggered the action (via
useTableAction()hook) - Selected Items: The currently selected items for bulk actions (via the
modalsslot prop)
modals slot prop receives the table state, including actions.selectedItems for bulk operations.
URL-Based Modals
For URL-based modals,selectedItems are automatically passed to the modal page:
- Row actions:
selectedItemscontains[rowId](single item array) - Bulk actions:
selectedItemscontains the array of selected item IDs
selectedItems are available:
- In the controller via
request()->input('selectedItems') - As a prop in your React component (automatically passed by
CoreModalPage) - In
pageDataif you need to access them viauseModal()hook
Domain Object Integration
HasDomainObject Trait
Provides standardized domain object functionality for models, including search capabilities and data formatting.Required Methods
Global Search Configuration
TheHasDomainObject trait also provides global search functionality (separate from table search):
Note: These methods are for application-wide global search, not table-specific search functionality.
Domain Object Data Access
Best Practices
-
Use CoreTable: Always extend
CoreTableinstead of the baseTableclass to get stats, row styling, and automatic exports. -
Domain Objects: Implement
HasDomainObjecttrait on models that will be displayed in tables for consistent navigation and display. - Stats Performance: Be mindful of expensive queries in stats. Consider caching or using database views for complex calculations.
- Row Styling: Use data attributes with CSS classes rather than inline styles for better maintainability.
- Column Organization: Group related functionality using the custom columns rather than complex cell overrides when possible.
-
Search Strategy: Use
SearchUsingScoutfor models with large datasets or complex search requirements. -
Exports:
CoreTableautomatically includes CSV exports. Override theexports()method only when you need custom export behavior or formats. -
Leverage Inertia deferred properties for complex tables: For tables with significant data or processing, return them as deferred properties in your controller using
Inertia::defer(fn() => MyTable::make()). If your table extendsCoreTable, you can use the convenient shorthand:MyTable::defer(). -
Modal Actions: Use
CoreModalActionfor actions that should open modals instead of navigating to new pages. Prefer local modals for simple forms that don’t require server-side rendering, and URL-based modals for complex pages or when you need server-side data. -
Action Context: When using local modals with
CoreModalAction, use themodalsslot prop onInertiaTableto render modals within the table’s action context. This provides access to row action IDs and selected items via theuseTableAction()hook.