diff --git a/src/collections/sistent/components/table/code.mdx b/src/collections/sistent/components/table/code.mdx new file mode 100644 index 0000000000000..b084313b87901 --- /dev/null +++ b/src/collections/sistent/components/table/code.mdx @@ -0,0 +1,174 @@ +--- +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. + + +

Basic Table

+
+ +Basic tables are used to display simple structured data. + +
+
+ + + + + Name + Role + Status + + + + + User 1 + Contributor + Active + + +
+
+
+
+ + + +```jsx + + + + + Name + Role + Status + + + + + User 1 + Contributor + Active + + +
+
+``` + +
+ +--- + + +

Striped Table

+
+ +Striped tables improve readability by alternating row colors. + +
+
+ + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+
+
+ + + +```jsx + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+``` + +
+ +--- + + +

Compact Table

+
+ +Compact tables are useful when displaying dense data. + +
+
+ + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+
+
+ + + +```jsx + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+``` + +
\ No newline at end of file diff --git a/src/collections/sistent/components/table/guidance.mdx b/src/collections/sistent/components/table/guidance.mdx new file mode 100644 index 0000000000000..a7b914b36f38c --- /dev/null +++ b/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 + + + + + + + +
NameRole
\ No newline at end of file diff --git a/src/collections/sistent/components/table/index.mdx b/src/collections/sistent/components/table/index.mdx new file mode 100644 index 0000000000000..b83897298c551 --- /dev/null +++ b/src/collections/sistent/components/table/index.mdx @@ -0,0 +1,154 @@ +--- +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 + + + + + + Name + Role + Status + + + + + User 1 + Contributor + Active + + +
+
+ +--- + +### Striped Table + + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+ +--- + +## States + +### Sortable Table + + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+ +--- + +### Selectable Rows + + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+ +--- + +### Paginated Table + + + + + + Name + Role + + + + + User 1 + Contributor + + +
+
+ +--- + +## Best Practices + +- Use headers for clarity +- Avoid too many columns +- Keep rows readable +- Use pagination for large datasets +- Maintain consistent spacing \ No newline at end of file