Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Vue component for standard tables #1966

Merged
merged 4 commits into from
Jan 27, 2024

Conversation

williamjallen
Copy link
Collaborator

This PR introduces a single standardized Vue component which can be used for all tables across the site. This sortable table supports table cells with text, links, and custom components. Column headers can be grouped.

As an example for developers to copy in the future, I have converted the main table on the projects page to the new template.

Copy link
Collaborator

@sbelsk sbelsk left a comment

Choose a reason for hiding this comment

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

One improvement it would be nice to add is a way to better display the table when the page is narrow/the table is very wide. The majority of tables across the site currently let the text within the cells wrap around to some extent, more so than the new template:

Current table Vue table
Screenshot 2024-01-26 113337 Screenshot 2024-01-26 113355

Perhaps we could add horizontal scrolling, so as to not compromise on the desired "shrink" property of table cells?

I also tried playing with the sorting on the projects table. I like the column sorting indicators. However, the sorting on "Last Activity" column doesn't seem to work. The icon changes whenever I try to toggle the sorting order for that column, but the row order doesn't change.

Finally, I know that some pages on CDash currently store the chosen sorting order in cookies associated with those pages, so it's worth considering if that's something we want to support with this template as well.

tests/cypress/component/data-table.cy.js Outdated Show resolved Hide resolved
@williamjallen
Copy link
Collaborator Author

Finally, I know that some pages on CDash currently store the chosen sorting order in cookies associated with those pages, so it's worth considering if that's something we want to support with this template as well.

This can be done by the parent component, by changing the initialSortAsc prop.

@williamjallen williamjallen added this pull request to the merge queue Jan 27, 2024
Merged via the queue into Kitware:master with commit 04487ef Jan 27, 2024
2 checks passed
@williamjallen williamjallen deleted the vue-table-component branch January 27, 2024 16:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants