How to make select cell focused in jquery datatable

Question

Im using Jquery data table

im using 3 fixedColumn when i press shift+tab from end row its navigating each cell but some cell are not focusable its showing half field which difficult identify which field user are entering. how to make focusable input field jquery data table?

Please refer below shift+tab video issue

$(document).ready(function() {
  let data = [];
  for (let i = 1; i <= 100; i++) {
    let row = [];
    for (let j = 1; j <= 20; j++) {
      row.push(`<input type='text' value='Row ${i} Col ${j}'>`);
    }
    data.push(row);
  }

  $('#example').DataTable({
    data: data,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      left: 3
    }
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Fixed 1</th>
      <th>Fixed 2</th>
      <th>Fixed 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
      <th>Column 16</th>
      <th>Column 17</th>
      <th>Column 18</th>
      <th>Column 19</th>
      <th>Column 20</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Hi @mplungjan, Thanks for you response, by seeing the discussions i think its not possible to make focusable cell when we used fixed column? — Afrose ahamed
– Afrose ahamed, Commented Feb 19 at 7:54
I hazard to guess because I don't know what the data is, but could this be an XY problem? In order to use dataTables, to do what you're looking for you're going to have to substantially change the code library. What's the purpose of being able to tab? I'm guessing data entry. Why do the columns need to be fixed? Do you need to use dataTables? This obviously wont work on a cell phone. What are you trying to do? What are your constraints? Well framed question Afrose, but if you do a more "summary version" of the problem you'll definitely get help here — wahwahwah
– wahwahwah, Commented Feb 23 at 17:02

Raghavendra N · Accepted Answer · 2025-02-24 10:27:44Z

2

You can use a simple trick to scroll to the focused cell.

Calculate the boundary of the last fixed column.
On input focus event, check if the focused cell is behind the fixed columns (by comparing the getBoundingClientRect values) and if yes then scroll it back to the "view".

Here is the script:

let lastFixedTd = $('tr:first-child td.dtfc-fixed-start').last()[0];
let leftPoint = lastFixedTd.getBoundingClientRect().left + lastFixedTd.getBoundingClientRect().width;

$('input').on('focus', (e) => {
  if ($(e.target).closest('td').hasClass('dtfc-fixed-start')) return;

  let left = e.target.getBoundingClientRect().left;
  let width = e.target.getBoundingClientRect().width;

  if(Math.round(left) < Math.round(leftPoint)) {
    console.log('Not visible!')

    let scrollEl = document.getElementsByClassName('dt-scroll-body')[0];
    if(Math.round(left + width) > Math.round(leftPoint)) {
      // Handle the case when the cell is partly hidden
      scrollEl.scrollLeft = scrollEl.scrollLeft - (leftPoint - left);
    } else {
      scrollEl.scrollLeft = scrollEl.scrollLeft - (left + leftPoint) + width;
    }
  } else {
    console.log('Visible!')
  }
})

Full code snippet:

$(document).ready(function() {
      let data = [];
      for (let i = 1; i <= 100; i++) {
        let row = [];
        for (let j = 1; j <= 20; j++) {
          row.push(`<input type='text' value='Row ${i} Col ${j}'>`);
        }
        data.push(row);
      }

      $('#example').DataTable({
        data: data,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
          left: 3
        }
      });

      let lastFixedTd = $('tr:first-child td.dtfc-fixed-start').last()[0];
      let leftPoint = lastFixedTd.getBoundingClientRect().left + lastFixedTd.getBoundingClientRect().width;

      $('input').on('focus', (e) => {
        if ($(e.target).closest('td').hasClass('dtfc-fixed-start')) return;

        let left = e.target.getBoundingClientRect().left;
        let width = e.target.getBoundingClientRect().width;


        if(Math.round(left) < Math.round(leftPoint)) {
          console.log('Not visible!')

          let scrollEl = document.getElementsByClassName('dt-scroll-body')[0];
          if(Math.round(left + width) > Math.round(leftPoint)) {
            scrollEl.scrollLeft = scrollEl.scrollLeft - (leftPoint - left);
          } else {
            scrollEl.scrollLeft = scrollEl.scrollLeft - (left + leftPoint) + width;
          }
        } else {
          console.log('Visible!')
        }
      })
    });

<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Fixed 1</th>
      <th>Fixed 2</th>
      <th>Fixed 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
      <th>Column 16</th>
      <th>Column 17</th>
      <th>Column 18</th>
      <th>Column 19</th>
      <th>Column 20</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

edited Feb 24 at 10:27

answered Feb 23 at 10:04

Raghavendra N

9,7132 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wahwahwah Feb 23 at 17:20

This still jumps around :/ smart answer though.

Afrose ahamed Feb 24 at 7:35

Hi @wahwahwah thanks your response, datatables wll not work great in mobile, my use case is - im using jquery datatable in visualforce i need fixed column options and its dataentry concept only, user should need to enter multiple data entry also im using dependent picklist. in my case what raghavendra N solved the issue,

Afrose ahamed Feb 24 at 7:36

Hi @wahwahwah just curious is there any mobile friendly library available with fixed columns?

Afrose ahamed Feb 24 at 7:54

Hi @Raghavendra N now shift+tab navigating properly, but still column 16 is not focusable its jumping

wahwahwah Feb 24 at 8:03

@Afroseaham Yuck. All apologies. Have you tried "Foundation"

|

Collectives™ on Stack Overflow

How to make select cell focused in jquery datatable

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related