Implementation:TobikoData Sqlmesh Table

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

Overview

A virtualized data table component with sorting, filtering, and type-aware column formatting.

Description

Table is a comprehensive React component built on @tanstack/react-table and @tanstack/react-virtual that renders large datasets efficiently. The component accepts data as a tuple of [TableColumn[], TableRow[]] where columns define metadata (name and type) used for rendering decisions. It implements client-side sorting with visual indicators (chevron icons) and global filtering using a search input that matches across all columns. The virtualization system uses a minimum row height of 24px and renders only visible rows plus an overscan buffer, with padding elements to maintain scroll height. The component includes type-aware formatting - numeric columns (int, float) are right-aligned for better readability. The table features a sticky header that remains visible during scrolling, and includes a Header component with optional headline and filter input, a Footer component showing total row count, and a GhostRows component for empty state display. The component automatically resets filter and sorting state when data changes.

Usage

Use this component to display tabular data from SQLMesh queries, model outputs, or data diffs. The virtualization ensures smooth performance with thousands of rows, while sorting and filtering help users analyze data. The type-aware formatting provides appropriate presentation for different data types.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/table/Table.tsx

Signature

export default function Table({
  headline,
  data = [[], []],
  action,
}: {
  data: [TableColumn[], TableRow[]]
  headline?: string
  action?: React.ReactNode
}): JSX.Element

export function Footer({ count }: { count: number }): JSX.Element

export function GhostRows({
  rows = 7,
  columns = 5,
}: {
  rows?: number
  columns?: number
}): JSX.Element

Import

import Table from '@components/table/Table'

I/O Contract

Inputs

Name	Type	Required	Description
data	[TableColumn[], TableRow[]]	Yes	Tuple of column definitions and row data (defaults to empty arrays)
headline	string	No	Optional headline text displayed above the table
action	React.ReactNode	No	Optional action component rendered between header and table

Outputs

Name	Type	Description
JSX.Element	React component	Virtualized table with sorting, filtering, sticky header, and row count footer

Usage Examples

import Table from '@components/table/Table'
import { Button } from '@components/button/Button'

// Basic table usage
function DataDisplay({ queryResults }) {
  const columns = [
    { name: 'id', type: 'int' },
    { name: 'name', type: 'string' },
    { name: 'revenue', type: 'float' },
  ]

  const rows = [
    { id: 1, name: 'Product A', revenue: 1250.50 },
    { id: 2, name: 'Product B', revenue: 890.25 },
  ]

  return (
    <Table
      data={[columns, rows]}
      headline="Sales Data"
    />
  )
}

// Table with custom action
function DataWithExport({ data }) {
  return (
    <Table
      data={data}
      headline="Query Results"
      action={
        <div className="flex justify-end mb-2">
          <Button onClick={handleExport}>Export CSV</Button>
        </div>
      }
    />
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack