Mui Datagrid Pagination

Mui가 제공하는 Datagrid의 Pagination은 밑에만 존재한다.

따라서, Selector를 이용하여 하나하나 커스텀 해주었다.

코드 설명

  const { data, loading } = useDemoData({
    dataSet: "Commodity",
    rowLength: 100,
    maxColumns: 10,
  });

-> 이건 mui에서 기본으로 제공하는 데이터. 이것을 이용하여 테스트를 편리하게 진행할 수 있었다!

  return (
    <div style={{ height: 400, width: "100%" }}>
      <MuiDataGrid
        {...data}
        loading={loading}
        pageSize={rowsPerPage}
        hideFooter
        components={{
          Toolbar,
        }}
      />
    </div>
  );

-> DataGrid를 하나 만들고, Footer를 삭제해주어야 한다. 이미 DataGrid에는 자동으로 pagination이 있기 때문이다.
-> 삭제했으면, components를 통해 Toolbar를 만들어준다
=> 우리는 이 Toolbar에 pagination을 만들 것이다!

  const Toolbar = () => {
    const apiRef = useGridApiContext();
    const page = useGridSelector(apiRef, gridPageSelector); 
    const pageCount = useGridSelector(apiRef, gridPageCountSelector); 
    const handleChangePage = (
      event: React.MouseEvent<HTMLButtonElement> | null,
      newPage: number
    ) => {
      apiRef.current.setPage(newPage);
    };

    const handleChangeRowsPerPage = (
      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
      setRowsPerPage(parseInt(event.target.value, 10));
      apiRef.current.setPage(0);
    };

    return (
      <TablePagination
        component="div"
        color="primary"
        count={pageCount * rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        rowsPerPage={rowsPerPage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    );
  };

-> Selector들에 대한 설명은 전 포스트에 있다.

변수 설명

1. page : 화살표들을 클릭할 때마다 숫자가 올라가거나, 내려가는 변수이다.
2. pageCount : 화면에 표현하는 숫자를 받아와서, 내가 몇 페이지를 만들 수 있는지 계산하여 준다.
   -> 만약, 화면에 표현하는 숫자가 5였을 때 데이터가 100개면 pageCount는 25가 된다.
3. handleChangePage : 페이지가 바뀔 때마다 새로운 페이지로 넘어가게 도와준다.
   -> 왼쪽 화살표면 한 칸 아래 페이지, 오른쪽 화살표면 한 칸 위 페이지
4. handleChangeRowsPerPage : 몇 페이지를 넘길 것인지가 바뀔 때마다 내가 보고 있는 페이지를 0 페이지로 만들어주고, 내가 설정한 값으로 다시 출력한다.
   
   -> Rows per page가 바뀔 때마다 저 91-100이 0-10으로 바뀐다.

---

최종 코드

export const UseGridSelector = () => {
  const { data, loading } = useDemoData({
    dataSet: "Commodity",
    rowLength: 100,
    maxColumns: 10,
  });
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const Toolbar = () => {
    const apiRef = useGridApiContext();
    const page = useGridSelector(apiRef, gridPageSelector); 
    const pageCount = useGridSelector(apiRef, gridPageCountSelector); 
    const handleChangePage = (
      event: React.MouseEvent<HTMLButtonElement> | null,
      newPage: number
    ) => {
      apiRef.current.setPage(newPage);
    };

    const handleChangeRowsPerPage = (
      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
      setRowsPerPage(parseInt(event.target.value, 10));
      apiRef.current.setPage(0);
    };

    return (
      <TablePagination
        component="div"
        color="primary"
        count={pageCount * rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        rowsPerPage={rowsPerPage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    );
  };

  return (
    <div style={{ height: 400, width: "100%" }}>
      <MuiDataGrid
        {...data}
        loading={loading}
        pageSize={rowsPerPage}
        hideFooter
        components={{
          Toolbar,
        }}
      />
    </div>
  );
};