Skip to main content

Cell styling

Cell styles control how a column's cells look and how their content sits. They apply to the header and to every body cell of that column.

Declare them with style() on a column:

<?php

use BrickNPC\EloquentTables\Column;
use BrickNPC\EloquentTables\Enums\CellStyle;

new Column('total')->style(CellStyle::AlignRight, CellStyle::FontBold);

What you can say

FamilyCasesRenders as
AlignmentAlignLeft, AlignCenter, AlignRight, AlignJustify, AlignBetween, AlignTop, AlignMiddle, AlignBottomflex alignment on the cell's content
BackgroundBackgroundPrimary to BackgroundDarka contextual fill on the cell itself
Text colourTextPrimary to TextDarka colour on the cell's text
WeightFontLight, FontNormal, FontSemibold, FontBolda font weight on the cell

Backgrounds and text colours cover the same ten colours the table styles offer.

Each case knows where it belongs. Alignment is applied to the content inside the cell; everything else is applied to the cell itself, so a background fills the whole cell including its padding.

Styling a cell by its value

Pass a closure alongside the static styles. It receives a BrickNPC\EloquentTables\Styles\Contexts\CellContext and returns a case, a list of cases, or null:

<?php

use BrickNPC\EloquentTables\Column;
use BrickNPC\EloquentTables\Enums\CellStyle;
use BrickNPC\EloquentTables\Styles\Contexts\CellContext;

new Column('total_amount')->style(
CellStyle::AlignRight,
function (CellContext $context): ?CellStyle {
if ($context->model?->total_amount < 0) {
return CellStyle::TextDanger;
}

if ($context->model?->total_amount < 10) {
return CellStyle::TextWarning;
}

return null;
},
);

Here every cell is right-aligned, and negative amounts are additionally red.

The context carries the column, the model, and which part of the table is being rendered. The closure runs for the header too, where there is no model, which is why the example above returns null for it without needing a guard.

Action styling takes the same shape, with ButtonStyle cases and an ActionContext.

Styles merge; they are not resolved

Static styles and whatever the closure returns are all applied. If you declare two that fight (a success background statically and a danger background conditionally), both classes are emitted and CSS decides. That is deliberate: the package does not guess which one you meant.

Column types bring their own defaults

A boolean() or checkbox() column centres its content unless you say otherwise. A default only applies where you declared nothing in the same family, so:

new Column('active')->boolean();                              // centred
new Column('active')->boolean()->style(CellStyle::AlignLeft); // left, not centred
new Column('active')->boolean()->style(CellStyle::FontBold); // still centred, and bold

See column types.