From 566606d8e7ff1b1eedf9bc9336a9243f5820ea8d Mon Sep 17 00:00:00 2001
From: amanx5 <110730645+amanx5@users.noreply.github.com>
Date: Sun, 31 May 2026 20:07:08 +0530
Subject: [PATCH] fix(examples/react-grid/ant): remove bg color behind "No
 data" text

Co-Authored-By: Cursor <cursoragent@cursor.com>
---
 examples/react-grid/ant/src/App.tsx            | 18 ++++++++----------
 .../ant/src/components/TableWrapper.tsx        |  9 +++++++++
 examples/react-grid/ant/src/examples/Basic.tsx |  5 ++++-
 .../react-grid/ant/src/examples/LocalData.tsx  |  5 ++++-
 .../react-grid/ant/src/examples/RemoteData.tsx |  5 ++++-
 5 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 examples/react-grid/ant/src/components/TableWrapper.tsx

diff --git a/examples/react-grid/ant/src/App.tsx b/examples/react-grid/ant/src/App.tsx
index 346231e4..17442755 100644
--- a/examples/react-grid/ant/src/App.tsx
+++ b/examples/react-grid/ant/src/App.tsx
@@ -19,16 +19,14 @@ export default function App() {
 
   return (
     <ConfigProvider theme={themeConfig}>
-      <div style={{ backgroundColor: "canvas", overflow: "auto" }}>
-        <ExamplesRouter
-          pluginId="ant"
-          components={{
-            basic: Basic,
-            "local-data": LocalData,
-            "remote-data": RemoteData,
-          }}
-        />
-      </div>
+      <ExamplesRouter
+        pluginId="ant"
+        components={{
+          basic: Basic,
+          "local-data": LocalData,
+          "remote-data": RemoteData,
+        }}
+      />
     </ConfigProvider>
   );
 }
diff --git a/examples/react-grid/ant/src/components/TableWrapper.tsx b/examples/react-grid/ant/src/components/TableWrapper.tsx
new file mode 100644
index 00000000..007ff447
--- /dev/null
+++ b/examples/react-grid/ant/src/components/TableWrapper.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function TableWrapper({ children }: { children: ReactNode }) {
+  return (
+    <div style={{ backgroundColor: "canvas", overflow: "auto" }}>
+      {children}
+    </div>
+  );
+}
diff --git a/examples/react-grid/ant/src/examples/Basic.tsx b/examples/react-grid/ant/src/examples/Basic.tsx
index b4edf481..5b759c5b 100644
--- a/examples/react-grid/ant/src/examples/Basic.tsx
+++ b/examples/react-grid/ant/src/examples/Basic.tsx
@@ -2,6 +2,7 @@ import { GridStoreProvider, useGridStoreSelector } from "@jsoc/react-grid";
 import { useGridStore } from "@jsoc/react-grid-ant";
 import { basicJSON } from "@jsoc/grid-examples-shared";
 import { Table } from "antd";
+import { TableWrapper } from "../components/TableWrapper";
 
 export function Basic() {
   const gridStore = useGridStore(basicJSON);
@@ -11,7 +12,9 @@ export function Basic() {
 
   return (
     <GridStoreProvider value={gridStore}>
-      <Table key={activeSchema.id} {...activeSchema.config} />
+      <TableWrapper>
+        <Table key={activeSchema.id} {...activeSchema.config} />
+      </TableWrapper>
     </GridStoreProvider>
   );
 }
diff --git a/examples/react-grid/ant/src/examples/LocalData.tsx b/examples/react-grid/ant/src/examples/LocalData.tsx
index 27415747..dfddcffe 100644
--- a/examples/react-grid/ant/src/examples/LocalData.tsx
+++ b/examples/react-grid/ant/src/examples/LocalData.tsx
@@ -2,6 +2,7 @@ import { GridStoreProvider, useGridStoreSelector } from "@jsoc/react-grid";
 import { useGridStore } from "@jsoc/react-grid-ant";
 import { ErrorBoundary, useGetLocalJSON } from "@jsoc/react-grid-examples";
 import { Table } from "antd";
+import { TableWrapper } from "../components/TableWrapper";
 
 export function LocalData() {
   const data = useGetLocalJSON();
@@ -23,7 +24,9 @@ function Example({ data }: { data: string }) {
 
   return (
     <GridStoreProvider value={gridStore}>
-      <Table key={activeSchema.id} {...activeSchema.config} />
+      <TableWrapper>
+        <Table key={activeSchema.id} {...activeSchema.config} />
+      </TableWrapper>
     </GridStoreProvider>
   );
 }
diff --git a/examples/react-grid/ant/src/examples/RemoteData.tsx b/examples/react-grid/ant/src/examples/RemoteData.tsx
index 59ece266..8c4f4cbd 100644
--- a/examples/react-grid/ant/src/examples/RemoteData.tsx
+++ b/examples/react-grid/ant/src/examples/RemoteData.tsx
@@ -6,6 +6,7 @@ import {
 } from "@jsoc/react-grid";
 import { useGridStore } from "@jsoc/react-grid-ant";
 import { Table } from "antd";
+import { TableWrapper } from "../components/TableWrapper";
 
 export function RemoteData() {
   const { data, loading, error } = useGetRemoteJSON();
@@ -26,7 +27,9 @@ function Example({ data }: { data: string }) {
   return (
     <GridStoreProvider value={gridStore}>
       <SimpleNavigator />
-      <Table key={activeSchema.id} {...activeSchema.config} />
+      <TableWrapper>
+        <Table key={activeSchema.id} {...activeSchema.config} />
+      </TableWrapper>
     </GridStoreProvider>
   );
 }