CODEWITHSUNDEEP
javascriptreactjs
Karan Bajrang
Karan Bajrang

Reputation: 3

MUIdatatables how to navigate using arrow/tab keys?

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"));

Upvotes: 0

Views: 460

Answers (1)

Jee Mok
Jee Mok

Reputation: 6556

MUI Datatables already supported keyboard navigation (e.g. 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();
}

Edit cranky-bardeen-k6lkh

Upvotes: 1

Related Questions