---
title: "How to add Data Table Block in WordPress?"
url: https://nexterwp.com/docs/add-data-table-in-wordpress/
date: 2023-04-11
modified: 2026-04-15
author: "Aditya Sharma"
description: "Adding a table to a WordPress post or page is an incredibly useful way to display content in an organized and visually appealing manner. Whether you are creating a complex..."
image: https://nexterwp.com/wp-content/uploads/2023/04/How-to-add-Data-Table-Block-in-WordPress_-1024x519.jpg
word_count: 1300
---

# How to add Data Table Block in WordPress?

## Key Takeaways

- Nexter Blocks Data Table block creates advanced tables inside the WordPress block editor, with images, icons, search, and sort options.
- Data Table block supports three content sources: Standard (Free), CSV File (Pro), and Google Sheet (Pro).
- Table Header and Table Body both require a row first, with Action set to Start New Row before Cell Content is edited.
- Extra Settings in the Table block include Search, Sorting, Entry Filter, and Mobile Responsive, while styling lives under the Style tab.

Adding a table to a WordPress post or page is an incredibly useful way to display content in an organized and visually appealing manner. Whether you are creating a complex table for a product comparison, or simply displaying a few rows of data, tables can be a great addition to any content.

There are many plugins available which you can use to add table in your WordPress website. With most plugins, you have to use a shortcode to add the table on the page, but with the Data Table block from The Nexter Blocks, you can create advanced tables within the WordPress block editor. You can add images, icons, search, sort, etc. in your WordPress data table.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-data-table/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the[ Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Data Table block is activated, to verify this visit Nexter → Blocks → and Search for Data Table and activate.

- This is a Freemium block to unlock the extra features, you need the [PRO version of the Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

## Learn via Video Tutorial

https://www.youtube.com/watch?v=tnTB0g9NYw0

## How to activate the Data Table Block?

Go to 

- **Nexter **→ **Blocks** 

- **Search for the** block name and turn** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2023/04/Nexter-Blocks-Data-Table-Activation.png)

## Key Features

- **Multiple content sources** - There are multiple ways to add content to the table, **Standard** (Free), **[CSV File](https://nexterwp.com/docs/import-data-from-csv-in-wordpress-table/)** (Pro) and **[Google Sheet](https://nexterwp.com/docs/import-data-from-google-sheets-in-wordpress-table/)** (Pro).

- **Image / Icon** (Free) - You can easily add icons or [images to the table content](https://nexterwp.com/docs/insert-images-in-table-content-in-wordpress/).

- **Button** (Free) - You can [add buttons inside your table](https://nexterwp.com/docs/add-button-in-wordpress-table/).

- **Mobile Responsive** (Free) - Easily [make your table mobile responsive](https://nexterwp.com/docs/make-data-tables-mobile-responsive-in-wordpress/).

- **Sorting** (Free) - [Easily sort table column data](https://nexterwp.com/docs/enable-sorting-in-wordpress-tables/) using the sortable feature.  

- **Search** (Pro)- [Add a search feature](https://nexterwp.com/docs/add-search-to-wordpress-table/) to search the content of a table easily.

- **Entry Filter** (Pro) - You can [limit the initial visible table rows](https://nexterwp.com/docs/limit-number-of-rows-in-a-wordpress-table/) with the entry filter.

## How to Add Content in the Data Table Block?

Add the Data Table block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-design-type-1024x190.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

Now, it will create a dummy table for you. You can work on the existing table or you can delete all the data and start from scratch. 

First, you have to choose the table content source from the **Type** section under the **Table** tab. Here you’ll find three options -

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-standard-new.png)

**Standard** (Free) - With this option, you have to add the table content manually.

**CSV File** (Pro) - This option allows you to [import a CSV file data in your table](https://nexterwp.com/docs/import-data-from-csv-in-wordpress-table/).

**Google Sheet** (Pro) - With this option, you can [import Google Sheets data in your table](https://nexterwp.com/docs/import-data-from-google-sheets-in-wordpress-table/). 

We will use the Standard option here.

From the **Table Header** tab, you can add the table’s header. Once you open the tab, the first item you’ll see is a **Row**. It is the row of the table header.

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-table-header-row-new-2.png)

> *Note: To add a row in the table header or body, you have to initiate a row first.* 

Open the item, you’ll see an **Action** section with two options - 

**Start New Row** - To initiate a new table row.

**Cell Content** - To add content in the table cell.

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-start-new-row-new.png)

It must be set to **Start New Row**.

Open the first **Cell: ID** item to edit the header cell content. You’ll see the **Action** section is set to **Cell Content** because it is a content cell.

Then in the **Content** tab, you can add text content in the **Text** field. 

From the **Icon** tab, you can add an image or icon to the table content. Learn the process.

Finally, from the **Advanced** tab, you can manage the Column Span (colspan), Row Span (rowspan), column width, individual cell color and background color.

> *Note: The column width set here will apply to all the cells of that particular column.*

You can follow the same process to edit the other table header cells.

Click the **+ Add content** button to add more cells to the table header.

> *Note: You can add a row as well but ideally, a table header should have only one row.*

To add or edit the table body content go to the **Table Body** tab. It works very similarly to the **Table Header** section. 

Similar to the **Table Header,** it will have a row first. Make sure the **Action** section is set to **Start New Row**.

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-table-body-row-new-2.png)

Next, open the item you want to edit, and make sure the **Action** section is set to **Cell Content**. 

From the **Content** tab, you can add the content for the cell in the **Text** field. You can also add a link to the cell from the **URL** field.

You can turn on the **Button** toggle to add a button in the cell. Learn the process.

From the **Icon** tab, you can add an image or icon to the table content. Learn the process.

Then from the **Advanced** tab, you can manage the content alignment, Column Span (colspan), Row Span (rowspan) and you can also use the **Mark this cell as a Table Heading?** dropdown, to turn the cell into a table heading.

You can follow the same process to edit other table body cells.

Click the **+ Add content** button to add more rows and cells in the table body.

> *Note: To add a row in the table header or body, you have to initiate a row first.*

> *Note: Make sure the number of columns in the table header and body is the same.*

## Table Extra Settings

The Table block from Nexter Blocks has some advanced features, which you can find under the **Extra Settings** tab. We’ve covered each option in a separate doc.

- **Search **- [Add a search feature to search the content of a table easily](https://nexterwp.com/docs/add-search-to-wordpress-table/).

- **Sorting** - Easily [sort table column data using the sortable feature](https://nexterwp.com/docs/enable-sorting-in-wordpress-tables/).

- **Entry Filter** - You can [limit the initial visible table rows with the entry filter](https://nexterwp.com/docs/limit-number-of-rows-in-a-wordpress-table/).

- **Mobile Responsive** - Easily [make your table mobile responsive](https://nexterwp.com/docs/make-data-tables-mobile-responsive-in-wordpress/).

## How to Style the Data Table Block?

If you want to style the table, you’ll find all the styling options under the Style tab.

> *Note: Depending on the table content source styling options will vary.*

**Table Header** - From here, you can manage the table header content alignment, typography, color and row background color, padding, border etc.

> *Note: The text color and row background color set from an individual cell will override the text color and background color set from the table header tab.*

![](https://nexterwp.com/wp-content/uploads/2023/04/data-table-style-new.png)

**Table Body** - You can use this tab to style the table body. You can manage content alignment, vertical alignment, typography, color and row background color, padding, border etc. You can also add a stripe effect (pro) to the table from here.

**Button** - If you use buttons in your table, you can manage its style, like padding, width, typography, color, background color, border etc. from here.

**Icon / Image Options** - From here, you can control the styling of icons and images of your table. You can manage the icon size, color, position and spacing. You’ll find similar settings for the image as well.

**Search Bar / Show Entries** (Pro) - If you are using the search or show entry options in your table, you can manage their style from here. You’ll find settings for sorting icon color, label color, input text color, typography, background color, padding, border etc. You can also set the width and bottom space for the search bar and show entry field separately.

**Background** - From this tab, you can manage the overall table margin, padding, background, border etc

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)