Feature Request: Add icon and color customization for table and column headers

[smartlabsAT]

✨ Feature Request

Description

Enable users to customize the visual appearance of tables and columns by adding icons and colors when renaming or configuring them. This would greatly enhance visual organization and quick identification of different data types or categories.

Proposed Features

1. Table Name Customization

• Icon Selection: Choose from Directus icon library when renaming table
• Color Theme: Select a color for the table header
• Format: [Icon] Table Name with colored background/text

2. Column Header Customization

• Column Icons: Add icons to individual column headers
• Column Colors: Assign colors to specific columns
• Visual Indicators: Use colors/icons to indicate data types or importance

Use Cases

1. Data Type Indication

   • 📅 Calendar icon for date columns
   • 💰 Money icon for price/currency columns
   • 📧 Email icon for email fields
   • 📷 Camera icon for image columns

2. Status/Priority Visualization

   • 🔴 Red for critical fields
   • 🟡 Yellow for warnings/pending
   • 🟢 Green for completed/approved
   • 🔵 Blue for informational

3. Category Organization

   • Different colors for different data categories
   • Icons to represent departments/sections
   • Visual grouping of related columns

User Interface Design

Configuration Dialog Mock-up

┌─────────────────────────────────────┐
│ Rename Column                       │
├─────────────────────────────────────┤
│ Name: [_______________]             │
│                                     │
│ Icon: [🔍 Select Icon...]           │
│       [Grid of available icons]     │
│                                     │
│ Color: [🎨 Color Picker]            │
│        ● Red   ● Blue   ● Green    │
│        ● Yellow ● Purple ● Orange  │
│        [Custom: #______]            │
│                                     │
│ Preview: 📊 Sales Data              │
│                                     │
│ [Cancel]            [Save]          │
└─────────────────────────────────────┘

Implementation Suggestions

Data Structure

// Column configuration
{
  key: 'column_key',
  name: 'Display Name',
  icon: 'calendar_month', // Material icon name
  color: '#FF5722',       // Hex color or preset
  customization: {
    iconPosition: 'left',  // left, right
    colorApply: 'background', // background, text, border
    fontWeight: 'normal'   // normal, bold
  }
}

Storage Options

1. Layout Options: Store in layout configuration
2. User Preferences: Save per-user customizations
3. Presets: Allow saving/sharing visual themes

Technical Implementation

Components to Update

• src/components/RenameFieldDialog.vue - Add icon/color selection
• src/super-table.vue - Render icons and colors in headers
• src/options.vue - Add settings for default colors/icons

New Components Needed

• IconPicker.vue - Icon selection interface
• ColorPicker.vue - Color selection (or use Directus native)
• HeaderCustomizer.vue - Combined customization interface

Visual Examples

Before (Current)

| Name | Email | Status | Date |

After (With Customization)

| 👤 Name | 📧 Email | 🚦 Status | 📅 Date |

With colors: Name (blue), Email (green), Status (dynamic), Date (purple)

Configuration Options

Global Settings

• Enable/disable icons globally
• Enable/disable colors globally
• Default icon set (Material, FontAwesome, custom)
• Color palette restrictions (corporate colors)

Per-Column Settings

• Override global settings
• Conditional formatting based on values
• Icon changes based on data (e.g., different status icons)

Benefits

1. Improved Readability: Quick visual identification
2. Better Organization: Visual grouping and categorization
3. User Experience: More intuitive and pleasant interface
4. Accessibility: Additional visual cues beyond text
5. Branding: Customizable to match corporate design

Acceptance Criteria

• Can add icon to table name
• Can add icon to column headers
• Can assign colors to table/columns
• Icons and colors persist after save
• Icons from Directus Material Icons set available
• Color picker with presets and custom colors
• Preview before saving
• Settings exportable/importable
• Works with existing rename functionality

Priority

Medium - This is a nice-to-have feature that would significantly enhance the visual appeal and usability of the extension.

Additional Considerations

• Performance: Ensure icons/colors don't impact rendering speed
• Consistency: Follow Directus design patterns
• Accessibility: Ensure colors have sufficient contrast
• Mobile: Icons/colors should work on small screens
• Export: Consider how icons/colors appear in exports

---

Note: This feature would make the Super Table extension stand out by offering superior visual customization compared to the standard Directus table layout.