UX DataTables

Type to search columns, filters, options, and extensions.

↑↓ to navigate · Enter to open · Esc to close

Documentation

Responsive Extension

Make wide tables usable on smaller viewports

When To Use

Use Responsive for mobile-heavy usage and columns that cannot all fit on one line.

Minimal Example

$dataTable->responsive();

Advanced Example

use Pentiminax\UX\DataTables\Model\Extensions\ResponsiveExtension;

$dataTable->addExtension(
    new ResponsiveExtension(
        auto: true,
        detailsTarget: 0,
        detailsType: 'inline',
        orthogonal: 'display',
    )
);

detailsType accepts 'inline', 'column', 'colvis', or false to disable the hidden-column details control entirely. Pass breakpoints (a list of ['name' => string, 'width' => int] pairs) to override DataTables’ built-in breakpoint list; omit it to keep the defaults.

Column Priority

By default Responsive hides columns from the right. Use setResponsivePriority() when a column must stay visible longer than its position would imply. Lower numbers stay visible first; omitted columns use DataTables’ default of 10000.

use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;

public function configureColumns(): iterable
{
    yield NumberColumn::new('id', 'ID')->setResponsivePriority(1);
    yield TextColumn::new('email', 'Email')->setResponsivePriority(2);
    yield TextColumn::new('notes', 'Notes')->setResponsivePriority(4);
}

ActionColumn already defaults to priority 1 so row actions stay on screen. Override it with setResponsivePriority() when another column should win.

Frequent Pitfalls

  • Not setting column priorities when too many columns compete for visibility.
  • Combining with checkbox selection without validating first-column rendering.