glideapps / glideapps/expert-issues

Advanced Table Component Features: Sticky Headers/Columns, Per-Column Visibility, and Enhanced Styling

Open
#60 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
No language data
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

**Summary**
The current Table component is functionally limited for dense data sets. Users need "Excel-like" features to manage complex views: specifically **Sticky Headers/Columns** for navigation, **Per-Column Visibility** to reduce component duplication, **Custom Text/Number Alignment**, **Grid Styling**, and **Inline Date Pickers** for quick data entry.

**Current Problem**
* **Loss of Context on Scroll:** When scrolling a long table vertically, the Title, Search Bar, and "Add" button disappear. When scrolling horizontally on wide tables, key identifiers (like "Name") disappear.
* **The "Duplicate Table" Workaround:** To hide a single sensitive column (e.g., "Cost") from specific users (Roles), developers currently must duplicate the entire Table component.
* **Rigid Alignment (Numbers):** Currently, Glide defaults to **left-alignment** for many values. In many regions and accounting standards, numbers **must be right-aligned** to properly align decimal points and orders of magnitude. The inability to change this makes financial tables hard to read.
* **Lack of Grid:** Lack of visible grid borders makes reading dense rows difficult ("flying" data).
* **Clunky Date Editing:** Changing a date currently requires entering an Edit Screen.

**Examples/Scenarios**
* **Financial Dashboards:** A user views a Price List. Because numbers are left-aligned, it is hard to visually compare values like `$10.00` and `$1,000.00`. Users need **Right Alignment** for these columns.
* **Horizontal Navigation:** A user scrolls right to see data but loses sight of the "Customer Name" in the first column (Sticky Column needed).
* **Role-Based Access:** An "Admin" should see profit margins, but a "Salesperson" should not. Currently, this requires two separate Table components.

**Why This Matters**
* **Professional UX:** Right-aligned numbers are a global standard for data tables.
* **Usability:** Sticky headers and columns are standard expectations for any modern data grid.
* **Performance:** Eliminating the need to duplicate tables for simple column hiding reduces app complexity.

**Suggested UX**
1. **Freeze Panes:**
* **Sticky Top:** Option to keep the Title, Search, and Headers fixed at the top.
* **Sticky Columns:** Option to freeze the first 1 or 2 columns so they remain visible while scrolling horizontally.
2. **Column Logic:**
* Add **"Visibility Conditions"** inside the settings of *each individual column* (e.g., Show Column 'Salary' only if User is Admin).
3. **Styling & Formatting:**
* **Alignment Control:** Allow manual override of alignment (**Left, Center, Right**) for ALL column types. Specifically, allow users to force **Right Alignment** for number columns that are currently stuck on the left.
* **Grid Lines:** Add a style setting for "Cell Borders" (None, Horizontal only, or Full Grid).
4. **Inline Actions:**
* Add a **"Date Picker"** display type for Date columns (popover calendar on click).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.