基于MUI的手机租赁设备表last activity列排序实现咨询

步骤1：在DevicesTable中维护排序状态 #

添加排序状态管理，控制排序字段和方向，并传递给表头组件和数据钩子：

import { useState } from 'react';

export default function DevicesTable() {
    // 默认按lastActivity降序（最近的排在最前）
    const [sortConfig, setSortConfig] = useState({ field: 'lastActivity', direction: 'desc' });
    // 将排序参数传入useDevices，用于Firestore查询排序
    const devices = useDevices(database, firestore, urlParams, hiddenItems, filters, sortConfig);

    // 切换排序方向的逻辑
    const handleSort = (field) => {
        const newDirection = sortConfig.field === field && sortConfig.direction === 'asc' 
            ? 'desc' 
            : 'asc';
        setSortConfig({ field, direction: newDirection });
    };

    return (
        <TableContainer >
            <Table >
                {/* 传递排序配置和点击事件给表头 */}
                <DevicesTableHeader sortConfig={sortConfig} onSort={handleSort} />
                <TableBody>
                    {devices.map((device) =>
                        <DevicesTableCell device={device} key={device.description.id} />)}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

步骤2：改造表头组件，添加排序交互 #

在DevicesTableHeader的Last Activity列使用MUI的TableSortLabel组件，实现点击切换排序的交互：

import TableSortLabel from '@mui/material/TableSortLabel';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

export default function DevicesTableHeader({ sortConfig, onSort }) {
    return (
        <TableHead>
            <TableRow>
                {/* 其他列的表头 */}
                <TableCell>
                    <TableSortLabel
                        active={sortConfig.field === 'lastActivity'}
                        direction={sortConfig.direction}
                        onClick={() => onSort('lastActivity')}
                    >
                        Last Activity
                    </TableSortLabel>
                </TableCell>
                {/* 其他列的表头 */}
            </TableRow>
        </TableHead>
    );
}

步骤3：在Firestore查询中实现后端排序（推荐） #

修改useDevices钩子，接收排序参数并构建Firestore查询，利用数据库本身的排序能力（适合大数据量场景）：

import { useState, useEffect } from 'react';

export function useDevices(database, firestore, urlParams, hiddenItems, filters, sortConfig) {
    const [devices, setDevices] = useState([]);

    useEffect(() => {
        let query = firestore.collection('devices');

        // 保留你原有的过滤逻辑
        // ... 你的现有过滤代码 ...

        // 添加排序逻辑
        if (sortConfig?.field === 'lastActivity') {
            // Firestore支持直接对Timestamp或日期字符串排序
            query = query.orderBy('lastActivity', sortConfig.direction);
        }

        // 实时监听查询结果
        const unsubscribe = query.onSnapshot((snapshot) => {
            const devicesData = snapshot.docs.map(doc => ({
                ...doc.data(),
                id: doc.id
            }));
            setDevices(devicesData);
        });

        return () => unsubscribe();
    }, [firestore, urlParams, hiddenItems, filters, sortConfig]);

    return devices;
}

备选：前端排序（小数据量场景） #

如果数据量很小，也可以在前端对获取到的devices数组排序：

// 在DevicesTable组件中替换原有的devices.map
const sortedDevices = [...devices].sort((a, b) => {
    const dateA = new Date(a.lastActivity.toDate ? a.lastActivity.toDate() : a.lastActivity);
    const dateB = new Date(b.lastActivity.toDate ? b.lastActivity.toDate() : b.lastActivity);
    return sortConfig.direction === 'asc' 
        ? dateA - dateB 
        : dateB - dateA;
});

// 渲染时用sortedDevices
{sortedDevices.map((device) =>
    <DevicesTableCell device={device} key={device.description.id} />)}

注意事项 #

• 如果lastActivity在Firestore中存储为Timestamp类型，前端排序时需要调用.toDate()转换为Date对象
• 后端排序性能更优，避免前端加载全量数据的开销，优先推荐
• 默认排序方向设为desc，符合“最近的闲置时长排在最前”的需求

内容的提问来源于stack exchange，提问作者Paul