当前位置：首页 > React

在react组件中表格如何排序

2026-01-25 20:59:17React

使用内置数组排序方法

在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>

在react组件中表格如何排序