How-to: CSS Table Swipe Interaction
Tags: css, html, javascript, ux
Published: 2021-05-13 21:59:47

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`.

{% stackblitz css-swipe-1 %}

--- 

## 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.

{% stackblitz css-swipe-2 %}

---

## 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.

{% stackblitz css-swipe-3 %}

---

## 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](https://kor-ui.com/components/swipe-actions).