diff --git a/includes/managers/widgets.php b/includes/managers/widgets.php
index b447f34c4f2b..7928b8bc14f5 100644
--- a/includes/managers/widgets.php
+++ b/includes/managers/widgets.php
@@ -63,6 +63,7 @@ private function init_widgets() {
'common',
'inner-section',
'heading',
+ 'table',
'image',
'text-editor',
'video',
diff --git a/includes/widgets/table.php b/includes/widgets/table.php
new file mode 100644
index 000000000000..1a21549dae62
--- /dev/null
+++ b/includes/widgets/table.php
@@ -0,0 +1,324 @@
+start_controls_section(
+ 'content_section',
+ [
+ 'label' => esc_html__( 'Table content', 'elementor' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
+ ]
+ );
+
+ $this->add_control(
+ 'show_title',
+ [
+ 'label' => esc_html__( 'Show Columns Titles', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::SWITCHER,
+ 'label_on' => esc_html__( 'Show', 'elementor' ),
+ 'label_off' => esc_html__( 'Hide', 'elementor' ),
+ 'return_value' => 'yes',
+ 'default' => 'yes',
+ ]
+ );
+
+ $this->add_control(
+ 'column_one',
+ [
+ 'label' => esc_html__( 'Title column 1', 'elementor' ),
+ 'type' => Controls_Manager::TEXT,
+ 'label_block' => true,
+ 'placeholder' => esc_html__( 'Enter column title', 'elementor' ),
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'column_two',
+ [
+ 'label' => esc_html__( 'Title column 2', 'elementor' ),
+ 'type' => Controls_Manager::TEXT,
+ 'label_block' => true,
+ 'placeholder' => esc_html__( 'Enter column title', 'elementor' ),
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'column_three',
+ [
+ 'label' => esc_html__( 'Title column 3', 'elementor' ),
+ 'type' => Controls_Manager::TEXT,
+ 'label_block' => true,
+ 'placeholder' => esc_html__( 'Enter column title', 'elementor' ),
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'rows',
+ [
+ 'label' => esc_html__( "Content rows", 'elementor' ),
+ 'show_label' => true,
+ 'type' => \Elementor\Controls_Manager::REPEATER,
+ 'fields' => [
+ [
+ 'name' => 'column_content_one',
+ 'label' => esc_html__( 'Content column 1', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'label_block' => false,
+ ],
+ [
+ 'name' => 'column_content_two',
+ 'label' => esc_html__( 'column content 2', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'label_block' => false,
+ ],
+ [
+ 'name' => 'column_content_three',
+ 'label' => esc_html__( 'column content 3', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::TEXT,
+ 'label_block' => false,
+ ],
+ ],
+ 'title_field' => esc_html__( 'row', 'elementor'),
+
+ ]
+ );
+
+
+ $this->end_controls_section();
+
+ $this->start_controls_section(
+ 'style_section',
+ [
+ 'label' => esc_html__( 'Style', 'elementor' ),
+ 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
+ ]
+ );
+
+ $this->add_control(
+ 'table_head_color',
+ [
+ 'label' => esc_html__( 'Table head Color', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::COLOR,
+ 'global' => [
+ 'default' => Global_Colors::COLOR_TEXT,
+ ],
+ 'selectors' => [
+ '{{WRAPPER}} .table_head' => 'color: {{VALUE}};',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'table_head_background_color',
+ [
+ 'label' => esc_html__( 'Table head background Color', 'elementor' ),
+ 'type' => \Elementor\Controls_Manager::COLOR,
+ 'global' => [
+ 'default' => Global_Colors::COLOR_ACCENT,
+ ],
+ 'selectors' => [
+ '{{WRAPPER}} .table_head' => 'background-color: {{VALUE}};',
+ ],
+ ]
+ );
+
+ $this->add_group_control(
+ \Elementor\Group_Control_Typography::get_type(),
+ [
+ 'name' => 'sub_heading_typography',
+ 'global' => [
+ 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY,
+ ],
+ 'selector' => '{{WRAPPER}} .table_head',
+ ]
+ );
+
+ $this->add_group_control(
+ \Elementor\Group_Control_Border::get_type(),
+ [
+ 'name' => 'border',
+ 'selector' => '{{WRAPPER}} .table_head',
+ ]
+ );
+
+ $this->end_controls_section();
+
+ }
+
+ /**
+ * Render table widget output on the frontend.
+ *
+ * Written in PHP and used to generate the final HTML.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+
+ protected function render() {
+ $settings = $this->get_settings_for_display();
+
+ echo '
';
+ if ( 'yes' === $settings['show_title'] ) {
+ echo '';
+ echo '';
+ echo '' . $settings['column_one'] . ' | ';
+ echo '' . $settings['column_two'] . ' | ';
+ echo '' . $settings['column_three'] . ' | ';
+ echo '
';
+ echo '';
+ }
+
+ if ( $settings['rows'] ) {
+ echo '';
+ $rows = $settings['rows'];
+ for ($i=0; $i <= count($rows) - 1; $i++) {
+ echo '';
+ echo '' .$rows[$i]['column_content_one'] . ' | ';
+ echo '' .$rows[$i]['column_content_two'] . ' | ';
+ echo '' .$rows[$i]['column_content_three'] . ' | ';
+ echo '
';
+ }
+
+ echo '
';
+ };
+ echo '
';
+ }
+
+
+ protected function content_template() {
+ ?>
+
+
+ <# if ( 'yes' === settings.show_title ) { #>
+
+
+ {{{ settings.column_one }}} |
+ {{{ settings.column_two }}} |
+ {{{ settings.column_three }}} |
+
+
+ <# } #>
+
+ <# if ( settings.rows.length ) { #>
+
+ <# let rows = settings.rows #>
+ <# for( let i = 0; i <= rows.length - 1; i++ ){ #>
+
+ {{{ rows[i].column_content_one }}} |
+ {{{ rows[i].column_content_two }}} |
+ {{{ rows[i].column_content_three }}} |
+
+ <# } #>
+
+ <# } #>
+
+