使用fusion table组件和react函数组件实现选中Table.Column高亮

首先，需要在React组件中引入Fusion Table库。在组件中创建一个状态（state）来存储选中的列的索引。然后，在render函数中，通过遍历表格的每一列并为其添加onClick事件来实现高亮。

代码示例如下：

import React, { useState } from "react";
import { Table } from "@devexpress/dx-react-grid-material-ui";
import FusionTable from "fusion-table";

const HighlightableTable = (props) => {
  const [highlightedColumnIndex, setHighlightedColumnIndex] = useState(-1);

  const handleColumnClick = (columnIndex) => {
    setHighlightedColumnIndex(columnIndex);
  };

  const renderTableColumn = ({ column, children }) => {
    const columnIndex = props.columns.findIndex(
      (c) => c.name === column.name
    );
    const isHighlighted = columnIndex === highlightedColumnIndex;

    return (
      <Table.Column
        {...column}
        onClick={() => handleColumnClick(columnIndex)}
        style={{ background: isHighlighted ? "#efefef" : "transparent" }}
      >
        {children}
      </Table.Column>
    );
  };

  return (
    <FusionTable {...props}>
      <Table {...props} columnExtensions={props.columns.map((c) => ({ columnName: c.name, wordWrapEnabled: true }))}>
        {props.children.map((child) => React.cloneElement(child, { render: renderTableColumn }))}
      </Table>
    </FusionTable>
  );
};

export default HighlightableTable;

在这个示例中，我们将一个名为`highlightedColumnIndex`的状态用于跟踪选中的列的索引。当用户单击列时，我们通过调用`handleColumnClick`函数将选中的列的索引设置为`highlightedColumnIndex`状态。在渲染每一列时，我们检查当前列是否与选中的列匹配，并根据需要设置背景色。

使用示例：

import React from "react";
import HighlightableTable from "./HighlightableTable";

const columns = [
  { name: "id", title: "ID" },
  { name: "name", title: "Name" },
  { name: "age", title: "Age" },
];

const rows = [
  { id: 1, name: "John Doe", age: 30 },
  { id: 2, name: "Jane Smith", age: 25 },
  { id: 3, name: "Bob Johnson", age: 40 },
];

const App = () => {
  return (
    <HighlightableTable columns={columns} rows={rows}>
      <Table.HeaderRow />
      <Table.Row />
    </HighlightableTable>
  );
};

export default App;

这将创建一个具有选中列高亮的表格。