tablar-kit-datatable-development

name	tablar-kit-datatable-development
description	Build server-side data tables with takielias/tablar-kit — DataTable abstract base class for column schema + data source + export, <x-tabulator> Blade component for rendering, action columns with confirm-modal integration, custom formatters and search, pagination.

Tablar Kit — DataTable / Tabulator

When to use this skill

• Building a paginated table with search + sort.
• Adding row-level actions (edit, delete with confirm).
• Custom column rendering (HTML, badges, action buttons).
• Exporting visible data to CSV / XLS / PDF.

Architecture

Two pieces:

• TakiElias\TablarKit\DataTable\DataTable — abstract base. Define columns + data source + export types in a subclass constructor.
• <x-tabulator :table="$table" /> — Blade component that takes a DataTable instance and renders the Tabulator-powered HTML table + JS bindings.

Step 1 — Subclass DataTable

namespace App\Tables;

use App\Models\Product;
use TakiElias\TablarKit\DataTable\DataTable;
use TakiElias\TablarKit\Enums\ExportType;

class ProductTable extends DataTable
{
    public function __construct()
    {
        parent::__construct();

        $this->setDataSource(Product::select('id', 'product_name', 'product_code', 'product_price'))
            ->column(name: 'id', title: 'SN')
            ->column(name: 'product_name', title: 'Name', search: true)
            ->column(name: 'product_code', title: 'Code', search: true)
            ->column(name: 'product_price', title: 'Price', search: true)
            ->column(
                name: 'action',
                title: 'Action',
                callback: fn ($item) => view('common.action', ['item' => $item])->render(),
                formatter: 'html'
            )
            ->setExportTypes([ExportType::CSV, ExportType::PDF, ExportType::XLS])
            ->paginate(10);
    }
}

parent::__construct() is required.

Step 2 — Render in Blade

{{-- Controller passes $table = new ProductTable; --}}
<x-tabulator :table="$table" />

The component handles the Tabulator initialization, AJAX paging, search, and export buttons.

DataTable public API (verified src/DataTable/DataTable.php)

Method	Signature	Returns	Use
setDataSource	(Builder|Collection|array $source)	static	Eloquent query builder, Collection, or raw array
fromQuery	(Builder $query)	self	Alias for query-only source
fromCollection	(Collection $data)	self	Alias for collection source
fromArray	(array $data)	self	Alias for array source
column	(string $name, string $title, $callback = null, string $formatter = 'plaintext', array $formatterParams = [], bool $search = false, ?string $width = '200', bool $download = true, ?BottomCalculationType $bottomCalc = null, bool $hidden = false)	self	Add a column
hideColumns	(array $columns)	self	Hide named columns from rendering
setExportTypes	(array $types)	static	Pass ExportType enum cases
paginate	($limit)	void	Set page size — ends the chain (returns void)
render	(string $view = 'tablar-kit::table.datatable')	string	Render shortcut (component does this for you)
getData	(Request $request)	array	Pull paginated/sorted/searched rows for the AJAX response

column() arguments

• name (string, required) — DB field OR a synthetic key for callback-only columns (e.g. 'action').
• title (string, required) — header label.
• callback (callable|null) — receives the row, returns the cell content. Use for action buttons or computed values.
• formatter (string, default 'plaintext') — Tabulator formatter: plaintext, html, link, image, tickCross, traffic, progress, color, buttonTick, buttonCross, etc. See Tabulator docs.
• formatterParams (array) — formatter-specific options.
• search (bool, default false) — include in column-level search.
• width (string|null, default '200') — column width.
• download (bool, default true) — include in exports.
• bottomCalc (BottomCalculationType enum|null) — sum/avg/count footer for the column.
• hidden (bool, default false) — track in hidden list (not rendered, still searchable if applicable).

Export

use TakiElias\TablarKit\Enums\ExportType;

$this->setExportTypes([ExportType::CSV, ExportType::XLS, ExportType::PDF, ExportType::HTML]);

ExportType enum cases: CSV, XLS, PDF, HTML.

Component renders an export dropdown automatically. Each format pulls from current visible rows (respects search + pagination).

Recipes

1. Static query-driven table

class UserTable extends DataTable
{
    public function __construct()
    {
        parent::__construct();

        $this->setDataSource(User::query())
            ->column('id', 'ID')
            ->column('name', 'Name', search: true)
            ->column('email', 'Email', search: true)
            ->paginate(15);
    }
}

2. Action column with <x-confirm> delete

resources/views/common/action.blade.php:

<a href="{{ route('users.edit', $item) }}" class="btn btn-sm btn-primary">
    <i class="ti ti-edit"></i>
</a>

<x-confirm
    :url="route('users.destroy', $item)"
    method="DELETE"
    :title="'Delete user?'"
    :message="'Permanently delete '.$item->name.'?'"
    button="Delete"
    class="btn btn-sm btn-danger">
    <i class="ti ti-trash"></i>
</x-confirm>

In the table:

->column(
    name: 'action',
    title: 'Actions',
    callback: fn ($item) => view('common.action', ['item' => $item])->render(),
    formatter: 'html',
    download: false,
    width: '120',
)

formatter: 'html' is REQUIRED — without it, Tabulator escapes the HTML and renders raw markup.

download: false excludes the action column from CSV/XLS/PDF exports.

The confirm-modal singleton (<x-confirm-modal />) must already be mounted in the layout — see tablar-kit-confirm-modal-development.

3. Computed column

->column(
    name: 'total',
    title: 'Total',
    callback: fn ($order) => '$'.number_format($order->amount * $order->qty, 2),
)

4. Bottom calculation (footer sum)

use TakiElias\TablarKit\Enums\BottomCalculationType;

->column('product_price', 'Price', bottomCalc: BottomCalculationType::SUM)

(Verify enum exists with desired cases — read src/Enums/BottomCalculationType.php.)

5. Hide internal columns from render but keep in data

->column('id', 'ID')
->hideColumns(['id'])

OR per-column:

->column('internal_uuid', 'UUID', hidden: true)

Pitfalls

• paginate() returns void — must be the LAST call in the chain. Splitting ->paginate(10)->setExportTypes(...) won't compile.
• Action column without formatter: 'html' — buttons render as escaped text.
• N+1 in callback — callback: fn ($item) => $item->user->name triggers a query per row. Use setDataSource(Order::with('user')) to eager-load.
• <x-confirm-modal /> mount missing — confirm triggers in row actions silently fail. Mount once in master layout.
• getData() is called by the component automatically — don't invoke it manually in the controller.
• Custom Blade view via render($view) — bypass the component when you need full HTML control. The component is the recommended path.

Configuration

No tablar-kit config keys directly target the DataTable. Tabulator JS options are baked into the component view (resources/views/components/table/tabulator.blade.php).

Related

• Skill tablar-kit-confirm-modal-development — wire row delete confirmations.
• Skill tablar-kit-forms-development — FormBuilder for create/edit screens.
• Source: src/DataTable/DataTable.php, src/Components/Table/Tabulator.php, src/Enums/ExportType.php, resources/views/components/table/tabulator.blade.php.