I’m attempting to render a work timetable table with pagination. Each page should display a maximum of 8 columns. Currently, the table renders correctly for all pages when the number of remaining days in the month is greater than eight. However, when the app reaches the last week of the month, instead of displaying 8 columns, it renders one long vertical column containing all the data.

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

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

    const date = new Date();
    // Get the first day of the current month
    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
    // Calculate the last day of the current month
    const lastDayOfMonth = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const totalDays = lastDayOfMonth;

    // Calculate the starting index of the current page
    const startIndex = (currentPage - 1) * daysPerPage;
    // Calculate the ending index of the current page
    const endIndex = Math.min(startIndex + daysPerPage, totalDays);
    // Slice the month array to get only the days for the current page
    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>

I tried multiple solution; I tried fixing the number of columns to eight (grid-cols-8) and that solution also works until the days left in the month is less than the number of column that is allowed per page

Additionally, the app behaves weirdly, one of the solution was to set the number of columns dynamically by grid-${month.length + 1} This actually used to work perfectly, however, sometimes the app would break and starts displaying the table incorrectly without any apparent reason.