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

Question

I am using react-virtualized for rendering a Table. The Table should look like this:

Expected Table

I have reached here so far:

Present Table

I am able to add the checkbox in the header row with a custom headerRenderer function.

I want to add the checkbox at the starting of every row. How can I do that?

Here is the code that I have written:

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

After diving deep into the library, there is a rowRenderer function which is responsible for rendering a table row given an array of columns.

rowRenderer

• If you do override rowRenderer the easiest way is to decorate the default implementation.
• This is an advanced property. It is useful for situations where you require additional hooks into Table .

Here's the code overriding the rowRenderer function:

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

Here's the code preview on codesandbox: