如何在反应虚拟化表的每一行的开头添加一个复选框？

Question

我正在使用react-virtualized 来呈现表格。表格应如下所示：

预期表

到目前为止我已经到达这里：

展示表格

我可以使用自定义headerRenderer 函数在标题行中添加checkbox。

我想在每一行的开头添加复选框。我该怎么做？

这是我写的代码：

import React, {useState} from 'react';
import {Checkbox, Segment} from 'semantic-ui-react';
import {Column, Table, AutoSizer, SortDirection} from 'react-virtualized';
import _ from 'lodash';

import "react-virtualized/styles.css";

const list = [
  {
    id: 1001,
    code: 'TU101',
    title: 'test one',
    status: 'Approved',
    assigned: 'Test Person one',
  },
  {
    id: 1002,
    code: 'TU102',
    title: 'test two',
    status: 'Approved',
    assigned: 'Test Person',
  },
  {
    id: 1003,
    code: 'TU103',
    title: 'test three',
    status: 'Approved',
    assigned: 'Test Person two',
  },
  {
    id: 1004,
    code: 'TU104',
    title: 'test four',
    status: 'Approved',
    assigned: 'Test Person zero',
  },
  {
    id: 1005,
    code: 'TU104',
    title: 'test four',
    status: 'Approved',
    assigned: 'Test Person zero',
  },
];

export default function EditableList() {
  const [sortBy, setSortBy] = useState('id');
  const [sortDirection, setSortDirection] = useState('ASC');
  const [sortedList, setSortedList] = useState(_sortList({sortBy, sortDirection}));
  function _sortList() {
    const newList = _.sortBy(list, [sortBy]);
    if (sortDirection === SortDirection.DESC) {
      newList.reverse();
    }
    return newList;
  }

  function _sort() {
    setSortBy(sortBy);
    setSortDirection(sortDirection);
    setSortedList(_sortList({sortBy, sortDirection}));
  }

  function _headerRenderer() {
    return (
      <div>
        <Checkbox />
      </div>
    );
  }

  return (
    <>
       ...
      <Segment basic />
      <div style={{height: 300}}>
        <AutoSizer>
          {() => (
            <Table
              width={800}
              height={300}
              headerHeight={30}
              rowHeight={40}
              sort={_sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
              rowCount={sortedList.length}
              rowGetter={({index}) => sortedList[index]}
            >
              <Column dataKey="checkbox" headerRenderer={_headerRenderer} width={100} />
              <Column label="ID" dataKey="id" width={200} />
              <Column width={300} label="Code" dataKey="code" />
              <Column width={300} label="Title" dataKey="title" />
              <Column width={300} label="Status" dataKey="status" />
              <Column width={300} label="Assigned" dataKey="assigned" />
            </Table>
          )}
        </AutoSizer>
      </div>
    </>
  );
}

Answer 1

深入了解该库后，有一个rowRenderer 函数负责在给定列数组的情况下呈现表格行。

行渲染器

• 如果您确实覆盖 rowRenderer，最简单的方法是装饰默认实现。
• 这是一个高级属性。它适用于需要额外挂钩到 Table 的情况。

这是覆盖rowRenderer 函数的代码：

  function _rowRenderer({
    key, // Unique key within array of rows
    index // Index of row within collection
  }) {
    return (
      <div
        key={key}
        className="ReactVirtualized__Table__row"
        role="row"
        style={{
          height: "40px",
          width: "800px",
          overflow: "hidden",
          paddingRight: "12px"
        }}
      >
        {
          <>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 100px" }}
            >
              <Checkbox />
            </div>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 200px" }}
            >
              {list[index].id}
            </div>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 300px" }}
            >
              {list[index].code}
            </div>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 300px" }}
            >
              {list[index].title}
            </div>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 300px" }}
            >
              {list[index].status}
            </div>
            <div
              className="ReactVirtualized__Table__rowColumn"
              role="gridcell"
              style={{ overflow: "hidden", flex: "0 1 300px" }}
            >
              {list[index].assigned}
            </div>
          </>
        }
      </div>
    );
  }

这是代码沙箱上的代码预览：