Update Storybook with Table Content Warning/Refresh Feature

[jjeroch]

Description:

This ticket requires the update of our Storybook to include the newly developed feature that provides a warning and refresh option when table content fails to load. This feature has already been successfully developed and implemented in the portal connector table. The task is to document and showcase this functionality within Storybook to ensure that it is accessible to developers and stakeholders for future reference and implementation consistency.

Acceptance Criteria:

1. Documentation of Feature:

   • Clearly document the warning/refresh feature in Storybook, including how it operates and under what circumstances it is triggered.

2. Interactive Example:

   • Create an interactive example within Storybook that allows users to see the feature in action, demonstrating the warning message and refresh mechanism.

3. Consistent UI/UX:

   • Ensure that the Warning/Refresh feature is consistent with the design language and user experience patterns established throughout the application.

4. Accessibility:

   • Validate that the warning and refresh UI is accessible, including screen reader support and keyboard navigation compliance.

5. Edge Case Handling:

   • Include examples of how the feature handles edge cases, such as multiple consecutive failures to load content.

Technical Requirements:

1. Storybook Integration:

   • Integrate the warning/refresh feature into the existing Storybook infrastructure without disrupting other documented components.

2. Props Table:

   • Update the Props table in Storybook to include any new props related to the warning/refresh feature.

3. Testing:

   • Conduct thorough testing of the Storybook example to ensure it functions as expected and provides a clear demonstration of the feature.

[manojava-gk]

@jjeroch shall I do this in newly created mdx file with explanation?

[jjeroch]

@manojava-gk yes please create a initial mdx for the table description.
Content as defined below:

Overview

The Data Table component is a versatile UI element designed to display data in a structured format with enhanced functionalities such as searching, filtering, and action buttons. It also includes error and warning notifications for missing backend data or other issues.

Features

• Search: Allows users to search and find data within the table quickly.
• Filter: Provides options to filter data based on various criteria.
• Action Buttons: Offers buttons for performing actions on table data (e.g., edit, delete).
• Warning & Error Notifications: Displays messages to alert users of issues such as missing data.

Theming

• Horizontal/Vertical Table
• Modern and basic table style

Interactive Elements

• Checkboxes: Allow users to select one or multiple table rows. Use for batch actions or comparisons.
• Detail View Icons: Provide icons that, when clicked, expand a row or open a side panel with more detailed information.
• Alert Icons: Use icons to indicate the status of a row or cell, such as error or warning states.
• Pagination: Implement pagination to manage large datasets, allowing users to navigate through different pages.
• Chipcards: Utilize chipcards to represent complex data tags, status indicators, or categories within table cells.

Usage

Do's

• Do use the Data Table component to present large datasets in an organized manner.
• Do utilize the search feature to make the table's data more accessible.
• Do apply filters to help users view subsets of the data based on specific parameters.
• Do ensure that action buttons are used where appropriate to provide clear functionality.
• Do implement error and warning notifications to inform users of any data issues.

Don'ts

• Don't use the Data Table component for displaying simple or small datasets where a table may be overkill.
• Don't overcrowd the table with too many action buttons, which can confuse users.
• Don't ignore the importance of responsive design. Ensure the table is usable on various devices and screen sizes.

Error Handling

• In case of missing backend data, the table should display a clear and concise error message such as "Data could not be loaded. Please try again later."
• Warnings for incomplete or inconsistent data should be shown using a different style or icon to distinguish them from error messages.

Accessibility

• Ensure that the table is navigable using keyboard shortcuts.
• Provide proper ARIA roles and attributes to enhance screen reader compatibility.
• Make sure that search, filter, and action buttons are accessible and labeled correctly.

[manojava-gk]

Thanks for the input @jjeroch
Will add it

[manojava-gk]

@jjeroch as mdx related PR is still in open state, I have added Table.mdx file there as well with the above content