MaterialReactTable 行选中
时间: 2024-05-07 15:23:50 浏览: 10
要在 MaterialReactTable 中启用行选择,您可以使用 `selected` 属性来跟踪选中的行。以下是一个示例代码片段:
```jsx
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Checkbox, Paper } from '@material-ui/core';
function MyTable(props) {
const [selected, setSelected] = useState([]);
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = props.rows.map((row) => row.id);
setSelected(newSelecteds);
return;
}
setSelected([]);
};
const handleClick = (event, id) => {
const selectedIndex = selected.indexOf(id);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1),
);
}
setSelected(newSelected);
};
const isSelected = (id) => selected.indexOf(id) !== -1;
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
indeterminate={selected.length > 0 && selected.length < props.rows.length}
checked={props.rows.length > 0 && selected.length === props.rows.length}
onChange={handleSelectAllClick}
inputProps={{ 'aria-label': 'select all desserts' }}
/>
</TableCell>
<TableCell>Column 1</TableCell>
<TableCell>Column 2</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.rows.map((row) => {
const isRowSelected = isSelected(row.id);
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.id)}
role="checkbox"
aria-checked={isRowSelected}
tabIndex={-1}
key={row.id}
selected={isRowSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isRowSelected} inputProps={{ 'aria-labelledby': `checkbox-${row.id}` }} />
</TableCell>
<TableCell>{row.column1}</TableCell>
<TableCell>{row.column2}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
export default MyTable;
```
在此示例中,我们使用 `selected` 状态来跟踪选中的行。我们还定义了一个 `handleClick` 函数来处理单击行时的选择逻辑,并使用 `selected` 状态来确定哪些行应该被选中。我们还使用 `selected` 状态来设置每行的 `selected` 属性,以使选中的行高亮显示。最后,我们使用 Material UI 的 `Checkbox` 组件来创建一个“全选”复选框,以便用户可以选择所有行。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)