Datatable like excel behaviour

[elio]

Hello everyone,
is there any chance to use cursors (up,down,right,left) or tab to move the focus or directly get activity among inline editing Datatable cells?

Thanks.

Elio

[Stebbins14]

No.Unfortunately it is not possible dear.I hope this feature will be added soon

[CylonOven]

Been working on that myself, but using tab and enter when editing to navigate to next column / row.
Got it working nicely.

Code: Select all

   key: "onKeyDown",
    value: function onKeyDown(event) {
      var el = event.target,
          tr = el.closest("tr");

      if (event.which === 13 || event.which === 9) {
        // enter || tab
        event.preventDefault();
        this.switchCellToViewMode(true);
      }

      if (event.which === 13) {
        tr = event.shiftKey ? tr.previousSibling : tr.nextSibling;

        if (tr) {
          //might be end of table
          tr.children[this.props.cellIndex].getElementsByClassName("p-cell-editor-key-helper")[0].focus(); // if (helper.length) {
          //     helper[0].focus()
        }
      }

      if (event.which === 9) {
        var tbl = el.closest("table"); // bad logic, should just find all of that class, find the one containing self, and + / - 1 and focus.

        var cols = Array.apply(void 0, _toConsumableArray(tbl.getElementsByClassName("p-cell-editor-key-helper"))),
            i = cols.findIndex(function (n) {
          return n.parentElement.contains(el);
        });
        i = event.shiftKey ? i - 1 : i + 1; // if (i === cols.length || i < 0) { // if out of index range of cols

        cols[i].focus(); // Open next / prev editor
      }

      if (event.which === 27) // escape
        {
          this.switchCellToViewMode(false);
        }
    }

That's a method for BodyCell inside PrimeReact. Basically what it does it uses native JS to find the next editor elem and focus on it.
I have a feeling it won't be accepted as a PR as it is too large a change for PR's behavior. If you can find a way to override the BodyCell method with this method without a fork of PR let me know.

I tried to just do an import and BodyCell.mumble = this method and that didn't work.

[Fleming30]

Well i was unaware of bodycell method.Thank you so much for the help..It really helped alot..Thanks

[mert.sincan]

Hi,

Why don't you use editable datatable feature for it? It has keyboard navigation. Please see; https://www.primefaces.org/primereact/#/datatable/edit

Best Regards,