Data Table

Data Table

Data Table is a visual representation of the whole data in tabular layout. We have created this Data Table Block so flexible that you can manage your data from your own sheet or place and can display here on a web page.

User will always focus on graphical representation of any kind of data, so using data table for relative information like car sales through the year, temperature through the year and cricket score boards.

Pro tip
Ever seen a balance sheet in words ? No !? Then use this one for your relative data too !!!

Configuration for Data Table

Our Data Table Block works with custom data, google sheets and CSV files. Choose your data source, make some design changes and put it through.

How to use the Data Table Block of The Plus Addons For Gutenberg

The Data Table block comes in three different types of table sources. You can create a superior-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Data Table into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Data Table after “/” sign, eg.“/Data Table”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Table

Type

Select here if you want external sheet or you want to add data manually in data tables. Third option is google sheet which I guess is the best one so far.

CSV File URL

Paste and external CSV file link here.

Google Sheet API Key, Sheet ID & Table Range

Google sheet is a online sheet service to use for free. These things can be retrieved easily by clicking on below link with text How to Get.

Table Header

Content

A repeater field to add the table’s headers.

Action

Select if you want to start a new row or you want to add a cell with some content.

Content (Cell Content)

Paste a cell content you want to get displayed.

Icon (Cell Content)

Select an Icon or an Image to have there.

Advanced (Cell Content)

Advanced design options for cell content.

Column & Row Span

Merge two columns/ rows respectively using these two table html tag properties.

Column Width

Set column width from here.

Color

A color picker to assign suitable color to the text.

Background Color

A color picker to assign suitable color to the background.

Table Body

Content

A repeater field to add the table’s content.

Action

Select if you want to start a new row or you want to add a cell with some content.

Content (Cell Content)

Paste a cell content you want to get displayed.

URL (Cell Content)

Set a destination URL on click of content.

Button (Cell Content)

Want an extra button as a cell content ? No problem !

Button Text & URL (Cell Content)

An input to add button text and destination URL on click of button.

Add Custom Attributes (Cell Content)

By enabling this option, you can see add custom attributes options.

Custom Attributes (Cell Content)

Add custom attributes for button in “Key | Value” manner here. Can have multiple, one in a line.

Icon (Cell Content)

Icon type is a selection of whether you want an icon or image or not.

Select Icon (Cell Content)

A color picker to assign a suitable color to the icon.

Advanced (Cell Content)

Advanced design options for cell content.

Text Alignment

Alignment of text into left, center or right direction.

Column & Row Span

Merge two columns/ rows respectively using these two table html tag properties.

Mark This Cell as a Table Heading ?

Make this cell tag from td to th. Simply converts it into heading.

Extra Settings

Table Searchable

Make this table searchable. Search box will be appeared at top.

Search Field Label

An input field to add the label for search field.

Table Sortable

Make this table sortable. Sorting arrows will be appeared besides the headings of fields.

Filter Dropdown

How much entries you want to show per page ?

Responsive Options

How you want the table to behave in responsive screens.

2. Style

The Style tab is used for customizing the appearance of all the Data Table Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Table Header

Text Alignment

Alignment of text into left, centre or right direction.

Typography

Assign size, weight, spacing and much more to fonts.

Padding

Put-in some inner space to an element.

Row Text Color

A color picker to assign suitable color to the text.

Row Background Color

A color picker to assign suitable background color to the text.

Cell Hover Color

A color picker to assign suitable color to the cell text on hover.

Cell Background Hover Color

A color picker to assign suitable color to the cell background on hover.

Apply Border To

Want to have border ?

Border

Draw a border around the element and give width and color to it.

Header Mobile Responsive Style

Text Alignment

Alignment of text into left, centre or right direction.

Typography

Assign size, weight, spacing and much more to fonts.

Padding

Put-in some inner space to an element.

Heading Cell Width

Set heading cell width from here.

Heading Color

A color picker to assign suitable color to the heading text.

Heading Background Color

A color picker to assign suitable color to the heading background.

Table Body

Text Alignment

Alignment of text into left, centre or right direction.

Vertical Alignment

Alignment of content into top, centre or bottom manner.

Typography

Assign size, weight, spacing and much more to fonts.

Padding

Put-in some inner space to an element.

Row Text Color

A color picker to assign suitable color to the row text.

Stripped Effect & Color Options ⭐

Assign different colors to the alternate rows.

Apply Border To

Want to have border ?

Border

Draw a border around the element and give width and color to it.

Button

Typography

Assign size, weight, spacing and much more to fonts.

Button Padding

Put-in some inner space to an element.

Button Width

Set button’s width from here.

Text Color

A color picker to assign suitable color to the button text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Icon/Image Option

Icon Color

A color picker to assign suitable color to the Icon.

Icon/Image Size

Set size of icon/image from here.

Icon/Image Position

Display symbol prefix/ postfix the Icon/Image.

Icon/Image Spacing

Manage spacing between icon here.

Border Radius

Set the radius curve of the element’s corner.

Search Bar/Show Entries

Sorting icon color

A color picker to assign a suitable color to the icon.

Label Color

A color picker to assign a suitable color to the text.

Input Value Color

A color picker to assign a suitable color to the value.

Input Background Color

A color picker to assign a suitable background color to the value.

Typography

Assign a size, weight, spacing, and much more to fonts.

Input Padding

Put-in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Input Border Radius

Set the radius curve of the element’s corner.

Search Bar Width

Set width of the search bar from here.

Show Entries Width

Set width of the entries from here.

Bottom Space

An input to set the spacing from bottom side.

Background

Margin

Put-in some outer space to an element.

Padding

Put-in some inner space to an element.

Background

Apply suitable background like color/ gradient to an element.

Display Border

By enabling this option, you can see all the border options.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.

Was this article helpful?
5 out of 5 stars
5 Stars 100%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.