在react组件中表格如何排序
使用内置数组排序方法
在React中，可以通过JavaScript的Array.prototype.sort()方法对表格数据进行排序。将排序后的数据传递给表格组件重新渲染。
const [data, setData] = useState(initialData);
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
const handleSort = (key) => {
let direction = 'asc';
if (sortConfig.key === key && sortConfig.direction === 'asc') {
direction = 'desc';
}
const sortedData = [...data].sort((a, b) => {
if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
return 0;
});
setData(sortedData);
setSortConfig({ key, direction });
};结合表格组件实现
在表格的列标题中添加点击事件，触发排序逻辑。通过状态管理当前排序的列和方向。
<table>
<thead>
<tr>
<th onClick={() => handleSort('name')}>Name</th>
<th onClick={() => handleSort('age')}>Age</th>
</tr>
</thead>
<tbody>
{data.map((item) => (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>使用第三方库
对于复杂表格需求，可以使用第三方库如react-table或Material-UI的表格组件，它们内置了排序功能。
安装react-table：
npm install react-table示例代码：
import { useTable, useSortBy } from 'react-table';
const columns = [
{ Header: 'Name', accessor: 'name' },
{ Header: 'Age', accessor: 'age' }
];
function Table({ data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({ columns, data }, useSortBy);
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
);
})}
</tbody>
</table>
);
}性能优化
对于大数据量的表格，使用虚拟滚动技术（如react-window）避免渲染所有行。排序逻辑可以与虚拟滚动结合，仅渲染可见部分数据。
npm install react-window示例：
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>
{data[index].name} - {data[index].age}
</div>
);
<List
height={400}
itemCount={data.length}
itemSize={35}
width={600}
>
{Row}
</List>
