React分页排班表最后一页网格列显示异常问题求助

我正在开发带分页功能的工作排班表，要求每页最多显示8列（1列员工信息 + 7列日期）。当月剩余天数大于7时，所有页面表格渲染正常；但到月末最后一周时，表格没有保持8列布局，而是把所有数据变成了垂直单列显示。

相关代码 #

function ScheduleTable() {
    const daysPerPage = 7;
    const [currentPage, setCurrentPage] = useState(1);
    const [scheduleType, setScheduleType] = useState('L1');

    const handleScheduleTypeChange = (type) => {
        setScheduleType(type);
    };

    const date = new Date();
    // 获取当月第一天
    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
    // 计算当月最后一天
    const lastDayOfMonth = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const totalDays = lastDayOfMonth;

    // 计算当前页起始索引
    const startIndex = (currentPage - 1) * daysPerPage;
    // 计算当前页结束索引
    const endIndex = Math.min(startIndex + daysPerPage, totalDays);
    // 截取当月日期数组获取当前页天数
    let month = generateMonth(firstDayOfMonth, totalDays).slice(
        startIndex,
        endIndex
    );
    const numCol =
        month.length >= daysPerPage ? daysPerPage + 1 : month.length + 1;

    console.log(numCol);
    const handleNextPage = () => {
        setCurrentPage(currentPage + 1);
    };

    const handlePrevPage = () => {
        setCurrentPage(currentPage - 1);
    };

    return (
        <div>
            <div
                className={`grid grid-cols-8 mx-5  font-ubuntu font-medium text-center  `}
            >
                <div className='px-6 py-3 text-white uppercase border border-black bg-capgeminiPrimaryBlue'>
                    Employee
                </div>

                {generateSchedule(month)}

                {generateUser(users, month, scheduleType)}
            </div>

尝试过的解决方案 #

• 固定设置grid-cols-8：剩余天数不小于每页允许的7天时有效，最后一页剩余天数不足7时布局错乱
• 动态设置列数grid-cols-${month.length + 1}：曾正常工作，但偶尔会无征兆出现显示异常

页面显示效果 #

• 第一页：正常显示8列布局，员工列与7天日期列横向排列，排班信息对应正确
• 最后一页：所有内容垂直堆叠为单列，布局完全异常

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