Ng2-smart-table：如何根据单元格/行内容自定义单元格/行背景色？

Hey there! Great question — ng2-smart-table absolutely lets you customize single cell or entire row background styles based on the cell's own content or other values in the same row. Let’s break down a few practical, easy-to-implement examples:

1. Customize Single Cell Background #

You can use the style property in your column configuration, which accepts a function that gets passed the current cell value and the full row data. This is perfect for simple style tweaks based on content.

Here’s a code example where we set the background color of a "status" cell based on its value, or even another field in the same row:

settings = {
  columns: {
    status: {
      title: 'Status',
      style: (cellValue, rowData) => {
        // Style based on the cell's own content
        if (cellValue === 'Active') {
          return { backgroundColor: '#d4edda' }; // Soft green
        } else if (cellValue === 'Inactive') {
          return { backgroundColor: '#f8d7da' }; // Soft red
        }
        
        // Style based on another field in the same row
        if (rowData.priority === 'High') {
          return { backgroundColor: '#fff3cd' }; // Soft yellow
        }
        
        return {}; // Default style if no conditions match
      }
    },
    name: {
      title: 'Name'
    },
    priority: {
      title: 'Priority'
    }
  }
};

2. Customize Entire Row Background #

For styling whole rows, use the rowClassFunction in your settings. This function returns a CSS class name based on row data, which you can then style in your component's CSS file.

First, configure the row class function:

settings = {
  rowClassFunction: (rowData) => {
    if (rowData.status === 'Active') {
      return 'active-row';
    } else if (rowData.priority === 'High') {
      return 'high-priority-row';
    }
    return ''; // No custom class if conditions don't match
  },
  columns: {
    name: { title: 'Name' },
    status: { title: 'Status' },
    priority: { title: 'Priority' }
  }
};

Then add the corresponding styles to your component's CSS:

/* Use !important to ensure these styles override the default table styles */
.active-row {
  background-color: #d4edda !important;
}

.high-priority-row {
  background-color: #fff3cd !important;
}

3. Advanced: Custom Cell Component (For Complex Scenarios) #

If you need more control (like combining custom HTML with dynamic styles), create a custom Angular component and use it in your column configuration.

First, create the component:

// custom-cell.component.ts
import { Component, Input } from '@angular/core';

@Component({
  template: `<div [style.backgroundColor]="getBackgroundColor()">{{ cellValue }}</div>`
})
export class CustomCellComponent {
  @Input() cellValue: any;
  @Input() rowData: any;

  getBackgroundColor() {
    if (this.cellValue === 'Completed') {
      return '#c3e6cb';
    } else if (this.rowData.dueDate < new Date()) {
      return '#f5c6cb';
    }
    return 'transparent';
  }
}

Then register it in your module (don’t forget to add it to declarations and entryComponents if you’re using an older Angular version), and update your settings:

settings = {
  columns: {
    taskStatus: {
      title: 'Task Status',
      component: CustomCellComponent
    }
  }
};

All these methods work seamlessly with ng2-smart-table’s core functionality, so you won’t break any built-in features like sorting or filtering.

内容的提问来源于stack exchange，提问作者Fabry