Custom Fields

VitalGrid allows you to create custom field types for specialized data display, validation, and editing requirements.

Creating Custom Fields

1. Define Field Type

const customFieldType = {
  kind: 'custom',
  component: CustomFieldComponent,
  editor: CustomEditorComponent,
  validator: customValidator,
  formatter: customFormatter,
};

2. Implement Cell Component

function CustomFieldComponent({ value, row, column }) {
  // Custom display logic
  return <div>{/* Custom rendering */}</div>;
}

3. Implement Editor Component

function CustomEditorComponent({ value, onChange, onSave }) {
  // Custom editing interface
  return <input onChange={(e) => onChange(e.target.value)} />;
}

Built-in Custom Field Examples

Avatar Field

• Displays user avatars with fallback initials
• Supports image URLs and user names
• Integrated with user profile data

Rating Field

• Star rating display and editing
• Half-star precision support
• Customizable colors and sizes

Progress Field

• Visual progress bars
• Percentage and absolute values
• Color-coded status indicators

Tags Field

• Multi-select tag interface
• Autocomplete suggestions
• Custom tag colors and icons

Field Configuration

VitalGrid.createColumnDef({
  id: 'customField',
  header: 'Custom Field',
  type: 'custom',
  settings: {
    kind: 'custom',
    component: CustomComponent,
    editor: CustomEditor,
    validator: (value) => value.length > 0,
    required: true,
  },
});

Use Cases

• User Profiles: Avatar fields with user information
• Project Management: Progress bars and status indicators
• E-commerce: Product ratings and inventory status
• Content Management: Rich text editors and media uploaders
• Financial Applications: Currency fields with formatting

Best Practices

1. Consistent API: Follow the established field component interface
2. Accessibility: Ensure custom fields are keyboard navigable
3. Performance: Use memoization for complex custom components
4. Validation: Implement proper client-side validation
5. Error Handling: Provide clear error messages for invalid input