start_controls_section( 'general_section', [ 'label' => __( 'General', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'cea_data_table_static_html', [ 'type' => Controls_Manager::HIDDEN, 'default' => '', ] ); $this->add_control( "table_sort", [ "label" => esc_html__( "Table Sorting", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for enable or disable table column sorting.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "table_search", [ "label" => esc_html__( "Table Search", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for enable or disable table search by column data.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "table_search_placeholder", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Search Placeholder", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can enter table search box placeholder here.", 'classic-elementor-addons-pro' ), "default" => esc_html__( "Search..", 'classic-elementor-addons-pro' ), "condition" => [ "table_search" => "yes" ] ] ); $this->add_control( "table_pagination", [ "label" => esc_html__( "Table Pagination", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for enable or disable table pagination.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "table_pagination_max", [ "type" => Controls_Manager::TEXT, "label" => esc_html__( "Rows Per Page", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can set the number of rows show in table pagination", 'classic-elementor-addons-pro' ), "default" => "10", "condition" => [ "table_pagination" => "yes" ] ] ); $this->end_controls_section(); // Style General Section $this->start_controls_section( 'section_style_general', [ 'label' => __( 'General', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'bg_color', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner' => 'background-color: {{VALUE}};' ] ] ); $this->add_control( "font_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Font Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner' => 'color: {{VALUE}};' ] ] ); $this->add_responsive_control( 'outer_margin', [ 'label' => esc_html__( 'Margin', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'outer_padding', [ 'label' => esc_html__( 'Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->end_controls_section(); // Style Table Section $this->start_controls_section( 'section_style_table', [ 'label' => __( 'Table', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'row_padding', [ 'label' => esc_html__( 'Row Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table td' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'accordion_border', 'selector' => '{{WRAPPER}} .cea-data-table-inner table.cea-data-table td' ] ); $this->add_responsive_control( 'table_cells_alignment', [ 'label' => esc_html__( 'Alignment', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-justify', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table td' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( "table_row_style", [ "label" => esc_html__( "Row Odd Even Style", 'classic-elementor-addons-pro' ), "description" => esc_html__( "This is option for enable or disable table column sorting.", 'classic-elementor-addons-pro' ), "type" => Controls_Manager::SWITCHER, "default" => "no" ] ); $this->add_control( "odd_bg_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Odd Row Bg Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the odd row background color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table tbody tr:nth-child(odd)' => 'background-color: {{VALUE}};' ], "condition" => [ "table_row_style" => "yes" ] ] ); $this->add_control( "odd_font_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Odd Row Font Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the odd row font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table tbody tr:nth-child(odd)' => 'color: {{VALUE}};' ], "condition" => [ "table_row_style" => "yes" ] ] ); $this->add_control( "even_bg_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Even Row Bg Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the odd row background color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table tbody tr:nth-child(even)' => 'background-color: {{VALUE}};' ], "condition" => [ "table_row_style" => "yes" ] ] ); $this->add_control( "even_font_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Even Row Font Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the odd row font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner table.cea-data-table tbody tr:nth-child(even)' => 'color: {{VALUE}};' ], "condition" => [ "table_row_style" => "yes" ] ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'table_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], 'selector' => '{{WRAPPER}} .cea-data-table-inner table.cea-data-table td' ] ); $this->end_controls_section(); // Style Table Row Head $this->start_controls_section( 'section_table_row_head', [ 'label' => __( 'Table Row Heading', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); /*$this->add_control( 'table_row_heading', [ 'label' => __( 'Table Row Heading', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] );*/ $this->add_control( 'head_bg_color', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table thead > tr > th' => 'background-color: {{VALUE}};' ] ] ); $this->add_control( "head_font_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Font Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the table head font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table thead > tr > th' => 'color: {{VALUE}};' ] ] ); $this->add_control( 'head_row_padding', [ 'label' => esc_html__( 'Row Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table thead > tr > th' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'row_head_alignment', [ 'label' => esc_html__( 'Alignment', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-justify', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table thead > tr > th' => 'text-align: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_head_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], 'selector' => '{{WRAPPER}} .cea-data-table-inner .cea-data-table thead > tr > th' ] ); $this->end_controls_section(); // Style Table Column Head $this->start_controls_section( 'section_table_column_head', [ 'label' => __( 'Table Column Heading', 'classic-elementor-addons-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'column_head_bg_color', [ 'label' => esc_html__( 'Background Color', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table > tbody > tr > td:first-child' => 'background-color: {{VALUE}};' ] ] ); $this->add_control( "column_head_font_color", [ "type" => Controls_Manager::COLOR, "label" => esc_html__( "Font Color", 'classic-elementor-addons-pro' ), "description" => esc_html__( "Here you can put the table column head font color.", 'classic-elementor-addons-pro' ), "default" => "", 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table > tbody > tr > td:first-child' => 'color: {{VALUE}};' ] ] ); $this->add_responsive_control( 'column_head_row_padding', [ 'label' => esc_html__( 'Padding', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table > tbody > tr > td:first-child' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ] ] ); $this->add_responsive_control( 'column_head_alignment', [ 'label' => esc_html__( 'Alignment', 'classic-elementor-addons-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'classic-elementor-addons-pro' ), 'icon' => 'eicon-text-align-justify', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .cea-data-table-inner .cea-data-table > tbody > tr > td:first-child' => 'text-align: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'column_title_head_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], 'selector' => '{{WRAPPER}} .cea-data-table-inner .cea-data-table > tbody > tr > td:first-child' ] ); $this->end_controls_section(); } /** * Render Data Table widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ public function render_content() { /** * Before widget render content. * * Fires before Elementor widget is being rendered. * * @since 1.0.0 * * @param Widget_Base $this The current widget. */ do_action( 'elementor/widget/before_render_content', $this ); ob_start(); $skin = $this->get_current_skin(); if ( $skin ) { $skin->set_parent( $this ); $skin->render(); } else { $this->render(); } $widget_content = ob_get_clean(); ?>
get_settings_for_display(); $table_sort = isset( $settings['table_sort'] ) && $settings['table_sort'] == 'yes' ? true : false; $table_search = isset( $settings['table_search'] ) && $settings['table_search'] == 'yes' ? true : false; $search_placeholder = isset( $settings['table_search_placeholder'] ) && !empty( $settings['table_search_placeholder'] ) ? $settings['table_search_placeholder'] : ''; $table_pagination = isset( $settings['table_pagination'] ) && $settings['table_pagination'] == 'yes' ? true : false; $pagination_max = isset( $settings['table_pagination_max'] ) && !empty( $settings['table_pagination_max'] ) ? $settings['table_pagination_max'] : ''; $shortcode_rand_id = cea_shortcode_rand_id(); $table_class = $table_sort ? ' cea-table-sort-active' : ''; echo '
'; echo $table_search ? '
' : ''; echo ''. $this->cea_table_html() .'
'; echo $table_pagination ? '
' : ''; echo '
'; } protected function cea_table_html(){ $settings = $this->get_parsed_dynamic_settings(); return $settings['cea_data_table_static_html']; } }