Image column

ImageColumn renders the cell value as an image URL — an avatar, a logo, a thumbnail. Clicking a cell opens the full-size image in a lightbox, the same overlay the Image component uses.

PHP

ImageColumn::make('avatar')->label('')->circular()->size(32);
TextColumn::make('name')->label('Name');
TextColumn::make('role')->label('Role');

Preview

Tree

• ▾table
  • actionsLabel:null
  • bulkActions:[]
  • data:[{"avatar":"https://i.pravatar.cc/64?img=1","name":"Ada Lovelace","role":"Admin"},{"avatar":"https://i.pravatar.cc/64?img=2","name":"Alan Turing","role":"Editor"}]
  • 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":2,"total":2}
  • 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.image
    • align:"start"
    • circular:true
    • filter:null
    • hiddenByDefault:false
    • label:""
    • options:[]
    • pinned:null
    • previewable:true
    • size:32
    • sortable:false
    • toggleable:false
    • width:"md"
  • ▾column.text
    • align:"start"
    • badge:null
    • copyable:false
    • date:null
    • filter:null
    • hiddenByDefault:false
    • label:"Name"
    • link:null
    • multiple:null
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"md"
  • ▾column.text
    • align:"start"
    • badge:null
    • copyable:false
    • date:null
    • filter:null
    • hiddenByDefault:false
    • label:"Role"
    • link:null
    • multiple:null
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"md"

Style

• ->circular() clips the image to a circle — an avatar.
• ->size(40) sets the rendered size in pixels (square).
• ->previewable(false) turns the click-to-zoom lightbox off for the column.

ImageColumn::make('logo')->size(24);
ImageColumn::make('photo')->circular()->size(48);
ImageColumn::make('avatar')->previewable(false);

Info

The lightbox is on by default — every image cell is clickable unless the column opts out with ->previewable(false).

Give the column an empty ->label('') to drop its header, which reads better for a leading avatar.