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

to navigate · Enter to open · Esc to close

Documentation

Number Column

Render numeric values with correct numeric sorting and optional formatted number support

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

MethodDescription
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 $row): array
    {
        return [
            'id'    => $row->getId(),
            'name'  => $row->getName(),
            'stock' => $row->getStock(),
            'price' => $row->getPrice(),
        ];
    }
}