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

feature: implement table sticky headers #4553

Conversation

norbert-mieczkowski-codilime
Copy link
Collaborator

@norbert-mieczkowski-codilime norbert-mieczkowski-codilime commented Sep 28, 2023

Implements: nautobot/nautobot-ui#39

What's Changed

Implement table sticky headers from nautobot-ui library. Apart from the obvious, the changes are following:

  • List view layout components are now explicitly sized and they don't exceed the viewport size
  • Skeleton loader slightly changed to better reflect the content being loaded
  • Loader widget has inlined spinner and text
  • The following React error with rendering invalid component is fixed:
    image
  • The tags are no longer getting excessive margins which made their containing table cells too large:
    image
Loading Table
image image

) : (
() => {}
)}
) : null}
Copy link
Contributor

Choose a reason for hiding this comment

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

{!data_fetched && (
         <Box marginRight="md">
             <LoadingWidget name={tableTitle} />
         </Box>
   )}

I guess no need of the null

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It certainly is possible and well supported by React, though for safety and consistency the community prefers to use ternary operators anyway. Here's a blog post on that subject by Kent C. Dodds: https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx. I really recommend reading his blog as well as watching his talks, most of the time his thought process is brilliant.

@glennmatthews
Copy link
Contributor

Interesting. This appears to work for me in Chrome but not in Firefox:

image

image

@bryanculver bryanculver merged commit 0107a16 into develop Sep 29, 2023
21 checks passed
@bryanculver bryanculver deleted the u/norbert-mieczkowski-codilime-implement-table-sticky-headers branch September 29, 2023 01:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants