[Feat]: New Table component

[AregSoft]

Description: The Table component is a powerful element designed to display and organize complex, large-scale datasets in a clear, structured, and user-friendly manner. It handles core data presentation alongside essential interaction features, such as sorting, filtering, and pagination.

Requirements:

1. Component Implementation

• Implement the Table component in TypeScript. The component must be built to handle dynamic data and column definitions.
• Utilize SCSS with BEM methodology for styling. Focus on clean separation of structure and presentation.
• Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, padding, borders, and shadows, adhering to the Gene UI visual style.
• Support Key Features:
  • Data Sorting: Clickable column headers with visual indicators for ascending/descending states.
  • Row Selection: Support for both single-row (radio-like) and multi-row (checkbox-based) selection, including a "Select All" feature.
  • Pagination: Built-in controls for navigation, page size selection, and displaying the total record count.
  • Density Options: Support for default and compact table sizes.
• Support Different States: Rest, Hovered Row, Selected Row, and an Empty State (for tables with no data).
• Ensure full Right-to-Left (RTL) support for layout, column alignment, and the positioning of selection elements and action menus.
• Ensure accessibility features like appropriate ARIA roles, keyboard navigation (especially for selection and sorting), and header scope attributes.

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including dynamic column rendering, data sorting logic, and state changes.
• Test row selection behavior, verifying correct single and multi-selection outcomes.
• Verify pagination logic correctly slices the data and updates controls.
• Test for edge cases such as an empty data set, an array with zero columns, or invalid sort keys.

3. Storybook Stories:

• Create a comprehensive Storybook story for the Table component.
• Showcase all supported features: Sorting, row selection, pagination, and the compact density variation.
• Illustrate different states: Empty State, a table with a fully selected page, and a demonstration of RTL layout.
• Create controls for all public props so users can interactively define columns, update data, and toggle features.
• Document all props of the public interfaces, including data structure examples.

4. Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for all styling.
• Unit tests written and cover all features and edge cases.
• Storybook stories created with interactive controls and examples of all props.
• Figma design matches the component implementation.
• Features for sorting, pagination, and selection are implemented and functional.