Merge pull request #15184 from ethereum/mdxTableComponentsIssue

Mdx table components not rendering issue

Author: wackerow

public/content/developers/docs/evm/opcodes/index.md

@@ -18,7 +18,7 @@ For operations with dynamic gas costs, see [gas.md](https://github.com/wolflo/ev
 💡 Quick tip: To view entire lines, use `[shift] + scroll` to scroll horizontally on desktop.
 
 | Stack | Name           |                                               Gas                                               | Initial Stack                                                                             | Resulting Stack                 | Mem / Storage                                                                 | Notes                                                                                                                            |
-| :---: | :------------- | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------- | :------------------------------ | :---------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| :---: | :------------- | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------- | :------------------------------ | :---------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
 |  00   | STOP           |                                                0                                                |                                                                                           |                                 |                                                                               | halt execution                                                                                                                   |
 |  01   | ADD            |                                                3                                                | `a, b`                                                                                    | `a + b`                         |                                                                               | (u)int256 addition modulo 2\*\*256                                                                                               |
 |  02   | MUL            |                                                5                                                | `a, b`                                                                                    | `a * b`                         |                                                                               | (u)int256 multiplication modulo 2\*\*256                                                                                         |

src/components/MdComponents/index.tsx

@@ -26,7 +26,7 @@ import { ButtonLink } from "../ui/buttons/Button"
 import { Divider } from "../ui/divider"
 import { Flex } from "../ui/flex"
 import { ListItem, OrderedList, UnorderedList } from "../ui/list"
-import { mdxTableComponents } from "../ui/table"
+import { mdxTableComponents } from "../ui/mdx-table-components"
 import { Tag } from "../ui/tag"
 
 export const commonHeadingAttributes = (className: string, id?: string) => ({

src/components/ui/mdx-table-components.tsx

@@ -0,0 +1,17 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table"
+
+export const mdxTableComponents = {
+  table: Table,
+  td: ({ align, ...rest }) => <TableCell align={align} {...rest} />,
+  th: ({ align, ...rest }) => <TableHead align={align} {...rest} />,
+  tr: (props) => <TableRow {...props} />,
+  tbody: (props) => <TableBody {...props} />,
+  thead: (props) => <TableHeader {...props} />,
+}

src/components/ui/table.tsx

@@ -180,17 +180,7 @@ const TableCaption = React.forwardRef<
 ))
 TableCaption.displayName = "TableCaption"
 
-const mdxTableComponents = {
-  table: Table,
-  td: ({ align, ...rest }) => <TableCell align={align} {...rest} />,
-  th: ({ align, ...rest }) => <TableHead align={align} {...rest} />,
-  tr: (props) => <TableRow {...props} />,
-  tbody: (props) => <TableBody {...props} />,
-  thead: (props) => <TableHeader {...props} />,
-}
-
 export {
-  mdxTableComponents,
   Table,
   TableBody,
   TableCaption,

src/layouts/Docs.tsx

@@ -28,7 +28,7 @@ import Translation from "@/components/Translation"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
 import InlineLink from "@/components/ui/Link"
-import { mdxTableComponents } from "@/components/ui/table"
+import { mdxTableComponents } from "@/components/ui/mdx-table-components"
 import YouTube from "@/components/YouTube"
 
 import { cn } from "@/lib/utils/cn"

src/layouts/Tutorial.tsx

@@ -22,7 +22,7 @@ import TableOfContents from "@/components/TableOfContents"
 import TooltipLink from "@/components/TooltipLink"
 import TutorialMetadata from "@/components/TutorialMetadata"
 import { ButtonLink } from "@/components/ui/buttons/Button"
-import { mdxTableComponents } from "@/components/ui/table"
+import { mdxTableComponents } from "@/components/ui/mdx-table-components"
 import YouTube from "@/components/YouTube"
 
 import { getEditPath } from "@/lib/utils/editPath"