Function SessionsTable

apps/start/src/components/sessions/table/index.tsx:270–357

({ query }: Props)

};

export const SessionsTable = ({ query }: Props) => {
  const { isLoading } = query;
  const columns = useColumns();
  const navigate = useNavigate();
  const { organizationId, projectId } = useAppParams();

  const handleRowClick = useCallback(
    (row: any) => {
      navigate({
        to: '/$organizationId/$projectId/sessions/$sessionId',
        params: { organizationId, projectId, sessionId: row.original.id },
      });
    },
    [navigate, organizationId, projectId]
  );

  const data = useMemo(() => {
    if (isLoading) {
      return LOADING_DATA;
    }

    return query.data?.pages?.flatMap((p) => p.items) ?? [];
  }, [query.data]);

  // const { setPage, state: pagination } = useDataTablePagination();
  const { columnVisibility, setColumnVisibility } =
    usePersistentColumnVisibility(columns);

  const table = useReactTable({
    data,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    manualFiltering: true,
    manualSorting: true,
    columns,
    rowCount: 50,
    pageCount: 1,
    filterFns: {
      isWithinRange: () => true,
    },
    state: {
      columnVisibility,
    },
    onColumnVisibilityChange: setColumnVisibility,
    getRowId: (row, index) => row.id ?? `loading-${index}`,
  });

  const inViewportRef = useRef<HTMLDivElement>(null);
  const { inViewport, enterCount } = useInViewport(inViewportRef, undefined, {
    disconnectOnLeave: true,
  });

  const hasNextPage = last(query.data?.pages ?? [])?.meta.next;

  useEffect(() => {
    if (
      hasNextPage &&
      data.length > 0 &&