Table component

[leonid]

A Table component is a UI element used to display data in a tabular format, often with additional formatting and styling options. Here are the key features a Markup Table component should have:

1. Column Headers: Display headers for each column to describe the data.
2. Customizable Styling: Support for custom styles and CSS classes to match the application's design.
3. Sortable Columns: Ability to sort data by clicking on column headers.
4. Resizable Columns: Allow users to adjust the width of columns.
5. Pagination: Support for paginating large datasets.
6. Search and Filter: Options to search and filter data within the table.
7. Row Selection: Ability to select one or multiple rows, with visual indication of selected state.
8. Editable Cells: Option to edit cell content directly within the table.
9. Fixed Headers: Keep column headers fixed while scrolling through the table.
10. Responsive Design: Adaptable to different screen sizes and orientations.
11. Accessibility: Ensure the component is accessible with proper ARIA attributes and keyboard support.
12. Export Options: Ability to export table data to formats like CSV, Excel, or PDF.
13. Inline Actions: Support for inline actions such as edit, delete, or view details.
14. Row Grouping: Ability to group rows based on specific criteria.
15. Virtual Scrolling: Improve performance by rendering only visible rows when dealing with large datasets.
16. Custom Cell Rendering: Support for custom rendering of cell content.
17. Tooltips: Option to include tooltips for additional information on cells or headers.
18. Theming: Support for different themes to match the application's design system.
19. Drag and Drop: Support for drag-and-drop functionality to reorder rows or columns.
20. Event Handling: Emit events for user interactions such as click, hover, sort, or filter.

These features ensure that the Table component is versatile, user-friendly, and accessible.

Current table features

• current selection;
• row selection, in multi and single mode, with model value;
• appearance: background color;
• appearance: zebra rows;
• table row groups
• sticky table row group headers;
• virtual scroll in table body
• sticky table header
• dynamic data
• append slot
• custom slots for row, cell, header, footer
• column visibility and column selector

Design

• Current UI Syntax 2.0 - https://www.figma.com/design/LTyCXsL7eUj5fHmMMGcEUj/Components-anatomy?node-id=1089-157203
• Current table templates - https://www.figma.com/design/JVXL1xmeaGoj3glTMwoJnl/01-UI-Kits---Syntax-UI?node-id=2088-172940&t=mxLgTbEMoaphpHz1-4
• Next Syntax UI 3.0 - https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=962-375

Notes to feature requests

• table component can be implemented with in two versions: complex with customizable functionality and simple, with basic capabilities;
• you should use composition api;
• if composable can be shared across ui component library them it must be shared (like selection function);

To be implemented

• VueJs component with basic logic;
• styles and extension points as css properties;
• vitepress documentation: feature description, examples and generated api documentation;
• unit tests for component and its composables;
• storybook demos and documentation