7 Best WordPress Table Plugins to Display Your Data

Are you looking for a WordPress table plugin you can use to display data?

WordPress table plugins let you store and present your data in a table format to make it easy for your visitors to read. 

In this article, we’ll show you some of the best WordPress table plugins you can use to show your data.

7+ best WordPress table plugins to store your data

Why Use a WordPress Table Plugin?

Tables are a great way to display large data sets in an easy-to-read way. You can use tables to share original data, show price comparisons, create web directories, and much more. 

WordPress has a default feature that lets you add tables to posts and pages, but it’s limited and doesn’t offer many styling options. 

Using a WordPress table plugin gives you access to additional features like drag and drop table builders, advanced sorting options, complete color and style control, and much more.

When you create engaging and interactive tables, it’s easier to keep your visitors engaged and spending more time on your WordPress website

Having said that, let’s take a look at some of the best WordPress table plugins you can use along with your WordPress site.

1. TablePress

TablePress logo

TablePress is one of the most popular table plugins for WordPress. It lets you create beautiful tables simply and easily without any code. 

If you’ve used Excel before, then you’ll be right at home using this plugin. The process for adding data is just like adding data to a spreadsheet. 

TablePress table editor

Beyond adding data manually, you can import and export your tables in Excel, HTML, CSV, and JSON format. This makes it easy to migrate your tables from another plugin. 

It also comes with a unique feature that makes your tables more interactive. Your users can engage with your tables by using pagination, filtering, sorting, and more.

For more details, see our guide on how to add tables in WordPress posts and pages.

2. Formidable Forms

Formidable Forms

Formidable Forms is one of the most advanced form builder plugins in the market. It also has features that make it a powerful table building tool.

Essentially, you can create a form using the plugin, collect data, and then use that data to make and display your tables.

You can choose from multiple different styles for your tables and have them completely match the design of your site. Plus, the table builder lets you add sorting and filtering features, pagination, and more. 

Formidable Forms table example

With Formidable Forms, you can pull data from your existing forms, so your tables will automatically be updated as new data becomes available. 

This makes it an excellent choice for real estate websites, business directories, classified listings, and more. 

3. wpDataTables

wpDataTables

wpDataTables is a premium table plugin that lets you quickly add tables to WordPress. It comes with a unique table builder that enables you to create visually appealing tables without writing any code.

wpDataTables table example

You’ll find features that let you merge cells, add star ratings, give each cell a different style, add shortcodes to each cell, and more.

Once you activate the plugin, there’s a wizard that will walk you through the steps of creating your first chart. You can enter your data directly into the table, or import data from a CSV or Excel spreadsheet, XML file, PHP, and more.

To display your table, you can use the included Gutenberg block, shortcode, or a supported page builder

4. Data Tables Generator by Supsystic

Data Tables Generator

Data Tables Generator is a flexible table plugin for users who need to create many different types of tables.

It offers support for sorting and search, and can display any type of data or media in your tables.

Similar to Excel and other spreadsheet software, you can even add equations and mathematical formulas into your tables.

Data Tables Generator table example

You can also convert the data being stored in your tables into graphics, charts, and diagrams. This data visualization can help your visitors better understand your data. 

There’s an option for your users to export data on the front end and download it in PDF, Excel, or CSV format. 

5. Ninja Tables

Ninja Tables

Ninja Tables is a great WordPress table plugin that lets you create beautiful tables with ease. This plugin has several features that make more easy customization. 

You can choose between 13 different color schemes or create your own to match the design of your site.

Ninja Tables tables builder color select

Plus, you can customize how your table will look on mobile, tablet, and desktop devices. All existing table options can be turned on or off with a single click. 

The manual data entry process can be slow since you have to enter each column and row individually. But there are data import options to help speed this up. 

It even has a unique feature that lets you add custom CSS and JavaScript to your table for those who want to add custom code. 

6. Visualizer

Visualizer

Visualizer is a feature rich and easy to use table and charts plugin. If you’re writing WordPress blog posts and need to add both tables and charts, then this can be a great choice.

You can use the plugin to create interactive tables for your site and have complete control over the design. You can also add pagination, search, sorting, scrolling, and more. 

Visualizer table example

If you want to edit your tables directly from your posts and access the data import features, then you’ll need to upgrade to the Pro version of the plugin. 

7. WP Table Builder

WP Table Builder

WP Table Builder is a drag and drop table builder that lets you create good looking and fully responsive tables. 

You can add text, images, lists, buttons, star ratings, shortcodes, and custom HTML. 

This makes it useful for more than just displaying data. You can use it to create pricing tables, list tables, comparison tables for review sites, and more. 

WP Table Builder table example

It also comes with sorting functionality, and you have complete control over the style of your tables. 

Bonus: SeedProd

SeedProd

SeedProd is the best WordPress page builder plugin in the market. You can easily create completely custom pages for your website using the drag and drop builder.

It comes with a template library with over 150+ templates you can use as a starting point when creating your pages. Plus, it includes a block library with pre-built features you drag and drop onto your page.

One of these is a pricing table block that lets you create completely custom pricing tables.

SeedProd pricing table

These can be very useful when you’re building a sales page or product page and want to highlight different price points of your products. 

We hope this article helped you learn more about the best WordPress table plugins to store your data. You may also want to see our guide on how to choose the best blogging platform and our expert picks of the best virtual business phone number apps.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 7 Best WordPress Table Plugins to Display Your Data first appeared on WPBeginner.

How to Create a Webcam Audio Visualizer with Three.js

In this tutorial you’ll learn how to create an interesting looking audio visualizer that also takes input from the web camera. The result is a creative visualizer with a depth distortion effect. Although the final result looks complex, the Three.js code that powers it is straightforward and easy to understand.

So let’s get started.

Processing flow

The processing flow of our script is going to be the following:

  1. Create a vertex from every pixel of the image we get from the web camera input
  2. Use the image data from the web camera and apply the magnitude value of the sound frequency to the Z coordinate of each particle
  3. Draw
  4. Repeat point 2 and 3

Now, let’s have a look at how we can get and use the data from the web camera.

Web camera

First of all, let’s see how to access the web camera and get an image from it.

Camera access

For camera access in the browser, simply use getUserMedia().

<video id="video" autoplay style="display: none;"></video>
video = document.getElementById("video");

const option = {
    video: true,
    audio: false
};

// Get image from camera
navigator.getUserMedia(option, (stream) => {
    video.srcObject = stream;  // Load as source of video tag
    video.addEventListener("loadeddata", () => {
        // ready
    });
}, (error) => {
    console.log(error);
});

Draw camera image to canvas

After camera access succeeded, we’ll get the image from the camera and draw it on the canvas.

const getImageDataFromVideo = () => {
    const w = video.videoWidth;
    const h = video.videoHeight;
    
    canvas.width = w;
    canvas.height = h;
    
    // Reverse image like a mirror
    ctx.translate(w, 0);
    ctx.scale(-1, 1);

    // Draw to canvas
    ctx.drawImage(image, 0, 0);

    // Get image as array
    return ctx.getImageData(0, 0, w, h);
};

About acquired imageData

ctx.getImageData() returns an array which RGBA is in order.

[0]  // R
[1]  // G
[2]  // B
[3]  // A

[4]  // R
[5]  // G
[6]  // B
[7]  // A...

And this is how you can access the color information of every pixel.

for (let i = 0, len = imageData.data.length; i < len; i+=4) {
    const index = i * 4;  // Get index of "R" so that we could access to index with 1 set of RGBA in every iteration.?0, 4, 8, 12...?
    const r = imageData.data[index];
    const g = imageData.data[index + 1];
    const b = imageData.data[index + 2];
    const a = imageData.data[index + 3];
}

Accessing image pixels

We are going to calculate the X and Y coordinates so that the image can be placed in the center.

const imageData = getImageDataFromVideo();
for (let y = 0, height = imageData.height; y < height; y += 1) {
    for (let x = 0, width = imageData.width; x < width; x += 1) {
        const vX = x - imageData.width / 2;  // Shift in X direction since origin is center of screen
        const vY = -y + imageData.height / 2;  // Shift in Y direction in the same way (you need -y)
    }
}

Create particles from image pixels

For creating a particle, we can use THREE.Geometry() and THREE.PointsMaterial().

Each pixel is added to the geometry as a vertex.

const geometry = new THREE.Geometry();
geometry.morphAttributes = {};
const material = new THREE.PointsMaterial({
    size: 1,
    color: 0xff0000,
    sizeAttenuation: false
});

const imageData = getImageDataFromVideo();
for (let y = 0, height = imageData.height; y < height; y += 1) {
    for (let x = 0, width = imageData.width; x < width; x += 1) {
        const vertex = new THREE.Vector3(
            x - imageData.width / 2,
            -y + imageData.height / 2,
            0
        );
        geometry.vertices.push(vertex);
    }
}
particles = new THREE.Points(geometry, material);
scene.add(particles);

Draw

In the drawing stage, the updated image is drawn using particles by getting the image data from the camera and calculating a grayscale value from it.

By calling this process on every frame, the screen visual is updated just like a video.

const imageData = getImageDataFromVideo();
for (let i = 0, length = particles.geometry.vertices.length; i < length; i++) {
    const particle = particles.geometry.vertices[i];
    let index = i * 4;

    // Take an average of RGB and make it a gray value.
    let gray = (imageData.data[index] + imageData.data[index + 1] + imageData.data[index + 2]) / 3;

    let threshold = 200;
    if (gray < threshold) {
        // Apply the value to Z coordinate if the value of the target pixel is less than threshold.
        particle.z = gray * 50;
    } else {
        // If the value is greater than threshold, make it big value.
        particle.z = 10000;
    }
}
particles.geometry.verticesNeedUpdate = true;

Audio

In this section, let’s have a look at how the audio is processed.

Loading of the audio file and playback

For audio loading, we can use THREE.AudioLoader().

const audioListener = new THREE.AudioListener();
audio = new THREE.Audio(audioListener);

const audioLoader = new THREE.AudioLoader();
// Load audio file inside asset folder
audioLoader.load('asset/audio.mp3', (buffer) => {
    audio.setBuffer(buffer);
    audio.setLoop(true);
    audio.play();  // Start playback
});

For getting the average frequency analyser.getAverageFrequency() comes in handy.

By applying this value to the Z coordinate of our particles, the depth effect of the visualizer is created.

Getting the audio frequency

And this is how we get the audio frequency:

// About fftSize https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize
analyser = new THREE.AudioAnalyser(audio, fftSize);

// analyser.getFrequencyData() returns array of half size of fftSize.
// ex. if fftSize = 2048, array size will be 1024.
// data includes magnitude of low ~ high frequency.
const data = analyser.getFrequencyData();

for (let i = 0, len = data.length; i < len; i++) {
    // access to magnitude of each frequency with data[i].
}

Combining web camera input and audio

Finally, let’s see how the drawing process works that uses both, the camera image and the audio data.

Manipulate the image by reacting to the audio

By combining the techniques we’ve seen so far, we can now draw an image of the web camera with particles and manipulate the visual using audio data.

const draw = () => {
    // Audio
    const data = analyser.getFrequencyData();
    let averageFreq = analyser.getAverageFrequency();

    // Video
    const imageData = getImageData();
    for (let i = 0, length = particles.geometry.vertices.length; i < length; i++) {
        const particle = particles.geometry.vertices[i];
    
        let index = i * 4;
        let gray = (imageData.data[index] + imageData.data[index + 1] + imageData.data[index + 2]) / 3;
        let threshold = 200;
        if (gray < threshold) {
            // Apply gray value of every pixels of web camera image and average value of frequency to Z coordinate of particle.
            particle.z = gray * (averageFreq / 255);
        } else {
            particle.z = 10000;
        }
    }
    particles.geometry.verticesNeedUpdate = true;  // Necessary to update

    renderer.render(scene, camera);

    requestAnimationFrame(draw);
};

And that’s all. Wasn’t that complicated, was it? Now you know how to create your own audio visualizer using web camera and audio input.

We’ve used THREE.Geometry and THREE.PointsMaterial here but you can take it further and use Shaders. Demo 2 shows an example of that.

We hope you enjoyed this tutorial and get inspired to create something with it.

How to Create a Webcam Audio Visualizer with Three.js was written by Ryota Takemoto and published on Codrops.