Project Task

gistfile1.php

<?php

function is_site_admin(){
    return in_array('administrator',  wp_get_current_user()->roles);
}

add_shortcode('output_data', 'solution_for_rgb_code_test_task_by_kyatipov');
function solution_for_rgb_code_test_task_by_kyatipov() {
	
	// Specification from task
	
	if ( !is_site_admin() ) return;
	
	$args = array(
		'orderby' => 'user_nicename',
		'order'   => 'ASC'
	);
	
	$users = get_users( $args );

	echo '<table id="user_table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Role</th>
            </tr>
        </thead>
		<tbody>';
	foreach ( $users as $user ) {
		echo '<tr>
		<td>' .esc_html( $user->display_name ). '</td>
		<td>' .esc_html( $user->user_email ). '</td>
		<td>' .$user->role. '</td>
		</tr>';
	}
echo '</tbody>
        <tfoot>
            <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Role</th>
            </tr>
        </tfoot>
    </table>';

	?>

<!-- Include css -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
  
<!-- Include JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

<!-- Initiliaze Datatable -->
<script>
	jQuery(document).ready( function ($) {
		$('#user_table').DataTable({
			pageLength: 10,
			lengthChange: false,
			initComplete: function () {
            this.api().columns([2]).every( function (d) {//THis is used for specific column
                var column = this;
                var theadname = $('#user_table th').eq([d]).text();
                var select = $('<select class="mx-1"><option value="'+d+'">'+theadname+': All</option></select>')
                    .insertBefore( '#user_table' )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    var val = $('<div/>').html(d).text();
                    select.append( '<option value="'+val+'">'+val+'</option>' )
                } );
            } );
        }
		});
	} );
</script>
<?php
}





// Some helper functions for jQuery
function is_enqueued_script( $script ) {
    return isset( $GLOBALS['wp_scripts']->registered[ $script ] );
}
if ( !is_enqueued_script('jquery') ) {
	wp_enqueue_script('jquery');
}