[英]How to add a checbox at the starting of every row in react-virtualized table?
我正在使用react-virtualized
来渲染表格。 该表应如下所示:
预期表
到目前为止,我已经到达这里:
礼物表
我可以使用自定义headerRenderer
function 在 header 行中添加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>
</>
);
}
在深入库之后,有一个rowRenderer
function 负责在给定列数组的情况下渲染表格行。
行渲染器
Table
的情况很有用。 这是覆盖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>
);
}
这是codesandbox上的代码预览:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.