Number Column

NumberColumn is for integer and float values. It uses the DataTables num type, which sorts numerically rather than lexicographically.

Basic Usage

use Pentiminax\UX\DataTables\Column\NumberColumn;

NumberColumn::new('price', 'Price');
NumberColumn::new('quantity', 'Qty');

Formatted Numbers

When cells contain locale-formatted numbers such as $1,234.56, use formatted() to switch to the num-fmt type, which strips formatting characters before comparing:

NumberColumn::new('revenue', 'Revenue')
    ->formatted();

HTML Content

When cells contain HTML markup wrapping a number, call html() to switch to html-num — DataTables will extract the numeric value from inside the HTML before sorting:

NumberColumn::new('price', 'Price')
    ->html();

Combining html() and formatted() uses html-num-fmt:

NumberColumn::new('revenue', 'Revenue')
    ->html()
    ->formatted();

Custom JS Rendering

Attach a real JavaScript callback through the datatables:pre-connect event:

this.element.addEventListener('datatables:pre-connect', (event) => {
  const priceColumn = event.detail.config.columns.find(
    (column) => column.name === 'price'
  )

  if (priceColumn) {
    priceColumn.render = (data, type) =>
      type === 'display' ? `${Number(data).toFixed(2)} €` : data
  }
})

Returning the raw value for sorting and filtering preserves numeric behavior.

API Reference

Method Description
`NumberColumn::new(string $name, string $title = '')`Creates a new NumberColumn (type: `num`)
`formatted(bool $formatted = true)`Switches to `num-fmt` type (or `html-num-fmt` when combined with `html()`)
`html(bool $html = true)`Switches to `html-num` type (or `html-num-fmt` when combined with `formatted()`)

Complete Example

use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(Product::class)]
final class ProductsDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID')->setWidth('60px');
        yield TextColumn::new('name', 'Product');
        yield NumberColumn::new('stock', 'Stock');
        yield NumberColumn::new('price', 'Price');
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'    => $item->getId(),
            'name'  => $item->getName(),
            'stock' => $item->getStock(),
            'price' => $item->getPrice(),
        ];
    }
}