table-example.tsx

interface TableParams {
  pagination: TablePaginationConfig;
  sorter?: {
    field: React.Key;
    order: 'ascend' | 'descend' | undefined
  };
}

function ProjectList() {
  const [tableParams, setTableParams] = useState<TableParams>({
    pagination: {
      current: 1,
      pageSize: 10,
    },
  });
  
  /* 정렬하고자 하는 필드명을 쿼리 스트링으로 보낸다. 
  역순으로 정렬하고자 하는 경우 필드명 앞에 '-'라는 prefix를 붙인다. 예) '-id' */
  const ordering = tableParams.sorter?.order
  ? `${tableParams.sorter?.order === "descend" ? "-" : ""}${
      tableParams.sorter?.field
    }`
  : "";
    
  const { data } = useQuery<ProjectsQueryResult>({
    queryKey: [
      'projects',
      { page: tableParams.pagination.current },
      { ordering },
    ],
    queryFn: () =>
      fetcher({
        page: tableParams.pagination.current,
        ordering,
      }),
  });

  return (
      <ProjectTable
        projects={data?.projects ?? []}
        pagination={tableParams.pagination}
        setTableParams={setTableParams}
      />
  );
}