我react-virtualized用于渲染表格。该表应如下所示：

预期表

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

礼物表

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

我想在每一行的开头添加复选框。我怎样才能做到这一点？

这是我写的代码：

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>
    </>
  );
}