SPFx Field Customizer: Custom Column Rendering

Field Customizers let you control how columns render in SharePoint lists. Perfect for status indicators, progress bars, or conditional formatting.

Create Field Customizer

yo @microsoft/sharepoint
# Extension -> Field Customizer

Status Badge Example

import { BaseFieldCustomizer } from '@microsoft/sp-listview-extensibility';

export default class StatusFieldCustomizer extends BaseFieldCustomizer {
  
  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    const status = event.fieldValue;
    
    const colors = {
      'Active': { bg: '#d4edda', text: '#155724' },
      'Pending': { bg: '#fff3cd', text: '#856404' },
      'Closed': { bg: '#f8d7da', text: '#721c24' }
    };
    
    const style = colors[status] || { bg: '#e2e3e5', text: '#383d41' };
    
    event.domElement.innerHTML = `
      <span style="
        background: ${style.bg};
        color: ${style.text};
        padding: 4px 12px;
        border-radius: 12px;
        font-weight: 600;
      ">${status}</span>
    `;
  }
}

Associating with Field

After deployment, associate using PnP PowerShell or site script. The customizer automatically applies to that column.