Implementation:TobikoData Sqlmesh SourceList

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components, Virtualization
Last Updated	2026-02-07 20:00 GMT

Overview

A virtualized, filterable list component with active item tracking and scroll-to-selected functionality.

Description

SourceList is a high-performance React component built on @tanstack/react-virtual that efficiently renders large lists by virtualizing the DOM elements. The component supports real-time filtering using a search input that matches against item names, descriptions, and type metadata. It implements active item tracking with automatic scrolling behavior - when the active item is outside the visible viewport, a floating Scroll to selected button appears to help users navigate back. The virtualization system dynamically estimates row heights based on whether descriptions are present, and uses the contain: strict CSS property for optimal rendering performance. The component is highly generic with configurable key accessors (keyId, keyName, keyDescription) and accepts a render prop (listItem) for custom item rendering. It includes an optional counter badge showing the filtered item count and handles empty states with appropriate messaging.

Usage

Use this component for rendering large lists of items (models, files, entities) that need filtering and navigation capabilities. The virtualization ensures smooth performance even with thousands of items, while the filter and scroll-to-selected features enhance usability. The component is particularly useful in sidebar navigation or entity selection interfaces.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/sourceList/SourceList.tsx

Signature

interface ListItem<TListItem extends Record<string, any> = Record<string, any>> {
  id: string
  name: string
  item: TListItem
  to: string
  description?: string
  text?: string
  disabled?: boolean
}

export default function SourceList<
  TItem extends Record<string, any> = Record<string, string>,
  TType extends Record<string, string> = Record<string, string>,
>({
  items = [],
  keyId = 'id',
  keyName = '',
  keyDescription = '',
  to = '',
  disabled = false,
  withCounter = true,
  withFilter = true,
  types,
  className,
  isActive,
  listItem,
}: {
  keyId: string
  withCounter?: boolean
  withFilter?: boolean
  to?: string
  items?: TItem[]
  types?: TType
  keyName?: string
  keyDescription?: string
  disabled?: boolean
  className?: string
  isActive?: (id: string) => boolean
  listItem: (listItem: ListItem<TItem>) => React.ReactNode
}): JSX.Element

Import

import SourceList from '@components/sourceList/SourceList'

I/O Contract

Inputs

Name	Type	Required	Description
items	TItem[]	No	Array of items to display (defaults to empty array)
keyId	string	Yes	Property name to use as unique identifier
keyName	string	No	Property name for display name (defaults to empty)
keyDescription	string	No	Property name for description text (defaults to empty)
to	string	No	Base URL path for item links (defaults to empty)
types	TType	No	Mapping of item IDs to type strings for filtering
withCounter	boolean	No	Whether to show filtered item count badge (defaults to true)
withFilter	boolean	No	Whether to show filter input (defaults to true)
disabled	boolean	No	Whether list interactions are disabled (defaults to false)
className	string	No	Additional CSS classes for the container
isActive	(id: string) => boolean	No	Function to determine if an item is currently active
listItem	(listItem: ListItem<TItem>) => React.ReactNode	Yes	Render function for individual list items

Outputs

Name	Type	Description
JSX.Element	React component	Virtualized, filterable list with scroll tracking and active item management

Usage Examples

import SourceList from '@components/sourceList/SourceList'
import { Link } from 'react-router-dom'

function ModelList({ models, activeModelId }) {
  return (
    <SourceList
      items={models}
      keyId="name"
      keyName="name"
      keyDescription="description"
      to="/models"
      isActive={(id) => id === activeModelId}
      listItem={({ id, name, description, to, disabled }) => (
        <Link
          to={to}
          className="block px-2 py-1 hover:bg-primary-10"
        >
          <div className="font-medium">{name}</div>
          {description && (
            <div className="text-xs text-neutral-500">{description}</div>
          )}
        </Link>
      )}
    />
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack