fix(examples/react-grid/ant): remove bg color behind "No data" text

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>
   );
 }

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>
+  );
+}

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>
   );
 }

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>
   );
 }

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>
   );
 }