Sticky Table Header with Horizontal Scroll

Buddhi Vikasitha — Fri, 30 Sep 2022 07:19:05 +0000

The sticky behaviours bring a lot of UX improvements to the end user. It can stick and show you content that are supposed to go out of the current container to make better UX.

Example:
I have added some sticky properties to a content displaying a table's name and record count which is above the table. In this way the user can always see the table information when he is scrolling past the header in this multiple table view.

Initial View

After scrolling a bit further down

Since the sticky properties does not work when overflow attributes are present, I have a small issue pending since I started this development.

I need to stick the table header to the top along with the current table information as I have mentioned.

Also I need to add a horizontal scroll to the table body when the viewport width is not enough to cover the content.

This behaviour is present in Monday.com.

The issue is that the overflow styles that I need to add to the table breaks the sticky position of the header.

My concern is as follows.

Is this achievable using normal CSS styles?
If so how to implement without breaking the table's normal behaviours.

Let me know of any examples, Codepens related to this. I have tried multiple examples so I'll let you know if it works.

Thanks in advance.

Best content to include in a default route?

Buddhi Vikasitha — Wed, 20 Oct 2021 06:45:51 +0000

I feel like this is a good point for a discussion and not a question. I have the set of URLs as follows.

https://domain/api/users
https://domain/api/users/:userId
https://domain/api/posts
https://domain/api/posts/:postId

As usual I return json content when the above APIs are called.

What should be returned if the following APIs are called?

https://domain/api/
https://domain/

Is it just 404-Not Found?
What is more suitable?

DEV Community: Buddhi Vikasitha

Sticky Table Header with Horizontal Scroll

Best content to include in a default route?