diff --git a/src/components/TablePagination/TablePagination.scss b/src/components/TablePagination/TablePagination.scss
new file mode 100644
index 000000000..a7756b72c
--- /dev/null
+++ b/src/components/TablePagination/TablePagination.scss
@@ -0,0 +1,40 @@
+@import "~vanilla-framework/scss/settings";
+
+.pagination {
+ align-items: baseline;
+ display: flex;
+ margin-top: 1.2rem;
+
+ .description {
+ flex-grow: 1;
+ }
+
+ .back {
+ margin: 0 $spv--large;
+
+ .p-icon--chevron-down {
+ rotate: 90deg;
+ }
+ }
+
+ .next {
+ margin: 0 $spv--large;
+
+ .p-icon--chevron-down {
+ rotate: 270deg;
+ }
+ }
+
+ .pagination-input {
+ margin-right: $spv--small;
+ min-width: 0;
+ width: 3rem;
+ }
+
+ .pagination-select {
+ margin-bottom: 0;
+ margin-left: $spv--x-large;
+ min-width: 0;
+ width: 7rem;
+ }
+}
diff --git a/src/components/TablePagination/TablePagination.stories.mdx b/src/components/TablePagination/TablePagination.stories.mdx
new file mode 100644
index 000000000..6679f2546
--- /dev/null
+++ b/src/components/TablePagination/TablePagination.stories.mdx
@@ -0,0 +1,214 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import TablePagination from "./TablePagination";
+import MainTable from "../MainTable";
+
+
+
+export const Template = (args) => ;
+
+### TablePagination
+
+This is an HOC [React](https://reactjs.org/) component for applying pagination to input data for direct child components.
+This component is un-opinionated about the structure of the input data and can be used with any child component that displays
+a list of data. However, the styling and behaviour of this component were designed to work nicely with the ```MainTable``` component.
+
+To use this component, simply wrap a child component with it and provide the data that you want to paginate to the ```data``` prop.
+This component will then pass the paged data to all direct child components via a child prop specified by ```dataForwardProp```.
+
+### Props
+
+
+
+### Default
+
+
+
+### Custom page limit
+
+
+
+### Custom display title
+
+
+
+### Render above
+
+
+
+### Render below
+
+
diff --git a/src/components/TablePagination/TablePagination.test.tsx b/src/components/TablePagination/TablePagination.test.tsx
new file mode 100644
index 000000000..6093dbee1
--- /dev/null
+++ b/src/components/TablePagination/TablePagination.test.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable testing-library/no-node-access */
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import TablePagination from "./TablePagination";
+import userEvent from "@testing-library/user-event";
+
+const dummyData = [
+ { id: "row-1" },
+ { id: "row-2" },
+ { id: "row-3" },
+ { id: "row-4" },
+ { id: "row-5" },
+];
+
+describe("", () => {
+ // snapshot tests
+ it("renders table pagination and matches the snapshot", () => {
+ render();
+
+ expect(screen.getByRole("navigation")).toMatchSnapshot();
+ });
+
+ // unit tests
+ it("renders default display title correctly when no pagination takes place", () => {
+ render();
+
+ expect(screen.getByRole("navigation")).toHaveTextContent(
+ "Showing all 5 items"
+ );
+ });
+
+ it("renders default display title correctly when pagination takes place", () => {
+ render();
+
+ expect(screen.getByRole("navigation")).toHaveTextContent(
+ "Showing 1 out of 5 items"
+ );
+ });
+
+ it("has correct per page setting when changed", () => {
+ render();
+
+ expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
+ userEvent.selectOptions(
+ screen.getByRole("combobox", { name: "Items per page" }),
+ "5"
+ );
+ expect(screen.getByRole("navigation")).toHaveTextContent("5/page");
+ });
+
+ it("resets to first page when page size is changed", () => {
+ render();
+
+ expect(screen.getByRole("navigation")).toHaveTextContent("2/page");
+ userEvent.selectOptions(
+ screen.getByRole("combobox", { name: "Items per page" }),
+ "5"
+ );
+ const currentPageInput = screen.getByRole("spinbutton", {
+ name: "Page number",
+ });
+ expect(currentPageInput).toHaveValue(1);
+ });
+
+ it("should paginate correctly in incrementing or decrementing directions", async () => {
+ render();
+ const incButton = screen.getByRole("button", { name: "Next page" });
+ const decButton = screen.getByRole("button", { name: "Previous page" });
+ const currentPageInput = screen.getByRole("spinbutton", {
+ name: "Page number",
+ });
+ const pageSizeSelector = screen.getByRole("combobox", {
+ name: "Items per page",
+ });
+
+ expect(currentPageInput).toHaveValue(1);
+ await userEvent.click(decButton);
+ expect(currentPageInput).toHaveValue(1);
+ await userEvent.click(incButton);
+ expect(currentPageInput).toHaveValue(2);
+ await userEvent.selectOptions(pageSizeSelector, "2");
+ expect(currentPageInput).toHaveValue(1);
+ await fireEvent.change(currentPageInput, { target: { value: 3 } });
+ expect(currentPageInput).toHaveValue(3);
+ await userEvent.click(incButton);
+ expect(currentPageInput).toHaveValue(3);
+ await userEvent.click(decButton);
+ expect(currentPageInput).toHaveValue(2);
+ });
+});
diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx
new file mode 100644
index 000000000..c6ec1f35d
--- /dev/null
+++ b/src/components/TablePagination/TablePagination.tsx
@@ -0,0 +1,180 @@
+import React, {
+ ChangeEvent,
+ Children,
+ HTMLAttributes,
+ PropsWithChildren,
+ ReactElement,
+ ReactNode,
+ RefObject,
+ cloneElement,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import classnames from "classnames";
+import { usePagination } from "hooks";
+import Select from "components/Select";
+import TablePaginationControls from "./TablePaginationControls";
+import "./TablePagination.scss";
+
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+const figureSmallScreen = (descriptionRef: RefObject) => {
+ const descriptionElement = descriptionRef.current;
+ if (!descriptionElement) {
+ return true;
+ }
+ return descriptionElement.getBoundingClientRect().width < 230;
+};
+
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+const renderChildren = (
+ children: ReactNode,
+ dataForwardProp: string,
+ data: unknown[]
+) => {
+ return Children.map(children, (child) => {
+ return cloneElement(child as ReactElement, {
+ [dataForwardProp]: data,
+ });
+ });
+};
+
+const DEFAULT_PAGE_LIMITS = [50, 100, 200];
+const generatePagingOptions = (pageLimits: number[]) => {
+ return pageLimits.map((limit) => ({ value: limit, label: `${limit}/page` }));
+};
+
+export type Props = PropsWithChildren<{
+ /**
+ * list of data elements to be paginated. This component is un-opinionated about
+ * the structure of the data but it should be identical to the data structure
+ * reuiqred by the child table component
+ */
+ data: unknown[];
+ /**
+ * prop name of the child table component that receives paginated data.
+ * default value is set to @constant rows, which is the data prop for the @func MainTable component
+ */
+ dataForwardProp?: string;
+ /**
+ * the name of the item associated to each row within the table.
+ */
+ itemName?: string;
+ /**
+ * custom styling for the pagination container
+ */
+ className?: string;
+ /**
+ * custom description to be displayed by the pagination
+ */
+ description?: ReactNode;
+ /**
+ * custom per page limits express as an array of numbers.
+ */
+ pageLimits?: number[];
+ /**
+ * place the pagination component above or below the table?
+ */
+ position?: "above" | "below";
+}> &
+ HTMLAttributes;
+
+const TablePagination = ({
+ data,
+ className,
+ itemName = "item",
+ description,
+ position = "above",
+ dataForwardProp = "rows",
+ pageLimits = DEFAULT_PAGE_LIMITS,
+ children,
+ ...divProps
+}: Props) => {
+ const descriptionRef = useRef(null);
+ const [isSmallScreen, setSmallScreen] = useState(false);
+ const [pageSize, setPageSize] = useState(() => {
+ return generatePagingOptions(pageLimits)[0].value;
+ });
+ const { paginate, currentPage, pageData, totalItems } = usePagination(data, {
+ itemsPerPage: pageSize,
+ autoResetPage: true,
+ });
+
+ useEffect(() => {
+ const handleResize = () => {
+ setSmallScreen(figureSmallScreen(descriptionRef));
+ };
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [isSmallScreen]);
+
+ const handlePageSizeChange = (e: ChangeEvent) => {
+ paginate(1);
+ setPageSize(parseInt(e.target.value));
+ };
+
+ const getDescription = () => {
+ if (description) {
+ return description;
+ }
+
+ const visibleCount = pageData.length;
+
+ if (isSmallScreen) {
+ return `${visibleCount} out of ${totalItems}`;
+ }
+
+ if (visibleCount === totalItems && visibleCount > 1) {
+ return `Showing all ${totalItems} ${itemName}s`;
+ }
+
+ return `Showing ${visibleCount} out of ${totalItems} ${itemName}${
+ totalItems !== 1 ? "s" : ""
+ }`;
+ };
+
+ const totalPages = Math.ceil(data.length / pageSize);
+ const clonedChildren = renderChildren(children, dataForwardProp, pageData);
+ return (
+ <>
+ {position === "below" && clonedChildren}
+
+
+ {getDescription()}
+
+
+
+