Improved GLQL Table Design and Pagination

This issue encompasses a comprehensive redesign of GLQL table views to enhance user experience, navigation, and visual clarity. As GLQL has evolved from its initial concept to a GA feature available to all users, we've refined both functionality and terminology.

Scope of Redesign

The redesign addresses key components:

Table Structure and Styling

• Improved table layout to a view container: #502701[Table_component.png]
• Added zebra striping option for improved row scanning: #502701[Table_all_white_VS_zebra_striping.png]

Table Caption

• Clearer caption to provide context for table data: #502701[Table_caption.png]

Column Management

• #502701[Table_-_Resize.png]
  • Implemented column resize functionality with visual divider indicators
  • Added visual feedback during resize operations

Non-interactive row highlight on hover

• Row highlighting on hover will help users visually track their position in a table or list without indicating clickability: #502701[Hover_highlighting.png]

Row actions

• #502701[Rows_actions.png]
  • Contextual actions for individual row items
  • Caption actions for view-level operations

Pagination

• #502701[Pagination.png]
  • Pagination controls with "Load more" button approach

Sorting

• #502701[Sorting.png]
  • Global sorting: Allows sorting by any column, including non-visible ones
  • Column header sorting: Provides direct, contextual sorting where users are focusing

Work item type indicators

• #502701[Work_item_type.png]
  • Visual icons that indicate work item type (Issue, Epic, Task, MR)
  • Helps users quickly identify different work item types within the table
  • Enhances scannability for mixed-content tables

Terminology Considerations

As GLQL has evolved to "Views," we've faced terminology challenges:

• Clarified naming conventions for actions, for example: View Query vs. View Source
• Ensured consistent terminology across UI elements

Documentation Needs

For each component/feature, we need to:

1. Update user documentation to explain the functionality
2. Document any new design decisions in Pajamas design system
3. Create developer guidelines for implementation

Feature Rollout Strategy

Going forward, we'll implement the following process:

• Place new features behind feature flags for internal testing
• Create feedback issues to collect input before wider release
• Ensure documentation is complete before making features available to all users

Design resource

Figma: https://www.figma.com/design/JYTK15hgaoWrkGrQ8UQJX2/GLQL?node-id=81-7490&t=gkqTvgn07n8JMbPw-1

---

Old issue description:

This Issue is related to improving the GLQL table design as well as adding Pagination. This will allow users to more easily navigate GLQL blocks and information presented in those Blocks.