利用 React Hooks 实现自定义表格列，拖拽排序、自定义列显示隐藏轻松搞定！

前端

2023-10-19 08:04:59

在进行数据展示时，表格无疑是最常见的组件。作为前端工程师，我们需要经常与表格打交道。而 React Hooks 的出现，为我们提供了另一种编写表格组件的方法，不仅更加简洁，而且更加灵活。

借助 React Hooks，我们可以实现表格列的拖拽排序，并自定义列的显示隐藏。当外部传入的 columns 发生变化时，我们可以通过函数式组件和回调函数来控制 CustomColumnTable 组件的内部状态，实现动态的表格列变化。

除了拖拽排序和自定义列显示隐藏外，我们还可以通过自定义列的宽度、对齐方式、渲染函数等属性，来实现更加个性化的表格展示效果。

让我们具体了解一下如何使用 React Hooks 来实现这些功能。

拖拽排序

为了实现拖拽排序，我们需要引入 react-dnd 库。该库提供了拖放功能的实现，我们可以直接将其应用于表格列。

首先，我们需要在表格列上添加一个拖拽手柄。我们可以使用 Draggable 组件来实现这一点。Draggable 组件接收一个 onDragStart 函数，该函数会在拖动开始时触发，并返回一个 dragItem 对象。

const DraggableColumn = ({ column }) => {
  const ref = React.useRef(null);

  const onDragStart = (e) => {
    e.dataTransfer.setData("column", JSON.stringify(column));
  };

  return (
    <Draggable draggableId={column.id} ref={ref} onDragStart={onDragStart}>
      <div className="column-header">{column.title}</div>
    </Draggable>
  );
};

接下来，我们需要创建一个 Droppable 组件来接收拖拽的表格列。Droppable 组件接收一个 onDrop 函数，该函数会在拖动结束时触发，并返回一个 dropItem 对象。

const DroppableColumn = ({ onDrop }) => {
  const ref = React.useRef(null);

  const onDrop = (e) => {
    const column = JSON.parse(e.dataTransfer.getData("column"));
    onDrop(column);
  };

  return (
    <Droppable droppableId="columns" ref={ref} onDrop={onDrop}>
      <div className="column-list"></div>
    </Droppable>
  );
};

最后，我们需要将 DraggableColumn 和 DroppableColumn 组件组合在一起，并将其应用于表格组件。

const CustomColumnTable = () => {
  const [columns, setColumns] = React.useState([
    { id: "name", title: "姓名" },
    { id: "age", title: "年龄" },
    { id: "city", title: "城市" },
  ]);

  const onDrop = (column) => {
    const newColumns = [...columns];
    const index = columns.findIndex((c) => c.id === column.id);
    newColumns.splice(index, 1);
    setColumns(newColumns);
  };

  return (
    <div className="table-container">
      <DroppableColumn onDrop={onDrop} />
      <DraggableColumn column={columns[0]} />
      <DraggableColumn column={columns[1]} />
      <DraggableColumn column={columns[2]} />
    </div>
  );
};

自定义列显示隐藏

为了实现自定义列的显示隐藏，我们需要使用 useState Hook 来维护表格列的状态。

const CustomColumnTable = () => {
  const [columns, setColumns] = React.useState([
    { id: "name", title: "姓名", visible: true },
    { id: "age", title: "年龄", visible: true },
    { id: "city", title: "城市", visible: true },
  ]);

  const toggleColumnVisibility = (columnId) => {
    const newColumns = [...columns];
    const index = columns.findIndex((c) => c.id === columnId);
    newColumns[index].visible = !newColumns[index].visible;
    setColumns(newColumns);
  };

  return (
    <div className="table-container">
      <div className="column-list">
        {columns.map((column) => (
          <div key={column.id} className="column">
            <input type="checkbox" checked={column.visible} onChange={() => toggleColumnVisibility(column.id)} />
            <label>{column.title}</label>
          </div>
        ))}
      </div>
      <Table columns={columns.filter((c) => c.visible)} dataSource={data} />
    </div>
  );
};