Model Registry Table

Table

Data Display

A sortable, filterable table for managing AI model registrations with status badges, risk levels, and deployment actions.

Built With

2 components

This block uses the following UI components from the design system:

Badge Button

Preview

Full model registry with filtering, sorting, and actions

Model Registry

4 models registered

Model Name	Version	Status	Risk Level	Last Updated
Vision Transformer Vision Team	`v3.0.0`	Active	critical	3/20/2024
Sentiment Analyzer NLP Team	`v1.3.2`	Testing	medium	3/18/2024
GPT-4 Turbo AI Team	`v2.1.0`	Active	low	3/10/2024
Legacy Classifier ML Ops	`v0.9.1`	Deprecated	high	12/15/2023

Props

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 for deploying a testing model
`onDeprecateModel`	`(modelId: string) => void`	—	Callback for deprecating an active model
`className`	`string`	—	Additional CSS classes

ModelEntry Type

Shape of each model entry

interface ModelEntry {
  id: string
  name: string
  version: string
  status: 'active' | 'deprecated' | 'testing'
  riskLevel: 'low' | 'medium' | 'high' | 'critical'
  deployedDate: Date
  lastUpdated: Date
  description?: string
  owner?: string
}

Usage

Import and implementation example

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

const models: ModelEntry[] = [
  {
    id: '1',
    name: 'GPT-4 Turbo',
    version: 'v2.1.0',
    status: 'active',
    riskLevel: 'low',
    deployedDate: new Date('2024-01-15'),
    lastUpdated: new Date('2024-03-10'),
    owner: 'AI Team',
  },
]

export default function Example() {
  return (
    <ModelRegistryTable
      models={models}
      onModelClick={(model) => router.push(`/models/${model.id}`)}
      onDeployModel={(id) => deployModel(id)}
      onDeprecateModel={(id) => deprecateModel(id)}
    />
  )
}

Features

Built-in functionality

Status filtering: Filter by all, active, deprecated, or testing status
Column sorting: Sort by last updated with ascending/descending toggle
Status badges: Color-coded status (success, error, warning) and risk level badges
Contextual actions: Deploy button for testing models, deprecate for active models
Owner display: Optional owner name shown below model name
Empty state: Friendly message when no models match the filter
Ref forwarding: Supports React ref forwarding

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic table element with thead and tbodyStatus conveyed through both color and text labels

Keyboard Navigation

Key	Action
`Tab`	Navigate between filter buttons, sortable headers, and action buttons
`Enter / Space`	Activate filter, sort, deploy, or deprecate actions

Notes

Sortable column header has hover and click cursor feedback
Row click and action button clicks are independent (stopPropagation)
Filter buttons show count for each status category

Related Components

DataTable Badge Button