diff --git a/jsx/PaginationLinks.d.ts b/jsx/PaginationLinks.d.ts
deleted file mode 100644
index f82450bd2c4..00000000000
--- a/jsx/PaginationLinks.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {ReactNode} from 'react';
-
-type PaginationLinksProps = {
-    Total: number,
-    onChangePage: (pageNo: number) => void,
-    RowsPerPage?: number,
-    Active?: number,
-
-}
-
-/**
- * Pagination class. See PaginationLinks.js
- */
-class PaginationLinks {
-    props: PaginationLinksProps
-    state: any
-    context: object
-    refs: {[key: string]: ReactInstance}
-
-    /**
-     * Create a new PaginationLinks node
-     *
-     * @param {PaginationLinksProps} props - React props
-     */
-    constructor(props: PaginationLinksProps)
-
-    /**
-     * React lifecycle method
-     *
-     * @returns {ReactNode}
-     */
-    render(): ReactNode
-
-    /**
-     * React lifecycle method
-     *
-     * @param {object} newstate - the state to overwrite
-     */
-    setState(newstate: object): void
-
-    /**
-     * React lifecycle method
-     */
-    forceUpdate(): void
-}
-
-export default PaginationLinks;
diff --git a/jsx/PaginationLinks.js b/jsx/PaginationLinks.js
deleted file mode 100644
index 8f7e99ecf0e..00000000000
--- a/jsx/PaginationLinks.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Pagination component
- */
-class PaginationLinks extends Component {
-  /**
-   * @constructor
-   * @param {object} props - React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-
-    };
-    this.changePage = this.changePage.bind(this);
-  }
-
-  /**
-   * Called by React when the component is updated.
-   *
-   * @param {object} prevProps - Previous React Component properties
-   */
-  componentDidUpdate(prevProps) {
-    if (this.props.Total < prevProps.Total) {
-      this.props.onChangePage(1);
-    }
-  }
-
-  /**
-   * Creates an onClick Event Handler
-   * execyting this.props.onChangePage(i)
-   *
-   * @param {number} i - Page index
-   * @return {function(Event): void} - onClick Event Handler
-   */
-  changePage(i) {
-    return function(evt) {
-      // Don't jump to the top of the page
-      evt.preventDefault();
-
-      if (this.props.onChangePage) {
-        this.props.onChangePage(i);
-      }
-    }.bind(this);
-  }
-
-  /**
-   * Renders the React component.
-   *
-   * @return {JSX} - React markup for the component
-   */
-  render() {
-    let rowsPerPage = this.props.RowsPerPage;
-    let pageLinks = [];
-    let classList;
-    let lastPage = Math.ceil(this.props.Total / rowsPerPage);
-    let startPage = Math.max(1, this.props.Active - 3);
-    let lastShownPage = Math.min(this.props.Active + 3, lastPage);
-
-    if (this.props.Total === 0) {
-      return <div />;
-    }
-    if (this.props.Total < this.props.RowsPerPage) {
-      return <div />;
-    }
-
-    if ((lastShownPage - startPage) <= 7) {
-      lastShownPage = startPage + 6;
-      if (lastShownPage > lastPage) {
-        lastShownPage = lastPage;
-        startPage = lastPage - 6;
-      }
-    }
-
-    if (startPage > 1) {
-      pageLinks.push(
-        <li
-          key={'table_page_beginning_' + startPage.toString()}
-          onClick={this.changePage(1)}>
-          <a href='#'>&laquo;</a>
-        </li>
-      );
-    }
-    if (startPage < 1) {
-      startPage = 1;
-    }
-    if (lastShownPage < 1) {
-      lastShownPage = 1;
-    }
-
-    // If there is only 1 page, don't display pagination links
-    if (startPage === lastShownPage) {
-      return <div />;
-    }
-
-    for (let i = startPage; i <= lastShownPage; i += 1) {
-      classList = '';
-      if (this.props.Active === i) {
-        classList = 'active';
-      }
-      pageLinks.push(
-        <li
-          key={'table_page_' + i.toString()}
-          onClick={this.changePage(i)}
-          className={classList}
-        >
-          <a href="#">{i}</a>
-        </li>
-      );
-    }
-    if (lastShownPage !== lastPage) {
-      pageLinks.push(
-        <li
-          key={'table_page_more_' + lastShownPage.toString()}
-          onClick={this.changePage(lastPage)}
-        >
-          <a href='#'>&raquo;</a>
-        </li>
-      );
-    }
-
-    return (
-      <ul className='pagination pagination-table'>
-        {pageLinks}
-      </ul>
-    );
-  }
-}
-PaginationLinks.propTypes = {
-  onChangePage: PropTypes.func,
-  Total: PropTypes.number.isRequired,
-  RowsPerPage: PropTypes.number,
-  Active: PropTypes.number,
-};
-PaginationLinks.defaultProps = {
-  RowsPerPage: 10,
-  Active: 1,
-};
-
-window.PaginationLinks = PaginationLinks;
-
-export default PaginationLinks;
diff --git a/jsx/PaginationLinks.tsx b/jsx/PaginationLinks.tsx
new file mode 100644
index 00000000000..4d1280d6953
--- /dev/null
+++ b/jsx/PaginationLinks.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+
+/**
+ * Display pagination links (usually for a table) within LORIS
+ *
+ * @param {object} props - React props
+ * @param {number} props.Total - The total number of pages
+ * @param {function} props.onChangePage - Callback to call when page number
+ *                                        is clicked
+ * @param {number|undefined} props.RowsPerPage - The number of rows on each page.
+ *                                               Defaults to 10.
+ * @param {number|undefined} props.Active - The currently active page number.
+ *                                          Defaults to 1.
+ */
+function PaginationLinks(props: {
+  Total: number,
+  onChangePage: (pagnum: number) => void,
+  RowsPerPage: number|undefined,
+  Active: number|undefined,
+}): React.ReactElement {
+  const pageLinks = [];
+  let classList = '';
+  const rowsPerPage = props.RowsPerPage || 10;
+  const activePage = props.Active || 1;
+
+  const lastPage = Math.ceil(props.Total / rowsPerPage);
+  let startPage = Math.max(1, activePage - 3);
+  let lastShownPage = Math.min(activePage + 3, lastPage);
+
+  if (props.Total === 0) {
+    return <div />;
+  }
+  if (props.Total < rowsPerPage) {
+    return <div />;
+  }
+
+  if ((lastShownPage - startPage) <= 7) {
+    lastShownPage = startPage + 6;
+    if (lastShownPage > lastPage) {
+      lastShownPage = lastPage;
+      startPage = lastPage - 6;
+    }
+  }
+
+  if (startPage < 1) {
+    startPage = 1;
+  }
+  if (lastShownPage < 1) {
+    lastShownPage = 1;
+  }
+
+  // If there is only 1 page, don't display pagination links
+  if (startPage === lastShownPage) {
+    return <div />;
+  }
+
+  if (startPage > 1) {
+    pageLinks.push(
+      <li
+        key={'table_page_beginning_' + startPage.toString()}
+        onClick={(e) => {
+          e.preventDefault();
+          props.onChangePage(1);
+        }}>
+        <a href='#'>&laquo;</a>
+      </li>
+    );
+  }
+
+  for (let i = startPage; i <= lastShownPage; i += 1) {
+    classList = '';
+    if (activePage === i) {
+      classList = 'active';
+    }
+    pageLinks.push(
+      <li
+        key={'table_page_' + i.toString()}
+        onClick={(e) => {
+          e.preventDefault();
+          props.onChangePage(i);
+        }}
+        className={classList}
+      >
+        <a href="#">{i}</a>
+      </li>
+    );
+  }
+  if (lastShownPage !== lastPage) {
+    pageLinks.push(
+      <li
+        key={'table_page_more_' + lastShownPage.toString()}
+        onClick={(e) => {
+          e.preventDefault();
+          props.onChangePage(lastPage);
+        }}>
+        <a href='#'>&raquo;</a>
+      </li>
+    );
+  }
+
+  return (
+    <ul className='pagination pagination-table'>
+      {pageLinks}
+    </ul>
+  );
+}
+
+export default PaginationLinks;
diff --git a/php/libraries/NDB_Menu_Filter.class.inc b/php/libraries/NDB_Menu_Filter.class.inc
index 6badc46807d..d7a5bded144 100644
--- a/php/libraries/NDB_Menu_Filter.class.inc
+++ b/php/libraries/NDB_Menu_Filter.class.inc
@@ -858,7 +858,6 @@ class NDB_Menu_Filter extends NDB_Menu
         return array_merge(
             $depends,
             [
-                $baseURL . '/js/components/PaginationLinks.js',
                 $baseURL . '/js/components/StaticDataTable.js',
             ]
         );
diff --git a/webpack.config.ts b/webpack.config.ts
index c4d5bfcb740..1e19790a400 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -346,7 +346,6 @@ const configs: webpack.Configuration[] = [];
 
 configs.push({
   entry: {
-    PaginationLinks: './jsx/PaginationLinks.js',
     StaticDataTable: './jsx/StaticDataTable.js',
     MultiSelectDropdown: './jsx/MultiSelectDropdown.js',
     Breadcrumbs: './jsx/Breadcrumbs.js',