diff --git a/packages/react/components/Table/index.mjs b/packages/react/components/Table/index.mjs
index 71ad2e81371..d519418a92f 100644
--- a/packages/react/components/Table/index.mjs
+++ b/packages/react/components/Table/index.mjs
@@ -1,9 +1,32 @@
import React from 'react'
-/*
+/**
+ * A component set CSS classes to make your tables look better
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The table children, same as for a table HTML tag
+ * @returns {JSX.Element}
+ */
+export const Table = ({ children }) => (
+
+
+
+)
+
+/**
+ * A component to help embed tables into a page
+ *
* Tables on mobile will almost always break the layout
- * unless we set the overflow behaviour explicitly
+ * unless we set the overflow behaviour explicitly.
+ * This component takes care of that.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} [props.js = undefined] - An optional Javascript Object to highlight
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
*/
export const TableWrapper = ({ children }) => (
-
{children}
+ {children}
)
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 57a9ecf4eb1..b5f149ca67e 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -37,3 +37,4 @@ jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/c
jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/components/spinner.json
jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json
jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json
+jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json
diff --git a/sites/dev/docs/reference/packages/react/components/table/_examples.js b/sites/dev/docs/reference/packages/react/components/table/_examples.js
new file mode 100644
index 00000000000..8528ca5a04e
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/table/_examples.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Table, TableWrapper } from '@freesewing/react/components/Table'
+
+export const TableExample = () => (
+
+
+
+ Color |
+ Shape |
+ Size |
+
+
+
+
+ Orange |
+ Round |
+ Small |
+
+
+ Pink |
+ Square |
+ Tiny |
+
+
+ Purple |
+ Round |
+ Large |
+
+
+
+)
+export const TableWrapperExample = () =>
diff --git a/sites/dev/docs/reference/packages/react/components/table/readme.mdx b/sites/dev/docs/reference/packages/react/components/table/readme.mdx
index 7012ab7577b..c85dd10110a 100644
--- a/sites/dev/docs/reference/packages/react/components/table/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/table/readme.mdx
@@ -2,6 +2,28 @@
title: Table
---
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.table.mjs'
+import { TableExample, TableWrapperExample } from './_examples.js'
+
+
+
+- [Components](#components)
+
+## Components
+
+The **Table** component family provides the following components:
+
+- [Table](#table)
+- [TableWrapper](#tablewrapper)
+
+### Table
+
+
+
+### TableWrapper
+
+
+
+