From d5770e4350f1504e7979b89b1bc28d4541b3aefa Mon Sep 17 00:00:00 2001
From: Mohit Khatri <106902205+mohit4bug@users.noreply.github.com>
Date: Wed, 23 Jul 2025 13:02:05 +0530
Subject: [PATCH] fix: resolve table overflow styling issues (#7874)

---
 .../(app)/examples/tasks/components/data-table.tsx   |  2 +-
 apps/v4/components/cards/payments.tsx                |  2 +-
 apps/v4/content/docs/components/data-table.mdx       | 12 ++++++------
 .../new-york-v4/examples/data-table-demo.tsx         |  2 +-
 .../(app)/examples/tasks/components/data-table.tsx   |  2 +-
 apps/www/components/cards/data-table.tsx             |  2 +-
 apps/www/content/docs/components/data-table.mdx      | 12 ++++++------
 .../registry/default/examples/data-table-demo.tsx    |  2 +-
 .../registry/new-york/examples/data-table-demo.tsx   |  2 +-
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
index 9b8bf62de..5f3e4c12d 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
@@ -75,7 +75,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="flex flex-col gap-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/v4/components/cards/payments.tsx b/apps/v4/components/cards/payments.tsx
index 25afa756d..66f36977a 100644
--- a/apps/v4/components/cards/payments.tsx
+++ b/apps/v4/components/cards/payments.tsx
@@ -209,7 +209,7 @@ export function CardsPayments() {
         </CardAction>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/v4/content/docs/components/data-table.mdx b/apps/v4/content/docs/components/data-table.mdx
index 29a56a995..b66f08572 100644
--- a/apps/v4/content/docs/components/data-table.mdx
+++ b/apps/v4/content/docs/components/data-table.mdx
@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>
diff --git a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
index 27588540d..0b614c449 100644
--- a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table.tsx b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
index 2dd726e5a..d763f5b84 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table.tsx
@@ -70,7 +70,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/components/cards/data-table.tsx b/apps/www/components/cards/data-table.tsx
index c59de7313..d712100d8 100644
--- a/apps/www/components/cards/data-table.tsx
+++ b/apps/www/components/cards/data-table.tsx
@@ -239,7 +239,7 @@ export function CardsDataTable() {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className="rounded-md border">
+        <div className="overflow-hidden rounded-md border">
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/content/docs/components/data-table.mdx b/apps/www/content/docs/components/data-table.mdx
index e5fa2bd23..965f5fece 100644
--- a/apps/www/content/docs/components/data-table.mdx
+++ b/apps/www/content/docs/components/data-table.mdx
@@ -185,7 +185,7 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="rounded-md border">
+    <div className="overflow-hidden rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -425,7 +425,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           { // .... }
         </Table>
@@ -499,7 +499,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -602,7 +602,7 @@ export function DataTable<TData, TValue>({
           className="max-w-sm"
         />
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -715,7 +715,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>{ ... }</Table>
       </div>
     </div>
@@ -805,7 +805,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table />
       </div>
     </div>
diff --git a/apps/www/registry/default/examples/data-table-demo.tsx b/apps/www/registry/default/examples/data-table-demo.tsx
index 7ad0c5a05..8de0e1b37 100644
--- a/apps/www/registry/default/examples/data-table-demo.tsx
+++ b/apps/www/registry/default/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/apps/www/registry/new-york/examples/data-table-demo.tsx b/apps/www/registry/new-york/examples/data-table-demo.tsx
index 62db99ecd..a9d6aec25 100644
--- a/apps/www/registry/new-york/examples/data-table-demo.tsx
+++ b/apps/www/registry/new-york/examples/data-table-demo.tsx
@@ -233,7 +233,7 @@ export default function DataTableDemo() {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="overflow-hidden rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (