feat(sistent): add Table component documentation

src/collections/sistent/components/table/code.mdx

@@ -0,0 +1,159 @@
+---
+title: Table Code
+component: table
+description: Tables are used to organize and display structured data in rows and columns.
+---
+
+import Table from "../../../../components/ConformanceTest-Table"
+import ThemeWrapper from "../../../../components/ThemeWrapper"
+import CodeBlock from "../../../../components/CodeBlock"
+
+Tables help display structured data in an organized and readable format.
+
+<a id="Basic Table">
+  <h2>Basic Table</h2>
+</a>
+
+Basic tables are used to display simple structured data.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <Table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>User 1</td>
+            <td>Contributor</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </Table>
+    </ThemeWrapper>
+  </div>
+
+  <CodeBlock 
+    name="basic-table" 
+    collapsible 
+    code={`<SistentThemeProvider>
+  <Table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Role</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>User 1</td>
+        <td>Contributor</td>
+        <td>Active</td>
+      </tr>
+    </tbody>
+  </Table>
+</SistentThemeProvider>`} 
+  />
+</div>
+
+<a id="Striped Table">
+  <h2>Striped Table</h2>
+</a>
+
+Striped tables improve readability by alternating row colors.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <Table striped>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>User 1</td>
+            <td>Contributor</td>
+          </tr>
+        </tbody>
+      </Table>
+    </ThemeWrapper>
+  </div>
+
+  <CodeBlock 
+    name="striped-table" 
+    collapsible 
+    code={`<SistentThemeProvider>
+  <Table striped>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>User 1</td>
+        <td>Contributor</td>
+      </tr>
+    </tbody>
+  </Table>
+</SistentThemeProvider>`} 
+  />
+</div>
+
+<a id="Compact Table">
+  <h2>Compact Table</h2>
+</a>
+
+Compact tables are useful when displaying dense data.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <Table size="small">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>User 1</td>
+            <td>Contributor</td>
+          </tr>
+        </tbody>
+      </Table>
+    </ThemeWrapper>
+  </div>
+
+  <CodeBlock 
+    name="compact-table" 
+    collapsible 
+    code={`<SistentThemeProvider>
+  <Table size="small">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Role</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>User 1</td>
+        <td>Contributor</td>
+      </tr>
+    </tbody>
+  </Table>
+</SistentThemeProvider>`} 
+  />
+</div>

src/collections/sistent/components/table/guidance.mdx

@@ -0,0 +1,59 @@
+---
+title: Table Guidance
+component: table
+description: Guidelines and best practices for using tables effectively.
+---
+
+## Function
+
+Tables are used to organize structured data into rows and columns. They help users quickly scan, compare, and understand information.
+
+Tables are useful for:
+
+- Presenting structured data
+- Comparing multiple values
+- Displaying logs and metrics
+- Listing users or resources
+
+---
+
+## Usage
+
+Use tables when:
+
+- Data must be compared
+- Information is structured
+- Users need quick scanning
+- Displaying rows and columns
+
+Avoid using tables when:
+
+- Content is mostly text
+- Layout is simple
+- Data does not require comparison
+
+---
+
+## Best Practices
+
+Follow these best practices when using tables:
+
+- Use clear headers
+- Avoid too many columns
+- Keep rows readable
+- Use pagination for large datasets
+- Maintain consistent spacing
+
+### Use Clear Headers
+
+Always include headers for better readability.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+</table>

src/collections/sistent/components/table/index.mdx

@@ -0,0 +1,72 @@
+---
+name: "Table"
+title: Table
+published: true
+component: table
+description: A table is used to organize and display structured data in rows and columns.
+---
+
+Tables are used to present structured data in a clear and organized way. They help users scan information quickly, compare values, and understand relationships between data.
+
+## Types
+
+Different types of tables help present information based on use cases and data complexity.
+
+### Basic Table
+
+Basic tables are used to display structured data in rows and columns.
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Role</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>User 1</td>
+      <td>Contributor</td>
+      <td>Active</td>
+    </tr>
+  </tbody>
+</table>
+
+### Striped Table
+
+Striped tables improve readability by alternating row colors.
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>User 1</td>
+      <td>Contributor</td>
+    </tr>
+  </tbody>
+</table>
+
+## Usage
+
+Tables should be used when:
+
+- Displaying structured data  
+- Comparing values  
+- Showing logs or metrics  
+- Listing users or resources  
+
+## Best Practices
+
+Best practices for using tables:
+
+- Use headers for clarity  
+- Avoid too many columns  
+- Keep rows readable  
+- Use pagination for large datasets  
+- Maintain consistent spacing