Markup table component

[leonid]

A Markup Table component focuses on the basic structure and styling of a table without advanced functionalities. Here are the key features a Primitive Table component should have:

1. Basic Structure: Simple HTML table structure with <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.
2. Customizable Styling: Support for custom styles and CSS classes to match the application's design.
3. Borders: Options to style table borders, including border color, width, and style.
4. Cell Padding and Spacing: Control over cell padding and spacing to improve readability.
5. Header Styling: Customizable styles for table headers, including background color, text color, and font styles.
6. Row Styling: Options to style table rows, including alternating row colors for better readability.
7. Hover Effects: Styles for row hover effects to enhance user interaction.
8. Text Alignment: Control over text alignment within table cells (left, center, right).
9. Responsive Design: Ensure the table is responsive and adapts to different screen sizes.
10. Fixed Headers: Option to keep headers fixed while scrolling through the table.
11. Theming: Support for different themes to match the application's design system.
12. Typography: Control over font styles, sizes, and weights for table text.
13. Background Colors: Customizable background colors for table cells and headers.
14. Width and Height: Control over the width and height of the table and its cells.
15. Overflow Handling: Styles to handle overflow content within table cells.

These features ensure that the Markup Table component is visually appealing and adaptable to various design requirements.

To be implemented

• Vue component with basic logic
• Styles and extension points as css properties
• Vitepress documentation: feature description, examples and api documentation
• Unit tests for component and its composition
• Storybook demos and documentation