Redesign table

Author: haydenbleasel

.changeset/polite-cameras-cough.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+Redesign table

packages/streamdown/lib/components.tsx

@@ -442,7 +442,7 @@ type TbodyProps = WithNode<JSX.IntrinsicElements["tbody"]>;
 const MemoTbody = memo<TbodyProps>(
   ({ children, className, node, ...props }: TbodyProps) => (
     <tbody
-      className={cn("divide-y divide-border bg-muted/40", className)}
+      className={cn("divide-y divide-border", className)}
       data-streamdown="table-body"
       {...props}
     >
@@ -457,7 +457,7 @@ type TrProps = WithNode<JSX.IntrinsicElements["tr"]>;
 const MemoTr = memo<TrProps>(
   ({ children, className, node, ...props }: TrProps) => (
     <tr
-      className={cn("border-border border-b", className)}
+      className={cn("border-border", className)}
       data-streamdown="table-row"
       {...props}
     >

packages/streamdown/lib/table/index.tsx

@@ -13,16 +13,19 @@ export const Table = ({
   showControls,
   ...props
 }: TableProps) => (
-  <div className="my-4 flex flex-col space-y-2" data-streamdown="table-wrapper">
+  <div
+    className="my-4 flex flex-col gap-2 rounded-md border border-border bg-sidebar p-2"
+    data-streamdown="table-wrapper"
+  >
     {showControls ? (
       <div className="flex items-center justify-end gap-1">
         <TableCopyDropdown />
         <TableDownloadDropdown />
       </div>
     ) : null}
-    <div className="overflow-x-auto overscroll-y-auto">
+    <div className="border-collapse overflow-x-auto overscroll-y-auto rounded-sm border border-border bg-background">
       <table
-        className={cn("w-full border-collapse border border-border", className)}
+        className={cn("w-full divide-y divide-border", className)}
         data-streamdown="table"
         {...props}
       >