서버 측 페이지가 매겨진 반응 테이블

오늘 우리는 react-table 으로 서버측 페이지가 매겨진 테이블을 생성할 것입니다. 전체 코드를 보려면 my github repo을 방문하십시오.

The technologies used for this project:

넥스트제이에스

몽고디비

반응 테이블

반응 쿼리

몽구스 및 mongoose-paginated-v2 플러그인

And this is the finished product:

Table 구성 요소를 살펴보겠습니다.

// components/Table.js

import React from 'react';
import { useTable, usePagination } from 'react-table';

function Table({ setPerPage, setPage, columns, data, currentpage, perPage, totalPage }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    pageOptions,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      useControlledState: (state) => {
        return React.useMemo(
          () => ({
            ...state,
            pageIndex: currentpage,
          }),
          [state, currentpage]
        );
      },
      initialState: { pageIndex: currentpage }, // Pass our hoisted table state
      manualPagination: true,
      pageCount: totalPage,
    },
    usePagination
  );

  return (
    <>
      <table {...getTableProps()} className="table-fixed">
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.slice(0, 1).map((column) => (
                <th column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
              {headerGroup.headers.slice(1).map((column) => (
                <th
                  {...column.getHeaderProps()}
                >
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}

export default Table;

여기서 우리는 테이블 자체를 렌더링합니다. 그러나 데이터의 출처는 어디입니까? 상위 구성 요소는 사용자 지정react-query 후크를 사용하여 NextJS의 api 경로에서 데이터를 가져옵니다.

// pages/api/schools/index.js

import School from '@models/School';
import dbConnect from '@utils/dbConnect';

dbConnect();

export default async function (req, res) {
  switch (req.method) {
    case 'GET':
      await getSchools(req, res);
      break;

    default:
      res.status(400).json({ success: false });
      break;
  }
}
const getSchools = async (req, res) => {
  try {
    let { page, perPage } = req.query;
    console.log(page, perPage);
    const options = {
      page: parseInt(page),
      limit: parseInt(perPage),
    };
    const schools = await School.paginate({}, options);
    res.status(200).json({
      success: true,
      data: schools,
    });
  } catch (error) {
    res.status(400).json({ success: false });
  }
};

그리고 API 경로에서 데이터를 가져오기 위한 사용자 지정 후크:

// utils/useSchools

const { useQuery } = require('react-query');
const axios = require('axios');

export default function useSchools(page, perPage) {
  return useQuery(
    ['schools', page, perPage],
    async () => {
      const res = await axios.get(`/api/schools?perPage=${perPage}&page=${page}`);
      return res.data;
    },
    { keepPreviousData: true }
  );
}

마지막으로 중요한 부분은 커스텀 후크를 호출하는 index.js 페이지입니다.

import React, { useState } from 'react';
import Table from '@components/Table/Table';
import useSchools from '@utils/useSchools';

export default function Home() {
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const { data: schools, isLoading } = useSchools(page, perPage);
  const list = schools?.data.docs.map((i) => {
    return {
      col1: i.name,
      col2: i.il,
      col3: i.ilce,
      col4: i.kont,
    };
  });
  const data = React.useMemo(() => list, [schools]);
  const columns = React.useMemo(
    () => [
      {
        Header: 'okul adi',
        accessor: 'col1', // accessor is the "key" in the data
      },
      {
        Header: 'il',
        accessor: 'col2',
      },
      {
        Header: 'ilce',
        accessor: 'col3',
      },
      {
        Header: 'kontenjan',
        accessor: 'col4',
      },
    ],
    []
  );
  if (isLoading) return <div>loading...</div>;
  return (
    <div className="p-4 bg-white my-4 rounded shadow-xl grid">
      <Table
        data={data}
        columns={columns}
        setPage={setPage}
        setPerPage={setPerPage}
        currentpage={page}
        perPage={perPage}
        totalPage={schools?.data.totalPages}
      />
    </div>
  );
}

여기에 모두 포함하기에는 다소 긴 코드입니다. 따라서 나머지는 my github repo에서 확인할 수 있습니다. 건배!!