feat(sistent): add Table component documentation

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

@@ -0,0 +1,99 @@
+---
+title: Table Code
+component: table
+description: Tables are used to organize and display structured data in rows and columns.
+---
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+} from "@sistent/sistent"
+
+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">
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Role</TableCell>
+            <TableCell>Status</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>User 1</TableCell>
+            <TableCell>Contributor</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </div>
+</div>
+
+<a id="Striped Table">
+  <h2>Striped Table</h2>
+</a>
+
+Striped tables improve readability by alternating row colors.
+
+<div className="showcase">
+  <div className="items">
+    <TableContainer>
+      <Table striped>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Role</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>User 1</TableCell>
+            <TableCell>Contributor</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </div>
+</div>
+
+<a id="Compact Table">
+  <h2>Compact Table</h2>
+</a>
+
+Compact tables are useful when displaying dense data.
+
+<div className="showcase">
+  <div className="items">
+    <TableContainer>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Role</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>User 1</TableCell>
+            <TableCell>Contributor</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </div>
+</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,164 @@
+---
+name: "Table"
+title: Table
+published: true
+component: table
+description: A table is used to organize and display structured data in rows and columns.
+---
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+} from "@sistent/sistent"
+
+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.
+
+## Overview
+
+Tables help organize data into rows and columns, making it easier to read and analyze information.
+
+---
+
+## Usage
+
+Tables should be used when:
+
+- Displaying structured data  
+- Comparing values  
+- Showing logs or metrics  
+- Listing users or resources  
+
+---
+
+## Examples
+
+### Basic Table
+
+Basic tables are used to display structured data in rows and columns.
+
+<TableContainer>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+        <TableCell>Status</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>User 1</TableCell>
+        <TableCell>Contributor</TableCell>
+        <TableCell>Active</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableContainer>
+
+---
+
+### Striped Table
+
+Striped tables improve readability by alternating row colors.
+
+<TableContainer>
+  <Table striped>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>User 1</TableCell>
+        <TableCell>Contributor</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableContainer>
+
+---
+
+## States
+
+### Sortable Table
+
+Tables can support sorting to help users organize data.
+
+<TableContainer>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>User 1</TableCell>
+        <TableCell>Contributor</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableContainer>
+
+---
+
+### Selectable Rows
+
+Tables can allow row selection.
+
+<TableContainer>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>User 1</TableCell>
+        <TableCell>Contributor</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableContainer>
+
+---
+
+### Paginated Table
+
+Tables can support pagination for large datasets.
+
+<TableContainer>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>User 1</TableCell>
+        <TableCell>Contributor</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableContainer>
+
+---
+
+## Best Practices
+
+- Use headers for clarity  
+- Avoid too many columns  
+- Keep rows readable  
+- Use pagination for large datasets  
+- Maintain consistent spacing