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