1. Home
  2. Docs
  3. Content Elements
  4. Data Table

Data Table


Here you will see two options-Header and Content.

Header- From the header part, you can select the first row of your table. The first row will have a different layout. By default, it will have a dark blue background. Include the titles or particulars for the header in the column name field. If you want to include a Header icon, toggle on the next option- ‘Enable-Header Icon’. Select an icon from the drop-down menu. There are hundreds of icons. Similarly, you can also include an image for the header. Toggle on the ‘Enable header Image’ options and select an image from the Media library or upload a new one. Freely customize the image size of the image.

Content- To add data entries, first, make sure the first entry is a Row entry. Afterwards, fill up the row by inserting Columns entry. Make sure the number of column entries after the first-row entry matches the number of Header columns.  This is applicable for all the rows you will have on the table. The sequence of the entries is very important here. Similarly, if you want a second row of entries-first select a row entry and afterward insert column entries accordingly. For a column entry, you can attach a link.

For example, if you want a table with 4 columns and 2 rows of data the sequence of content will be row:: content col::content col::content col:: content col::content row:: content col::content col::content col::content col::content


General Style-From here, pick a general background color for the element, adjust the padding, margin, and radius. Afterwards, adjust the Table Header and Data padding.

Header Style-From here you can adjust the Border Radius, Text color &t typography and alignment.

Content Style –From here you can adjust the data entry fields in general. However, you can definitely keep separate layouts for even and odd entries.

See how beautiful Data Table you can build with Essential Addons.

Click to see Live Demo.

How can we help?