Function ProviderModelsTable

packages/web/src/render.tsx:1101–1200

(props: {
  models: ProviderModelEntry[];
  mode: "model" | "provider";
  showLab?: boolean;
})

}

function ProviderModelsTable(props: {
  models: ProviderModelEntry[];
  mode: "model" | "provider";
  showLab?: boolean;
}) {
  const showLab = props.showLab ?? props.mode === "model";
  const columns = showLab ? 10 : 9;

  return (
    <table data-enhanced-table>
      <thead>
        <tr>
          {props.mode === "model" ? (
            <SortableTh>Provider</SortableTh>
          ) : (
            <SortableTh>Model</SortableTh>
          )}
          {showLab && <SortableTh>Lab</SortableTh>}
          <SortableTh>Model ID</SortableTh>
          <SortableTh type="number">Context</SortableTh>
          <SortableTh type="number">Output</SortableTh>
          <SortableTh type="number">Price</SortableTh>
          <SortableTh>Reasoning</SortableTh>
          <SortableTh>Tool Call</SortableTh>
          <SortableTh>Structured</SortableTh>
          <SortableTh>Temperature</SortableTh>
        </tr>
      </thead>
      <tbody>
        {props.models.map((entry) => {
          const canonical = entry.canonical;
          const displayName = displayModelName(entry);
          const lab = canonical
            ? { id: canonical.labId, name: canonical.labName }
            : undefined;

          return (
            <tr
              data-search={`${displayName} ${entry.model.description} ${entry.modelId} ${entry.provider.name} ${entry.providerId} ${lab?.name ?? ""} ${entry.model.family ?? ""} ${booleanText(entry.model.reasoning)} ${booleanText(entry.model.tool_call)} ${booleanText(entry.model.structured_output)} ${booleanText(entry.model.temperature)}`}
            >
              {props.mode === "model" ? (
                <td data-sort={entry.provider.name}>
                  <ProviderLink providerId={entry.providerId} provider={entry.provider} />
                </td>
              ) : (
                <td data-sort={displayName}>
                  {canonical ? (
                    <a class="primary-link" href={modelHref(canonical.id)}>
                      {displayName}
                    </a>
                  ) : (
                    <span>{displayName}</span>
                  )}
                  {canonical ? (
                    <span class="subtle mono">{canonical.id}</span>
                  ) : (
                    <span class="subtle">Provider-specific</span>
                  )}