react에서 datatable 사용 방법

1. npm install datatables.net-dt/css/jquery.dataTables.css datatables.net 를 합니다. 

2. 업로드한 코드를 복사해서 이용합니다. 

전체 코드

import React, { useEffect, useRef, useState } from "react";
import $ from "jquery";
import "datatables.net-dt/css/jquery.dataTables.css";
import "datatables.net";
import axios from "axios";

const MyDataTable = () => {
  const tableRef = useRef(null);
  const dataTableRef = useRef(null);
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const url = //서버 url;
        const response = await axios.get(url, {
          headers: {
			// headers 서버 url 구성에 맞게 셋팅 
          },
        });
        // 데이터 셋팅 - setData에다가 값을 넣으면 됩니다.
        setData(response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  // datatable 초기화 중복 경고 메시지를 방지
  useEffect(() => {
    if (dataTableRef.current === null) {
      $(tableRef.current).DataTable({
        paging: true,
        pageLength: 10,
      });
      dataTableRef.current = true;
    }
  }, []);

  useEffect(() => {
    // pageLength: 페이지에 보여줄 row 갯수 설정
    // columns: 데이터 key값을 넣으면 됩니다.
    if (dataTableRef.current) {
      $(tableRef.current).DataTable().destroy();
      $(tableRef.current).DataTable({
        data,
        columns: [
          { data: "id" },
          { data: "consumerNm" },
          { data: "addr1" },
          { data: "consumerId" },
          { data: "meterNo" },
        ],
        paging: true,
        pageLength: 10,
        destroy: true,
      });
    }
  }, [data]);

  return (
    <div>
      <table ref={tableRef}>
        <thead>
          <tr>
            <th>id</th>
            <th>consumerNm</th>
            <th>addr1</th>
            <th>consumerId</th>
            <th>meterNo</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  );
};

export default MyDataTable;

설명 

• return 안에 있는 tr 부분은 datatable에 key값에 해당되는 이름이라고 보시면 됩니다. 가져오는 데이터에 맞게 수정하시면 됩니다. 

datatable 파트 

  useEffect(() => {
    // pageLength: 페이지에 보여줄 row 갯수 설정
    // columns: 데이터 key값을 넣으면 됩니다.
    if (dataTableRef.current) {
      $(tableRef.current).DataTable().destroy();
      $(tableRef.current).DataTable({
        data,
        columns: [
          { data: "id" },
          { data: "consumerNm" },
          { data: "addr1" },
          { data: "consumerId" },
          { data: "meterNo" },
        ],
        paging: true,
        pageLength: 10,
        destroy: true,
      });
    }
  }, [data]);

• 현재 데이터는 setData를 통해서 넣었기 때문에 $(tableRef.current).DataTable({data, ..})에 넣으면 현재 요청하고 있는데이터를 datatable에 셋팅되게 됩니다.
• columns는 data에 key값에 이름을 적으시면 됩니다. 예를 들어서 [{id:"junhee"...}] 값을 가지고 오고 싶다면 {data:"id"}로 하시면 됩니다. 
• pageLength는 row 갯수입니다. 설정에 따라서 한페이지에 보여주는 갯수가 달라집니다.