How to paginate tables without libraries in React Next.js?

I’m learning to create data tables for a ReactJS / NextJS application without libraries.

I’m having a hard time paginating the table, can you please provide a code sample to handle this.

This is the table code I used:

const Table = () => {

  const data = [
    {name: 'Rara', profile: 'profile1', comment: 'comra'},
    {name: 'Dada', profile: 'profile2', comment: 'comda'},
    {name: 'Gaga', profile: 'profile1', comment: 'comga'},
    {name: 'Mama', profile: 'profile3', comment: 'comma'},
    {name: 'Papa', profile: 'profile4', comment: 'compa'},
    // ...
  ]

  const columns = [
    { id: 1, title: "Name", accessor: "name" },
    { id: 2, title: "Profile", accessor: "profile" },
    { id: 3, title: "Comment", accessor: "comment" },
  ];

  return (
    <table className={styles.container}>
      <thead>
        <tr>
          {columns.map((col) => (
            <th key={col.id}>{col.title}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((user, i) => (
          <tr key={i}>
            {columns.map((col) => (
              <td key={col.id}>{user[col.accessor]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

I really appreciate any answer.

Answer

Use Array#slice with an incremented page state. Something like this should get you started:

const Table = () => {

    // .....

    const itemsPerPage = 10;
    const [page, setPage] = useState(1);
    const displayData = useMemo(() => {
        const start = (page - 1) * itemsPerPage;
        return data.slice(start, start + itemsPerPage);
    }, [data]);

    // .....

    return (
        <>
            <button onClick={() => setPage(page + 1)}> Next Page </button>
            <button onClick={() => setPage(page - 1)}> Prev Page </button>

            { /* ..... */ }

              <tbody>
                {displayData.map((user, i) => (
                
             { /* ..... */ }


        </>
    );
};