I need to make my table have pagination. I am developing using React.js and using a simple <table> to display information that is being fetched.

The table uses mapping to dynamically grow when new information is generated through the UI. Currently, the table is just simply <table> tag that uses some CSS for styling. I would like to limit the number of rows to 10, and have pagination at the bottom for when there are more than 10 rows of data.

How can I achieve this?

<div className="app-container">
    <table>
        <thead>
            <tr>
                <th>Loan ID</th>
                <th>Owner</th>
                <th>Amount (R)</th>
                <th>Rate (%)</th>
                <th>Term (Months)</th>
                <th>Start Date</th>
                <th>End Date</th>
            </tr>
        </thead>
        <tbody>
            {Tokens.map((token) => (
                <tr>
                    <td>{token[0]}</td>
                    <td>{token[1]}</td>
                    <td>{token[2]}</td>
                    <td>{token[3]}</td>
                    <td>{token[4]}</td>
                    <td>{token[5]}</td>
                    <td>{token[6]}</td>
                </tr>
            ))}
        </tbody>
    </table>
</div>