Antd Cursor Paginated Table Component

cursortable.js

import React, { useEffect, useState } from "react";

import { Table, Button, Space, Row, Col } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

const CursorPagination = ({ startKey, lastEvaluatedKey, onChange, size }) => {
  /* Use stack to keep track of which evaluated keys have been previously seen */
  const [ prevEvaluatedKeys, setPrevEvaluatedKeys ] = useState([]);
  /* Keep track of the current evaluated key */
  const [ currentEvaluatedKey, setCurrentEvaluatedKey ] = useState(null);
  /* Button style changes based on size */
  const [ buttonStyle, setButtonStyle ] = useState({});

  const popEvaluatedKey = () => {
    const prevEvaluatedKey = prevEvaluatedKeys.pop();
    setCurrentEvaluatedKey(prevEvaluatedKey);
    return prevEvaluatedKey;
  };
  const pushEvaluatedKey = (evaluatedKey) => {
    setPrevEvaluatedKeys([...prevEvaluatedKeys, currentEvaluatedKey]);
    setCurrentEvaluatedKey(evaluatedKey);
    return evaluatedKey;
  };

  const extra = { action: "paginate" };

  useEffect(() => {
    switch (size) {
      case "small":
        setButtonStyle({paddingLeft: "4px", paddingRight: "4px", borderColor: "transparent"});
        break;
      case "default":
      default:
        setButtonStyle({paddingLeft: "7px", paddingRight: "7px"});
        break;
    }
  }, [size]);

  useEffect(() => {
    /* Reset stack of keys when pagination is reset back to the beginning */
    if (!startKey) {
      setPrevEvaluatedKeys([]);
      setCurrentEvaluatedKey(null);
    }
  }, [startKey]);
  
  /* Display forward and back buttons */
  return (
    <Space direction="horizontal">
      <Button tabIndex={-1} size={size}
        disabled={!prevEvaluatedKeys.length && prevEvaluatedKeys.length <= 1}
        style={buttonStyle}
        onClick={() => onChange(popEvaluatedKey(), undefined, undefined, extra)}>
        <LeftOutlined/>
      </Button>
      <Button tabIndex={-1} size={size}
        disabled={!lastEvaluatedKey}
        style={buttonStyle}
        onClick={() => onChange(pushEvaluatedKey(lastEvaluatedKey), undefined, undefined, extra)}>
        <RightOutlined/>
      </Button>
    </Space>
  );
};

export default function CursorTable(props) {
  const { children, pagination, dataSource, onChange } = props;
  const { position = "bottomRight", size = "default" } = pagination || {};
  const [ lastEvaluatedKey, setLastEvaluatedKey ] = useState(null);

  const [ verticalPosition, alignmentPosition ] =
    position.match(/[A-Z]?[a-z]+/g);

  const justifyPosition = {
    left: "start",
    center: "center",
    right: "end"
  }[alignmentPosition.toLowerCase()];

  useEffect(() => {
    /* Get last evaluated key from last item in data source */
    const [ lastDataItem ] = (dataSource || []).slice(-1);
    setLastEvaluatedKey(lastDataItem?.lastEvaluatedKey);
  }, [dataSource]);

  return (
    <Space direction="vertical" style={{width: "100%"}}>
      {verticalPosition === "top" &&
        <Row justify={justifyPosition}>
          <Col>
            <CursorPagination
              lastEvaluatedKey={lastEvaluatedKey}
              onChange={onChange}
              size={size}/>
          </Col>
        </Row>}
      <Table {...props} pagination={{position: ["none", "none"]}}>
        {children}
      </Table>
      {verticalPosition === "bottom" &&
        <Row justify={justifyPosition}>
          <Col>
            <CursorPagination
              lastEvaluatedKey={lastEvaluatedKey}
              onChange={onChange}
              size={size}/>
          </Col>
        </Row>}
    </Space>
    );
}

You're not using evaluatedKey in your pushEvaluatedKey/popEvaluatedKey, is that intentional?

Good catch I have fixed it.

You can augment the CursorPagination component with a handy page size select:

import { Select } from 'antd';

const { Option } = Select;

const [pageSize, setPageSize] = useState(defaultPageSize);
const [sizeOptions, setSizeOptions] = useState([10, 20, 50, 100]);
const handleChangePageSize = () => {};

<Select
        defaultValue={pageSize}
        style={{ width: 100 }}
        onChange={handleChangePageSize}
      >
        {sizeOptions.map((option) => (
          <Option key={option} value={option}>
            {option}
          </Option>
        ))}
</Select>