Badge column

BadgeColumn renders the value as a pill. It is sortable and filterable like a text column, and reads its colour from a fixed value-to-tone map.

PHP

TextColumn::make('reference')->label('Reference');
BadgeColumn::make('status')->label('Status')
  ->colors(['paid' => 'green', 'pending' => 'yellow', 'refunded' => 'gray'])
  ->filterable();

Preview

Tree

• ▾table
  • actionsLabel:null
  • bulkActions:[]
  • data:[{"reference":"ORD-501","status":"paid"},{"reference":"ORD-502","status":"pending"},{"reference":"ORD-503","status":"refunded"}]
  • emptyLabel:null
  • endpoint:null
  • filters:[]
  • layout:null
  • lazy:false
  • pagination:{"currentPage":null,"from":1,"hasMore":false,"lastPage":null,"mode":"none","nextPage":null,"perPage":null,"to":3,"total":3}
  • perPageOptions:[]
  • pinnableColumns:false
  • query:{"filters":[],"mode":null,"page":1,"perPage":25,"search":"","sorts":[],"tableFilterIndicators":[],"tableFilters":{}}
  • resizableColumns:false
  • resizeIndicator:false
  • searchable:false
  • striped:false
  • toolbar:[]

  • ▾column.text
    • align:"start"
    • badge:null
    • copyable:false
    • date:null
    • filter:null
    • hiddenByDefault:false
    • label:"Reference"
    • link:null
    • multiple:null
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"md"
  • ▾column.badge
    • align:"start"
    • colors:{"paid":{"dark":null,"kind":"named","value":"green"},"pending":{"dark":null,"kind":"named","value":"yellow"},"refunded":{"dark":null,"kind":"named","value":"gray"}}
    • hiddenByDefault:false
    • label:"Status"
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"md"

    • ·text

Style

->colors([value => color]) maps cell values to a colour name — gray, red, orange, yellow, green, blue, purple, or the semantic default, muted, primary, success, info, warning, danger — or any CSS colour. 'green', Color::green(), Color::hex('#16a34a'), and Color::hex('#2563eb')->dark('#60a5fa') are all accepted. Unmapped values fall back to gray.

BadgeColumn::make('status')->colors([
    'draft' => 'gray',
    'active' => 'green',
    'suspended' => 'red',
])->filterOptions([
    'draft' => 'Draft',
    'active' => 'Active',
    'suspended' => 'Suspended',
]);

When the colour lives on the row instead of a fixed map — a status_color field — a Text column’s ->badge() reads it per row.