Footer Issue. Urgent help required.

[Mnehaal2000]

So i am using react-to-print to generate an invoice in which the table data is being mapped, as the mapped content increases, it pushes down the footer with no proper placement.I want to place the footer on every page and i also want to show the page number there. How do i do it? Have been stuck and have tried different css properties like absolute and fixed placement of the footer but obviously they are not working. Here is my code:

               <div className="invoice__preview bg-white p-5 rounded-2xl border-4 border-blue-200  ">
                    <ReactToPrint
                        trigger={() => (
                            <button className="bg-blue-500 ml-5 text-white font-bold py-2 px-8 rounded hover:bg-blue-600 hover:text-white transition-all duration-150 hover:ring-4 hover:ring-blue-400">
                                Print / Download
                            </button>
                        )}
                        content={() => componentRef.current}
                    />
                    <div ref={componentRef} className="py-5 px-8 flex flex-col min-h-full relative">
                        <div>
                            <div className=" flex justify-between my-5">
                                <article className=" flex items-start justify-start">
                                    <ul>
                                        <li className="p-1 ">
                                            <span className="font-bold">Location:</span> {location}
                                        </li>
                                        <li className="p-1 ">
                                            <span className="font-bold">To:</span> {rowData.firstname + ' ' + rowData.lastname}
                                        </li>
                                    </ul>
                                </article>
                                <article className=" flex flex-col gap-2 items-start justify-end rounded-lg border border-black px-3 py-3">
                                    <h2 className=" font-bold">Statements of Accounts (Period)</h2>
                                    <ul>
                                        <li className=" ">
                                          <span className="">From Date:</span> {fromDate}
                                        </li>
                                        <li className=" ">
                                          <span className="">To Date:</span> {toDate}
                                        </li>

                                    </ul>
                                </article>
                            </div>

                            <table width="100%" className="mb-10 ">
                                <thead>
                                    <tr className="bg-gray-100 p-1 py-2 text-base text-black border-t border-b border-black uppercase w-full font-semibold">
                                        <td className="font-bold">DATE</td>
                                        <td className="font-bold">DOC NO</td>
                                        <td className="font-bold">NARRATION</td>
                                        <td className="font-bold">DEBIT</td>
                                        <td className="font-bold">credit</td>
                                        <td className="font-bold">balance</td>
                                    </tr>
                                </thead>
                                {clientData && clientData.length > 0 ? (
                                    <tbody>
                                        <tr className=" h-10 font-bold rounded-xl border border-black">
                                            <td></td>
                                            <td></td>
                                            <td>Opening Balance as on  {formatDate(new Date(fromDate))}</td>
                                            <td></td>
                                            <td></td>
                                            <td>{clientData[0].Balance}</td>
                                        </tr>
                                        {clientData.map(({ date, docid, description, debit, credit, Balance }, index) => {

                                        const formattedDate = formatDate(date);

                                        return (
                                            <tr key={docid} className="h-10">
                                            <td>{formattedDate}</td>
                                            <td>{docid}</td>
                                            <td>{description}</td>
                                            <td>{debit}</td>
                                            <td>{credit}</td>
                                            <td>{Balance}</td>
                                            </tr>
                                        );
                                        })}

                                        <tr className="h-10 font-bold rounded-xl border border-black">
                                        <td></td>
                                        <td></td>
                                        <td>Transaction Totals:</td>
                                        <td className="underline">{Math.round(clientData.reduce((total, { debit }) => total + parseFloat(debit || 0), 0))}</td>
                                        <td className="underline">{Math.round(clientData.reduce((total, { credit }) => total + parseFloat(credit || 0), 0))}</td>
                                        <td></td>
                                        </tr>
                                    </tbody>
                                    ) : (
                                    <p className="mx-auto">No data available</p>
                                    )}
                            </table>

                        </div>

                        <footer className= " mt-auto footer border-t-2 border-gray-300 pb-5">
                            <div className=" w-full flex justify-evenly pt-4 pb-14 px-5 border-b border-gray-300 mb-2 text-base">
                                <p>Prepared By</p>
                                <p>Approved By</p>
                                <p>Salesman</p>
                                <p className=" ">Reciever's Name & Signature </p>
                                <p>Store Keeper</p>

                            </div>
                            <ul className="flex flex-wrap items-center gap-2 justify-center">
                                <li>
                                    <span className="font-bold">Email:</span> {"arcoglassqatar@gmail.com"}
                                </li>
                                <li>
                                    <span className="font-bold">Tel:</span> {"4460 5198"}<span className="ml-1 font-bold">-Fax:</span> {"4451 7172"}
                                </li>
                                <li>
                                    <span className="font-bold">P.O Box:</span> {"40992, Doha-Qatar "}
                                </li>
                            </ul>
                            <p className="text-center px-5 mt-4 text-xs ">
                            Thankyou for your purchase!
                        </p>
                        </footer>

                    </div>
                </div>

[siaikin]

please check page-break. This section explains the related CSS properties for page breaks during printing.

[Mnehaal2000]

please check page-break. This section explains the related CSS properties for page breaks during printing.

I don't understand how would that help, would you be so kind to explain. Would i have to place my footer inside the loop?

[siaikin]

@Mnehaal2000 I apologize for the confusion, you should put the repeated footer part into the tfoot tag. As for the page number issue, it is currently not customizable, you cannot accurately get the page number information for printing.