Pinned columns

[nate-ni]

😯 Problem to Solve

This is a development configuration freezing the first/last column (or first/last n columns) in a table. This is helpful when a table is very wide and the first column should remain visible when horizontally scrolling.

From table spec this is phrased, "Pin columns: columns remain fixed during horizontal scrolling"

💁 Proposed Solution

• Design for pinned/frozen column #892

🤔 Open Questions

1. Have we enabled horizontal scrolling?
2. Do we need to be able to enable pinning for last columns?
   • It's not unheard of, but is this something we need?
   • https://material.angular.io/components/table/overview#sticky-rows-and-columns
3. Should there be an interactive version of this feature (so the end user can "pin/freeze" a column)?

🖼️ References/Prior Art

AirTable_Pinned_Column_Example.mov

[atmgrifter00]

Rough prototype from innovation day: https://github.com/ni/nimble/tree/table-pinned-columns (Storybook).

Things of note:

• Using 'sticky' for the frozen entities seems like the only viable implementation route (as opposed to something like separate containers for pinned and unpinned elements).
• Using display of inline-grid seems necessary to get sticky behavior to work properly (at least for containers that were using grid before).
• Offsetting header row using CSS left for scrolling purposes interferes with setting CSS left for making header content sticky (the latter of which seems necessary). Instead of setting the CSS left property, we can instead set the scrollLeft of the element containing all of the header content (requiring implementation in code-behind). This seems like it also might require its CSS overflow to be explicitly be set to hidden.
• Cell elements will likely require having their background explicitly set so that appropriate visual clipping occurs when a scrollable column is dragged passed a pinned column.
• Assumption is that all pinned columns will be rendered in order before unpinned columns (not implemented in prototype)

Visual things to finalize:

• Should there be any explicit visual indicator denoting the border between pinned and unpinned columns?
• Perhaps things like the group rows and collapse-all/selection checkboxes should always be sticky/pinned. Only the cell content can actually be scrolled.
• As noted in the open questions above, should there be an interactive means of pinning a column?

Remaining unprototyped work:

• Dealing with arbitrarily large header content (with/without selection checkboxes, etc...)
• Sizing column headers that are pinned can have improper visual behaviors, like the column header remaining in place, and the right divider moving when it shouldn't (like when dragging the left divider left)
• Applying the same pattern for keeping the header content pinned to the cell content.

[fredvisser]

Not prioritized against current client requirements.