data-table.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 2.8.5

essential-addons-for-elementor-lite / elements / data-table / data-table.php

essential-addons-for-elementor-lite / elements / data-table Last commit date

data-table.php

1089 lines

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) exit; // If this file is called directly, abort.
5
6	class Widget_Eael_Data_Table extends Widget_Base {
7	public $unique_id = null;
8	public function get_name() {
9	return 'eael-data-table';
10	}
11
12	public function get_title() {
13	return esc_html__( 'EA Data Table', 'essential-addons-elementor' );
14	}
15
16	public function get_icon() {
17	return 'eicon-table';
18	}
19
20	public function get_script_depends() {
21	return [
22	'eael-scripts'
23	];
24	}
25
26	public function get_categories() {
27	return [ 'essential-addons-elementor' ];
28	}
29
30	protected function _register_controls() {
31
32	/**
33	* Data Table Header
34	*/
35	$this->start_controls_section(
36	'eael_section_data_table_header',
37	[
38	'label' => esc_html__( 'Header', 'essential-addons-elementor' )
39	]
40	);
41
42	$this->add_control(
43	'eael_section_data_table_enabled',
44	[
45	'label' => __( 'Enable Table Sorting', 'essential-addons-elementor' ),
46	'type' => Controls_Manager::SWITCHER,
47	'label_on' => esc_html__( 'Yes', 'essential-addons-elementor' ),
48	'label_off' => esc_html__( 'No', 'essential-addons-elementor' ),
49	'return_value' => 'true',
50	]
51	);
52
53	$this->add_control(
54	'eael_pricing_table_style_pro_alert',
55	[
56	'label' => esc_html__( 'Sorting feature is available in pro version!', 'essential-addons-elementor' ),
57	'type' => Controls_Manager::HEADING,
58	'condition' => [
59	'eael_section_data_table_enabled' => 'true',
60	]
61	]
62	);
63
64	$this->add_control(
65	'eael_data_table_header_cols_data',
66	[
67	'type' => Controls_Manager::REPEATER,
68	'seperator' => 'before',
69	'default' => [
70	[ 'eael_data_table_header_col' => 'Table Header' ],
71	[ 'eael_data_table_header_col' => 'Table Header' ],
72	[ 'eael_data_table_header_col' => 'Table Header' ],
73	[ 'eael_data_table_header_col' => 'Table Header' ],
74	],
75	'fields' => [
76	[
77	'name' => 'eael_data_table_header_col',
78	'label' => esc_html__( 'Column Name', 'essential-addons-elementor' ),
79	'default' => 'Table Header',
80	'type' => Controls_Manager::TEXT,
81	'label_block' => false,
82	],
83	[
84	'name' => 'eael_data_table_header_col_span',
85	'label' => esc_html__( 'Column Span', 'essential-addons-elementor' ),
86	'default' => '',
87	'type' => Controls_Manager::TEXT,
88	'label_block' => false,
89	],
90	[
91	'name' => 'eael_data_table_header_col_icon_enabled',
92	'label' => esc_html__( 'Enable Header Icon', 'essential-addons-elementor' ),
93	'type' => Controls_Manager::SWITCHER,
94	'label_on' => __( 'yes', 'essential-addons-elementor' ),
95	'label_off' => __( 'no', 'essential-addons-elementor' ),
96	'default' => 'false',
97	'return_value' => 'true',
98	],
99	[
100	'name' => 'eael_data_table_header_icon_type',
101	'label' => esc_html__( 'Header Icon Type', 'essential-addons-elementor' ),
102	'type' => Controls_Manager::CHOOSE,
103	'options' => [
104	'none' => [
105	'title' => esc_html__( 'None', 'essential-addons-elementor' ),
106	'icon' => 'fa fa-ban',
107	],
108	'icon' => [
109	'title' => esc_html__( 'Icon', 'essential-addons-elementor' ),
110	'icon' => 'fa fa-star',
111	],
112	'image' => [
113	'title' => esc_html__( 'Image', 'essential-addons-elementor' ),
114	'icon' => 'fa fa-picture-o',
115	],
116	],
117	'default' => 'icon',
118	'condition' => [
119	'eael_data_table_header_col_icon_enabled' => 'true'
120	]
121	],
122	[
123	'name' => 'eael_data_table_header_col_icon',
124	'label' => esc_html__( 'Icon', 'essential-addons-elementor' ),
125	'type' => Controls_Manager::ICON,
126	'default' => '',
127	'condition' => [
128	'eael_data_table_header_col_icon_enabled' => 'true',
129	'eael_data_table_header_icon_type' => 'icon'
130	]
131	],
132	[
133	'name' => 'eael_data_table_header_col_img',
134	'label' => esc_html__( 'Image', 'essential-addons-elementor' ),
135	'type' => Controls_Manager::MEDIA,
136	'default' => [
137	'url' => Utils::get_placeholder_image_src(),
138	],
139	'condition' => [
140	'eael_data_table_header_icon_type' => 'image'
141	]
142	],
143	[
144	'name' => 'eael_data_table_header_col_img_size',
145	'label' => esc_html__( 'Image Size(px)', 'essential-addons-elementor' ),
146	'default' => '25',
147	'type' => Controls_Manager::NUMBER,
148	'label_block' => false,
149	'condition' => [
150	'eael_data_table_header_icon_type' => 'image'
151	]
152	],
153	[
154	'name' => 'eael_data_table_header_css_class',
155	'label' => esc_html__( 'CSS Class', 'essential-addons-elementor' ),
156	'type' => Controls_Manager::TEXT,
157	'label_block' => false,
158	],
159	[
160	'name' => 'eael_data_table_header_css_id',
161	'label' => esc_html__( 'CSS ID', 'essential-addons-elementor' ),
162	'type' => Controls_Manager::TEXT,
163	'label_block' => false,
164	],
165
166	],
167	'title_field' => '{{eael_data_table_header_col}}',
168	]
169	);
170
171	$this->end_controls_section();
172
173	/**
174	* Data Table Content
175	*/
176	$this->start_controls_section(
177	'eael_section_data_table_cotnent',
178	[
179	'label' => esc_html__( 'Content', 'essential-addons-elementor' )
180	]
181	);
182
183	$this->add_control(
184	'eael_data_table_content_rows',
185	[
186	'type' => Controls_Manager::REPEATER,
187	'seperator' => 'before',
188	'default' => [
189	[ 'eael_data_table_content_row_type' => 'row' ],
190	[ 'eael_data_table_content_row_type' => 'col' ],
191	[ 'eael_data_table_content_row_type' => 'col' ],
192	[ 'eael_data_table_content_row_type' => 'col' ],
193	[ 'eael_data_table_content_row_type' => 'col' ],
194	],
195	'fields' => [
196	[
197	'name' => 'eael_data_table_content_row_type',
198	'label' => esc_html__( 'Row Type', 'essential-addons-elementor' ),
199	'type' => Controls_Manager::SELECT,
200	'default' => 'row',
201	'label_block' => false,
202	'options' => [
203	'row' => esc_html__( 'Row', 'essential-addons-elementor' ),
204	'col' => esc_html__( 'Column', 'essential-addons-elementor' ),
205	]
206	],
207	[
208	'name' => 'eael_data_table_content_row_colspan',
209	'label' => esc_html__( 'Col Span', 'essential-addons-elementor' ),
210	'type' => Controls_Manager::NUMBER,
211	'description' => esc_html__( 'Default: 1 (optional).'),
212	'default' => 1,
213	'min' => 1,
214	'label_block' => true,
215	'condition' => [
216	'eael_data_table_content_row_type' => 'col'
217	]
218	],
219	[
220	'name' => 'eael_data_table_content_row_rowspan',
221	'label' => esc_html__( 'Row Span', 'essential-addons-elementor' ),
222	'type' => Controls_Manager::NUMBER,
223	'description' => esc_html__( 'Default: 1 (optional).'),
224	'default' => 1,
225	'min' => 1,
226	'label_block' => true,
227	'condition' => [
228	'eael_data_table_content_row_type' => 'col'
229	]
230	],
231	[
232	'name' => 'eael_data_table_content_type',
233	'label' => esc_html__( 'Content Type', 'essential-addons-elementor' ),
234	'type' => Controls_Manager::CHOOSE,
235	'options' => [
236	'textarea' => [
237	'title' => esc_html__( 'Textarea', 'essential-addons-elementor' ),
238	'icon' => 'fa fa-text-width',
239	],
240	'editor' => [
241	'title' => esc_html__( 'Editor', 'essential-addons-elementor' ),
242	'icon' => 'fa fa-pencil',
243	],
244	'template' => [
245	'title' => esc_html__( 'Templates', 'essential-addons-elementor' ),
246	'icon' => 'fa fa-file',
247	]
248	],
249	'default' => 'textarea',
250	'condition' => [
251	'eael_data_table_content_row_type' => 'col'
252	]
253	],
254	[
255	'name' => 'eael_primary_templates_for_tables',
256	'label' => __( 'Choose Template', 'essential-addons-elementor' ),
257	'type' => Controls_Manager::SELECT,
258	'options' => eael_get_page_templates(),
259	'condition' => [
260	'eael_data_table_content_type' => 'template',
261	],
262	],
263	[
264	'name' => 'eael_data_table_content_row_title',
265	'label' => esc_html__( 'Cell Text', 'essential-addons-elementor' ),
266	'type' => Controls_Manager::TEXTAREA,
267	'label_block' => true,
268	'default' => esc_html__( 'Content', 'essential-addons-elementor' ),
269	'condition' => [
270	'eael_data_table_content_row_type' => 'col',
271	'eael_data_table_content_type' => 'textarea'
272	]
273	],
274	[
275	'name' => 'eael_data_table_content_row_content',
276	'label' => esc_html__( 'Cell Text', 'essential-addons-elementor' ),
277	'type' => Controls_Manager::WYSIWYG,
278	'label_block' => true,
279	'default' => esc_html__( 'Content', 'essential-addons-elementor' ),
280	'condition' => [
281	'eael_data_table_content_row_type' => 'col',
282	'eael_data_table_content_type' => 'editor'
283	]
284	],
285	[
286	'name' => 'eael_data_table_content_row_title_link',
287	'label' => esc_html__( 'Link', 'essential-addons-elementor' ),
288	'type' => Controls_Manager::URL,
289	'label_block' => true,
290	'default' => [
291	'url' => '',
292	'is_external' => '',
293	],
294	'show_external' => true,
295	'separator' => 'before',
296	'condition' => [
297	'eael_data_table_content_row_type' => 'col',
298	'eael_data_table_content_type' => 'textarea'
299	],
300	],
301	[
302	'name' => 'eael_data_table_content_row_css_class',
303	'label' => esc_html__( 'CSS Class', 'essential-addons-elementor' ),
304	'type' => Controls_Manager::TEXT,
305	'label_block' => false,
306	'condition' => [
307	'eael_data_table_content_row_type' => 'col'
308	]
309	],
310	[
311	'name' => 'eael_data_table_content_row_css_id',
312	'label' => esc_html__( 'CSS ID', 'essential-addons-elementor' ),
313	'type' => Controls_Manager::TEXT,
314	'label_block' => false,
315	'condition' => [
316	'eael_data_table_content_row_type' => 'col'
317	]
318	]
319	],
320	'title_field' => '{{eael_data_table_content_row_type}}::{{eael_data_table_content_row_title \|\| eael_data_table_content_row_content}}',
321	]
322	);
323
324	$this->end_controls_section();
325
326	/**
327	* Go Premium For More Features
328	*/
329	$this->start_controls_section(
330	'eael_section_pro',
331	[
332	'label' => __( 'Go Premium for More Features', 'essential-addons-elementor' )
333	]
334	);
335	$this->add_control(
336	'eael_control_get_pro',
337	[
338	'label' => __( 'Unlock more possibilities', 'essential-addons-elementor' ),
339	'type' => Controls_Manager::CHOOSE,
340	'options' => [
341	'1' => [
342	'title' => __( '', 'essential-addons-elementor' ),
343	'icon' => 'fa fa-unlock-alt',
344	],
345	],
346	'default' => '1',
347	'description' => '<span class="pro-feature"> Get the <a href="https://essential-addons.com/elementor/buy.php" target="_blank">Pro version</a> for more stunning elements and customization options.</span>'
348	]
349	);
350	$this->end_controls_section();
351
352	/**
353	* -------------------------------------------
354	* Tab Style (Data Table Style)
355	* -------------------------------------------
356	*/
357	$this->start_controls_section(
358	'eael_section_data_table_style_settings',
359	[
360	'label' => esc_html__( 'General Style', 'essential-addons-elementor' ),
361	'tab' => Controls_Manager::TAB_STYLE
362	]
363	);
364
365	$this->add_responsive_control(
366	'table_width',
367	[
368	'label' => __( 'Width', 'essential-addons-elementor' ),
369	'type' => Controls_Manager::SLIDER,
370	'default' => [
371	'size' => 100,
372	'unit' => '%',
373	],
374	'size_units' => [ '%', 'px' ],
375	'range' => [
376	'%' => [
377	'min' => 1,
378	'max' => 100,
379	],
380	'px' => [
381	'min' => 1,
382	'max' => 1200,
383	],
384	],
385	'selectors' => [
386	'{{WRAPPER}} .eael-data-table' => 'max-width: {{SIZE}}{{UNIT}};',
387	],
388	]
389	);
390
391	$this->add_control(
392	'table_alignment',
393	[
394	'label' => __( 'Alignment', 'essential-addons-elementor' ),
395	'type' => Controls_Manager::CHOOSE,
396	'label_block' => false,
397	'default' => 'center',
398	'options' => [
399	'left' => [
400	'title' => __( 'Left', 'essential-addons-elementor' ),
401	'icon' => 'eicon-h-align-left',
402	],
403	'center' => [
404	'title' => __( 'Center', 'essential-addons-elementor' ),
405	'icon' => 'eicon-h-align-center',
406	],
407	'right' => [
408	'title' => __( 'Right', 'essential-addons-elementor' ),
409	'icon' => 'eicon-h-align-right',
410	],
411	],
412	'prefix_class' => 'eael-table-align-',
413	]
414	);
415
416	$this->end_controls_section();
417
418	/**
419	* -------------------------------------------
420	* Tab Style (Data Table Header Style)
421	* -------------------------------------------
422	*/
423	$this->start_controls_section(
424	'eael_section_data_table_title_style_settings',
425	[
426	'label' => esc_html__( 'Header Style', 'essential-addons-elementor' ),
427	'tab' => Controls_Manager::TAB_STYLE
428	]
429	);
430
431
432	$this->add_control(
433	'eael_section_data_table_header_radius',
434	[
435	'label' => esc_html__( 'Header Border Radius', 'essential-addons-elementor' ),
436	'type' => Controls_Manager::SLIDER,
437	'range' => [
438	'px' => [
439	'max' => 50,
440	],
441	],
442	'selectors' => [
443	'{{WRAPPER}} .eael-data-table thead tr th:first-child' => 'border-radius: {{SIZE}}px 0px 0px 0px;',
444	'{{WRAPPER}} .eael-data-table thead tr th:last-child' => 'border-radius: 0px {{SIZE}}px 0px 0px;',
445	],
446	]
447	);
448
449	$this->add_responsive_control(
450	'eael_data_table_each_header_padding',
451	[
452	'label' => esc_html__( 'Padding', 'essential-addons-elementor' ),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => [ 'px', 'em' ],
455	'selectors' => [
456	'{{WRAPPER}} .eael-data-table .table-header th' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457	'{{WRAPPER}} .eael-data-table tbody tr td .th-mobile-screen' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
458	],
459	]
460	);
461
462	$this->start_controls_tabs('eael_data_table_header_title_clrbg');
463
464	$this->start_controls_tab( 'eael_data_table_header_title_normal', [ 'label' => esc_html__( 'Normal', 'essential-addons-elementor' ) ] );
465
466	$this->add_control(
467	'eael_data_table_header_title_color',
468	[
469	'label' => esc_html__( 'Color', 'essential-addons-elementor' ),
470	'type' => Controls_Manager::COLOR,
471	'default' => '#fff',
472	'selectors' => [
473	'{{WRAPPER}} .eael-data-table thead tr th' => 'color: {{VALUE}};',
474	'{{WRAPPER}} table.dataTable thead .sorting:after' => 'color: {{VALUE}};',
475	'{{WRAPPER}} table.dataTable thead .sorting_asc:after' => 'color: {{VALUE}};',
476	'{{WRAPPER}} table.dataTable thead .sorting_desc:after' => 'color: {{VALUE}};',
477	],
478	]
479	);
480
481	$this->add_control(
482	'eael_data_table_header_title_bg_color',
483	[
484	'label' => esc_html__( 'Background Color', 'essential-addons-elementor' ),
485	'type' => Controls_Manager::COLOR,
486	'default' => '#4a4893',
487	'selectors' => [
488	'{{WRAPPER}} .eael-data-table thead tr th' => 'background-color: {{VALUE}};'
489	],
490	]
491	);
492
493	$this->add_group_control(
494	Group_Control_Border::get_type(),
495	[
496	'name' => 'eael_data_table_header_border',
497	'label' => esc_html__( 'Border', 'essential-addons-elementor' ),
498	'selector' => '{{WRAPPER}} .eael-data-table thead tr th'
499	]
500	);
501
502	$this->end_controls_tab();
503
504	$this->start_controls_tab( 'eael_data_table_header_title_hover', [ 'label' => esc_html__( 'Hover', 'essential-addons-elementor' ) ] );
505
506	$this->add_control(
507	'eael_data_table_header_title_hover_color',
508	[
509	'label' => esc_html__( 'Color', 'essential-addons-elementor' ),
510	'type' => Controls_Manager::COLOR,
511	'default' => '#fff',
512	'selectors' => [
513	'{{WRAPPER}} .eael-data-table thead tr th:hover' => 'color: {{VALUE}};',
514	'{{WRAPPER}} table.dataTable thead .sorting:after:hover' => 'color: {{VALUE}};',
515	'{{WRAPPER}} table.dataTable thead .sorting_asc:after:hover' => 'color: {{VALUE}};',
516	'{{WRAPPER}} table.dataTable thead .sorting_desc:after:hover' => 'color: {{VALUE}};',
517	],
518	]
519	);
520
521	$this->add_control(
522	'eael_data_table_header_title_hover_bg_color',
523	[
524	'label' => esc_html__( 'Background Color', 'essential-addons-elementor' ),
525	'type' => Controls_Manager::COLOR,
526	'selectors' => [
527	'{{WRAPPER}} .eael-data-table thead tr th:hover' => 'background-color: {{VALUE}};',
528	],
529	]
530	);
531
532	$this->add_group_control(
533	Group_Control_Border::get_type(),
534	[
535	'name' => 'eael_data_table_header_hover_border',
536	'label' => esc_html__( 'Border', 'essential-addons-elementor' ),
537	'selector' => '{{WRAPPER}} .eael-data-table thead tr th:hover',
538	]
539	);
540
541	$this->end_controls_tab();
542
543	$this->end_controls_tabs();
544
545	$this->add_group_control(
546	Group_Control_Typography::get_type(),
547	[
548	'name' => 'eael_data_table_header_title_typography',
549	'selector' => '{{WRAPPER}} .eael-data-table thead > tr th',
550	]
551	);
552
553	$this->add_responsive_control(
554	'eael_data_table_header_title_alignment',
555	[
556	'label' => esc_html__( 'Title Alignment', 'essential-addons-elementor' ),
557	'type' => Controls_Manager::CHOOSE,
558	'label_block' => true,
559	'options' => [
560	'left' => [
561	'title' => esc_html__( 'Left', 'essential-addons-elementor' ),
562	'icon' => 'fa fa-align-left',
563	],
564	'center' => [
565	'title' => esc_html__( 'Center', 'essential-addons-elementor' ),
566	'icon' => 'fa fa-align-center',
567	],
568	'right' => [
569	'title' => esc_html__( 'Right', 'essential-addons-elementor' ),
570	'icon' => 'fa fa-align-right',
571	],
572	],
573	'default' => 'left',
574	'prefix_class' => 'eael-dt-th-align-',
575	]
576	);
577
578	$this->end_controls_section();
579
580	/**
581	* -------------------------------------------
582	* Tab Style (Data Table Content Style)
583	* -------------------------------------------
584	*/
585	$this->start_controls_section(
586	'eael_section_data_table_content_style_settings',
587	[
588	'label' => esc_html__( 'Content Style', 'essential-addons-elementor' ),
589	'tab' => Controls_Manager::TAB_STYLE
590	]
591	);
592
593	$this->start_controls_tabs('eael_data_table_content_row_cell_styles');
594
595	$this->start_controls_tab('eael_data_table_odd_cell_style', ['label' => esc_html__( 'Normal', 'essential-addons-elementor')]);
596
597	$this->add_control(
598	'eael_data_table_content_odd_style_heading',
599	[
600	'label' => esc_html__( 'ODD Cell', 'essential-addons-elementor' ),
601	'type' => Controls_Manager::HEADING,
602	]
603	);
604
605	$this->add_control(
606	'eael_data_table_content_color_odd',
607	[
608	'label' => esc_html__( 'Color ( Odd Row )', 'essential-addons-elementor' ),
609	'type' => Controls_Manager::COLOR,
610	'default' => '#6d7882',
611	'selectors' => [
612	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n) td' => 'color: {{VALUE}};',
613	],
614	]
615	);
616
617	$this->add_control(
618	'eael_data_table_content_bg_odd',
619	[
620	'label' => esc_html__( 'Background ( Odd Row )', 'essential-addons-elementor' ),
621	'type' => Controls_Manager::COLOR,
622	'default' => '#f2f2f2',
623	'selectors' => [
624	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n) td' => 'background: {{VALUE}};',
625	],
626	]
627	);
628
629	$this->add_control(
630	'eael_data_table_content_even_style_heading',
631	[
632	'label' => esc_html__( 'Even Cell', 'essential-addons-elementor' ),
633	'type' => Controls_Manager::HEADING,
634	'separator' => 'before'
635	]
636	);
637
638	$this->add_control(
639	'eael_data_table_content_even_color',
640	[
641	'label' => esc_html__( 'Color ( Even Row )', 'essential-addons-elementor' ),
642	'type' => Controls_Manager::COLOR,
643	'default' => '#6d7882',
644	'selectors' => [
645	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n+1) td' => 'color: {{VALUE}};',
646	],
647	]
648	);
649
650	$this->add_control(
651	'eael_data_table_content_bg_even_color',
652	[
653	'label' => esc_html__( 'Background Color (Even Row)', 'essential-addons-elementor' ),
654	'type' => Controls_Manager::COLOR,
655	'default' => '',
656	'selectors' => [
657	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n+1) td' => 'background-color: {{VALUE}};',
658	],
659	]
660	);
661
662	$this->add_group_control(
663	Group_Control_Border::get_type(),
664	[
665	'name' => 'eael_data_table_cell_border',
666	'label' => esc_html__( 'Border', 'essential-addons-elementor' ),
667	'selector' => '{{WRAPPER}} .eael-data-table tbody tr td',
668	'separator' => 'before'
669	]
670	);
671
672	$this->add_responsive_control(
673	'eael_data_table_each_cell_padding',
674	[
675	'label' => esc_html__( 'Padding', 'essential-addons-elementor' ),
676	'type' => Controls_Manager::DIMENSIONS,
677	'size_units' => [ 'px', 'em' ],
678	'selectors' => [
679	'{{WRAPPER}} .eael-data-table tbody tr td' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
680	],
681	]
682	);
683
684	$this->end_controls_tab();
685
686	$this->start_controls_tab('eael_data_table_odd_cell_hover_style', ['label' => esc_html__( 'Hover', 'essential-addons-elementor')]);
687
688	$this->add_control(
689	'eael_data_table_content_hover_color_odd',
690	[
691	'label' => esc_html__( 'Color ( Odd Row )', 'essential-addons-elementor' ),
692	'type' => Controls_Manager::COLOR,
693	'selectors' => [
694	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n) td:hover' => 'color: {{VALUE}};',
695	],
696	]
697	);
698
699	$this->add_control(
700	'eael_data_table_content_hover_bg_odd',
701	[
702	'label' => esc_html__( 'Background ( Odd Row )', 'essential-addons-elementor' ),
703	'type' => Controls_Manager::COLOR,
704	'selectors' => [
705	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n) td:hover' => 'background: {{VALUE}};',
706	],
707	]
708	);
709
710	$this->add_control(
711	'eael_data_table_content_even_hover_style_heading',
712	[
713	'label' => esc_html__( 'Even Cell', 'essential-addons-elementor' ),
714	'type' => Controls_Manager::HEADING,
715	]
716	);
717
718	$this->add_control(
719	'eael_data_table_content_hover_color_even',
720	[
721	'label' => esc_html__( 'Color ( Even Row )', 'essential-addons-elementor' ),
722	'type' => Controls_Manager::COLOR,
723	'default' => '#6d7882',
724	'selectors' => [
725	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n+1) td:hover' => 'color: {{VALUE}};',
726	],
727	]
728	);
729
730	$this->add_control(
731	'eael_data_table_content_bg_even_hover_color',
732	[
733	'label' => esc_html__( 'Background Color (Even Row)', 'essential-addons-elementor' ),
734	'type' => Controls_Manager::COLOR,
735	'default' => '',
736	'selectors' => [
737	'{{WRAPPER}} .eael-data-table tbody > tr:nth-child(2n+1) td:hover' => 'background-color: {{VALUE}};',
738	],
739	]
740	);
741
742	$this->end_controls_tab();
743
744	$this->end_controls_tabs();
745
746	$this->add_group_control(
747	Group_Control_Typography::get_type(),
748	[
749	'name' => 'eael_data_table_content_typography',
750	'selector' => '{{WRAPPER}} .eael-data-table tbody tr td'
751	]
752	);
753
754	$this->add_control(
755	'eael_data_table_content_link_typo',
756	[
757	'label' => esc_html__( 'Link Color', 'essential-addons-elementor' ),
758	'type' => Controls_Manager::HEADING,
759	'separator' => 'before'
760	]
761	);
762
763	/* Table Content Link */
764	$this->start_controls_tabs( 'eael_data_table_link_tabs' );
765
766	// Normal State Tab
767	$this->start_controls_tab( 'eael_data_table_link_normal', [ 'label' => esc_html__( 'Normal', 'essential-addons-elementor' ) ] );
768
769	$this->add_control(
770	'eael_data_table_link_normal_text_color',
771	[
772	'label' => esc_html__( 'Text Color', 'essential-addons-elementor' ),
773	'type' => Controls_Manager::COLOR,
774	'default' => '#c15959',
775	'selectors' => [
776	'{{WRAPPER}} .eael-data-table-wrap table td a' => 'color: {{VALUE}};',
777	],
778	]
779	);
780
781	$this->end_controls_tab();
782
783	// Hover State Tab
784	$this->start_controls_tab( 'eael_data_table_link_hover', [ 'label' => esc_html__( 'Hover', 'essential-addons-elementor' ) ] );
785
786	$this->add_control(
787	'eael_data_table_link_hover_text_color',
788	[
789	'label' => esc_html__( 'Text Color', 'essential-addons-elementor' ),
790	'type' => Controls_Manager::COLOR,
791	'default' => '#6d7882',
792	'selectors' => [
793	'{{WRAPPER}} .eael-data-table-wrap table td a:hover' => 'color: {{VALUE}};',
794	],
795	]
796	);
797
798	$this->end_controls_tab();
799
800	$this->end_controls_tabs();
801
802	$this->add_responsive_control(
803	'eael_data_table_content_alignment',
804	[
805	'label' => esc_html__( 'Content Alignment', 'essential-addons-elementor' ),
806	'type' => Controls_Manager::CHOOSE,
807	'label_block' => true,
808	'options' => [
809	'left' => [
810	'title' => esc_html__( 'Left', 'essential-addons-elementor' ),
811	'icon' => 'fa fa-align-left',
812	],
813	'center' => [
814	'title' => esc_html__( 'Center', 'essential-addons-elementor' ),
815	'icon' => 'fa fa-align-center',
816	],
817	'right' => [
818	'title' => esc_html__( 'Right', 'essential-addons-elementor' ),
819	'icon' => 'fa fa-align-right',
820	],
821	],
822	'default' => 'left',
823	'prefix_class' => 'eael-dt-td-align-',
824	]
825	);
826	$this->end_controls_section();
827
828
829	/**
830	* -------------------------------------------
831	* Responsive Style (Data Table Content Style)
832	* -------------------------------------------
833	*/
834	$this->start_controls_section(
835	'eael_section_data_table_responsive_style_settings',
836	[
837	'label' => esc_html__( 'Responsive Options', 'essential-addons-elementor' ),
838	'devices' => [ 'tablet', 'mobile' ],
839	'tab' => Controls_Manager::TAB_STYLE
840	]
841	);
842
843	$this->add_control(
844	'eael_enable_responsive_header_styles',
845	[
846	'label' => __( 'Enable Responsive Table', 'essential-addons-elementor' ),
847	'description' => esc_html__( 'If enabled, table header will be automatically responsive for mobile.', 'essential-addons-elementor' ),
848	'type' => Controls_Manager::SWITCHER,
849	'label_on' => esc_html__( 'Yes', 'essential-addons-elementor' ),
850	'label_off' => esc_html__( 'No', 'essential-addons-elementor' ),
851	'return_value' => 'yes',
852	]
853	);
854
855	$this->add_responsive_control(
856	'mobile_table_header_width',
857	[
858	'label' => __( 'Width', 'essential-addons-elementor' ),
859	'type' => Controls_Manager::SLIDER,
860	'default' => [
861	'size' => 100,
862	'unit' => 'px',
863	],
864	'size_units' => [ 'px' ],
865	'range' => [
866	'px' => [
867	'min' => 1,
868	'max' => 200,
869	],
870	],
871	'selectors' => [
872	'{{WRAPPER}} .eael-data-table .th-mobile-screen' => 'flex-basis: {{SIZE}}px;',
873	],
874	'condition' => [
875	'eael_enable_responsive_header_styles' => 'yes'
876	]
877	]
878	);
879
880	$this->add_responsive_control(
881	'eael_data_table_responsive_header_color',
882	[
883	'label' => esc_html__( 'Color', 'essential-addons-elementor' ),
884	'type' => Controls_Manager::COLOR,
885	'default' => '',
886	'selectors' => [
887	'{{WRAPPER}} .eael-data-table tbody .th-mobile-screen' => 'color: {{VALUE}};'
888	],
889	'condition' => [
890	'eael_enable_responsive_header_styles' => 'yes'
891	]
892	]
893	);
894
895	$this->add_responsive_control(
896	'eael_data_table_responsive_header_bg_color',
897	[
898	'label' => esc_html__( 'Background Color', 'essential-addons-elementor' ),
899	'type' => Controls_Manager::COLOR,
900	'default' => '',
901	'selectors' => [
902	'{{WRAPPER}} .eael-data-table tbody .th-mobile-screen' => 'background-color: {{VALUE}};'
903	],
904	'condition' => [
905	'eael_enable_responsive_header_styles' => 'yes'
906	]
907	]
908	);
909
910	$this->add_group_control(
911	Group_Control_Typography::get_type(),
912	[
913	'name' => 'eael_data_table_responsive_header_typography',
914	'selector' => '{{WRAPPER}} .eael-data-table .th-mobile-screen',
915	'condition' => [
916	'eael_enable_responsive_header_styles' => 'yes'
917	]
918	]
919	);
920
921	$this->add_group_control(
922	Group_Control_Border::get_type(),
923	[
924	'name' => 'eael_data_table_responsive_header_border',
925	'label' => esc_html__( 'Border', 'essential-addons-elementor' ),
926	'selector' => '{{WRAPPER}} tbody td .th-mobile-screen',
927	'condition' => [
928	'eael_enable_responsive_header_styles' => 'yes'
929	]
930	]
931	);
932
933
934	$this->end_controls_section();
935
936	}
937
938
939	protected function render( ) {
940
941	$settings = $this->get_settings();
942
943	$table_tr = [];
944	$table_td = [];
945
946	// Storing Data table content values
947	foreach( $settings['eael_data_table_content_rows'] as $content_row ) {
948
949	$row_id = uniqid();
950	if( $content_row['eael_data_table_content_row_type'] == 'row' ) {
951	$table_tr[] = [
952	'id' => $row_id,
953	'type' => $content_row['eael_data_table_content_row_type'],
954	];
955
956	}
957	if( $content_row['eael_data_table_content_row_type'] == 'col' ) {
958	$target = $content_row['eael_data_table_content_row_title_link']['is_external'] ? 'target="_blank"' : '';
959	$nofollow = $content_row['eael_data_table_content_row_title_link']['nofollow'] ? 'rel="nofollow"' : '';
960
961	$table_tr_keys = array_keys( $table_tr );
962	$last_key = end( $table_tr_keys );
963
964	$tbody_content = ($content_row['eael_data_table_content_type'] == 'editor') ? $content_row['eael_data_table_content_row_content'] : $content_row['eael_data_table_content_row_title'];
965
966	$table_td[] = [
967	'row_id' => $table_tr[$last_key]['id'],
968	'type' => $content_row['eael_data_table_content_row_type'],
969	'content_type' => $content_row['eael_data_table_content_type'],
970	'template' => $content_row['eael_primary_templates_for_tables'],
971	'title' => $tbody_content,
972	'link_url' => $content_row['eael_data_table_content_row_title_link']['url'],
973	'link_target' => $target,
974	'nofollow' => $nofollow,
975	'colspan' => $content_row['eael_data_table_content_row_colspan'],
976	'rowspan' => $content_row['eael_data_table_content_row_rowspan'],
977	'tr_class' => $content_row['eael_data_table_content_row_css_class'],
978	'tr_id' => $content_row['eael_data_table_content_row_css_id']
979	];
980	}
981	}
982	$table_th_count = count($settings['eael_data_table_header_cols_data']);
983	$this->add_render_attribute('eael_data_table_wrap', [
984	'class' => 'eael-data-table-wrap',
985	'data-table_id' => esc_attr($this->get_id()),
986	'data-custom_responsive' => $settings['eael_enable_responsive_header_styles'] ? 'true' : 'false'
987	]);
988	$this->add_render_attribute('eael_data_table', [
989	'class' => [ 'tablesorter eael-data-table', esc_attr($settings['table_alignment']) ],
990	'id' => 'eael-data-table-'.esc_attr($this->get_id())
991	]);
992
993	$this->add_render_attribute( 'td_content', [
994	'class' => 'td-content'
995	]);
996
997	if('yes' == $settings['eael_enable_responsive_header_styles']) {
998	$this->add_render_attribute('eael_data_table_wrap', 'class', 'custom-responsive-option-enable');
999	}
1000
1001	?>
1002	<div <?php echo $this->get_render_attribute_string('eael_data_table_wrap'); ?>>
1003	<table <?php echo $this->get_render_attribute_string('eael_data_table'); ?>>
1004	<thead>
1005	<tr class="table-header">
1006	<?php $i = 0; foreach( $settings['eael_data_table_header_cols_data'] as $header_title ) :
1007	$this->add_render_attribute('th_class'.$i, [
1008	'class' => [ $header_title['eael_data_table_header_css_class'] ],
1009	'id' => $header_title['eael_data_table_header_css_id'],
1010	'colspan' => $header_title['eael_data_table_header_col_span']
1011	]);
1012	?>
1013	<th <?php echo $this->get_render_attribute_string('th_class'.$i); ?>>
1014	<?php
1015	if( $header_title['eael_data_table_header_col_icon_enabled'] == 'true' && $header_title['eael_data_table_header_icon_type'] == 'icon' ) :
1016	$this->add_render_attribute('table_header_col_icon'.$i, [
1017	'class' => [ 'data-header-icon', esc_attr( $header_title['eael_data_table_header_col_icon'] )]
1018	]);
1019	?>
1020	<i <?php echo $this->get_render_attribute_string('table_header_col_icon'.$i); ?>></i>
1021	<?php endif; ?>
1022	<?php
1023	if( $header_title['eael_data_table_header_col_icon_enabled'] == 'true' && $header_title['eael_data_table_header_icon_type'] == 'image' ) :
1024	$this->add_render_attribute('data_table_th_img'.$i, [
1025	'src' => esc_url( $header_title['eael_data_table_header_col_img']['url'] ),
1026	'class' => 'eael-data-table-th-img',
1027	'style' => "width:{$header_title['eael_data_table_header_col_img_size']}px;",
1028	'alt' => esc_attr( $header_title['eael_data_table_header_col'] )
1029	]);
1030	?><img <?php echo $this->get_render_attribute_string('data_table_th_img'.$i); ?>><?php endif; ?><?php echo __( $header_title['eael_data_table_header_col'], 'essential-addons-elementor' ); ?></th>
1031	<?php $i++; endforeach; ?>
1032	</tr>
1033	</thead>
1034	<tbody>
1035	<?php for( $i = 0; $i < count( $table_tr ); $i++ ) : ?>
1036	<tr>
1037	<?php
1038	for( $j = 0; $j < count( $table_td ); $j++ ) {
1039	if( $table_tr[$i]['id'] == $table_td[$j]['row_id'] ) {
1040
1041	$this->add_render_attribute('table_inside_td'.$i.$j,
1042	[
1043	'colspan' => $table_td[$j]['colspan'] > 1 ? $table_td[$j]['colspan'] : '',
1044	'rowspan' => $table_td[$j]['rowspan'] > 1 ? $table_td[$j]['rowspan'] : '',
1045	'class' => $table_td[$j]['tr_class'],
1046	'id' => $table_td[$j]['tr_id']
1047	]
1048	);
1049	?>
1050	<?php if( $table_td[$j]['content_type'] == 'textarea' && !empty($table_td[$j]['link_url']) ) : ?>
1051	<td <?php echo $this->get_render_attribute_string('table_inside_td'.$i.$j); ?>>
1052	<div class="td-content-wrapper">
1053	<a href="<?php echo esc_url( $table_td[$j]['link_url'] ); ?>" <?php echo $table_td[$j]['link_target'] ?> <?php echo $table_td[$j]['nofollow'] ?>><?php echo wp_kses_post($table_td[$j]['title']); ?></a>
1054	</div>
1055	</td>
1056
1057	<?php elseif( $table_td[$j]['content_type'] == 'template' && ! empty($table_td[$j]['template']) ) : ?>
1058	<td <?php echo $this->get_render_attribute_string('table_inside_td'.$i.$j); ?>>
1059	<div class="td-content-wrapper">
1060	<div <?php echo $this->get_render_attribute_string('td_content'); ?>>
1061	<?php
1062	$eael_frontend = new Frontend;
1063	echo $eael_frontend->get_builder_content( intval($table_td[$j]['template']), true );
1064	?>
1065	</div>
1066	</div>
1067	</td>
1068	<?php else: ?>
1069	<td <?php echo $this->get_render_attribute_string('table_inside_td'.$i.$j); ?>>
1070	<div class="td-content-wrapper"><div <?php echo $this->get_render_attribute_string('td_content'); ?>><?php echo $table_td[$j]['title']; ?></div></div>
1071	</td>
1072	<?php endif; ?>
1073	<?php
1074	}
1075	}
1076	?>
1077	</tr>
1078	<?php endfor; ?>
1079	</tbody>
1080	</table>
1081	</div>
1082	<?php
1083	}
1084
1085	protected function content_template() { }
1086	}
1087
1088
1089	Plugin::instance()->widgets_manager->register_widget_type( new Widget_Eael_Data_Table() );