DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How-to: CSS Table Swipe Interaction
Eduardo Ferreira
Eduardo Ferreira

Posted on

How-to: CSS Table Swipe Interaction

Table rows or list items often have actions associated to them, such as deleting, sharing and editing. When designing for touch devices, designers can take advantage of swipe gestures to allow users to quickly perform common actions without having to navigate to a different page or open drawers or modal dialogs.

Gesture based interactions are supported by native mobile languages, but can be tricky to implement in HTML/CSS/JS and are often over-done with excessive use of JavaScript, which can cause low performance and chunky interactions.

In this post, I will walk through 3 simple steps to build a swipe gesture interaction using solely HTML, CSS and a little bit of JS.

Note: the demos in this post should be used on touch devices.


Basic requirements

Letโ€™s start by defining what we want to build. Our swipe snippet should allow the user to:

  • Use touch to swipe a table row either right or left.
  • Unveil an action (icon and coloured background) when the user swipes.
  • Automatically restore scroll position when the user releases the finger.
  • Trigger an action when the user releases the finger (in case they have swiped far enough).

1. Setting the swipe-able element

As a first step, letโ€™s create our swipe-able element and add basic styles to it. To style it, it is given a class named .swipe-element.

To set the stage for the swipe interaction, we can wrap the element around a div with the class name of .swipe-container.

  • To reduce the visual clutter, the .swipe-container should have the scrollbar hidden.
  • To automatically restore scroll position, the .swipe-container should have scroll-snap-type: x mandatory.
  • To indicate which element should be in focus when automatically restoring the scroll position, the swipe-element should have scroll-snap-align: start.


2. Adding the left and right actions

With the container and scrolling logic in place, the next step is to add the actions.

The icons used in this example are from the Material Icons font.

  • As a wrapper for the icon, the .action div, as well as the previously added .swipe-element should have min-width: 100%.
  • The i icon should have position: sticky to ensure it is always visible as soon as the user starts swiping.
  • the .right action should have justify-content: flex-end to make the icon stick to the right side.


3. Triggering the action

When the user releases the finger, our element should check how far the user has swiped and trigger an action in case they have done it far enough.

There should be a distinction between left and right swipe, so the application can handle them independently.

  • To start, an ontouchend event listener should be added to the .swipe-container.
  • In a function called handleSwipe(), we should first define the minDistance the user should swipe for the action to be triggered.
  • After that, we should calculate the swipeDistance by simply subtracting the containerโ€™s clientWidth from its scrollLeft.
  • Negative values represent a left swipe, while positive ones indicate a right one. In case the swipeDistance is smaller than minDistance * -1, we should trigger the left action, and if it is greater than minDistance, the right action should be triggered instead.
  • In case the user hasnโ€™t swiped either left or right further than the minDistance, nothing should be triggered.


Conclusion

Using standard CSS selectors, we have built a swipe-able element that can be used for enhancing the user experience of lists and tables on mobile devices.

With some tweaks and a little bit of imagination, this snippet can be modified or extended to show only one action or indicating visually whether the user has swiped far enough, for example.

This component is also available as a plug-and-play in the Kor UI library.

Top comments (4)

Collapse
 
lennox profile image
Lennox Gilbert

So useful, thank you!

Collapse
 
eduferfer profile image
Eduardo Ferreira Author

I'm glad you liked it :)

Collapse
 
manuthecoder profile image
Manu

Cool!
I've always battled this when making my projects...

Collapse
 
eduferfer profile image
Eduardo Ferreira Author

Me too, I hope it helped!

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

โญ๏ธ๐ŸŽ€ JavaScript Visualized: Promises & Async/Await

async await