Skip to content

Conversation

WHeirstrate
Copy link
Contributor

Description
The table has gotten an upgrade!

We required a context row for the VLAIO project and saw no other practical way than to add it as a feature to the table.
In short: a context row is a row that adds no accessibility addition, will always be interpreted as if it was a span element. The text in it will be read, buttons and links will have their persisting accessibility features, and an additional row is added to the table. This row allows for a more customisable experience, like the one in the styled example of the docs. (added as PDF to the attachments)

It uses an input and is therefore toggleable. It uses keys defined in the data object array to evaluate whether a row requires an additional context header.

Requirements

  • Correct label have been assigned
  • Project has been assigned
  • Milestone has been (created/)assigned

PDF of the docs:
context-row-docs.pdf

Attachments

Screen.Recording.2025-07-30.at.18.14.44.mov

@WHeirstrate WHeirstrate added this to the ngx-table:v19.0.4 milestone Jul 30, 2025
@WHeirstrate WHeirstrate self-assigned this Jul 30, 2025
@WHeirstrate WHeirstrate added enhancement New feature or request ngx-table @studiohyperdrive/ngx-table labels Jul 30, 2025
Copy link
Contributor

@ekincia ekincia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link

@Redn4s Redn4s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik mis wel wat context, maar code-wise ziet het er wel goed uit. 😅

@WHeirstrate WHeirstrate force-pushed the feat/angular/ngx-table/add-context-row branch from ccff7c6 to 9f2d979 Compare July 31, 2025 11:26
@WHeirstrate WHeirstrate merged commit 1d0809a into master Jul 31, 2025
@WHeirstrate WHeirstrate deleted the feat/angular/ngx-table/add-context-row branch July 31, 2025 11:28
Copy link
Contributor

@ian-emsens-shd ian-emsens-shd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, I think both this context & detail feature have too much overlap. Consider splitting the way you render your row to a separate component and allowing implementations to overwrite / extend the specifics.

This obviously exceeds the scope of this change and warrants a breaking change but does provide more flexiblit. From what I understand, at the time of writing, the only difference between context & detail is top & bottom respectively.

? 'ngx-table-row-first'
: !contextRowClasses[dataIndex] && dataIndex === 0
? 'ngx-table-row-first'
: '',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These inline if-statements (also in other parts of the code) are getting out of hand. Consider opening an extra issue to split them to utils / consts / ... to preserve legibility

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are absolutely correct. If and when I find the time, I will analyse this a bit further

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ngx-table @studiohyperdrive/ngx-table
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants