Create a “Responsive Table” Elementor Widget [WordPress]

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Elementor Responsive Table Widget
 *
 * Elementor widget that displays a responsive table.
 *
 * @since 1.0.0
 */
class Responsive_Table_Widget extends Widget_Base {

	/**
	 * Retrieve the widget name.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'responsive-table';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Responsive Table', 'responsive-table' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'eicon-table';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'general' ];
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function _register_controls() {
		$this->start_controls_section(
			'section_content',
			[
				'label' => __( 'Content', 'responsive-table' ),
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'columns',
			[
				'label' => __( 'Columns', 'responsive-table' ),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'placeholder' => __( 'Enter the column names, separated by commas', 'responsive-table' ),
			]
		);

		$repeater->add_control(
			'rows',
			[
				'label' => __( 'Rows', 'responsive-table' ),
		
type' => Controls_Manager::TEXTAREA,
				'default' => '',
				'placeholder' => __( 'Enter the rows, one per line. Cells within a row should be separated by a pipe character (|)', 'responsive-table' ),
			]
		);

		$this->add_control(
			'table_data',
			[
				'label' => __( 'Table Data', 'responsive-table' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'columns' => 'Column 1, Column 2, Column 3',
						'rows' => 'Row 1 Cell 1|Row 1 Cell 2|Row 1 Cell 3\nRow 2 Cell 1|Row 2 Cell 2|Row 2 Cell 3',
					],
				],
				'title_field' => '{{{ columns }}}',
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Displays the widget content on the frontend.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		$table_data = $settings['table_data'];

		echo '<div class="responsive-table">';
		foreach ( $table_data as $table ) {
			$columns = explode( ',', $table['columns'] );
			$rows = explode( "\n", $table['rows'] );

			echo '<table>';
			echo '<thead>';
			echo '<tr>';
			foreach ( $columns as $column ) {
				echo '<th>' . trim( $column ) . '</th>';
			}
			echo '</tr>';
			echo '</thead>';
			echo '<tbody>';
			foreach ( $rows as $row ) {
				$cells = explode( '|', $row );
				echo '<tr>';
				foreach ( $cells as $cell ) {
					echo '<td>' . trim( $cell ) . '</td>';
				}
				echo '</tr>';
			}
			echo '</tbody>';
			echo '</table>';
		}
		echo '</div>';
	}

}

This widget allows the user to enter the column names and the table rows in the form of a textarea. It then displays the table in a responsive format using HTML tables.

To use this code in the Elementor page builder, you will need to create a custom plugin and include this code in the plugin file.

Here is a brief outline of the steps you can follow:

1. Create a new folder in the wp-content/plugins directory, and give it a name that represents your plugin (e.g. responsive-table).
2. Inside the plugin folder, create a new file and name it responsive-table.php. This will be the main plugin file.
3. In the main plugin file, add the following header at the top:

<?php
/*
Plugin Name: Responsive Table
Plugin URI: 
Description: Responsive Table widget for Elementor
Version: 1.0
Author: Your Name
Author URI: 
License: GPL2
*/

4. Below the header, include the code for the Responsive Table widget that I provided earlier.
5. Save the plugin file.
6. Go to the WordPress dashboard and navigate to the “Plugins” page. You should see your plugin listed there.
7. Click on the “Activate” button to activate the plugin.
8. Once the plugin is activated, you should be able to use theResponsive Table widget in the Elementor page builder. To add the widget to your page, drag and drop it from the “Widgets” tab in the Elementor panel.