MUIdatatables how to navigate using arrow/tab keys?

Question

I wanted to navigate MUIdatatable rows using tabkey navigation. Please suggest me any suitable approach. I have tried basic taIndex, enable Focus etc stuff but they don't seem to work here properly.

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
    ];

    const options = {
      filterType: "dropdown",
      responsive: "scroll"
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
        enableFocusedCell="true"
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

MUI Datatables already supported keyboard navigation (eg using Tab key)

By navigate MUIdatatable rows using tabkey navigation , I think what you want to do is probably point the pointer to the first row? To do that you can try setting the pointer to focus on the first row when it mounted:

componentDidMount() {
  // Start with the first row
  document.getElementById("MUIDataTableSelectCell-0").focus();
}