Model Registry Table

Enterprise

AI model catalog displaying versions, deployment status, risk levels, and management actions. Supports filtering, sorting, and lifecycle operations.

Preview

Browse and manage AI models in the registry

Model Registry

4 models registered

Model Name	Version	Status	Risk Level	Last Updated
Content Analyzer ML Team	`1.5.0-beta`	Testing	high	12/18/2024
Task Prioritizer v3.2 AI Team	`3.2.1`	Active	low	12/15/2024
Schedule Optimizer Product Team	`2.8.0`	Active	medium	12/10/2024
Legacy Classifier Data Science	`1.0.0`	Deprecated	high	6/1/2023

Props

ModelRegistryTable component API reference

Prop	Type	Default	Description
`models*`	`ModelEntry[]`	—	Array of model entries to display
`onModelClick`	`(model: ModelEntry) => void`	—	Callback when a model row is clicked
`onDeployModel`	`(modelId: string) => void`	—	Callback when deploy button is clicked
`onDeprecateModel`	`(modelId: string) => void`	—	Callback when deprecate button is clicked
`className`	`string`	—	Additional CSS classes

ModelEntry Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique model identifier
`name*`	`string`	—	Model name
`version*`	`string`	—	Version string
`status*`	`'active' \| 'deprecated' \| 'testing'`	—	Deployment status
`riskLevel*`	`'low' \| 'medium' \| 'high' \| 'critical'`	—	Risk classification
`deployedDate*`	`Date`	—	Initial deployment date
`lastUpdated*`	`Date`	—	Last update date
`description`	`string`	—	Model description
`owner`	`string`	—	Team or owner name

Usage

Import and implementation example

import { ModelRegistryTable, ModelEntry } from '@/components/ui/model-registry-table'

const models: ModelEntry[] = [
  {
    id: 'model-1',
    name: 'Task Prioritizer',
    version: '3.2.1',
    status: 'active',
    riskLevel: 'low',
    deployedDate: new Date('2024-11-01'),
    lastUpdated: new Date('2024-12-15'),
    owner: 'AI Team',
  }
]

export default function Example() {
  return (
    <ModelRegistryTable
      models={models}
      onModelClick={(model) => showDetails(model)}
      onDeployModel={(id) => deployModel(id)}
      onDeprecateModel={(id) => deprecateModel(id)}
    />
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Status indicators: Active, testing, and deprecated status badges
Risk levels: Color-coded badges for low, medium, high, and critical risk
Version tracking: Model version and deployment/update timestamps
Status filtering: Filter by all, active, deprecated, or testing
Sortable columns: Sort by last updated date
Management actions: Deploy and deprecate operations
Owner information: Optional team or owner assignment
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Table uses native table semanticsAction buttons are properly labeledSortable headers are focusable

Keyboard Navigation

Key	Action
`Tab`	Navigate between filter buttons and action buttons
`Enter / Space`	Activate filter or action buttons

Notes

Status communicated through text label, not just color
Risk level shown with badge text
Empty state provides helpful message
Row click provides visual hover feedback

Related Components

Data Table Provenance Trail Audit Log Policy Editor