---
title: "Using the Responsiveness Feature to Show or Hide Columns on Mobile"
description: "Learn how to control mobile column visibility and choose how rows expand in wpDataTables."
url: https://help.wpdatatables.com/en/articles/38-using-the-responsiveness-feature-to-show-or-hide-columns-on-mobile
collection: "Table settings"
updated: 2026-10-10
language: en
---

# Using the Responsiveness Feature to Show or Hide Columns on Mobile

Learn how to control mobile column visibility and choose how rows expand in wpDataTables.

### How to Customise Column Visibility for Mobile Devices in wpDataTables

When using the built-in **Responsive** feature in wpDataTables, you can control which columns are visible on mobile and tablet devices. This helps keep the table clean and readable on smaller screens.

* * *

### How It Works on Mobile

You can select a few key columns (e.g., **Client** and **City**) to remain visible, while the rest are hidden by default.  
Hidden columns can still be accessed by expanding the row using the **“+” button**.

![](https://staticfiles.gleap.io/ghelparticle/0P97amJq1g55tQD76URR37lsMRiuBx0WVm1XgFXkNrdI2crsn65spJ8Uj40s4d6LhHI0Bw8CQyA.webp)

* * *

### Choose How Rows Are Expanded

By default, rows are expanded using a small **“+” icon** at the beginning of each row.  
However, you can change this behaviour with the **Responsive Display Action** setting in the table’s configuration:

-   **Icon** – Default setting; users click the **“+” button** to expand the row
    
-   **Cell** – Clicking **any cell** in the row expands it
    
-   **Row** – Clicking **anywhere on the row** triggers the expansion
    

You can find this option in the **Display** tab of the table settings.

![](https://staticfiles.gleap.io/ghelparticle/wXN8XxaCdVEO9Alari73ytKWze9vLXHe3MWjBBdOc9bsIzxpe0Z7erH35aRnKs1y1TatqTqLR6G.webp)

* * *

### Step-by-Step Example

#### 1\. Original Table

Let’s say your full table looks like this:

![](https://staticfiles.gleap.io/ghelparticle/bKsRwzfnwARQdhqEVLfGWZrGOXNLlOeTHvYrCXhGaEkEukluWwZXmS7mFhRnr5ShMfajB554NB8.webp)

#### 2\. Customise Column Visibility

Open the **Column List** to configure mobile visibility:

![](https://staticfiles.gleap.io/ghelparticle/np1NO02pLCRPfZspHLb6EzBkXtZRGybkhA1NSCWVC1KdQDVbw0ZTsjezUNqFrCWkv47cKqi7JqA.webp)

-   The **mobile icon** controls visibility on **mobile screens**
    
-   The **tablet icon** controls visibility on **tablet screens**
    

Click each icon to toggle its state:

-   **Colored** icon = column is visible
    
-   **Greyed out** = column is hidden on that device
    

For example, you might only show **Client** and **City** on mobile, and hide the rest.

* * *

### Final Result on Mobile

Once configured, your table will look like this on a mobile device:

![](https://staticfiles.gleap.io/ghelparticle/eez9vO1DlTQdE1g0xTnJ6TGp8CZUIMUXt8SyzyzjYI6UICq3GpYY9s89c8jRv4YEi2TDWrtBLlI.webp)

Users can expand any row to view all the hidden details, using whichever **Responsive Action** method you selected.

* * *

### Need More Help?

Check out our full documentation:  
👉 [Responsive Tables in wpDataTables](https://wpdatatables.com/documentation/table-features/responsiveness/)