mostly completed docs

src/app/components/mdx-components.tsx

@@ -1,6 +1,15 @@
 import { MDXRemote } from "remote-mdx/rsc";
 import { ReactElement } from "react";
-import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mdx-renderer";
+import {
+  formatCode,
+  formatHeading,
+  formatLink,
+  formatList,
+  formatTable,
+  formatTableData,
+  formatTableHeader,
+} from "@/app/components/mdx-renderer";
+import remarkGfm from "remark-gfm";
 
 /**
  * The components to use in the MDX renderer.
@@ -15,8 +24,21 @@ const components = {
   code: (props: any) => formatCode(props),
   ul: (props: any) => formatList(props),
   a: (props: any) => formatLink(props),
+  table: (props: any) => formatTable(props),
+  th: (props: any) => formatTableHeader(props),
+  td: (props: any) => formatTableData(props),
 };
 
 export function CustomMDX(props: any): ReactElement {
-  return <MDXRemote {...props} components={{ ...components, ...(props.components || {}) }} />;
+  return (
+    <MDXRemote
+      {...props}
+      components={{ ...components, ...(props.components || {}) }}
+      options={{
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+        },
+      }}
+    />
+  );
 }