Hi,
I would like to search in French without accent, by example I could find "été" with searching "ete" or "été" or "éte"
It is possible with datatables ?

Thank you

CHECK NAVIGATOR NETWORK -> XHR -> PARAM

_ 1535899393400 columns[0][data] 0 columns[0][name] columns[0][orderable] true columns[0][search][regex] false columns[0][search][value] columns[0][searchable] true columns[1][data] 1 columns[1][name] columns[1][orderable] true columns[1][search][regex] false columns[1][search][value] columns[1][searchable] true columns[2][data] 2 columns[2][name] columns[2][orderable] true columns[2][search][regex] false columns[2][search][value] columns[2][searchable] true columns[3][data] 3 columns[3][name] columns[3][orderable] true columns[3][search][regex] false columns[3][search][value] columns[3][searchable] true columns[4][data] 4 columns[4][name] columns[4][orderable] true columns[4][search][regex] false columns[4][search][value] columns[4][searchable] true columns[5][data] 5 columns[5][name] columns[5][orderable] true columns[5][search][regex] false columns[5][search][value] columns[5][searchable] true columns[6][data] 6 columns[6][name] columns[6][orderable] true columns[6][search][regex] false columns[6][search][value] columns[6][searchable] true columns[7][data] 7 columns[7][name] columns[7][orderable] true columns[7][search][regex] false columns[7][search][value] columns[7][searchable] true columns[8][data] 8 columns[8][name] columns[8][orderable] true columns[8][search][regex] false columns[8][search][value] columns[8][searchable] true draw 1 length 50 order[0][column] 0 order[0][dir] asc search[regex] false search[value] start 0

CHECK NAVIGATOR NETWORK -> XHR -> RESPONSE
EMPTY

how to solve this problem?

I have an initial ordering that works they way that most users want. However, users may decide to try their own ordering by using the column controls. I have a button (Default Sort) that is intended to restore the table to the initial state. However, it only seems to partially work. The click call back happens and some ordering related to the ordering desired happens but the resulting ordering seems to retain some of the user's column selections. (The default ordering is based on some invisible columns).

const defaultOrder = [[10, 'asc'], [11, 'asc'], [9, 'asc'], [3, 'asc']];

const targetTable = $targetTable.DataTable({
            paging: false,
            dom: 'ritri',
            order: defaultOrder,
            columns: [
...
       $('#btn-default-sort').on('click', function () {
            targetTable.order(defaultOrder).draw();
        });

The DataTables Debugger shows no failures or warnings. (Data uploaded to https://debug.datatables.net/otuzob ).

How can I get get the original ordering?

Hello,

This question was never answered and I am also looking for the answer. Have tried adding dropup: true with no luck. Tried adding className : "dropup" with no luck.

https://datatables.net/forums/discussion/39943/colvis-dropup-instead-of-dropdown

Thanks,

Tim

I currently use the server side events to log changes, as described here:

function logChange ( $db, $action, $id, $values ) {
    $db->insert( 'staff-log', array(
        'user'   => $_SESSION['username'],
        'action' => $action,
        'values' => json_encode( $values ),
        'row'    => $id,
        'when'   => date('c')
    ) );
}
 
Editor::inst( $db, 'staff' )
    ->fields(
        Field::inst( 'first_name' ),
        Field::inst( 'last_name' ),
        Field::inst( 'position' ),
        Field::inst( 'email' ),
        Field::inst( 'office' )
    )
    ->on( 'postCreate', function ( $editor, $id, $values, $row ) {
        logChange( $editor->db(), 'create', $id, $values );
    } )
    ->on( 'postEdit', function ( $editor, $id, $values, $row ) {
        logChange( $editor->db(), 'edit', $id, $values );
    } )
    ->on( 'postRemove', function ( $editor, $id, $values ) {
        logChange( $editor->db(), 'delete', $id, $values );
    } )
    ->process( $_POST )
    ->json();

However, it would be really useful to also log errors associated with datatables events. For example, the information which appears if you have ->debug( true ) enabled or JSON response errors.

Has anyone else tried/achieved this? I am just at the thinking it through stage so was wondering if anyone had any experience?

Thanks

Hi -
I am trying to get the examples running for a Firebird database. I have managed to get it to connect to the database, I edited the staff.php file to include fields relevant to my situaiton, but it just throws an sql exception complaining reporting..

** "error code = -206 Column unknown id At line 1, column 1.."**

I cant see a reference to a field called "id" in staff.php or my html markup that calls the php file. Quite honestly, I find the whole system of related PhP files objects very confusing. Although the "manual" mentions that there is an Editor->where function but only a snippet of code that shows how to use it (still not sure where to call or configure this method.)

This is my version of the "staff.php" file

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'INVOICE' )
    ->fields(
        Field::inst( 'TRANSID' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'TRANSID REQUIRED' ) 
            ) ),
        Field::inst( 'CUSTNAME' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A  name is required' )  
            ) ),

        Field::inst( 'TRANSDATE' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
    )
    ->process( $_POST )
    ->json();

I have edited the calling html file with the same fields defined for the datatabe object.

Any hints or idea as to why the "id" field error is being thrown would be much appreciated.
Thanks
Dave.

I'm using the datatable in a SPA (single page application) web and it works fine in the first table (that uses the fixed header) from the system.

But when I go to other page that uses datatable, the page work fine, but on the bottom of the page you have a "fixed header" strange. Is it a datatable bug?

I'm using the scripts: DataTables 1.10.18, FixedColumns 3.2.5, FixedHeader 3.1.4, Responsive 2.2.2

Does the ExcelHtml5 functionality can export Child Rows ?

Hello,

When I use DataTable with colreorder 1.5.4 and colvis, columns showed in colvis buttons is not correctly ordered.

The jsfiddle show my problem : http://jsfiddle.net/yh0gsep9/

And this pucture :

Thanks,

Charly

Hi all together,

I combined the custom rendering and the Data source change event examples from this page: https://datatables.net/extensions/rowgroup/examples/

Instead of average salary in the custom rendering example, I used the sum() function to have the sum of salary for each city.

I now need to have a sort option which will sort the groups using the summed up value. When I now click on the last column the single elements in each city will be ordered, but I need the whole groups ordered using the summed up values.

So, e.g. London is the city with the highest over all salaries, the "London group" should be up, next the second highest salary group and so on.

This is my current script: https://pastebin.com/KkwYcmNG

Hope you can help me out here! I tried to built an example in jsfiddle, but I wasn't able to get the custom rendering example running on jsfiddle. If you have a jsfiddle link with this example running I am happy to add all further details of my code.

Thank you so much!

I am trying to prevent the update of one of the fields, from my understanding it is possible to do this using Field().set().

From the docs within the field.ts file:

/**
* Set the field's `set` configuration.
*
* A field can be marked as read only using this option, to be set only
* during an create or edit action or to be set during both actions. This
* provides the ability to have fields that are only set when a new row is
* created (for example a "created" time stamp).
*
* @param {(boolean|SetType)} flag Set flag.
* @returns {Field} Self for chaining.
*/

So we can pass a boolean value or a SetType, the set type I assume could be one of:

/**
 * Set types
 * @export
 */
export enum SetType {
  /** Do not set data */
  None,

  /** Write to database on both create and edit */
  Both,

  /** Write to the database only on create */
  Create,

  /** Write to the database only on edit */
  Edit
}

Seems easy enough, so I have tried:

new Field('somefield').set('Create')

But the record is written during an update. So I tried:

new Field('somefield').set({ SetType: 'Create' })

But this reacts in the same way. If I do:

new Field('somefield').set(false)

Sure enough, the record is no longer written during a create or update.

So it seems that it works when passing a boolean value but when you try to send a string value like the ones in SetType it actually treats this as Both?

How can I make this work? :-)

Data Table
`

$(document).ready(function() {

  var advance = $('#advanced-table').DataTable( {


  dom: 'B<"clear">lfrtip',

"processing": true,
"serverSide": true,

  "ajax":{
                    url :"server_processing.php ", // json datasource
                    type: "post",  // method  , by default get

                },



      mark: true,
       columnDefs: [
        {
            targets: 1,
            className: 'noVis',

        },
        {
            "targets": [ 6 ],
            "visible": false
        },
        {
            "targets": [ 7 ],
            "visible": false
        }   

    ],

buttons: {
    name: 'primary',

    buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'  ]
},




      //"language": {
            //"url": "http://cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json"
       // } 


} );


$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = advance.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
} );  

// Setup - add a text input to each footer cell
$('#advanced-table tfoot th').each( function () {
var title = $(this).text();
$(this).html( '

' );
} );
// Apply the search
advance.columns().every( function () {
var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );



} );`

server_processing.php

<?php /* Database connection start */ $servername = "localhost"; $username = "root"; $password = ""; $dbname = "entt"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); /* Database connection end */ // storing request (ie, get/post) global array to a variable $requestData= $_REQUEST; $columns = array( // datatable column index => database column name 0 =>'ID', 1 =>'Nome', 2 => 'E-mail', 4 => 'Cidade', 5 => 'Estado', 6 => 'Cep', 7 => 'Data', 8 => 'Hora', 9 => 'Status' ); // getting total number records without any search $sql = "SELECT id, email, nome, cidade, estado, cep, data, hora "; $sql.=" FROM usuarios"; $query=mysqli_query($conn, $sql) or die("server_processing.php: get usuarios"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows. $sql = "SELECT id, email, nome, cidade, estado, cep, data, hora "; $sql.=" FROM usuarios WHERE 1=1"; if( !empty($requestData['search']['value']) ) { // if there is a search parameter, $requestData['search']['value'] contains search parameter $sql.=" AND ( id LIKE '".$requestData['search']['value']."%' "; $sql.=" OR nome LIKE '".$requestData['search']['value']."%' "; $sql.=" OR email LIKE '".$requestData['search']['value']."%' "; $sql.=" OR cidade LIKE '".$requestData['search']['value']."%' )"; $sql.=" OR estado LIKE '".$requestData['search']['value']."%' )"; $sql.=" OR cep LIKE '".$requestData['search']['value']."%' )"; $sql.=" OR data LIKE '".$requestData['search']['value']."%' )"; $sql.=" OR hora LIKE '".$requestData['search']['value']."%' )"; } $query=mysqli_query($conn, $sql) or die("server_processing.php: get usuarios"); $totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result. $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; /* $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc */ $query=mysqli_query($conn, $sql) or die("server_processing.php: get usuarios"); $data = array(); while( $row=mysqli_fetch_array($query) ) { // preparing an array $nestedData=array(); $nestedData[] = $row["id"]; $nestedData[] = $row["nome"]; $nestedData[] = $row["email"]; $nestedData[] = $row["cidade"]; $nestedData[] = $row["estado"]; $nestedData[] = $row["cep"]; $nestedData[] = $row["data"]; $nestedData[] = $row["hora"]; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. "recordsTotal" => intval( $totalData ), // total number of records "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData "data" => $data // total data array ); echo json_encode($json_data); // send data as json format ?>

DataTables warning: table id=advanced-table - Requested unknown parameter '8' for row 0, column 8. For more information about this error, please see http://datatables.net/tn/4

Hi,
Each time i press the button to order a column the start parameter reset to 0 and also get my pagination back to the page 1

For exemple i change page and my start point change 0 to 10 to 20 to 30 etc...
but when i press the button to order a column the start point send to 0

is there a way to add a property to the object to say each time the order button is press to not reset the start point to 0?

i hope you understand

ps: sorry for my bad english

So, I'm using an invisible column as a tool tip in another column. The invisible column has lots of null values and I want to display empty or nothing if the value is null.
Here is what I have.

"render": function (data, type, row, meta) {
id (type=== 'display') {
data = 'blablabla... + row[myInvisiblecolumn] + ...
}
return data;
}

How can I set null to empty? in redner function while concatenating strings?

Thanks.

Hi all,

I have created a GitHub repository with a reusable Flask back-end for server-side Datatables:

https://github.com/SergioLlana/datatables-flask-serverside

I hope it will help someone. Feedback is welcomed!
Sergio.

I've got a table and I'd like to be able to add a sum of hours in the footer, and have it update as the table filters change.

any thoughts/examples that are relevant?

Hi everyone

Don't know if its a repeated question, but I'm having this problem. When i export to PDF got repeated footer for each column. Everything loads well, the trouble it's when i export to PDF.

Tried adding like a row, but doesn't allow colspan. Gave me errors

I'm using: DataTables 1.10.16 with this files:
"assets/css/jquery.dataTables.min.css",
"assets/css/buttons.dataTables.min.css",
"assets/css/dataTables.bootstrap4.min.css",
"assets/css/buttons.bootstrap4.min.css",
"assets/js/jquery-1.12.4.js",
"assets/js/jquery.dataTables.min.js",
"assets/js/dataTables.bootstrap4.js",
"assets/js/dataTables.buttons.min.js",
"assets/js/buttons.flash.min.js",
"assets/js/jszip.min.js",
"assets/js/pdfmake.min.js",
"assets/js/vfs_fonts.js",
"assets/js/buttons.html5.min.js",
"assets/js/buttons.print.min.js"

Here's my code (Some values comes from variables).

------------- Dynamic Footer Code -------------

let footer = '
<tr class="dataFooter">
<th class="text-right" colspan="5">
<h5 class="d-inline-block mr-2">Distancia recorrida de la flota <span class="badge badge-secondary ml-2">1.768km</span></h5>
<h5 class="d-inline-block">Total Litros <span class="badge badge-secondary">302 Litros</span></h5>
</th>
</tr>
';
$('.dataFooter').remove();
$("#datainfo").append( $('<tfoot/>').append( footer ));

------------- Code -------------

$('#datainfo').DataTable({
dom: 'lfrBtip',
lengthMenu: [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]],
responsive: true,
serverSide: false,
processing: false,
paging: true,
data: this.TableData, //Contenido de la tabla
columns: this.t_columns,
pagingType: "full_numbers",
bAutoWidth: false,
language: { url: "/assets/i18/Spanish.json" },
lengthChange: true,
initComplete: function(settings, json) {
$('.dataTables_wrapper .dataTables_filter input, .dataTables_length select').addClass('form-control');
},
rowCallback: (row: Node, data: any | Object, index: number) => {
//Genera las acciones de los botones
this.doAction(row);
return row;
},
columnDefs: [
{
visible: false,
targets: Agrupar.target
}
],
drawCallback: function ( settings ) {
//Para agrupar por columnas
if(Agrupar.estado){
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column( Agrupar.target, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
});
}
},
buttons: [
{
className: 'btn btn-secondary buttons-html5',
exportOptions: { columns: this.exp_columns },
extend: 'excel',
title: filename,
init: function(api, node, config) {
$(node).removeClass('dt-button')
},
footer: true
},
{
className: 'btn btn-secondary buttons-html5',
exportOptions: {
columns: this.exp_columns,
search: 'applied',
order: 'applied'
},
extend: 'pdfHtml5',
bProcessing: true,
orientation: 'landscape',
pageSize: 'A4', //A3 , A5 , A6 , legal , letter
title: filename,
footer: true,
header: {
margin: 10,
columns: [
{
image: logo,
width: 40
},
{
margin: [10, 0, 0, 0],
text: 'Here goes the rest'
}
]
},
init: function(api, node, config) {
$(node).removeClass('dt-button');
},
customize: function ( doc ) {
//Remove the title created by datatTables
doc.content.splice(0,1);
// Set page margins [left,top,right,bottom] or [horizontal,vertical]
doc.pageMargins = [20,60,20,30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 7;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 7;
// Create a header object with 3 columns
// Left side: Logo - Middle: brandname - Right side: A document title
doc['header']=(function() {
return {
columns: [
{
image: logo,
width: 80
},
{
alignment: 'left',
italics: true,
text: filename,
fontSize: 14,
margin: [10,0]
},
{
alignment: 'right',
fontSize: 12,
text: fecha
}
],
margin: 20
}
});
// Create a footer object with 2 columns
// Left side: report creation date - Right side: current page and total pages
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'left',
text: [footright]
},
{
alignment: 'right',
text: [ 'Página ', { text: page.toString() }, ' de ', { text: pages.toString() }]
}
],
// Set page margins [left,top,right,bottom] or [horizontal,vertical]
margin: [20, 5, 20, 20]
}
});
// Change dataTable layout (Table styling)
// To use predefined layouts uncomment the line below and comment the custom lines below
// doc.content[0].layout = 'lightHorizontalLines'; // noBorders , headerLineOnly
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .5; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 4; };
objLayout['paddingRight'] = function(i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
className: 'btn btn-secondary buttons-html5',
exportOptions: { columns: this.exp_columns },
extend: 'print',
text: 'Imprimir',
title: filename,
init: function(api, node, config) {
$(node).removeClass('dt-button')
},
footer: true
}
]
});

Hello!

I've been looking for a workaround on an issue I have been having, but I have not come up with anything yet. I am using a Datatable with the standard buttons (print, copy, export), but when I attempt to print or export the table the footer (which contains my sums of certain columns) is repeated under each column. I was able to find out that this is an issue that Datatables has with colspan (which I am currently using), but I haven't been able to find a way to make this feature work the way I want it to.

Any help would be greatly appreciated!

Here is my script:

$(document).ready(
    function () {
        $('#reportTable').DataTable(
        {

            dom: 'Blfript', // Blfrtip
            buttons:
            [
                {
                    extend: 'pdf',
                    footer: true,
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    orientation: 'landscape',
                    exportOptions:
                    {
                        columns: [0, 1, 3, 5]
                    }
                },
                {
                    extend: 'excel',
                    footer: true,
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'copy',
                    title: 'Report',
                    footer: true,
                    className: 'green glyphicon glyphicon-duplicate',
                    exportOptions:
                    {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7]
                    }
                },
                {
                    extend: 'print',
                    footer: true,
                    className: 'green glyphicon glyphicon-print',
                    text: 'Print',
                    title: ' ',
                    autoPrint: true,
                    orientation: 'landscape',
                    exportOptions:
                        {
                            columns: [0, 1, 3, 5]
                        }
                }
            ],
            "footerCallback": function (row, start, end, display)
            {
                var api = this.api(),data;

                // Remove the formatting to get integer data for summation
                var intVal = function (i)
                {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };                  

                // Total over all pages
                total = api
                    .column(5)
                    .data()

                    .reduce(function (a, b)
                    {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api
                    .column(5,
                        {
                            search: 'applied'
                        })
                    .data()
                    .length)
                        {
                            pageTotal = api
                            .column(5, 
                                {
                                    search: 'applied'
                                })
                    .data()
                    .reduce(function (a, b) 
                        {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }   
                
                // Total by category               
                var category = api.column(7).data().sort().unique().toArray();
                var totals = [];
                for (var i = 0; i < category.length; i++) totals.push(0);

                api.rows({ filter: 'applied' }).every(function ()
                {
                    var data = this.data();
                    totals[category.indexOf(data[7])] += intVal(data[5]);
                });

                // Remove any categories that have a "0" result
                html = [];            
                for (var j = 0; j < category.length; j++) {
                    if (totals[j] > 0) html.push(category[j] + ': ' + totals[j]);
                } 

                // Update footer
                $(api.column(5).footer()).html(html.length === 0 ? "" : html.join('</br>') + '</br>' + pageTotal.toFixed(2) + ' filtered hours ( ' + total.toFixed(2) + ' total hours)'); 
            }
        });
    }
);

Here is my html:

@* Displays the total within the footer *@
    <tfoot>
        <tr>
            <th></th>
            <th colspan="7" style="text-align:right">Total: 0.0</th>
            <th></th>
        </tr>
    </tfoot>

I've tried async await for default value, but it doesn't work

    { label: 'Number',  name: 'number',
      async def() {
        let resp = await fetch('{{@BASE}}/ajax/reference/new-id?type=' + type);
        return resp;
      }  
    },

The corresponding input in the editor contains '[object Promise]'

Hi,

I need to add a tool tip to multiple th header cells that also support sorting. I am using a Datatables 1.10.7 with a foundation 6 tool tip and it works fine on hover. We have a requirement to make it accessible for keyboard navigation. The table header row cells are accessible via keyboard but only to read the heading text and provide support for sorting. The keyboard access can't get to the tooltip within the header row cell.

Here is a sample table:

<table id="myTable" class="display hover">
    <thead>
        <tr>
            <th role="columnheader" style="min-width: 5em;" id="fname">First Name <span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="Employee first name"><img src="info.png" alt="help text"></span></th>
            <th role="columnheader" style="min-width: 6em;" id="lname">Last Name <span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="Employee last name"><img src="info.png" alt="help text"></span></th>
            <th role="columnheader" style="min-width: 6em;" id="Actions" class="no-sort">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fred</td>
            <td>Jones</td>
            <td><img src="edit.png" alt="Edit Employee"><img src="delete.png" alt="Delete Employee">
        </tr>
    </tbody>
</table>

Does anyone have suggestions on how to obtain keyboard access to the tooltip within the heading th cells that are sortable?

Please let me know if you need more information.

Thanks,

Leslie