frontend/src/components/chat/markdownTableComponents.tsx

import React from "react";

export function getChatMarkdownTableComponents() {
  return {
    table: (p: any) => (
      <div className="my-3 w-full overflow-x-auto rounded-xl border border-slate-200 bg-white">
        <table
          className="w-full min-w-[44rem] border-collapse text-xs [scrollbar-gutter:stable] [&_tbody_tr:nth-child(even)]:bg-slate-50/80 [&_tbody_tr:hover]:bg-[var(--mt-primary-soft)]"
          {...p}
        />
      </div>
    ),
    th: (p: any) => (
      <th
        className="sticky top-0 z-[1] border-b border-slate-200 bg-slate-100/95 p-2 text-left align-top text-slate-800 backdrop-blur whitespace-normal"
        {...p}
      />
    ),
    td: (p: any) => <td className="border-b border-slate-100 p-2 align-top text-slate-800 whitespace-normal" {...p} />,
  };
}