Function ModelTable

packages/web/src/render.tsx:993–1099

(props: {
  models: ModelEntry[];
  title: string;
  hideHeading?: boolean;
  showLab?: boolean;
})

}

function ModelTable(props: {
  models: ModelEntry[];
  title: string;
  hideHeading?: boolean;
  showLab?: boolean;
}) {
  const showLab = props.showLab ?? true;
  const columns = showLab ? 14 : 13;

  return (
    <TableSection
      title={props.title}
      count={props.models.length}
      columns={columns}
      hideHeading={props.hideHeading}
    >
      <table data-enhanced-table>
        <thead>
          <tr>
            <SortableTh>Model</SortableTh>
            {showLab && <SortableTh>Lab</SortableTh>}
            <SortableTh type="number">Providers</SortableTh>
            <SortableTh type="number">Context</SortableTh>
            <SortableTh type="number">Output</SortableTh>
            <SortableTh>Input</SortableTh>
            <SortableTh>Reasoning</SortableTh>
            <SortableTh>Tool Call</SortableTh>
            <SortableTh>Structured</SortableTh>
            <SortableTh>Temperature</SortableTh>
            <SortableTh>Weights</SortableTh>
            <SortableTh type="number">Price</SortableTh>
            <SortableTh>Release</SortableTh>
            <SortableTh>Updated</SortableTh>
          </tr>
        </thead>
        <tbody>
          {props.models.map((model) => {
            const metadata = model.metadata;

            return (
              <tr
                data-search={`${metadata.name} ${metadata.description} ${model.id} ${model.labName} ${metadata.family ?? ""} ${weightsText(metadata.open_weights)} ${booleanText(metadata.reasoning)} ${booleanText(metadata.tool_call)} ${booleanText(metadata.structured_output)} ${booleanText(metadata.temperature)}`}
              >
                <td data-sort={metadata.name}>
                  <a class="primary-link" href={modelHref(model.id)}>
                    {metadata.name}
                  </a>
                  <span class="subtle mono">{model.id}</span>
                </td>
                {showLab && (
                  <td data-sort={model.labName}>
                    <LabLink labId={model.labId} labName={model.labName} />
                  </td>
                )}
                <td data-sort={String(model.providers.length)}>
                  <a href={`${modelHref(model.id)}#providers`}>
                    {model.providers.length}
                  </a>