MUIdatatables如何使用箭头/ tab键导航?

问题描述 投票:0回答:1

我想使用Tab键导航来导航MUIdatatable行。请建议我任何合适的方法。我已经尝试了基本的taIndex,启用Focus等功能,但是它们似乎在这里无法正常工作。

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"));
javascript reactjs
1个回答
0
投票

MUI数据表已支持键盘导航(例如,使用Tab键)

通过使用Tab键导航导航MUIdatatable行,我想您想做的可能是将指针指向第一行?为此,您可以尝试将指针设置为在挂载时聚焦在第一行:

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

Edit cranky-bardeen-k6lkh

© www.soinside.com 2019 - 2024. All rights reserved.