diff --git a/.swcrc b/.swcrc
index 9420c60c..6991ad0a 100644
--- a/.swcrc
+++ b/.swcrc
@@ -13,11 +13,6 @@
         "loose": false,
         "externalHelpers": true
     },
-    "env": {
-        "targets": "> 0.5%, last 2 versions, Firefox ESR, not dead, safari >= 15.4, iOS >= 15.4",
-        "mode": "usage",
-        "coreJs": "3"
-    },
     "minify": false,
     "isModule": true
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4aebbfe7..a390a8ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
       "dependencies": {
         "@emotion/cache": "^11.14.0",
         "@swc/helpers": "^0.5.21",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.5",
         "clsx": "^2.1.1",
         "lodash.assignwith": "^4.2.0",
         "lodash.clonedeep": "^4.5.0",
@@ -33,8 +35,14 @@
         "@mui/icons-material": "^9.0.0",
         "@mui/material": "^9.0.0",
         "@rollup/plugin-commonjs": "^29.0.2",
+        "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-replace": "^6.0.3",
         "@swc/core": "^1.11.11",
+        "@types/lodash.assignwith": "^4.2.9",
+        "@types/lodash.clonedeep": "^4.5.9",
+        "@types/lodash.find": "^4.6.9",
+        "@types/lodash.isundefined": "^3.0.9",
+        "@types/lodash.merge": "^4.6.9",
         "@vitest/coverage-v8": "^4.1.8",
         "ajv": "^8.20.0",
         "chai": "^6.2.2",
@@ -67,8 +75,11 @@
         "rollup-plugin-swc3": "^0.12.1",
         "simulant": "^0.2.2",
         "sinon": "^21.1.2",
+        "source-map-loader": "^5.0.0",
         "style-loader": "^4.0.0",
         "swc-loader": "^0.2.6",
+        "ts-loader": "^9.6.2",
+        "typescript": "^7.0.2",
         "unplugin-swc": "^1.5.9",
         "vitest": "^4.1.8",
         "webpack": "^5.106.2",
@@ -1135,9 +1146,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1155,9 +1163,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1175,9 +1180,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1195,9 +1197,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1215,9 +1214,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1235,9 +1231,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1255,9 +1248,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1275,9 +1265,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1295,9 +1282,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1321,9 +1305,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1347,9 +1328,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1373,9 +1351,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1399,9 +1374,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1425,9 +1397,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1451,9 +1420,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1477,9 +1443,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2427,9 +2390,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2447,9 +2407,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2467,9 +2424,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2487,9 +2441,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3045,6 +2996,31 @@
         }
       }
     },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.3.tgz",
+      "integrity": "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-replace": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.3.tgz",
@@ -3937,6 +3913,63 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.25",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.25.tgz",
+      "integrity": "sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.assignwith": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.assignwith/-/lodash.assignwith-4.2.9.tgz",
+      "integrity": "sha512-VbhcGOLjk/XPlF74Yfa1AUC2TrR8xYur28V8FWLTWRkAsxqXeyiJcTG7dCzZAjHXAUM3gRT8opYX0/wFlL0+ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.clonedeep": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.9.tgz",
+      "integrity": "sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.find": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.find/-/lodash.find-4.6.9.tgz",
+      "integrity": "sha512-v1qcNZs0ksl0+BO+aflReb8oIDHLc+rSc4n+RYZ3pMaxIFw2/mcW/wlTYFqrh+8dY1ZqRbX22ytFfUgs4sAXtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.isundefined": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.isundefined/-/lodash.isundefined-3.0.9.tgz",
+      "integrity": "sha512-nF+msH20xJzIJyZMBfArDnYxibF/Kt80y9naFYULzZ2yc4eBDAyxVDaf8DXyDWefHDh9CAaUoFp6XhMn38a26g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.merge": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz",
+      "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -3982,6 +4015,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -3992,6 +4043,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
@@ -4062,6 +4120,346 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript/typescript-aix-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
+      "integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
+      "integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
+      "integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
+      "integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
+      "integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
+      "integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-loong64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
+      "integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-mips64el": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
+      "integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
+      "integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-riscv64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
+      "integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-s390x": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
+      "integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
+      "integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-sunos-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
+      "integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
+      "integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
+      "integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
     "node_modules/@vitest/coverage-v8": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.8.tgz",
@@ -4529,6 +4927,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5205,6 +5619,23 @@
         "node": ">=18"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/cheerio": {
       "version": "1.0.0-rc.12",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
@@ -5347,6 +5778,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -5763,6 +6214,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/default-browser": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
@@ -8239,6 +8700,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -11968,6 +12436,40 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-5.0.0.tgz",
+      "integrity": "sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.72.1"
+      }
+    },
+    "node_modules/source-map-loader/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -12554,6 +13056,41 @@
         "tslib": "2"
       }
     },
+    "node_modules/ts-loader": {
+      "version": "9.6.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.6.2.tgz",
+      "integrity": "sha512-R4iuczmtgxvtuI556s+hTZ6/7Ee03VCAk/l/M8LY1OAsUgB7YydsCxkgq9D9pKRaD7GJqUi2u8fp9zZP/ufjKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "picomatch": "^4.0.0",
+        "source-map": "^0.7.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "loader-utils": "*",
+        "typescript": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "loader-utils": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-loader/node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -12747,6 +13284,41 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
+      "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc"
+      },
+      "engines": {
+        "node": ">=16.20.0"
+      },
+      "optionalDependencies": {
+        "@typescript/typescript-aix-ppc64": "7.0.2",
+        "@typescript/typescript-darwin-arm64": "7.0.2",
+        "@typescript/typescript-darwin-x64": "7.0.2",
+        "@typescript/typescript-freebsd-arm64": "7.0.2",
+        "@typescript/typescript-freebsd-x64": "7.0.2",
+        "@typescript/typescript-linux-arm": "7.0.2",
+        "@typescript/typescript-linux-arm64": "7.0.2",
+        "@typescript/typescript-linux-loong64": "7.0.2",
+        "@typescript/typescript-linux-mips64el": "7.0.2",
+        "@typescript/typescript-linux-ppc64": "7.0.2",
+        "@typescript/typescript-linux-riscv64": "7.0.2",
+        "@typescript/typescript-linux-s390x": "7.0.2",
+        "@typescript/typescript-linux-x64": "7.0.2",
+        "@typescript/typescript-netbsd-arm64": "7.0.2",
+        "@typescript/typescript-netbsd-x64": "7.0.2",
+        "@typescript/typescript-openbsd-arm64": "7.0.2",
+        "@typescript/typescript-openbsd-x64": "7.0.2",
+        "@typescript/typescript-sunos-x64": "7.0.2",
+        "@typescript/typescript-win32-arm64": "7.0.2",
+        "@typescript/typescript-win32-x64": "7.0.2"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
diff --git a/package.json b/package.json
index 5c9422de..472fc976 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "8.0.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -16,9 +17,9 @@
     "docs:start": "next start docs",
     "coverage": "cross-env NODE_ENV=test vitest run --coverage --coverage.reporter=text",
     "coverage:html": "cross-env NODE_ENV=test vitest run --coverage",
-    "prettier": "find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write",
+    "prettier": "find src/ -type f \\( -name \"*.ts\" -o -name \"*.tsx\" \\) | xargs prettier --write && find docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write",
     "lint": "eslint src",
-    "build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
+    "build": "cross-env NODE_ENV=production npm run prettier && rollup -c && tsc --emitDeclarationOnly",
     "prepare": "npm run build"
   },
   "repository": {
@@ -44,15 +45,21 @@
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@swc/core": "^1.11.11",
+    "@types/lodash.assignwith": "^4.2.9",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.find": "^4.6.9",
+    "@types/lodash.isundefined": "^3.0.9",
+    "@types/lodash.merge": "^4.6.9",
     "@vitest/coverage-v8": "^4.1.8",
+    "ajv": "^8.20.0",
     "chai": "^6.2.2",
     "core-js": "^3.49.0",
     "cross-env": "^10.1.0",
     "css-loader": "^7.1.4",
     "enzyme": "^3.11.0",
-    "ajv": "^8.20.0",
     "eslint": "^10.3.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -78,8 +85,11 @@
     "rollup-plugin-swc3": "^0.12.1",
     "simulant": "^0.2.2",
     "sinon": "^21.1.2",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
+    "ts-loader": "^9.6.2",
+    "typescript": "^7.0.2",
     "unplugin-swc": "^1.5.9",
     "vitest": "^4.1.8",
     "webpack": "^5.106.2",
@@ -96,6 +106,8 @@
   "dependencies": {
     "@emotion/cache": "^11.14.0",
     "@swc/helpers": "^0.5.21",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "clsx": "^2.1.1",
     "lodash.assignwith": "^4.2.0",
     "lodash.clonedeep": "^4.5.0",
diff --git a/prettier.config.js b/prettier.config.js
index 195dea07..c850d48f 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -4,6 +4,5 @@ module.exports = {
   trailingComma: 'all',
   bracketSpacing: true,
   bracketSameLine: true,
-  parser: 'babel',
   semi: true,
 };
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 0bc02170..1844e07e 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -1,5 +1,6 @@
 import { swc } from 'rollup-plugin-swc3';
 import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import uglify from '@lopatnov/rollup-plugin-uglify';
 import packageJson from './package.json' with { type: 'json' };
@@ -15,9 +16,12 @@ const externalPackages = [
 const isExternal = (id) => externalPackages.some((pkg) => id === pkg || id.startsWith(`${pkg}/`));
 
 export default {
-  input: 'src/index.js',
+  input: 'src/index.tsx',
   external: isExternal,
   plugins: [
+    nodeResolve({
+      extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    }),
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
       preventAssignment: true,
@@ -26,13 +30,13 @@ export default {
       include: ['node_modules/**'],
     }),
     swc({
-      include: /\.(js|jsx)$/,
+      include: /\.(ts|tsx)$/,
       exclude: /node_modules/,
       tsconfig: false,
       jsc: {
         parser: {
-          syntax: 'ecmascript',
-          jsx: true,
+          syntax: 'typescript',
+          tsx: true,
         },
         transform: {
           react: {
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.tsx
similarity index 81%
rename from src/MUIDataTable.js
rename to src/MUIDataTable.tsx
index 3ab427be..d7d326da 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.tsx
@@ -6,7 +6,6 @@ import cloneDeep from 'lodash.clonedeep';
 import find from 'lodash.find';
 import isUndefined from 'lodash.isundefined';
 import merge from 'lodash.merge';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { flushSync } from 'react-dom';
 import DefaultTableBody from './components/TableBody';
@@ -22,8 +21,46 @@ import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDepreca
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { load, save } from './localStorage';
+import type { ReactNode, ComponentType } from 'react';
+import type { Theme } from '@mui/material/styles';
+import type { MUIDataTableData } from './types/data';
+import type { MUIDataTableOptions } from './types';
+
+export interface MUIDataTableProps {
+  title: ReactNode;
+  data: MUIDataTableData;
+  columns: (string | Record<string, unknown>)[];
+  options?: MUIDataTableOptions;
+  className?: string;
+  components?: Record<string, unknown>;
+  classes: Record<string, string>;
+}
+
+interface MUIDataTableInternalState {
+  activeColumn: number | null;
+  announceText: string | null;
+  count: number;
+  columns: Record<string, unknown>[];
+  expandedRows: { data: { index: number; dataIndex: number }[]; lookup: Record<number, boolean> };
+  data: { index: number; data: unknown[] }[];
+  displayData: { data: unknown[]; dataIndex: number }[];
+  filterData: string[][];
+  filterList: string[][];
+  page: number;
+  previousSelectedRow: { index: number; dataIndex: number } | null;
+  rowsPerPage: number;
+  searchProps: Record<string, unknown>;
+  searchText: string | null;
+  selectedRows: { data: { index: number; dataIndex: number }[]; lookup: Record<number, boolean> };
+  showResponsive: boolean;
+  sortOrder: Record<string, unknown>;
+  columnOrder: number[];
+  curSelectedRows?: { index: number; dataIndex: number }[];
+  curExpandedRows?: { index: number; dataIndex: number }[];
+  [key: string]: unknown;
+}
 
-const defaultTableStyles = (theme) => ({
+const defaultTableStyles = (theme: Theme) => ({
   root: {
     '& .datatables-noprint': {
       '@media print': {
@@ -95,7 +132,7 @@ const TABLE_LOAD = {
 // Populate this list with anything that might render in the toolbar to determine if we hide the toolbar
 const TOOLBAR_ITEMS = ['title', 'filter', 'search', 'print', 'download', 'viewColumns', 'customToolbar'];
 
-const hasToolbarItem = (options, title) => {
+const hasToolbarItem = (options: any, title: any) => {
   options.title = title;
 
   return !isUndefined(find(TOOLBAR_ITEMS, (i) => options[i]));
@@ -109,152 +146,14 @@ const STP = {
   ALWAYS: 'always',
 };
 
-class MUIDataTable extends React.Component {
-  static propTypes = {
-    /** Title of the table */
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-    /** Data used to describe table */
-    data: PropTypes.array.isRequired,
-    /** Columns used to describe table */
-    columns: PropTypes.PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-          label: PropTypes.string,
-          name: PropTypes.string.isRequired,
-          options: PropTypes.shape({
-            display: PropTypes.oneOf(['true', 'false', 'excluded', 'always', true, false]),
-            empty: PropTypes.bool,
-            filter: PropTypes.bool,
-            sort: PropTypes.bool,
-            print: PropTypes.bool,
-            searchable: PropTypes.bool,
-            download: PropTypes.bool,
-            viewColumns: PropTypes.bool,
-            filterList: PropTypes.array,
-            filterOptions: PropTypes.oneOfType([
-              PropTypes.array,
-              PropTypes.shape({
-                names: PropTypes.array,
-                logic: PropTypes.func,
-                display: PropTypes.func,
-              }),
-            ]),
-            filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
-            customHeadRender: PropTypes.func,
-            customBodyRender: PropTypes.func,
-            customBodyRenderLite: PropTypes.func,
-            customHeadLabelRender: PropTypes.func,
-            customFilterListOptions: PropTypes.oneOfType([
-              PropTypes.shape({
-                render: PropTypes.func,
-                update: PropTypes.func,
-              }),
-            ]),
-            customFilterListRender: PropTypes.func,
-            setCellProps: PropTypes.func,
-            setCellHeaderProps: PropTypes.func,
-            sortThirdClickReset: PropTypes.bool,
-            sortDescFirst: PropTypes.bool,
-          }),
-        }),
-      ]),
-    ).isRequired,
-    /** Options used to describe table */
-    options: PropTypes.shape({
-      caseSensitive: PropTypes.bool,
-      columnOrder: PropTypes.array,
-      count: PropTypes.number,
-      confirmFilters: PropTypes.bool,
-      consoleWarnings: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-      customFilterDialogFooter: PropTypes.func,
-      customFooter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      customRowRender: PropTypes.func,
-      customSearch: PropTypes.func,
-      customSearchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      customSort: PropTypes.func,
-      customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      draggableColumns: PropTypes.object,
-      enableNestedDataAccess: PropTypes.string,
-      expandableRows: PropTypes.bool,
-      expandableRowsHeader: PropTypes.bool,
-      expandableRowsOnClick: PropTypes.bool,
-      disableToolbarSelect: PropTypes.bool,
-      download: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
-      downloadOptions: PropTypes.shape({
-        filename: PropTypes.string,
-        separator: PropTypes.string,
-        filterOptions: PropTypes.shape({
-          useDisplayedColumnsOnly: PropTypes.bool,
-          useDisplayedRowsOnly: PropTypes.bool,
-        }),
-      }),
-      filter: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
-      filterArrayFullMatch: PropTypes.bool,
-      filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
-      fixedHeader: PropTypes.bool,
-      fixedSelectColumn: PropTypes.bool,
-      getTextLabels: PropTypes.func,
-      isRowExpandable: PropTypes.func,
-      isRowSelectable: PropTypes.func,
-      jumpToPage: PropTypes.bool,
-      onDownload: PropTypes.func,
-      onFilterChange: PropTypes.func,
-      onFilterChipClose: PropTypes.func,
-      onFilterConfirm: PropTypes.func,
-      onFilterDialogOpen: PropTypes.func,
-      onFilterDialogClose: PropTypes.func,
-      onRowClick: PropTypes.func,
-      onRowsExpand: PropTypes.func,
-      onRowExpansionChange: PropTypes.func,
-      onRowsSelect: PropTypes.func,
-      onRowSelectionChange: PropTypes.func,
-      onTableChange: PropTypes.func,
-      onTableInit: PropTypes.func,
-      page: PropTypes.number,
-      pagination: PropTypes.bool,
-      print: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
-      searchProps: PropTypes.object,
-      selectableRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['none', 'single', 'multiple'])]),
-      selectableRowsHeader: PropTypes.bool,
-      selectableRowsHideCheckboxes: PropTypes.bool,
-      selectableRowsOnClick: PropTypes.bool,
-      serverSide: PropTypes.bool,
-      tableId: PropTypes.string,
-      tableBodyHeight: PropTypes.string,
-      tableBodyMaxHeight: PropTypes.string,
-      renderExpandableRow: PropTypes.func,
-      resizableColumns: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-      responsive: PropTypes.oneOf(['standard', 'vertical', 'verticalAlways', 'simple']),
-      rowHover: PropTypes.bool,
-      rowsExpanded: PropTypes.array,
-      rowsPerPage: PropTypes.number,
-      rowsPerPageOptions: PropTypes.array,
-      rowsSelected: PropTypes.array,
-      search: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
-      searchOpen: PropTypes.bool,
-      searchAlwaysOpen: PropTypes.bool,
-      searchPlaceholder: PropTypes.string,
-      searchText: PropTypes.string,
-      setFilterChipProps: PropTypes.func,
-      setRowProps: PropTypes.func,
-      selectToolbarPlacement: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf([STP.REPLACE, STP.ABOVE, STP.NONE, STP.ALWAYS]),
-      ]),
-      setTableProps: PropTypes.func,
-      sort: PropTypes.bool,
-      sortOrder: PropTypes.object,
-      storageKey: PropTypes.string,
-      viewColumns: PropTypes.oneOf([true, false, 'true', 'false', 'disabled']),
-    }),
-    /** Pass and use className to style MUIDataTable as desired */
-    className: PropTypes.string,
-    components: PropTypes.objectOf(PropTypes.any),
-  };
-
-  static defaultProps = {
+class MUIDataTable extends React.Component<MUIDataTableProps, MUIDataTableInternalState> {
+  static defaultProps: {
+    title: ReactNode;
+    options: Record<string, unknown>;
+    data: unknown[][];
+    columns: (string | Record<string, unknown>)[];
+    components: Record<string, unknown>;
+  } = {
     title: '',
     options: {},
     data: [],
@@ -273,7 +172,19 @@ class MUIDataTable extends React.Component {
     },
   };
 
-  constructor(props) {
+  options: any = {};
+  tableRef: React.RefObject<HTMLElement | null> = React.createRef();
+  tableContent: React.RefObject<HTMLElement | null> = React.createRef();
+  draggableHeadCellRefs: Record<string, HTMLElement | null> = {};
+  resizeHeadCellRefs: Record<string, HTMLElement | null> = {};
+  timers: Record<string, unknown> = {};
+  setHeadResizeable: (
+    cellsRef: Record<string, HTMLElement | null>,
+    tableRef: React.RefObject<HTMLElement | null>,
+  ) => void = () => {};
+  updateDividers: () => void = () => {};
+
+  constructor(props: MUIDataTableProps) {
     super(props);
     this.tableRef = React.createRef();
     this.tableContent = React.createRef();
@@ -283,11 +194,12 @@ class MUIDataTable extends React.Component {
     this.setHeadResizeable = () => {};
     this.updateDividers = () => {};
 
-    let defaultState = {
+    let defaultState: any = {
       activeColumn: null,
       announceText: null,
       count: 0,
       columns: [],
+      columnOrder: [],
       expandedRows: {
         data: [],
         lookup: {},
@@ -311,24 +223,24 @@ class MUIDataTable extends React.Component {
 
     this.mergeDefaultOptions(props);
 
-    const restoredState = load(props.options.storageKey);
+    const restoredState = load((props.options as any)?.storageKey);
     this.state = Object.assign(defaultState, restoredState ? restoredState : this.getInitTableOptions());
 
     this.setTableData = this.setTableData.bind(this);
 
-    this.setTableData(props, TABLE_LOAD.INITIAL, true, null, true);
+    this.setTableData(props, TABLE_LOAD.INITIAL, true, undefined, true);
   }
 
-  componentDidMount() {
+  override componentDidMount() {
     this.setHeadResizeable(this.resizeHeadCellRefs, this.tableRef);
 
     // When we have a search, we must reset page to view it unless on serverSide since paging is handled by the user.
-    if (this.props.options.searchText && !this.props.options.serverSide) this.setState({ page: 0 });
+    if ((this.props.options as any)?.searchText && !(this.props.options as any)?.serverSide) this.setState({ page: 0 });
 
     this.setTableInit('tableInitialized');
   }
 
-  componentDidUpdate(prevProps) {
+  override componentDidUpdate(prevProps: MUIDataTableProps) {
     if (
       this.props.data !== prevProps.data ||
       this.props.columns !== prevProps.columns ||
@@ -346,7 +258,10 @@ class MUIDataTable extends React.Component {
       });
     }
 
-    if (this.props.options.searchText !== prevProps.options.searchText && !this.props.options.serverSide) {
+    if (
+      (this.props.options as any)?.searchText !== (prevProps.options as any)?.searchText &&
+      !(this.props.options as any)?.serverSide
+    ) {
       // When we have a search, we must reset page to view it unless on serverSide since paging is handled by the user.
       this.setState({ page: 0 });
     }
@@ -360,7 +275,7 @@ class MUIDataTable extends React.Component {
     }
   }
 
-  updateOptions(options, props) {
+  updateOptions(options: any, props: any) {
     // set backwards compatibility options
     if (props.options.disableToolbarSelect === true && props.options.selectToolbarPlacement === undefined) {
       // if deprecated option disableToolbarSelect is set and selectToolbarPlacement is default then use it
@@ -429,15 +344,15 @@ class MUIDataTable extends React.Component {
     selectToolbarPlacement: STP.REPLACE,
   });
 
-  warnDep = (msg, consoleWarnings) => {
+  warnDep = (msg: string, _consoleWarnings?: any) => {
     warnDeprecated(msg, this.options.consoleWarnings);
   };
 
-  warnInfo = (msg, consoleWarnings) => {
+  warnInfoMsg = (msg: string, _consoleWarnings?: any) => {
     warnInfo(msg, this.options.consoleWarnings);
   };
 
-  handleOptionDeprecation = (props) => {
+  handleOptionDeprecation = (props: any) => {
     if (typeof this.options.selectableRows === 'boolean') {
       this.warnDep(
         'Using a boolean for selectableRows has been deprecated. Please use string option: multiple | single | none',
@@ -460,7 +375,7 @@ class MUIDataTable extends React.Component {
             ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       } else {
-        this.warnInfo(
+        this.warnInfoMsg(
           this.options.responsive +
             ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
@@ -499,7 +414,7 @@ class MUIDataTable extends React.Component {
       );
     }
 
-    props.columns.map((c) => {
+    props.columns.map((c: any) => {
       if (c.options && c.options.customFilterListRender) {
         this.warnDep(
           'The customFilterListRender option has been deprecated. It is being replaced by customFilterListOptions.render (Specify customFilterListOptions: { render: Function } in column options.)',
@@ -526,7 +441,7 @@ class MUIDataTable extends React.Component {
   /*
    * React currently does not support deep merge for defaultProps. Objects are overwritten
    */
-  mergeDefaultOptions(props) {
+  mergeDefaultOptions(props: any) {
     const defaultOptions = this.getDefaultOptions();
     const theProps = Object.assign({}, props);
     theProps.options = theProps.options || {};
@@ -534,7 +449,7 @@ class MUIDataTable extends React.Component {
     this.updateOptions(defaultOptions, theProps);
   }
 
-  validateOptions(options) {
+  validateOptions(options: any) {
     if (options.serverSide && options.onTableChange === undefined) {
       throw Error('onTableChange callback must be provided when using serverSide option');
     }
@@ -546,16 +461,16 @@ class MUIDataTable extends React.Component {
     }
   }
 
-  setTableAction = (action) => {
+  setTableAction = (action: string) => {
     if (typeof this.options.onTableChange === 'function') {
-      this.options.onTableChange(action, this.state);
+      this.options.onTableChange(action, this.state as any);
     }
     if (this.options.storageKey) {
-      save(this.options.storageKey, this.state);
+      save(this.options.storageKey, this.state as any);
     }
   };
 
-  setTableInit = (action) => {
+  setTableInit = (action: string) => {
     if (typeof this.options.onTableInit === 'function') {
       this.options.onTableInit(action, this.state);
     }
@@ -563,7 +478,7 @@ class MUIDataTable extends React.Component {
 
   getInitTableOptions() {
     const optionNames = ['rowsPerPage', 'page', 'rowsSelected', 'rowsPerPageOptions'];
-    const optState = optionNames.reduce((acc, cur) => {
+    const optState = optionNames.reduce((acc: any, cur) => {
       if (this.options[cur] !== undefined) {
         acc[cur] = this.options[cur];
       }
@@ -574,7 +489,7 @@ class MUIDataTable extends React.Component {
     return optState;
   }
 
-  setHeadCellRef = (index, pos, el) => {
+  setHeadCellRef = (index: number, pos: number, el: HTMLElement | null) => {
     this.draggableHeadCellRefs[index] = el;
     this.resizeHeadCellRefs[pos] = el;
   };
@@ -592,11 +507,11 @@ class MUIDataTable extends React.Component {
    *  prevColumnOrder - columnOrder object saved onto the state.
    */
 
-  buildColumns = (newColumns, prevColumns = [], newColumnOrder, prevColumnOrder = []) => {
-    let columnData = [];
-    let filterData = [];
-    let filterList = [];
-    let columnOrder = [];
+  buildColumns = (newColumns: any[], prevColumns: any[] = [], newColumnOrder: any, prevColumnOrder: any[] = []) => {
+    let columnData: any[] = [];
+    let filterData: any[] = [];
+    let filterList: any[] = [];
+    let columnOrder: any[] = [];
 
     newColumns.forEach((column, colIndex) => {
       let columnOptions = {
@@ -674,10 +589,10 @@ class MUIDataTable extends React.Component {
     return { columns: columnData, filterData, filterList, columnOrder };
   };
 
-  transformData = (columns, data) => {
+  transformData = (columns: any[], data: any[]) => {
     const { enableNestedDataAccess } = this.options;
-    const leaf = (obj, path) =>
-      (enableNestedDataAccess ? path.split(enableNestedDataAccess) : path.split()).reduce(
+    const leaf = (obj: any, path: string) =>
+      (enableNestedDataAccess ? path.split(enableNestedDataAccess as string) : [path]).reduce(
         (value, el) => (value ? value[el] : undefined),
         obj,
       );
@@ -696,8 +611,14 @@ class MUIDataTable extends React.Component {
     return transformedData;
   };
 
-  setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {
-    let tableData = [];
+  setTableData(
+    props: any,
+    status: number,
+    dataUpdated: boolean,
+    callback: (() => void) | undefined = () => {},
+    fromConstructor = false,
+  ) {
+    let tableData: any[] = [];
     let { columns, filterData, filterList, columnOrder } = this.buildColumns(
       props.columns,
       this.state.columns,
@@ -709,7 +630,7 @@ class MUIDataTable extends React.Component {
     let sortDirection = 'none';
     let tableMeta;
 
-    let sortOrder;
+    let sortOrder: any;
     if (this.options.sortOrder && this.options.sortOrder.direction && this.options.sortOrder.name) {
       sortOrder = Object.assign({}, this.options.sortOrder);
     } else {
@@ -717,7 +638,7 @@ class MUIDataTable extends React.Component {
 
       // if no sortOrder, check and see if there's a sortDirection on one of the columns (deprecation notice for this is given above)
       if (!sortOrder.direction) {
-        props.columns.forEach((column, colIndex) => {
+        props.columns.forEach((column: any, colIndex: number) => {
           if (column.options && (column.options.sortDirection === 'asc' || column.options.sortDirection === 'desc')) {
             sortOrder.name = column.name;
             sortOrder.sortDirection = column.sortDirection;
@@ -760,8 +681,8 @@ class MUIDataTable extends React.Component {
             tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state, tableData);
             const funcResult = column.customBodyRender(value, tableMeta);
 
-            if (React.isValidElement(funcResult) && funcResult.props.value) {
-              value = funcResult.props.value;
+            if (React.isValidElement(funcResult) && (funcResult.props as any).value) {
+              value = (funcResult.props as any).value;
             } else if (typeof funcResult === 'string') {
               value = funcResult;
             }
@@ -824,12 +745,12 @@ class MUIDataTable extends React.Component {
       }
     });
 
-    let selectedRowsData = {
+    let selectedRowsData: any = {
       data: [],
       lookup: {},
     };
 
-    let expandedRowsData = {
+    let expandedRowsData: any = {
       data: [],
       lookup: {},
     };
@@ -838,12 +759,14 @@ class MUIDataTable extends React.Component {
       // Multiple row selection customization
       if (this.options.rowsSelected && this.options.rowsSelected.length && this.options.selectableRows === 'multiple') {
         this.options.rowsSelected
-          .filter((selectedRowIndex) => selectedRowIndex === 0 || (Number(selectedRowIndex) && selectedRowIndex > 0))
-          .forEach((row) => {
+          .filter(
+            (selectedRowIndex: any) => selectedRowIndex === 0 || (Number(selectedRowIndex) && selectedRowIndex > 0),
+          )
+          .forEach((row: any) => {
             let rowPos = row;
 
             for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {
-              if (this.state.displayData[cIndex].dataIndex === row) {
+              if (this.state.displayData[cIndex]!.dataIndex === row) {
                 rowPos = cIndex;
                 break;
               }
@@ -862,7 +785,7 @@ class MUIDataTable extends React.Component {
         let rowPos = this.options.rowsSelected[0];
 
         for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {
-          if (this.state.displayData[cIndex].dataIndex === this.options.rowsSelected[0]) {
+          if (this.state.displayData[cIndex]!.dataIndex === this.options.rowsSelected[0]) {
             rowPos = cIndex;
             break;
           }
@@ -885,11 +808,11 @@ class MUIDataTable extends React.Component {
       }
 
       if (this.options.rowsExpanded && this.options.rowsExpanded.length && this.options.expandableRows) {
-        this.options.rowsExpanded.forEach((row) => {
+        this.options.rowsExpanded.forEach((row: any) => {
           let rowPos = row;
 
           for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) {
-            if (this.state.displayData[cIndex].dataIndex === row) {
+            if (this.state.displayData[cIndex]!.dataIndex === row) {
               rowPos = cIndex;
               break;
             }
@@ -936,15 +859,15 @@ class MUIDataTable extends React.Component {
    *  Build the table data used to display to the user (ie: after filter/search applied)
    */
   computeDisplayRow(
-    columns,
-    row,
-    rowIndex,
-    filterList,
-    searchText,
-    dataForTableMeta,
-    options,
-    props,
-    currentTableData,
+    columns: any[],
+    row: any[],
+    rowIndex: number,
+    filterList: any[],
+    searchText: string | null,
+    dataForTableMeta: any,
+    options: any,
+    props: any,
+    currentTableData: any,
   ) {
     let isFiltered = false;
     let isSearchFound = false;
@@ -1011,7 +934,7 @@ class MUIDataTable extends React.Component {
         } else if (filterType !== 'textField' && Array.isArray(columnValue)) {
           if (options.filterArrayFullMatch) {
             //true if every filterVal exists in columnVal, false otherwise
-            const isFullMatch = filterVal.every((el) => {
+            const isFullMatch = filterVal.every((el: any) => {
               return columnValue.indexOf(el) >= 0;
             });
             //if it is not a fullMatch, filter row out
@@ -1019,7 +942,7 @@ class MUIDataTable extends React.Component {
               isFiltered = true;
             }
           } else {
-            const isAnyMatch = filterVal.some((el) => {
+            const isAnyMatch = filterVal.some((el: any) => {
               return columnValue.indexOf(el) >= 0;
             });
             //if no value matches, filter row out
@@ -1064,7 +987,7 @@ class MUIDataTable extends React.Component {
     else return displayRow;
   }
 
-  hasSearchText = (toSearch, toFind, caseSensitive) => {
+  hasSearchText = (toSearch: any, toFind: any, caseSensitive: boolean) => {
     let stack = toSearch.toString();
     let needle = toFind.toString();
 
@@ -1076,7 +999,7 @@ class MUIDataTable extends React.Component {
     return stack.indexOf(needle) >= 0;
   };
 
-  updateDataCol = (row, index, value) => {
+  updateDataCol = (row: number, index: number, value: any) => {
     this.setState((prevState) => {
       let changedData = cloneDeep(prevState.data);
       let filterData = cloneDeep(prevState.filterData);
@@ -1090,21 +1013,21 @@ class MUIDataTable extends React.Component {
         prevState,
         prevState.data,
       );
-      const funcResult = prevState.columns[index].customBodyRender(value, tableMeta);
+      const funcResult = (prevState.columns[index] as any).customBodyRender(value, tableMeta);
 
       const filterValue =
-        React.isValidElement(funcResult) && funcResult.props.value
-          ? funcResult.props.value
-          : prevState['data'][row][index];
+        React.isValidElement(funcResult) && (funcResult.props as any).value
+          ? (funcResult.props as any).value
+          : (prevState['data'] as any)[row][index];
 
-      const prevFilterIndex = filterData[index].indexOf(filterValue);
-      filterData[index].splice(prevFilterIndex, 1, filterValue);
+      const prevFilterIndex = filterData[index]!.indexOf(filterValue);
+      filterData[index]!.splice(prevFilterIndex, 1, filterValue);
 
-      changedData[row].data[index] = value;
+      changedData[row]!.data[index] = value;
 
       if (this.options.sortFilterList) {
         const comparator = getCollatorComparator();
-        filterData[index].sort(comparator);
+        filterData[index]!.sort(comparator);
       }
 
       return {
@@ -1122,7 +1045,15 @@ class MUIDataTable extends React.Component {
     });
   };
 
-  getTableMeta = (rowIndex, colIndex, rowData, columnData, tableData, curState, currentTableData) => {
+  getTableMeta = (
+    rowIndex: any,
+    colIndex: any,
+    rowData: any,
+    columnData: any,
+    tableData: any,
+    curState: any,
+    currentTableData: any,
+  ) => {
     const { columns, data, displayData, filterData, ...tableState } = curState;
 
     return {
@@ -1136,7 +1067,7 @@ class MUIDataTable extends React.Component {
     };
   };
 
-  getDisplayData(columns, data, filterList, searchText, tableMeta, props) {
+  getDisplayData(columns: any[], data: any[], filterList: any[], searchText: any, tableMeta: any, props: any) {
     let newRows = [];
     const dataForTableMeta = tableMeta ? tableMeta.tableData : props.data;
 
@@ -1164,11 +1095,11 @@ class MUIDataTable extends React.Component {
     return newRows;
   }
 
-  toggleViewColumn = (index) => {
+  toggleViewColumn = (index: number) => {
     this.setState(
       (prevState) => {
         const columns = cloneDeep(prevState.columns);
-        columns[index].display = columns[index].display === 'true' ? 'false' : 'true';
+        columns[index]!['display'] = columns[index]!['display'] === 'true' ? 'false' : 'true';
         return {
           columns: columns,
         };
@@ -1178,13 +1109,13 @@ class MUIDataTable extends React.Component {
         var cb = this.options.onViewColumnsChange || this.options.onColumnViewChange;
 
         if (cb) {
-          cb(this.state.columns[index].name, this.state.columns[index].display === 'true' ? 'add' : 'remove');
+          cb(this.state.columns[index]!['name'], this.state.columns[index]!['display'] === 'true' ? 'add' : 'remove');
         }
       },
     );
   };
 
-  updateColumns = (newColumns) => {
+  updateColumns = (newColumns: any[]) => {
     this.setState(
       (prevState) => {
         return {
@@ -1202,7 +1133,7 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  getSortDirectionLabel(sortOrder) {
+  getSortDirectionLabel(sortOrder: any) {
     switch (sortOrder.direction) {
       case 'asc':
         return 'ascending';
@@ -1219,45 +1150,46 @@ class MUIDataTable extends React.Component {
     const { classes } = this.props;
     const tableProps = this.options.setTableProps() || {};
 
-    tableProps.className = clsx(classes.tableRoot, tableProps.className);
+    tableProps.className = clsx(classes['tableRoot'], tableProps.className);
 
     return tableProps;
   }
 
-  toggleSortColumn = (index) => {
+  toggleSortColumn = (index: number) => {
     flushSync(() => {
       this.setState(
         (prevState) => {
           let columns = cloneDeep(prevState.columns);
           let data = prevState.data;
-          let newOrder = columns[index].sortDescFirst ? 'desc' : 'asc'; // default
+          const column = columns[index]!;
+          let newOrder = column['sortDescFirst'] ? 'desc' : 'asc'; // default
 
           let sequenceOrder = ['asc', 'desc'];
-          if (columns[index].sortDescFirst) {
+          if (column['sortDescFirst']) {
             sequenceOrder = ['desc', 'asc'];
           }
-          if (columns[index].sortThirdClickReset) {
+          if (column['sortThirdClickReset']) {
             sequenceOrder.push('none');
           }
 
-          if (columns[index].name === this.state.sortOrder.name) {
-            let pos = sequenceOrder.indexOf(this.state.sortOrder.direction);
+          if (column['name'] === this.state.sortOrder['name']) {
+            let pos = sequenceOrder.indexOf(this.state.sortOrder['direction'] as string);
             if (pos !== -1) {
               pos++;
               if (pos >= sequenceOrder.length) pos = 0;
-              newOrder = sequenceOrder[pos];
+              newOrder = sequenceOrder[pos]!;
             }
           }
 
           const newSortOrder = {
-            name: columns[index].name,
+            name: column['name'],
             direction: newOrder,
           };
 
           const orderLabel = this.getSortDirectionLabel(newSortOrder);
-          const announceText = `Table now sorted by ${columns[index].name} : ${orderLabel}`;
+          const announceText = `Table now sorted by ${column['name']} : ${orderLabel}`;
 
-          let newState = {
+          let newState: any = {
             columns: columns,
             announceText: announceText,
             activeColumn: index,
@@ -1272,7 +1204,7 @@ class MUIDataTable extends React.Component {
               sortOrder: newSortOrder,
             };
           } else {
-            const sortedData = this.sortTable(data, index, newOrder, columns[index].sortCompare);
+            const sortedData = this.sortTable(data, index, newOrder, column['sortCompare']);
 
             newState = {
               ...newState,
@@ -1297,14 +1229,14 @@ class MUIDataTable extends React.Component {
           this.setTableAction('sort');
 
           if (this.options.onColumnSortChange) {
-            this.options.onColumnSortChange(this.state.sortOrder.name, this.state.sortOrder.direction);
+            this.options.onColumnSortChange(this.state.sortOrder['name'], this.state.sortOrder['direction']);
           }
         },
       );
     });
   };
 
-  changeRowsPerPage = (rows) => {
+  changeRowsPerPage = (rows: number) => {
     const rowCount = this.options.count || this.state.displayData.length;
 
     flushSync(() => {
@@ -1324,7 +1256,7 @@ class MUIDataTable extends React.Component {
     });
   };
 
-  changePage = (page) => {
+  changePage = (page: number) => {
     flushSync(() => {
       this.setState(
         () => ({
@@ -1357,7 +1289,7 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  searchTextUpdate = (text) => {
+  searchTextUpdate = (text: string) => {
     this.setState(
       (prevState) => ({
         searchText: text && text.length ? text : null,
@@ -1403,8 +1335,8 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  updateFilterByType = (filterList, index, value, type, customUpdate) => {
-    const filterPos = filterList[index].findIndex((filter) => JSON.stringify(filter) === JSON.stringify(value));
+  updateFilterByType = (filterList: any, index: number, value: any, type: string, customUpdate: any) => {
+    const filterPos = filterList[index].findIndex((filter: any) => JSON.stringify(filter) === JSON.stringify(value));
 
     switch (type) {
       case 'checkbox':
@@ -1431,7 +1363,7 @@ class MUIDataTable extends React.Component {
     }
   };
 
-  filterUpdate = (index, value, column, type, customUpdate, next) => {
+  filterUpdate = (index: number, value: any, column: any, type: string, customUpdate: any, next: any) => {
     this.setState(
       (prevState) => {
         const filterList = cloneDeep(prevState.filterList);
@@ -1472,7 +1404,7 @@ class MUIDataTable extends React.Component {
     if (expandedRowsData.length > 0) {
       // collapse all
       for (let ii = expandedRowsData.length - 1; ii >= 0; ii--) {
-        let item = expandedRowsData[ii];
+        let item = expandedRowsData[ii]!;
         if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {
           affecttedRows.push(expandedRowsData.splice(ii, 1));
         }
@@ -1480,8 +1412,11 @@ class MUIDataTable extends React.Component {
     } else {
       // expand all
       for (let ii = 0; ii < this.state.data.length; ii++) {
-        let item = this.state.data[ii];
-        if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {
+        let item = this.state.data[ii]!;
+        if (
+          !isRowExpandable ||
+          (isRowExpandable && isRowExpandable((item as any).dataIndex, this.state.expandedRows))
+        ) {
           if (this.state.expandedRows.lookup[item.index] !== true) {
             let newItem = {
               index: ii,
@@ -1518,7 +1453,7 @@ class MUIDataTable extends React.Component {
     return this.state.expandedRows.data.length === this.state.data.length;
   };
 
-  updateColumnOrder = (columnOrder, columnIndex, newPosition) => {
+  updateColumnOrder = (columnOrder: number[], columnIndex: number, newPosition: number) => {
     this.setState(
       (prevState) => {
         return {
@@ -1566,17 +1501,17 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  toggleExpandRow = (row) => {
+  toggleExpandRow = (row: any) => {
     const { dataIndex } = row;
     const { isRowExpandable } = this.options;
     let { expandedRows } = this.state;
     const expandedRowsData = [...expandedRows.data];
     let shouldCollapseExpandedRow = false;
     let hasRemovedRow = false;
-    let removedRow = [];
+    let removedRow: any[] = [];
 
     for (var cIndex = 0; cIndex < expandedRowsData.length; cIndex++) {
-      if (expandedRowsData[cIndex].dataIndex === dataIndex) {
+      if (expandedRowsData[cIndex]!.dataIndex === dataIndex) {
         shouldCollapseExpandedRow = true;
         break;
       }
@@ -1610,7 +1545,7 @@ class MUIDataTable extends React.Component {
     );
   };
 
-  selectRowUpdate = (type, value, shiftAdjacentRows = []) => {
+  selectRowUpdate = (type: string, value: any, shiftAdjacentRows: any[] = []) => {
     // safety check
     const { selectableRows } = this.options;
     if (selectableRows === 'none') {
@@ -1626,9 +1561,9 @@ class MUIDataTable extends React.Component {
           let isDeselect =
             selectedRowsLen === displayData.length || (selectedRowsLen < displayData.length && selectedRowsLen > 0);
 
-          let selectedRows = displayData.reduce((arr, d, i) => {
-            const selected = isRowSelectable ? isRowSelectable(displayData[i].dataIndex, prevSelectedRows) : true;
-            selected && arr.push({ index: i, dataIndex: displayData[i].dataIndex });
+          let selectedRows: any[] = displayData.reduce((arr: any[], d: any, i: number) => {
+            const selected = isRowSelectable ? isRowSelectable(displayData[i]!.dataIndex, prevSelectedRows) : true;
+            selected && arr.push({ index: i, dataIndex: displayData[i]!.dataIndex });
             return arr;
           }, []);
 
@@ -1641,7 +1576,7 @@ class MUIDataTable extends React.Component {
               isDeselect = true;
             } else {
               for (let ii = 0; ii < displayData.length; ii++) {
-                if (!selectedMap[displayData[ii].dataIndex]) {
+                if (!selectedMap[displayData[ii]!.dataIndex]) {
                   isDeselect = true;
                 }
               }
@@ -1687,7 +1622,7 @@ class MUIDataTable extends React.Component {
           let rowPos = -1;
 
           for (let cIndex = 0; cIndex < selectedRows.length; cIndex++) {
-            if (selectedRows[cIndex].dataIndex === dataIndex) {
+            if (selectedRows[cIndex]!.dataIndex === dataIndex) {
               rowPos = cIndex;
               break;
             }
@@ -1700,7 +1635,7 @@ class MUIDataTable extends React.Component {
             if (shiftAdjacentRows.length > 0) {
               let shiftAdjacentMap = buildMap(shiftAdjacentRows);
               for (let cIndex = selectedRows.length - 1; cIndex >= 0; cIndex--) {
-                if (shiftAdjacentMap[selectedRows[cIndex].dataIndex]) {
+                if (shiftAdjacentMap[selectedRows[cIndex]!.dataIndex]) {
                   selectedRows.splice(cIndex, 1);
                 }
               }
@@ -1750,7 +1685,7 @@ class MUIDataTable extends React.Component {
     } else if (type === 'custom') {
       const { displayData } = this.state;
 
-      const data = value.map((row) => ({ index: row, dataIndex: displayData[row].dataIndex }));
+      const data = value.map((row: any) => ({ index: row, dataIndex: displayData[row]!.dataIndex }));
       const lookup = buildMap(data);
 
       this.setState(
@@ -1778,7 +1713,7 @@ class MUIDataTable extends React.Component {
     }
   };
 
-  sortTable(data, col, order, columnSortCompare = null) {
+  sortTable(data: any[], col: number, order: string, columnSortCompare: any = null) {
     let hasCustomTableSort = this.options.customSort && !columnSortCompare;
     let meta = { selectedRows: this.state.selectedRows }; // meta for customSort
     let dataSrc = hasCustomTableSort
@@ -1794,7 +1729,7 @@ class MUIDataTable extends React.Component {
       }, []);
     }
 
-    let sortedData = dataSrc.map((row, sIndex) => ({
+    let sortedData = dataSrc.map((row: any, sIndex: number) => ({
       data: row.data[col],
       rowData: row.data,
       position: sIndex,
@@ -1826,7 +1761,7 @@ class MUIDataTable extends React.Component {
     };
   }
 
-  render() {
+  override render() {
     const {
       classes,
       className,
@@ -1840,7 +1775,7 @@ class MUIDataTable extends React.Component {
         TableToolbar,
         TableToolbarSelect,
         DragDropBackend = HTML5Backend,
-      },
+      } = {} as any,
     } = this.props;
     const {
       announceText,
@@ -1872,53 +1807,53 @@ class MUIDataTable extends React.Component {
     const rowsPerPage = this.options.pagination ? this.state.rowsPerPage : displayData.length;
     const showToolbar = hasToolbarItem(this.options, title);
     const columnNames = columns.map((column) => ({
-      name: column.name,
-      filterType: column.filterType || this.options.filterType,
+      name: column['name'],
+      filterType: column['filterType'] || this.options.filterType,
     }));
     const responsiveOption = this.options.responsive;
-    let paperClasses = `${classes.paper} ${className}`;
+    let paperClasses = `${classes['paper']} ${className}`;
     let maxHeight = this.options.tableBodyMaxHeight;
     let responsiveClass;
 
     switch (responsiveOption) {
       // deprecated
       case 'scroll':
-        responsiveClass = classes.responsiveScroll;
+        responsiveClass = classes['responsiveScroll'];
         maxHeight = '499px';
         break;
       // deprecated
       case 'scrollMaxHeight':
-        responsiveClass = classes.responsiveScrollMaxHeight;
+        responsiveClass = classes['responsiveScrollMaxHeight'];
         maxHeight = '499px';
         break;
       // deprecated
       case 'scrollFullHeight':
-        responsiveClass = classes.responsiveScrollFullHeight;
+        responsiveClass = classes['responsiveScrollFullHeight'];
         maxHeight = 'none';
         break;
       // deprecated
       case 'scrollFullHeightFullWidth':
-        responsiveClass = classes.responsiveScrollFullHeight;
-        paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;
+        responsiveClass = classes['responsiveScrollFullHeight'];
+        paperClasses = `${classes['paperResponsiveScrollFullHeightFullWidth']} ${className}`;
         break;
       // deprecated
       case 'stacked':
-        responsiveClass = classes.responsiveStacked;
+        responsiveClass = classes['responsiveStacked'];
         maxHeight = 'none';
         break;
       // deprecated
       case 'stackedFullWidth':
-        responsiveClass = classes.responsiveStackedFullWidth;
-        paperClasses = `${classes.paperResponsiveScrollFullHeightFullWidth} ${className}`;
+        responsiveClass = classes['responsiveStackedFullWidth'];
+        paperClasses = `${classes['paperResponsiveScrollFullHeightFullWidth']} ${className}`;
         maxHeight = 'none';
         break;
 
       default:
-        responsiveClass = classes.responsiveBase;
+        responsiveClass = classes['responsiveBase'];
         break;
     }
 
-    var tableHeightVal = {};
+    var tableHeightVal: any = {};
     if (maxHeight) {
       tableHeightVal.maxHeight = maxHeight;
     }
@@ -1927,16 +1862,16 @@ class MUIDataTable extends React.Component {
     }
 
     const tableProps = this.options.setTableProps ? this.options.setTableProps() || {} : {};
-    const tableClassNames = clsx(classes.tableRoot, tableProps.className);
+    const tableClassNames = clsx(classes['tableRoot'], tableProps.className);
     delete tableProps.className; // remove className from props to avoid the className being applied twice
 
-    const dndProps = {};
+    const dndProps: any = {};
     if (typeof window !== 'undefined') {
       dndProps.context = window;
     }
 
     return (
-      <Paper elevation={this.options.elevation} ref={this.tableContent} className={paperClasses}>
+      <Paper elevation={this.options.elevation as number} ref={this.tableContent as any} className={paperClasses}>
         {(this.options.selectToolbarPlacement === STP.ALWAYS ||
           (selectedRows.data.length > 0 && this.options.selectToolbarPlacement !== STP.NONE)) && (
           <TableToolbarSelectComponent
@@ -1975,15 +1910,15 @@ class MUIDataTable extends React.Component {
           )}
         <TableFilterListComponent
           options={this.options}
-          serverSideFilterList={this.props.options.serverSideFilterList}
-          filterListRenderers={columns.map((c) => {
+          serverSideFilterList={(this.props.options as any)?.serverSideFilterList}
+          filterListRenderers={columns.map((c: any) => {
             if (c.customFilterListOptions && c.customFilterListOptions.render) return c.customFilterListOptions.render;
             // DEPRECATED: This option is being replaced with customFilterListOptions.render
             if (c.customFilterListRender) return c.customFilterListRender;
 
-            return (f) => f;
+            return (f: any) => f;
           })}
-          customFilterListUpdate={columns.map((c) => {
+          customFilterListUpdate={columns.map((c: any) => {
             return c.customFilterListOptions && c.customFilterListOptions.update
               ? c.customFilterListOptions.update
               : null;
@@ -1998,8 +1933,8 @@ class MUIDataTable extends React.Component {
             <TableResizeComponent
               key={rowCount}
               columnOrder={columnOrder}
-              updateDividers={(fn) => (this.updateDividers = fn)}
-              setResizeable={(fn) => (this.setHeadResizeable = fn)}
+              updateDividers={(fn: any) => (this.updateDividers = fn)}
+              setResizeable={(fn: any) => (this.setHeadResizeable = fn)}
               options={this.props.options}
               tableId={this.options.tableId}
             />
@@ -2007,12 +1942,12 @@ class MUIDataTable extends React.Component {
           {(() => {
             const components = (
               <MuiTable
-                ref={(el) => (this.tableRef = el)}
+                ref={(el: any) => (this.tableRef = el)}
                 tabIndex={'0'}
                 role={'grid'}
                 className={tableClassNames}
                 {...tableProps}>
-                <caption className={classes.caption}>{title}</caption>
+                <caption className={classes['caption']}>{title}</caption>
                 <TableHeadComponent
                   columns={columns}
                   activeColumn={activeColumn}
@@ -2084,7 +2019,7 @@ class MUIDataTable extends React.Component {
           changeRowsPerPage={this.changeRowsPerPage}
           changePage={this.changePage}
         />
-        <div className={classes.liveAnnounce} aria-live={'polite'}>
+        <div className={classes['liveAnnounce']} aria-live={'polite'}>
           {announceText}
         </div>
       </Paper>
@@ -2092,4 +2027,4 @@ class MUIDataTable extends React.Component {
   }
 }
 
-export default withStyles(MUIDataTable, defaultTableStyles, { name: 'MUIDataTable' });
+export default withStyles(MUIDataTable, defaultTableStyles as any, { name: 'MUIDataTable' });
diff --git a/src/components/ExpandButton.js b/src/components/ExpandButton.tsx
similarity index 68%
rename from src/components/ExpandButton.js
rename to src/components/ExpandButton.tsx
index cc589936..5ff7b988 100644
--- a/src/components/ExpandButton.js
+++ b/src/components/ExpandButton.tsx
@@ -2,6 +2,19 @@ import React from 'react';
 import { IconButton } from '@mui/material';
 import { KeyboardArrowRight as KeyboardArrowRightIcon, Remove as RemoveIcon } from '@mui/icons-material';
 
+import type { MUIDataTableExpandedRows } from '../types/options';
+
+interface ExpandButtonProps {
+  areAllRowsExpanded: () => boolean;
+  buttonClass: string;
+  expandableRowsHeader: boolean;
+  expandedRows: MUIDataTableExpandedRows;
+  iconClass: string;
+  iconIndeterminateClass: string;
+  isHeaderCell: boolean;
+  onExpand: () => void;
+}
+
 const ExpandButton = ({
   areAllRowsExpanded,
   buttonClass,
@@ -11,10 +24,10 @@ const ExpandButton = ({
   iconIndeterminateClass,
   isHeaderCell,
   onExpand,
-}) => {
+}: ExpandButtonProps) => {
   return (
     <>
-      {isHeaderCell && !areAllRowsExpanded() && areAllRowsExpanded && expandedRows.data.length > 0 ? (
+      {isHeaderCell && !areAllRowsExpanded() && expandedRows.data.length > 0 ? (
         <IconButton
           onClick={onExpand}
           style={{ padding: 0 }}
diff --git a/src/components/JumpToPage.js b/src/components/JumpToPage.tsx
similarity index 69%
rename from src/components/JumpToPage.js
rename to src/components/JumpToPage.tsx
index a4bd381c..c6d01d83 100644
--- a/src/components/JumpToPage.js
+++ b/src/components/JumpToPage.tsx
@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { InputBase, MenuItem, Select, Toolbar, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { getPageValue } from '../utils.js';
+import { getPageValue } from '../utils';
 import clsx from 'clsx';
+import type { SelectChangeEvent } from '@mui/material';
+import type { MUIDataTableTextLabels } from '../types/text-labels';
 
 const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })((theme) => ({
   root: {
@@ -12,7 +14,6 @@ const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })((theme) => ({
   caption: {
     flexShrink: 0,
   },
-  /*  Styles applied to the Select component root element */
   selectRoot: {
     marginRight: 32,
     marginLeft: 8,
@@ -26,36 +27,43 @@ const useStyles = makeStyles({ name: 'MUIDataTableJumpToPage' })((theme) => ({
     textAlignLast: 'right',
     fontSize: theme.typography.pxToRem(14),
   },
-  /* Styles applied to Select component icon class */
   selectIcon: {},
-  /* Styles applied to InputBase component */
   input: {
-    color: 'inhert',
-    fontSize: 'inhert',
+    color: 'inherit',
+    fontSize: 'inherit',
     flexShrink: 0,
   },
+  menuItem: {},
 }));
 
-function JumpToPage(props) {
+interface JumpToPageProps {
+  count: number;
+  page: number;
+  rowsPerPage: number;
+  textLabels: MUIDataTableTextLabels;
+  changePage: (page: number) => void;
+}
+
+function JumpToPage(props: JumpToPageProps) {
   const { classes } = useStyles();
 
-  const handlePageChange = (event) => {
-    props.changePage(parseInt(event.target.value, 10));
+  const handlePageChange = (event: SelectChangeEvent<number>) => {
+    props.changePage(event.target.value);
   };
 
-  const { count, textLabels, rowsPerPage, page, changePage } = props;
+  const { count, textLabels, rowsPerPage, page } = props;
 
   const textLabel = textLabels.pagination.jumpToPage;
 
-  let pages = [];
-  let lastPage = Math.min(1000, getPageValue(count, rowsPerPage, 1000000));
+  const pages: number[] = [];
+  const lastPage = Math.min(1000, getPageValue(count, rowsPerPage, 1000000));
 
   for (let ii = 0; ii <= lastPage; ii++) {
     pages.push(ii);
   }
   const MenuItemComponent = MenuItem;
 
-  let myStyle = {
+  const myStyle = {
     display: 'flex',
     minHeight: '52px',
     alignItems: 'center',
@@ -82,11 +90,4 @@ function JumpToPage(props) {
   );
 }
 
-JumpToPage.propTypes = {
-  count: PropTypes.number.isRequired,
-  page: PropTypes.number.isRequired,
-  rowsPerPage: PropTypes.number.isRequired,
-  textLabels: PropTypes.object.isRequired,
-};
-
 export default JumpToPage;
diff --git a/src/components/Popover.js b/src/components/Popover.tsx
similarity index 53%
rename from src/components/Popover.js
rename to src/components/Popover.tsx
index 1dd29186..76c0deff 100644
--- a/src/components/Popover.js
+++ b/src/components/Popover.tsx
@@ -1,11 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Popover as MuiPopover, IconButton } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
+import type { ReactNode } from 'react';
+import type { PopoverOrigin } from '@mui/material/Popover';
 
-const Popover = ({ className, trigger, refExit, hide, content, ...providedProps }) => {
+interface PopoverProps {
+  className?: string;
+  trigger: ReactNode;
+  refExit?: () => void;
+  hide?: boolean;
+  content: ReactNode;
+  classes?: Record<string, string>;
+  [key: string]: unknown;
+}
+
+const Popover = ({ className, trigger, refExit, hide, content, ...providedProps }: PopoverProps) => {
   const [isOpen, open] = useState(false);
-  const anchorEl = useRef(null);
+  const anchorEl = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
     if (isOpen) {
@@ -16,7 +27,7 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
     }
   }, [hide, isOpen, open]);
 
-  const handleClick = (event) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     anchorEl.current = event.currentTarget;
     open(true);
   };
@@ -25,15 +36,20 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
     open(false);
   };
 
-  const closeIconClass = providedProps.classes.closeIcon;
-  delete providedProps.classes.closeIcon; // remove non-standard class from being passed to the popover component
+  const classes = (providedProps.classes || {}) as Record<string, string>;
+  const closeIconClass = classes['closeIcon'];
+  const passedProps = { ...providedProps };
+  if (passedProps.classes && typeof passedProps.classes === 'object') {
+    const { closeIcon, ...restClasses } = passedProps.classes as Record<string, string>;
+    passedProps.classes = restClasses;
+  }
 
-  const transformOriginSpecs = {
+  const transformOriginSpecs: PopoverOrigin = {
     vertical: 'top',
     horizontal: 'center',
   };
 
-  const anchorOriginSpecs = {
+  const anchorOriginSpecs: PopoverOrigin = {
     vertical: 'bottom',
     horizontal: 'center',
   };
@@ -45,8 +61,10 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
   };
 
   const triggerProps = {
-    onClick: (event) => {
-      if (trigger.props.onClick) trigger.props.onClick();
+    onClick: (event: React.MouseEvent<HTMLElement>) => {
+      if (React.isValidElement(trigger)) {
+        (trigger.props as { onClick?: (event: React.MouseEvent<HTMLElement>) => void }).onClick?.(event);
+      }
       handleClick(event);
     },
   };
@@ -59,17 +77,21 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
       <MuiPopover
         elevation={2}
         open={isOpen}
-        TransitionProps={{ onExited: handleOnExit }}
+        slotProps={{
+          transition: {
+            onExited: handleOnExit,
+          },
+        }}
         onClose={handleRequestClose}
         anchorEl={anchorEl.current}
         anchorOrigin={anchorOriginSpecs}
         transformOrigin={transformOriginSpecs}
-        {...providedProps}>
+        {...passedProps}>
         <IconButton
           aria-label="Close"
           onClick={handleRequestClose}
           className={closeIconClass}
-          style={{ position: 'absolute', right: '4px', top: '4px', zIndex: '1000' }}>
+          style={{ position: 'absolute', right: '4px', top: '4px', zIndex: 1000 }}>
           <CloseIcon />
         </IconButton>
         {content}
@@ -78,11 +100,4 @@ const Popover = ({ className, trigger, refExit, hide, content, ...providedProps
   );
 };
 
-Popover.propTypes = {
-  refExit: PropTypes.func,
-  trigger: PropTypes.node.isRequired,
-  content: PropTypes.node.isRequired,
-  hide: PropTypes.bool,
-};
-
 export default Popover;
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
deleted file mode 100644
index a6bc4659..00000000
--- a/src/components/TableBody.js
+++ /dev/null
@@ -1,337 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Typography, TableBody as MuiTableBody } from '@mui/material';
-import TableBodyCell from './TableBodyCell';
-import TableBodyRow from './TableBodyRow';
-import TableSelectCell from './TableSelectCell';
-import { withStyles } from 'tss-react/mui';
-import cloneDeep from 'lodash.clonedeep';
-import { getPageValue } from '../utils';
-import clsx from 'clsx';
-
-const defaultBodyStyles = (theme) => ({
-  root: {},
-  emptyTitle: {
-    textAlign: 'center',
-  },
-  lastStackedCell: {
-    [theme.breakpoints.down('md')]: {
-      '& td:last-child': {
-        borderBottom: 'none',
-      },
-    },
-  },
-  lastSimpleCell: {
-    [theme.breakpoints.down('sm')]: {
-      '& td:last-child': {
-        borderBottom: 'none',
-      },
-    },
-  },
-});
-
-class TableBody extends React.Component {
-  static propTypes = {
-    /** Data used to describe table */
-    data: PropTypes.array.isRequired,
-    /** Total number of data rows */
-    count: PropTypes.number.isRequired,
-    /** Columns used to describe table */
-    columns: PropTypes.array.isRequired,
-    /** Options used to describe table */
-    options: PropTypes.object.isRequired,
-    /** Data used to filter table against */
-    filterList: PropTypes.array,
-    /** Callback to execute when row is clicked */
-    onRowClick: PropTypes.func,
-    /** Table rows expanded */
-    expandedRows: PropTypes.object,
-    /** Table rows selected */
-    selectedRows: PropTypes.object,
-    /** Callback to trigger table row select */
-    selectRowUpdate: PropTypes.func,
-    /** The most recent row to have been selected/unselected */
-    previousSelectedRow: PropTypes.object,
-    /** Data used to search table against */
-    searchText: PropTypes.string,
-    /** Toggle row expandable */
-    toggleExpandRow: PropTypes.func,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
-  };
-
-  static defaultProps = {
-    toggleExpandRow: () => {},
-  };
-
-  buildRows() {
-    const { data, page, rowsPerPage, count } = this.props;
-
-    if (this.props.options.serverSide) return data.length ? data : null;
-
-    let rows = [];
-    const highestPageInRange = getPageValue(count, rowsPerPage, page);
-    const fromIndex = highestPageInRange === 0 ? 0 : highestPageInRange * rowsPerPage;
-    const toIndex = Math.min(count, (highestPageInRange + 1) * rowsPerPage);
-
-    if (page > highestPageInRange) {
-      console.warn('Current page is out of range, using the highest page that is in range instead.');
-    }
-
-    for (let rowIndex = fromIndex; rowIndex < count && rowIndex < toIndex; rowIndex++) {
-      if (data[rowIndex] !== undefined) rows.push(data[rowIndex]);
-    }
-
-    return rows.length ? rows : null;
-  }
-
-  getRowIndex(index) {
-    const { page, rowsPerPage, options } = this.props;
-
-    if (options.serverSide) {
-      return index;
-    }
-
-    const startIndex = page === 0 ? 0 : page * rowsPerPage;
-    return startIndex + index;
-  }
-
-  isRowSelected(dataIndex) {
-    const { selectedRows } = this.props;
-    return selectedRows.lookup && selectedRows.lookup[dataIndex] ? true : false;
-  }
-
-  isRowExpanded(dataIndex) {
-    const { expandedRows } = this.props;
-    return expandedRows.lookup && expandedRows.lookup[dataIndex] ? true : false;
-  }
-
-  isRowSelectable(dataIndex, selectedRows) {
-    const { options } = this.props;
-    selectedRows = selectedRows || this.props.selectedRows;
-
-    if (options.isRowSelectable) {
-      return options.isRowSelectable(dataIndex, selectedRows);
-    } else {
-      return true;
-    }
-  }
-
-  isRowExpandable(dataIndex) {
-    const { options, expandedRows } = this.props;
-    if (options.isRowExpandable) {
-      return options.isRowExpandable(dataIndex, expandedRows);
-    } else {
-      return true;
-    }
-  }
-
-  handleRowSelect = (data, event) => {
-    let shiftKey = event && event.nativeEvent ? event.nativeEvent.shiftKey : false;
-    let shiftAdjacentRows = [];
-    let previousSelectedRow = this.props.previousSelectedRow;
-
-    // If the user is pressing shift and has previously clicked another row.
-    if (shiftKey && previousSelectedRow && previousSelectedRow.index < this.props.data.length) {
-      let curIndex = previousSelectedRow.index;
-
-      // Create a copy of the selectedRows object. This will be used and modified
-      // below when we see if we can add adjacent rows.
-      let selectedRows = cloneDeep(this.props.selectedRows);
-
-      // Add the clicked on row to our copy of selectedRows (if it isn't already present).
-      let clickedDataIndex = this.props.data[data.index].dataIndex;
-      if (selectedRows.data.filter((d) => d.dataIndex === clickedDataIndex).length === 0) {
-        selectedRows.data.push({
-          index: data.index,
-          dataIndex: clickedDataIndex,
-        });
-        selectedRows.lookup[clickedDataIndex] = true;
-      }
-
-      while (curIndex !== data.index) {
-        let dataIndex = this.props.data[curIndex].dataIndex;
-
-        if (this.isRowSelectable(dataIndex, selectedRows)) {
-          let lookup = {
-            index: curIndex,
-            dataIndex: dataIndex,
-          };
-
-          // Add adjacent row to temp selectedRow object if it isn't present.
-          if (selectedRows.data.filter((d) => d.dataIndex === dataIndex).length === 0) {
-            selectedRows.data.push(lookup);
-            selectedRows.lookup[dataIndex] = true;
-          }
-
-          shiftAdjacentRows.push(lookup);
-        }
-        curIndex = data.index > curIndex ? curIndex + 1 : curIndex - 1;
-      }
-    }
-    this.props.selectRowUpdate('cell', data, shiftAdjacentRows);
-  };
-
-  handleRowClick = (row, data, event) => {
-    // Don't trigger onRowClick if the event was actually the expandable icon.
-    if (
-      event.target.id === 'expandable-button' ||
-      (event.target.nodeName === 'path' && event.target.parentNode.id === 'expandable-button')
-    ) {
-      return;
-    }
-
-    // Don't trigger onRowClick if the event was actually a row selection via checkbox
-    if (event.target.id && event.target.id.startsWith('MUIDataTableSelectCell')) return;
-
-    // Check if we should toggle row select when row is clicked anywhere
-    if (
-      this.props.options.selectableRowsOnClick &&
-      this.props.options.selectableRows !== 'none' &&
-      this.isRowSelectable(data.dataIndex, this.props.selectedRows)
-    ) {
-      const selectRow = { index: data.rowIndex, dataIndex: data.dataIndex };
-      this.handleRowSelect(selectRow, event);
-    }
-    // Check if we should trigger row expand when row is clicked anywhere
-    if (
-      this.props.options.expandableRowsOnClick &&
-      this.props.options.expandableRows &&
-      this.isRowExpandable(data.dataIndex, this.props.expandedRows)
-    ) {
-      const expandRow = { index: data.rowIndex, dataIndex: data.dataIndex };
-      this.props.toggleExpandRow(expandRow);
-    }
-
-    // Don't trigger onRowClick if the event was actually a row selection via click
-    if (this.props.options.selectableRowsOnClick) return;
-
-    this.props.options.onRowClick && this.props.options.onRowClick(row, data, event);
-  };
-
-  processRow = (row, columnOrder) => {
-    let ret = [];
-    for (let ii = 0; ii < row.length; ii++) {
-      ret.push({
-        value: row[columnOrder[ii]],
-        index: columnOrder[ii],
-      });
-    }
-    return ret;
-  };
-
-  render() {
-    const {
-      classes,
-      columns,
-      toggleExpandRow,
-      options,
-      columnOrder = this.props.columns.map((item, idx) => idx),
-      components = {},
-      tableId,
-    } = this.props;
-    const tableRows = this.buildRows();
-    const visibleColCnt = columns.filter((c) => c.display === 'true').length;
-
-    return (
-      <MuiTableBody>
-        {tableRows && tableRows.length > 0 ? (
-          tableRows.map((data, rowIndex) => {
-            const { data: row, dataIndex } = data;
-
-            if (options.customRowRender) {
-              return options.customRowRender(row, dataIndex, rowIndex);
-            }
-
-            let isRowSelected = options.selectableRows !== 'none' ? this.isRowSelected(dataIndex) : false;
-            let isRowSelectable = this.isRowSelectable(dataIndex);
-            let bodyClasses = options.setRowProps ? options.setRowProps(row, dataIndex, rowIndex) || {} : {};
-
-            const processedRow = this.processRow(row, columnOrder);
-
-            return (
-              <React.Fragment key={rowIndex}>
-                <TableBodyRow
-                  {...bodyClasses}
-                  options={options}
-                  rowSelected={isRowSelected}
-                  isRowSelectable={isRowSelectable}
-                  onClick={this.handleRowClick.bind(null, row, { rowIndex, dataIndex })}
-                  className={clsx({
-                    [classes.lastStackedCell]:
-                      options.responsive === 'vertical' ||
-                      options.responsive === 'stacked' ||
-                      options.responsive === 'stackedFullWidth',
-                    [classes.lastSimpleCell]: options.responsive === 'simple',
-                    [bodyClasses.className]: bodyClasses.className,
-                  })}
-                  data-testid={'MUIDataTableBodyRow-' + dataIndex}
-                  id={`MUIDataTableBodyRow-${tableId}-${dataIndex}`}>
-                  <TableSelectCell
-                    onChange={this.handleRowSelect.bind(null, {
-                      index: this.getRowIndex(rowIndex),
-                      dataIndex: dataIndex,
-                    })}
-                    onExpand={toggleExpandRow.bind(null, {
-                      index: this.getRowIndex(rowIndex),
-                      dataIndex: dataIndex,
-                    })}
-                    fixedHeader={options.fixedHeader}
-                    fixedSelectColumn={options.fixedSelectColumn}
-                    checked={isRowSelected}
-                    expandableOn={options.expandableRows}
-                    // When rows are expandable, but this particular row isn't expandable, set this to true.
-                    // This will add a new class to the toggle button, MUIDataTableSelectCell-expandDisabled.
-                    hideExpandButton={!this.isRowExpandable(dataIndex) && options.expandableRows}
-                    selectableOn={options.selectableRows}
-                    selectableRowsHideCheckboxes={options.selectableRowsHideCheckboxes}
-                    isRowExpanded={this.isRowExpanded(dataIndex)}
-                    isRowSelectable={isRowSelectable}
-                    dataIndex={dataIndex}
-                    id={`MUIDataTableSelectCell-${tableId}-${dataIndex}`}
-                    components={components}
-                  />
-                  {processedRow.map(
-                    (column) =>
-                      columns[column.index].display === 'true' && (
-                        <TableBodyCell
-                          {...(columns[column.index].setCellProps
-                            ? columns[column.index].setCellProps(column.value, dataIndex, column.index) || {}
-                            : {})}
-                          data-testid={`MuiDataTableBodyCell-${column.index}-${rowIndex}`}
-                          dataIndex={dataIndex}
-                          rowIndex={rowIndex}
-                          colIndex={column.index}
-                          columnHeader={columns[column.index].label}
-                          print={columns[column.index].print}
-                          options={options}
-                          tableId={tableId}
-                          key={column.index}>
-                          {column.value}
-                        </TableBodyCell>
-                      ),
-                  )}
-                </TableBodyRow>
-                {this.isRowExpanded(dataIndex) && options.renderExpandableRow(row, { rowIndex, dataIndex })}
-              </React.Fragment>
-            );
-          })
-        ) : (
-          <TableBodyRow options={options}>
-            <TableBodyCell
-              colSpan={options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
-              options={options}
-              colIndex={0}
-              rowIndex={0}>
-              <Typography variant="body1" className={classes.emptyTitle} component={'div'}>
-                {options.textLabels.body.noMatch}
-              </Typography>
-            </TableBodyCell>
-          </TableBodyRow>
-        )}
-      </MuiTableBody>
-    );
-  }
-}
-
-export default withStyles(TableBody, defaultBodyStyles, { name: 'MUIDataTableBody' });
diff --git a/src/components/TableBody.tsx b/src/components/TableBody.tsx
new file mode 100644
index 00000000..53c7fed0
--- /dev/null
+++ b/src/components/TableBody.tsx
@@ -0,0 +1,325 @@
+import React from 'react';
+import { Typography, TableBody as MuiTableBody } from '@mui/material';
+import TableBodyCell from './TableBodyCell';
+import TableBodyRow from './TableBodyRow';
+import TableSelectCell from './TableSelectCell';
+import { withStyles } from 'tss-react/mui';
+import cloneDeep from 'lodash.clonedeep';
+import { getPageValue } from '../utils';
+import clsx from 'clsx';
+import type { ComponentType } from 'react';
+import type { CSSObject } from 'tss-react';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type {
+  MUIDataTableOptions,
+  MUIDataTableSelectedRows,
+  MUIDataTableExpandedRows,
+  MUIDataTableDisplayRow,
+  MUIDataTableSelectedRow,
+  MUIDataTableCellValue,
+} from '../types/options';
+import type { Theme } from '@mui/material/styles';
+
+const defaultBodyStyles = (theme: Theme) =>
+  ({
+    root: {},
+    emptyTitle: {
+      textAlign: 'center',
+    },
+    lastStackedCell: {
+      [theme.breakpoints.down('md')]: {
+        '& td:last-child': {
+          borderBottom: 'none',
+        },
+      },
+    },
+    lastSimpleCell: {
+      [theme.breakpoints.down('sm')]: {
+        '& td:last-child': {
+          borderBottom: 'none',
+        },
+      },
+    },
+  }) satisfies Record<string, CSSObject>;
+
+export interface TableBodyProps {
+  data: MUIDataTableDisplayRow[];
+  count: number;
+  columns: MUIDataTableColumnState[];
+  options: MUIDataTableOptions;
+  filterList?: string[][];
+  expandedRows: MUIDataTableExpandedRows;
+  selectedRows: MUIDataTableSelectedRows;
+  selectRowUpdate: (type: string, data: unknown, adjacentRows?: MUIDataTableSelectedRow[]) => void;
+  previousSelectedRow: MUIDataTableSelectedRow | null;
+  searchText?: string | null;
+  toggleExpandRow: (row: { index: number; dataIndex: number }) => void;
+  classes: Record<keyof ReturnType<typeof defaultBodyStyles>, string>;
+  columnOrder?: number[];
+  components?: { Checkbox?: ComponentType<unknown>; ExpandButton?: ComponentType<unknown> };
+  tableId?: string;
+  page: number;
+  rowsPerPage: number;
+}
+
+class TableBody extends React.Component<TableBodyProps> {
+  static defaultProps = {
+    toggleExpandRow: () => {},
+  };
+
+  buildRows(): MUIDataTableDisplayRow[] | null {
+    const { data, page, rowsPerPage, count } = this.props;
+
+    if (this.props.options.serverSide) return data.length ? data : null;
+
+    const rows: MUIDataTableDisplayRow[] = [];
+    const highestPageInRange = getPageValue(count, rowsPerPage, page);
+    const fromIndex = highestPageInRange === 0 ? 0 : highestPageInRange * rowsPerPage;
+    const toIndex = Math.min(count, (highestPageInRange + 1) * rowsPerPage);
+
+    if (page > highestPageInRange) {
+      console.warn('Current page is out of range, using the highest page that is in range instead.');
+    }
+
+    for (let rowIndex = fromIndex; rowIndex < count && rowIndex < toIndex; rowIndex++) {
+      const row = data[rowIndex];
+      if (row !== undefined) rows.push(row);
+    }
+
+    return rows.length ? rows : null;
+  }
+
+  getRowIndex(index: number): number {
+    const { page, rowsPerPage, options } = this.props;
+    if (options.serverSide) return index;
+    const startIndex = page === 0 ? 0 : page * rowsPerPage;
+    return startIndex + index;
+  }
+
+  isRowSelected(dataIndex: number): boolean {
+    const { selectedRows } = this.props;
+    return selectedRows.lookup && selectedRows.lookup[dataIndex] ? true : false;
+  }
+
+  isRowExpanded(dataIndex: number): boolean {
+    const { expandedRows } = this.props;
+    return expandedRows.lookup && expandedRows.lookup[dataIndex] ? true : false;
+  }
+
+  isRowSelectable(dataIndex: number, selectedRows?: MUIDataTableSelectedRows): boolean {
+    const { options } = this.props;
+    const rows = selectedRows || this.props.selectedRows;
+    if (options.isRowSelectable) {
+      return options.isRowSelectable(dataIndex, rows);
+    }
+    return true;
+  }
+
+  isRowExpandable(dataIndex: number): boolean {
+    const { options, expandedRows } = this.props;
+    if (options.isRowExpandable) {
+      return options.isRowExpandable(dataIndex, expandedRows);
+    }
+    return true;
+  }
+
+  handleRowSelect = (data: { index: number; dataIndex: number }, event: React.MouseEvent) => {
+    const shiftKey = event && event.nativeEvent ? (event.nativeEvent as MouseEvent).shiftKey : false;
+    let shiftAdjacentRows: MUIDataTableSelectedRow[] = [];
+    const previousSelectedRow = this.props.previousSelectedRow;
+
+    if (shiftKey && previousSelectedRow && previousSelectedRow.index < this.props.data.length) {
+      let curIndex = previousSelectedRow.index;
+      const selectedRows = cloneDeep(this.props.selectedRows);
+      const clickedDataIndex = this.props.data[data.index]?.dataIndex as number;
+
+      if (selectedRows.data.filter((d) => d.dataIndex === clickedDataIndex).length === 0) {
+        selectedRows.data.push({ index: data.index, dataIndex: clickedDataIndex });
+        selectedRows.lookup[clickedDataIndex] = true;
+      }
+
+      while (curIndex !== data.index) {
+        const dataIndex = this.props.data[curIndex]?.dataIndex as number;
+        if (this.isRowSelectable(dataIndex, selectedRows)) {
+          const lookup = { index: curIndex, dataIndex };
+          if (selectedRows.data.filter((d) => d.dataIndex === dataIndex).length === 0) {
+            selectedRows.data.push(lookup);
+            selectedRows.lookup[dataIndex] = true;
+          }
+          shiftAdjacentRows.push(lookup);
+        }
+        curIndex = data.index > curIndex ? curIndex + 1 : curIndex - 1;
+      }
+    }
+    this.props.selectRowUpdate('cell', data, shiftAdjacentRows);
+  };
+
+  handleRowClick = (
+    row: MUIDataTableCellValue[],
+    data: { rowIndex: number; dataIndex: number },
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => {
+    const target = event.target as HTMLElement;
+    if (
+      target.id === 'expandable-button' ||
+      (target.nodeName === 'path' && (target.parentNode as HTMLElement)?.id === 'expandable-button')
+    ) {
+      return;
+    }
+
+    if (target.id && target.id.startsWith('MUIDataTableSelectCell')) return;
+
+    if (
+      this.props.options.selectableRowsOnClick &&
+      this.props.options.selectableRows !== 'none' &&
+      this.isRowSelectable(data.dataIndex, this.props.selectedRows)
+    ) {
+      const selectRow = { index: data.rowIndex, dataIndex: data.dataIndex };
+      this.handleRowSelect(selectRow, event as unknown as React.MouseEvent);
+    }
+
+    if (
+      this.props.options.expandableRowsOnClick &&
+      this.props.options.expandableRows &&
+      this.isRowExpandable(data.dataIndex)
+    ) {
+      const expandRow = { index: data.rowIndex, dataIndex: data.dataIndex };
+      this.props.toggleExpandRow(expandRow);
+    }
+
+    if (this.props.options.selectableRowsOnClick) return;
+
+    this.props.options.onRowClick && this.props.options.onRowClick(row, data);
+  };
+
+  processRow = (row: MUIDataTableCellValue[], columnOrder: number[]) => {
+    const ret: { value: MUIDataTableCellValue; index: number }[] = [];
+    for (let ii = 0; ii < row.length; ii++) {
+      const columnIndex = columnOrder[ii];
+      if (columnIndex === undefined) continue;
+      ret.push({ value: row[columnIndex], index: columnIndex });
+    }
+    return ret;
+  };
+
+  override render() {
+    const {
+      classes,
+      columns,
+      toggleExpandRow,
+      options,
+      columnOrder = this.props.columns.map((_item, idx) => idx),
+      components = {},
+      tableId,
+    } = this.props;
+    const tableRows = this.buildRows();
+    const visibleColCnt = columns.filter((c) => c.display === 'true').length;
+
+    return (
+      <MuiTableBody>
+        {tableRows && tableRows.length > 0 ? (
+          tableRows.map((data, rowIndex) => {
+            const { data: row, dataIndex } = data;
+
+            if (options.customRowRender) {
+              return options.customRowRender(row, dataIndex, rowIndex);
+            }
+
+            const isRowSelected = options.selectableRows !== 'none' ? this.isRowSelected(dataIndex) : false;
+            const isRowSelectable = this.isRowSelectable(dataIndex);
+            const bodyClasses = (
+              options.setRowProps ? options.setRowProps(row, dataIndex, rowIndex) || {} : {}
+            ) as Record<string, unknown>;
+
+            const processedRow = this.processRow(row, columnOrder);
+
+            return (
+              <React.Fragment key={rowIndex}>
+                <TableBodyRow
+                  {...bodyClasses}
+                  options={options}
+                  rowSelected={isRowSelected}
+                  isRowSelectable={isRowSelectable}
+                  onClick={(e: React.MouseEvent<HTMLTableRowElement>) =>
+                    this.handleRowClick(row, { rowIndex, dataIndex }, e)
+                  }
+                  className={clsx({
+                    [classes.lastStackedCell]:
+                      options.responsive === 'vertical' ||
+                      options.responsive === 'stacked' ||
+                      options.responsive === 'stackedFullWidth',
+                    [classes.lastSimpleCell]: options.responsive === 'simple',
+                    [bodyClasses['className'] as string]: !!bodyClasses['className'],
+                  })}
+                  data-testid={'MUIDataTableBodyRow-' + dataIndex}
+                  id={`MUIDataTableBodyRow-${tableId}-${dataIndex}`}>
+                  <TableSelectCell
+                    onChange={(e: unknown) =>
+                      this.handleRowSelect({ index: this.getRowIndex(rowIndex), dataIndex }, e as React.MouseEvent)
+                    }
+                    onExpand={() => toggleExpandRow({ index: this.getRowIndex(rowIndex), dataIndex })}
+                    fixedHeader={options.fixedHeader}
+                    fixedSelectColumn={options.fixedSelectColumn}
+                    checked={isRowSelected}
+                    expandableOn={options.expandableRows}
+                    hideExpandButton={!this.isRowExpandable(dataIndex) && options.expandableRows}
+                    selectableOn={options.selectableRows as string}
+                    selectableRowsHideCheckboxes={options.selectableRowsHideCheckboxes}
+                    isRowExpanded={this.isRowExpanded(dataIndex)}
+                    isRowSelectable={isRowSelectable}
+                    dataIndex={dataIndex}
+                    id={`MUIDataTableSelectCell-${tableId}-${dataIndex}`}
+                    components={components}
+                  />
+                  {processedRow.map((column) => {
+                    const tableColumn = columns[column.index];
+                    if (!tableColumn || tableColumn.display !== 'true') return null;
+                    const cellValue = column.value instanceof Date ? String(column.value) : column.value;
+
+                    return (
+                      <TableBodyCell
+                        {...(tableColumn.setCellProps
+                          ? tableColumn.setCellProps(column.value, dataIndex, column.index) || {}
+                          : {})}
+                        data-testid={`MuiDataTableBodyCell-${column.index}-${rowIndex}`}
+                        dataIndex={dataIndex}
+                        rowIndex={rowIndex}
+                        colIndex={column.index}
+                        columnHeader={tableColumn.label}
+                        print={tableColumn.print}
+                        options={options}
+                        tableId={tableId}
+                        key={column.index}>
+                        {cellValue}
+                      </TableBodyCell>
+                    );
+                  })}
+                </TableBodyRow>
+                {this.isRowExpanded(dataIndex) &&
+                  options.renderExpandableRow &&
+                  options.renderExpandableRow(row, { rowIndex, dataIndex })}
+              </React.Fragment>
+            );
+          })
+        ) : (
+          <TableBodyRow options={options}>
+            <TableBodyCell
+              colSpan={options.selectableRows !== 'none' || options.expandableRows ? visibleColCnt + 1 : visibleColCnt}
+              options={options}
+              colIndex={0}
+              rowIndex={0}
+              columnHeader={null}
+              print={true}
+              dataIndex={0}>
+              <Typography variant="body1" className={classes.emptyTitle} component={'div'}>
+                {options.textLabels?.body?.noMatch}
+              </Typography>
+            </TableBodyCell>
+          </TableBodyRow>
+        )}
+      </MuiTableBody>
+    );
+  }
+}
+
+export default withStyles(TableBody, defaultBodyStyles, { name: 'MUIDataTableBody' });
diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.tsx
similarity index 79%
rename from src/components/TableBodyCell.js
rename to src/components/TableBodyCell.tsx
index 800440bd..058a3fee 100644
--- a/src/components/TableBodyCell.js
+++ b/src/components/TableBodyCell.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback } from 'react';
+import { useCallback, type MouseEvent, type EventHandler, type SyntheticEvent, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { TableCell } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
+import type { MUIDataTableOptions } from '../types/options';
 
 const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })((theme) => ({
   root: {},
@@ -90,25 +91,41 @@ const useStyles = makeStyles({ name: 'MUIDataTableBodyCell' })((theme) => ({
   },
 }));
 
-function TableBodyCell(props) {
+interface TableBodyCellProps {
+  children: ReactNode | ((dataIndex: number, rowIndex: number) => ReactNode);
+  colIndex: number;
+  columnHeader: ReactNode;
+  options: MUIDataTableOptions;
+  dataIndex: number;
+  rowIndex: number;
+  className?: string | undefined;
+  print: boolean;
+  tableId?: string | undefined;
+  [key: string]: unknown;
+}
+
+function TableBodyCell(props: TableBodyCellProps) {
   const { classes } = useStyles();
   const { children, colIndex, columnHeader, options, dataIndex, rowIndex, className, print, tableId, ...otherProps } =
     props;
   const onCellClick = options.onCellClick;
 
   const handleClick = useCallback(
-    (event) => {
-      onCellClick(children, { colIndex, rowIndex, dataIndex, event });
+    (event: MouseEvent<HTMLElement>) => {
+      if (typeof children !== 'function') {
+        onCellClick?.(children, { colIndex, rowIndex, dataIndex, event });
+      }
     },
     [onCellClick, children, colIndex, rowIndex, dataIndex],
   );
 
-  // Event listeners. Avoid attaching them if they're not necessary.
-  let methods = {};
+  const methods: Record<string, EventHandler<SyntheticEvent>> = {};
   if (onCellClick) {
-    methods.onClick = handleClick;
+    methods['onClick'] = handleClick;
   }
 
+  const tableProps = options.setTableProps ? options.setTableProps() : {};
+
   let cells = [
     <div
       key={1}
@@ -126,7 +143,7 @@ function TableBodyCell(props) {
           [classes.cellStackedSmall]:
             options.responsive === 'stacked' ||
             (options.responsive === 'stackedFullWidth' &&
-              (options.setTableProps().padding === 'none' || options.setTableProps().size === 'small')),
+              (tableProps.padding === 'none' || tableProps.size === 'small')),
           [classes.simpleHeader]: options.responsive === 'simple',
           'datatables-noprint': !print,
         },
@@ -147,7 +164,7 @@ function TableBodyCell(props) {
           [classes.responsiveStackedSmall]:
             options.responsive === 'stacked' ||
             (options.responsive === 'stackedFullWidth' &&
-              (options.setTableProps().padding === 'none' || options.setTableProps().size === 'small')),
+              (tableProps.padding === 'none' || tableProps.size === 'small')),
           [classes.simpleCell]: options.responsive === 'simple',
           'datatables-noprint': !print,
         },
@@ -159,7 +176,10 @@ function TableBodyCell(props) {
 
   var innerCells;
   if (
-    ['standard', 'scrollMaxHeight', 'scrollFullHeight', 'scrollFullHeightFullWidth'].indexOf(options.responsive) !== -1
+    // ATTENTION
+    ['standard', 'scrollMaxHeight', 'scrollFullHeight', 'scrollFullHeightFullWidth'].indexOf(
+      options.responsive || '',
+    ) !== -1
   ) {
     innerCells = cells.slice(1, 2);
   } else {
@@ -183,7 +203,7 @@ function TableBodyCell(props) {
             options.responsive === 'vertical' ||
             options.responsive === 'stacked' ||
             (options.responsive === 'stackedFullWidth' &&
-              (options.setTableProps().padding === 'none' || options.setTableProps().size === 'small')),
+              (tableProps.padding === 'none' || tableProps.size === 'small')),
           [classes.simpleCell]: options.responsive === 'simple',
           'datatables-noprint': !print,
         },
diff --git a/src/components/TableBodyRow.js b/src/components/TableBodyRow.tsx
similarity index 62%
rename from src/components/TableBodyRow.js
rename to src/components/TableBodyRow.tsx
index 01544bc5..2d406b19 100644
--- a/src/components/TableBodyRow.js
+++ b/src/components/TableBodyRow.tsx
@@ -1,17 +1,16 @@
-import React from 'react';
+import React, { type EventHandler, type ReactNode, type SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { TableRow } from '@mui/material';
 import { withStyles } from 'tss-react/mui';
+import type { MUIDataTableOptions } from '../types/options';
+import type { Theme } from '@mui/material/styles';
 
-const defaultBodyRowStyles = (theme) => ({
+const defaultBodyRowStyles = (theme: Theme) => ({
   root: {
-    // material v4
     '&.Mui-selected': {
       backgroundColor: theme.palette.action.selected,
     },
-
-    // material v3 workaround
     '&.mui-row-selected': {
       backgroundColor: theme.palette.action.selected,
     },
@@ -35,24 +34,33 @@ const defaultBodyRowStyles = (theme) => ({
   },
 });
 
-class TableBodyRow extends React.Component {
-  static propTypes = {
-    /** Options used to describe table */
-    options: PropTypes.object.isRequired,
-    /** Callback to execute when row is clicked */
-    onClick: PropTypes.func,
-    /** Current row selected or not */
-    rowSelected: PropTypes.bool,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
-  };
+interface TableBodyRowProps {
+  options: MUIDataTableOptions;
+  onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+  rowSelected?: boolean;
+  classes?: Record<keyof ReturnType<typeof defaultBodyRowStyles>, string>;
+  className?: string;
+  isRowSelectable?: boolean;
+  children?: ReactNode;
+  [key: string]: unknown;
+}
 
-  render() {
-    const { classes, options, rowSelected, onClick, className, isRowSelectable, ...rest } = this.props;
+class TableBodyRow extends React.Component<TableBodyRowProps> {
+  override render() {
+    const {
+      classes = {} as Record<keyof ReturnType<typeof defaultBodyRowStyles>, string>,
+      options,
+      rowSelected,
+      onClick,
+      className,
+      isRowSelectable,
+      ...rest
+    } = this.props;
 
-    var methods = {};
+    // ATTENTION
+    const methods: Record<string, EventHandler<SyntheticEvent>> = {};
     if (onClick) {
-      methods.onClick = onClick;
+      methods['onClick'] = onClick;
     }
 
     return (
@@ -62,7 +70,6 @@ class TableBodyRow extends React.Component {
         className={clsx(
           {
             [classes.root]: true,
-            [classes.hover]: options.rowHover,
             [classes.hoverCursor]: (options.selectableRowsOnClick && isRowSelectable) || options.expandableRowsOnClick,
             [classes.responsiveSimple]: options.responsive === 'simple',
             [classes.responsiveStacked]:
diff --git a/src/components/TableFilter.js b/src/components/TableFilter.tsx
similarity index 50%
rename from src/components/TableFilter.js
rename to src/components/TableFilter.tsx
index 742f5f2e..8301b5da 100644
--- a/src/components/TableFilter.js
+++ b/src/components/TableFilter.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Button,
   Checkbox,
@@ -13,158 +14,178 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import PropTypes from 'prop-types';
-import React from 'react';
 import clsx from 'clsx';
 import { withStyles } from 'tss-react/mui';
 import cloneDeep from 'lodash.clonedeep';
+import type { ComponentType } from 'react';
+import type { CSSObject } from 'tss-react';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type { MUIDataTableOptions, MUIDataTableFilterList } from '../types/options';
+import type { Theme } from '@mui/material/styles';
+
+export const defaultFilterStyles = (theme: Theme) =>
+  ({
+    root: {
+      backgroundColor: theme.palette.background.default,
+      padding: '24px 24px 36px 24px',
+      fontFamily: 'Roboto',
+    },
+    header: {
+      flex: '0 0 auto',
+      marginBottom: '16px',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between',
+    },
+    title: {
+      display: 'inline-block',
+      marginLeft: '7px',
+      color: theme.palette.text.primary,
+      fontSize: '14px',
+      fontWeight: 500,
+    },
+    noMargin: {
+      marginLeft: '0px',
+    },
+    reset: {
+      alignSelf: 'left',
+    },
+    resetLink: {
+      marginLeft: '16px',
+      fontSize: '12px',
+      cursor: 'pointer',
+    },
+    filtersSelected: {
+      alignSelf: 'right',
+    },
+    checkboxListTitle: {
+      marginLeft: '7px',
+      marginBottom: '8px',
+      fontSize: '14px',
+      color: theme.palette.text.secondary,
+      textAlign: 'left',
+      fontWeight: 500,
+    },
+    checkboxFormGroup: {
+      marginTop: '8px',
+    },
+    checkboxFormControl: {
+      margin: '0px',
+    },
+    checkboxFormControlLabel: {
+      fontSize: '15px',
+      marginLeft: '8px',
+      color: theme.palette.text.primary,
+    },
+    checkboxIcon: {
+      width: '32px',
+      height: '32px',
+    },
+    checkbox: {},
+    checked: {},
+    gridListTile: {
+      marginTop: '16px',
+    },
+  }) satisfies Record<string, CSSObject>;
+
+export interface TableFilterProps {
+  filterData: string[][];
+  filterList: MUIDataTableFilterList;
+  options: MUIDataTableOptions;
+  columns: MUIDataTableColumnState[];
+  onFilterUpdate: (
+    index: number,
+    value: string | string[],
+    column: string | MUIDataTableColumnState,
+    type: string,
+  ) => void;
+  onFilterReset: () => void;
+  handleClose: () => void;
+  updateFilterByType: (
+    filterList: MUIDataTableFilterList,
+    index: number,
+    value: string | string[],
+    type: string,
+    customUpdate: unknown,
+  ) => void;
+  classes: Record<keyof ReturnType<typeof defaultFilterStyles>, string>;
+  customFooter?: (filterList: MUIDataTableFilterList, applyFilters: () => MUIDataTableFilterList) => React.ReactNode;
+  components?: { Checkbox?: ComponentType<unknown> };
+}
 
-export const defaultFilterStyles = (theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.default,
-    padding: '24px 24px 36px 24px',
-    fontFamily: 'Roboto',
-  },
-  header: {
-    flex: '0 0 auto',
-    marginBottom: '16px',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  title: {
-    display: 'inline-block',
-    marginLeft: '7px',
-    color: theme.palette.text.primary,
-    fontSize: '14px',
-    fontWeight: 500,
-  },
-  noMargin: {
-    marginLeft: '0px',
-  },
-  reset: {
-    alignSelf: 'left',
-  },
-  resetLink: {
-    marginLeft: '16px',
-    fontSize: '12px',
-    cursor: 'pointer',
-  },
-  filtersSelected: {
-    alignSelf: 'right',
-  },
-  /* checkbox */
-  checkboxListTitle: {
-    marginLeft: '7px',
-    marginBottom: '8px',
-    fontSize: '14px',
-    color: theme.palette.text.secondary,
-    textAlign: 'left',
-    fontWeight: 500,
-  },
-  checkboxFormGroup: {
-    marginTop: '8px',
-  },
-  checkboxFormControl: {
-    margin: '0px',
-  },
-  checkboxFormControlLabel: {
-    fontSize: '15px',
-    marginLeft: '8px',
-    color: theme.palette.text.primary,
-  },
-  checkboxIcon: {
-    width: '32px',
-    height: '32px',
-  },
-  checkbox: {},
-  checked: {},
-  gridListTile: {
-    marginTop: '16px',
-  },
-});
-
-class TableFilter extends React.Component {
-  static propTypes = {
-    /** Data used to populate filter dropdown/checkbox */
-    filterData: PropTypes.array.isRequired,
-    /** Data selected to be filtered against dropdown/checkbox */
-    filterList: PropTypes.array.isRequired,
-    /** Options used to describe table */
-    options: PropTypes.object.isRequired,
-    /** Callback to trigger filter update */
-    onFilterUpdate: PropTypes.func,
-    /** Callback to trigger filter reset */
-    onFilterReset: PropTypes.func,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
-  };
+interface TableFilterState {
+  filterList: MUIDataTableFilterList;
+}
 
-  constructor(props) {
+class TableFilter extends React.Component<TableFilterProps, TableFilterState> {
+  constructor(props: TableFilterProps) {
     super(props);
     this.state = {
       filterList: cloneDeep(props.filterList),
     };
   }
 
-  filterUpdate = (index, value, column, type, customUpdate) => {
-    let newFilterList = this.state.filterList.slice(0);
-
+  filterUpdate = (
+    index: number,
+    value: string | string[],
+    column: string | MUIDataTableColumnState,
+    type: string,
+    customUpdate?: unknown,
+  ) => {
+    const newFilterList = this.state.filterList.slice(0);
     this.props.updateFilterByType(newFilterList, index, value, type, customUpdate);
-    this.setState({
-      filterList: newFilterList,
-    });
+    this.setState({ filterList: newFilterList });
   };
 
-  handleCheckboxChange = (index, value, column) => {
+  handleCheckboxChange = (index: number, value: string, column: string) => {
     this.filterUpdate(index, value, column, 'checkbox');
-
     if (this.props.options.confirmFilters !== true) {
       this.props.onFilterUpdate(index, value, column, 'checkbox');
     }
   };
 
-  handleDropdownChange = (event, index, column) => {
-    const labelFilterAll = this.props.options.textLabels.filter.all;
-    const value = event.target.value === labelFilterAll ? [] : [event.target.value];
+  handleDropdownChange = (event: React.ChangeEvent<{ value: unknown }>, index: number, column: string) => {
+    const labelFilterAll = this.props.options.textLabels?.filter?.all || '';
+    const value = event.target.value === labelFilterAll ? [] : [event.target.value as string];
     this.filterUpdate(index, value, column, 'dropdown');
-
     if (this.props.options.confirmFilters !== true) {
       this.props.onFilterUpdate(index, value, column, 'dropdown');
     }
   };
 
-  handleMultiselectChange = (index, value, column) => {
+  handleMultiselectChange = (index: number, value: string | string[], column: string) => {
     this.filterUpdate(index, value, column, 'multiselect');
-
     if (this.props.options.confirmFilters !== true) {
       this.props.onFilterUpdate(index, value, column, 'multiselect');
     }
   };
 
-  handleTextFieldChange = (event, index, column) => {
+  handleTextFieldChange = (event: React.ChangeEvent<HTMLInputElement>, index: number, column: string) => {
     this.filterUpdate(index, event.target.value, column, 'textField');
-
     if (this.props.options.confirmFilters !== true) {
       this.props.onFilterUpdate(index, event.target.value, column, 'textField');
     }
   };
 
-  handleCustomChange = (value, index, column) => {
-    this.filterUpdate(index, value, column.name, column.filterType);
-
+  handleCustomChange = (value: string | string[], index: number, column: MUIDataTableColumnState) => {
+    this.filterUpdate(index, value, column.name, column.filterType as string);
     if (this.props.options.confirmFilters !== true) {
-      this.props.onFilterUpdate(index, value, column.name, column.filterType);
+      this.props.onFilterUpdate(index, value, column.name, column.filterType as string);
     }
   };
 
-  renderCheckbox(column, index, components = {}) {
+  renderCheckbox(
+    column: MUIDataTableColumnState,
+    index: number,
+    components: { Checkbox?: ComponentType<unknown> } = {},
+  ) {
     const CheckboxComponent = components.Checkbox || Checkbox;
-
     const { classes, filterData } = this.props;
     const { filterList } = this.state;
-    const renderItem =
-      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : (v) => v;
+    const filterOpts = column.filterOptions as Record<string, unknown> | undefined;
+    const renderItem = filterOpts?.['renderValue']
+      ? (filterOpts['renderValue'] as (v: string) => string)
+      : (v: string) => v;
 
     return (
       <Grid key={index} size={6}>
@@ -175,7 +196,7 @@ class TableFilter extends React.Component {
             </Typography>
           </Grid>
           <Grid container>
-            {filterData[index].map((filterValue, filterIndex) => (
+            {(filterData[index] ?? []).map((filterValue, filterIndex) => (
               <Grid key={filterIndex}>
                 <FormControlLabel
                   key={filterIndex}
@@ -189,11 +210,8 @@ class TableFilter extends React.Component {
                       color="primary"
                       className={classes.checkboxIcon}
                       onChange={this.handleCheckboxChange.bind(null, index, filterValue, column.name)}
-                      checked={filterList[index].indexOf(filterValue) >= 0}
-                      classes={{
-                        root: classes.checkbox,
-                        checked: classes.checked,
-                      }}
+                      checked={(filterList[index] ?? []).indexOf(filterValue) >= 0}
+                      classes={{ root: classes.checkbox, checked: classes.checked }}
                       value={filterValue != null ? filterValue.toString() : ''}
                     />
                   }
@@ -207,15 +225,15 @@ class TableFilter extends React.Component {
     );
   }
 
-  renderSelect(column, index) {
+  renderSelect(column: MUIDataTableColumnState, index: number) {
     const { classes, filterData, options } = this.props;
     const { filterList } = this.state;
-    const textLabels = options.textLabels.filter;
-    const renderItem =
-      column.filterOptions && column.filterOptions.renderValue
-        ? column.filterOptions.renderValue
-        : (v) => (v != null ? v.toString() : '');
-    const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
+    const textLabels = options.textLabels?.filter;
+    const filterOpts = column.filterOptions as Record<string, unknown> | undefined;
+    const renderItem = filterOpts?.['renderValue']
+      ? (filterOpts['renderValue'] as (v: string) => string)
+      : (v: string) => (v != null ? v.toString() : '');
+    const width = filterOpts?.['fullWidth'] === true ? 12 : 6;
 
     return (
       <Grid key={index} size={width} className={classes.gridListTile}>
@@ -223,15 +241,17 @@ class TableFilter extends React.Component {
           <InputLabel htmlFor={column.name}>{column.label}</InputLabel>
           <Select
             fullWidth
-            value={filterList[index].length ? filterList[index].toString() : textLabels.all}
+            value={filterList[index]?.length ? filterList[index].toString() : textLabels?.all}
             name={column.name}
-            onChange={(event) => this.handleDropdownChange(event, index, column.name)}
+            onChange={(event) =>
+              this.handleDropdownChange(event as unknown as React.ChangeEvent<{ value: unknown }>, index, column.name)
+            }
             MenuProps={{ disablePortal: true }}
             input={<Input name={column.name} id={column.name} />}>
-            <MenuItem value={textLabels.all} key={0}>
-              {textLabels.all}
+            <MenuItem value={textLabels?.all} key={0}>
+              {textLabels?.all}
             </MenuItem>
-            {filterData[index].map((filterValue, filterIndex) => (
+            {filterData[index]?.map((filterValue, filterIndex) => (
               <MenuItem value={filterValue} key={filterIndex + 1}>
                 {renderItem(filterValue)}
               </MenuItem>
@@ -242,13 +262,14 @@ class TableFilter extends React.Component {
     );
   }
 
-  renderTextField(column, index) {
+  renderTextField(column: MUIDataTableColumnState, index: number) {
     const { classes } = this.props;
     const { filterList } = this.state;
-    if (column.filterOptions && column.filterOptions.renderValue) {
+    const filterOpts = column.filterOptions as Record<string, unknown> | undefined;
+    if (filterOpts?.['renderValue']) {
       console.warn('Custom renderValue not supported for textField filters');
     }
-    const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
+    const width = filterOpts?.['fullWidth'] === true ? 12 : 6;
 
     return (
       <Grid key={index} size={width} className={classes.gridListTile}>
@@ -257,23 +278,29 @@ class TableFilter extends React.Component {
             fullWidth
             variant={'standard'}
             label={column.label}
-            value={filterList[index].toString() || ''}
+            value={filterList[index]?.toString() || ''}
             data-testid={'filtertextfield-' + column.name}
-            onChange={(event) => this.handleTextFieldChange(event, index, column.name)}
+            onChange={(event) =>
+              this.handleTextFieldChange(event as React.ChangeEvent<HTMLInputElement>, index, column.name)
+            }
           />
         </FormControl>
       </Grid>
     );
   }
 
-  renderMultiselect(column, index, components = {}) {
+  renderMultiselect(
+    column: MUIDataTableColumnState,
+    index: number,
+    components: { Checkbox?: ComponentType<unknown> } = {},
+  ) {
     const CheckboxComponent = components.Checkbox || Checkbox;
-
     const { classes, filterData } = this.props;
     const { filterList } = this.state;
-    const renderItem =
-      column.filterOptions && column.filterOptions.renderValue ? column.filterOptions.renderValue : (v) => v;
-    const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
+    const filterOpts = column.filterOptions;
+    const renderItem = filterOpts?.['renderValue'] ? filterOpts['renderValue'] : (v: string) => v;
+    const width = filterOpts?.['fullWidth'] === true ? 12 : 6;
+
     return (
       <Grid key={index} size={width} className={classes.gridListTile}>
         <FormControl key={index} variant={'standard'} fullWidth>
@@ -282,23 +309,20 @@ class TableFilter extends React.Component {
             multiple
             fullWidth
             value={filterList[index] || []}
-            renderValue={(selected) => selected.map(renderItem).join(', ')}
+            renderValue={(selected) => (selected as string[]).map(renderItem).join(', ')}
             name={column.name}
-            onChange={(event) => this.handleMultiselectChange(index, event.target.value, column.name)}
+            onChange={(event) => this.handleMultiselectChange(index, event.target.value as string[], column.name)}
             MenuProps={{ disablePortal: true }}
             input={<Input name={column.name} id={column.name} />}>
-            {filterData[index].map((filterValue, filterIndex) => (
+            {filterData[index]?.map((filterValue, filterIndex) => (
               <MenuItem value={filterValue} key={filterIndex + 1}>
                 <CheckboxComponent
                   data-description="table-filter"
                   color="primary"
-                  checked={filterList[index].indexOf(filterValue) >= 0}
+                  checked={(filterData[index] ?? []).indexOf(filterValue) >= 0}
                   value={filterValue != null ? filterValue.toString() : ''}
                   className={classes.checkboxIcon}
-                  classes={{
-                    root: classes.checkbox,
-                    checked: classes.checked,
-                  }}
+                  classes={{ root: classes.checkbox, checked: classes.checked }}
                 />
                 <ListItemText primary={renderItem(filterValue)} />
               </MenuItem>
@@ -309,82 +333,79 @@ class TableFilter extends React.Component {
     );
   }
 
-  renderCustomField(column, index) {
+  renderCustomField(column: MUIDataTableColumnState, index: number) {
     const { classes, filterData, options } = this.props;
     const { filterList } = this.state;
-    const width = (column.filterOptions && column.filterOptions.fullWidth) === true ? 12 : 6;
+    const filterOpts = column.filterOptions as Record<string, unknown> | undefined;
+    const width = filterOpts?.['fullWidth'] === true ? 12 : 6;
     const display =
-      (column.filterOptions && column.filterOptions.display) ||
-      (options.filterOptions && options.filterOptions.display);
+      filterOpts?.['display'] ||
+      (options.filterOptions && (options.filterOptions as Record<string, unknown>)['display']);
 
     if (!display) {
       console.error('Property "display" is required when using custom filter type.');
       return;
     }
-    if (column.filterListOptions && column.filterListOptions.renderValue) {
-      console.warning('"renderValue" is ignored for custom filter fields');
-    }
 
     return (
       <Grid key={index} size={width} className={classes.gridListTile}>
         <FormControl key={index} fullWidth>
-          {display(filterList, this.handleCustomChange, index, column, filterData)}
+          {(
+            display as (
+              filterList: MUIDataTableFilterList,
+              onChange: unknown,
+              index: number,
+              column: MUIDataTableColumnState,
+              filterData: string[][],
+            ) => React.ReactNode
+          )(filterList, this.handleCustomChange, index, column, filterData)}
         </FormControl>
       </Grid>
     );
   }
 
   applyFilters = () => {
-    this.state.filterList.forEach((filter, index) => {
-      this.props.onFilterUpdate(index, filter, this.props.columns[index], 'custom');
-    });
-
-    this.props.handleClose(); // close filter dialog popover
-
+    this.state.filterList.forEach((filter, index) =>
+      this.props.onFilterUpdate(index, filter, this.props.columns[index]!, 'custom'),
+    );
+    this.props.handleClose();
     if (this.props.options.onFilterConfirm) {
       this.props.options.onFilterConfirm(this.state.filterList);
     }
-
     return this.state.filterList;
   };
 
   resetFilters = () => {
-    this.setState({
-      filterList: this.props.columns.map(() => []),
-    });
+    this.setState({ filterList: this.props.columns.map(() => []) });
     if (this.props.options.confirmFilters !== true) {
       this.props.onFilterReset();
     }
   };
 
-  render() {
+  override render() {
     const { classes, columns, options, customFooter, filterList, components = {} } = this.props;
-    const textLabels = options.textLabels.filter;
+    const textLabels = options.textLabels?.filter;
 
     return (
       <div className={classes.root}>
         <div className={classes.header}>
           <div className={classes.reset}>
-            <Typography
-              variant="body2"
-              className={clsx({
-                [classes.title]: true,
-              })}>
-              {textLabels.title}
+            <Typography variant="body2" className={clsx({ [classes.title]: true })}>
+              {textLabels?.title}
             </Typography>
             <Button
               color="primary"
               className={classes.resetLink}
               tabIndex={0}
-              aria-label={textLabels.reset}
+              aria-label={textLabels?.reset}
               data-testid={'filterReset-button'}
               onClick={this.resetFilters}>
-              {textLabels.reset}
+              {textLabels?.reset}
             </Button>
           </div>
           <div className={classes.filtersSelected} />
         </div>
-        <Grid container direction="row" spacing={4} sx={{ justifyContent: 'flex-start', alignItems: 'center' }}>
+        <Grid container direction="row" sx={{ justifyContent: 'flex-start', alignItems: 'center' }} spacing={4}>
           {columns.map((column, index) => {
             if (column.filter) {
               const filterType = column.filterType || options.filterType;
@@ -398,6 +419,7 @@ class TableFilter extends React.Component {
                       ? this.renderCustomField(column, index)
                       : this.renderSelect(column, index);
             }
+            return null;
           })}
         </Grid>
         {customFooter ? customFooter(filterList, this.applyFilters) : ''}
diff --git a/src/components/TableFilterList.js b/src/components/TableFilterList.js
deleted file mode 100644
index 3c7ecd9a..00000000
--- a/src/components/TableFilterList.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-import PropTypes from 'prop-types';
-import React from 'react';
-import TableFilterListItem from './TableFilterListItem';
-
-const useStyles = makeStyles({ name: 'MUIDataTableFilterList' })(() => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'left',
-    flexWrap: 'wrap',
-    margin: '0px 16px 0px 16px',
-  },
-  chip: {
-    margin: '8px 8px 0px 0px',
-  },
-}));
-
-const TableFilterList = ({
-  options,
-  filterList,
-  filterUpdate,
-  filterListRenderers,
-  columnNames,
-  serverSideFilterList,
-  customFilterListUpdate,
-  ItemComponent = TableFilterListItem,
-}) => {
-  const { classes } = useStyles();
-  const { serverSide } = options;
-
-  const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => {
-    let removedFilter = filterValue;
-    if (Array.isArray(removedFilter) && removedFilter.length === 0) {
-      removedFilter = filterList[index];
-    }
-
-    filterUpdate(index, filterValue, columnName, filterType, customFilterListUpdate, (filterList) => {
-      if (options.onFilterChipClose) {
-        options.onFilterChipClose(index, removedFilter, filterList);
-      }
-    });
-  };
-  const customFilterChip = (customFilterItem, index, customFilterItemIndex, item, isArray) => {
-    let type;
-    // If our custom filter list is an array, we need to check for custom update functions to determine
-    // default type. Otherwise we use the supplied type in options.
-    if (isArray) {
-      type = customFilterListUpdate[index] ? 'custom' : 'chip';
-    } else {
-      type = columnNames[index].filterType;
-    }
-
-    return (
-      <ItemComponent
-        label={customFilterItem}
-        key={customFilterItemIndex}
-        onDelete={() =>
-          removeFilter(
-            index,
-            item[customFilterItemIndex] || [],
-            columnNames[index].name,
-            type,
-            customFilterListUpdate[index],
-          )
-        }
-        className={classes.chip}
-        itemKey={customFilterItemIndex}
-        index={index}
-        data={item}
-        columnNames={columnNames}
-        filterProps={
-          options.setFilterChipProps
-            ? options.setFilterChipProps(index, columnNames[index].name, item[customFilterItemIndex] || [])
-            : {}
-        }
-      />
-    );
-  };
-
-  const filterChip = (index, data, colIndex) => (
-    <ItemComponent
-      label={filterListRenderers[index](data)}
-      key={colIndex}
-      onDelete={() => removeFilter(index, data, columnNames[index].name, 'chip')}
-      className={classes.chip}
-      itemKey={colIndex}
-      index={index}
-      data={data}
-      columnNames={columnNames}
-      filterProps={options.setFilterChipProps ? options.setFilterChipProps(index, columnNames[index].name, data) : {}}
-    />
-  );
-
-  const getFilterList = (filterList) => {
-    return filterList.map((item, index) => {
-      if (columnNames[index].filterType === 'custom' && filterList[index].length) {
-        const filterListRenderersValue = filterListRenderers[index](item);
-
-        if (Array.isArray(filterListRenderersValue)) {
-          return filterListRenderersValue.map((customFilterItem, customFilterItemIndex) =>
-            customFilterChip(customFilterItem, index, customFilterItemIndex, item, true),
-          );
-        } else {
-          return customFilterChip(filterListRenderersValue, index, index, item, false);
-        }
-      }
-
-      return item.map((data, colIndex) => filterChip(index, data, colIndex));
-    });
-  };
-
-  return (
-    <div className={classes.root}>
-      {serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)}
-    </div>
-  );
-};
-
-TableFilterList.propTypes = {
-  /** Data used to filter table against */
-  filterList: PropTypes.array.isRequired,
-  /** Filter List value renderers */
-  filterListRenderers: PropTypes.array.isRequired,
-  /** Columns used to describe table */
-  columnNames: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.shape({ name: PropTypes.string.isRequired, filterType: PropTypes.string }),
-    ]),
-  ).isRequired,
-  /** Callback to trigger filter update */
-  onFilterUpdate: PropTypes.func,
-  ItemComponent: PropTypes.any,
-};
-
-export default TableFilterList;
diff --git a/src/components/TableFilterList.tsx b/src/components/TableFilterList.tsx
new file mode 100644
index 00000000..c11781c6
--- /dev/null
+++ b/src/components/TableFilterList.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+import TableFilterListItem from './TableFilterListItem';
+import type { ComponentType } from 'react';
+import type { MUIDataTableOptions, MUIDataTableFilterList } from '../types/options';
+import type { TableFilterListItemProps } from '../types/components';
+
+const useStyles = makeStyles({ name: 'MUIDataTableFilterList' })(() => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'left',
+    flexWrap: 'wrap',
+    margin: '0px 16px 0px 16px',
+  },
+  chip: {
+    margin: '8px 8px 0px 0px',
+  },
+}));
+
+interface ColumnName {
+  name: string;
+  filterType: string;
+}
+
+export interface TableFilterListProps {
+  options: MUIDataTableOptions;
+  filterList: MUIDataTableFilterList;
+  filterUpdate: (
+    index: number,
+    value: string | string[],
+    columnName: string,
+    filterType: string,
+    customUpdate:
+      | ((filterList: MUIDataTableFilterList, filterPos: number, index: number) => MUIDataTableFilterList)
+      | null,
+    callback: (filterList: MUIDataTableFilterList) => void,
+  ) => void;
+  filterListRenderers: ((value: string | string[]) => string | string[])[];
+  columnNames: ColumnName[];
+  serverSideFilterList?: MUIDataTableFilterList | null;
+  customFilterListUpdate: (
+    | ((filterList: MUIDataTableFilterList, filterPos: number, index: number) => MUIDataTableFilterList)
+    | null
+  )[];
+  ItemComponent?: ComponentType<TableFilterListItemProps>;
+}
+
+const TableFilterList = ({
+  options,
+  filterList,
+  filterUpdate,
+  filterListRenderers,
+  columnNames,
+  serverSideFilterList,
+  customFilterListUpdate,
+  ItemComponent = TableFilterListItem,
+}: TableFilterListProps) => {
+  const { classes } = useStyles();
+  const { serverSide } = options;
+  const removeFilter = (
+    index: number,
+    filterValue: string | string[],
+    columnName: string,
+    filterType: string,
+    customUpdate:
+      | ((filterList: MUIDataTableFilterList, filterPos: number, idx: number) => MUIDataTableFilterList)
+      | null = null,
+  ) => {
+    let removedFilter: string | string[] = filterValue;
+    if (Array.isArray(removedFilter) && removedFilter.length === 0) {
+      removedFilter = filterList[index] as string | string[];
+    }
+
+    filterUpdate(index, filterValue, columnName, filterType, customUpdate, (fl) => {
+      if (options.onFilterChipClose) {
+        options.onFilterChipClose(index, removedFilter as string, fl);
+      }
+    });
+  };
+
+  const customFilterChip = (
+    customFilterItem: string,
+    index: number,
+    customFilterItemIndex: number,
+    item: string[],
+    isArray: boolean,
+  ) => {
+    const type = isArray ? (customFilterListUpdate[index] ? 'custom' : 'chip') : columnNames[index]?.filterType;
+
+    return (
+      <ItemComponent
+        label={customFilterItem}
+        key={customFilterItemIndex}
+        onDelete={() =>
+          removeFilter(
+            index,
+            item[customFilterItemIndex] || [],
+            columnNames[index]?.name as string,
+            type as string,
+            customFilterListUpdate[index],
+          )
+        }
+        className={classes.chip}
+        itemKey={customFilterItemIndex}
+        index={index}
+        data={item}
+        columnNames={columnNames}
+        filterProps={
+          options.setFilterChipProps
+            ? options.setFilterChipProps(index, columnNames[index]?.name as string, item[customFilterItemIndex] || '')
+            : {}
+        }
+      />
+    );
+  };
+
+  const filterChip = (index: number, data: string, colIndex: number) => (
+    <ItemComponent
+      label={filterListRenderers[index]?.(data) as string}
+      key={colIndex}
+      onDelete={() => removeFilter(index, data, columnNames[index]?.name as string, 'chip')}
+      className={classes.chip}
+      itemKey={colIndex}
+      index={index}
+      data={data}
+      columnNames={columnNames}
+      filterProps={
+        options.setFilterChipProps ? options.setFilterChipProps(index, columnNames[index]?.name as string, data) : {}
+      }
+    />
+  );
+
+  const getFilterList = (fl: MUIDataTableFilterList) => {
+    return fl.map((item, index) => {
+      if (columnNames[index]?.filterType === 'custom' && fl[index]?.length) {
+        const filterListRenderersValue = filterListRenderers[index]?.(item);
+
+        if (Array.isArray(filterListRenderersValue)) {
+          return filterListRenderersValue.map((customFilterItem, customFilterItemIndex) =>
+            customFilterChip(customFilterItem, index, customFilterItemIndex, item, true),
+          );
+        } else {
+          return customFilterChip(filterListRenderersValue as string, index, index, item, false);
+        }
+      }
+
+      return item.map((data, colIndex) => filterChip(index, data, colIndex));
+    });
+  };
+
+  return (
+    <div className={classes.root}>
+      {serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)}
+    </div>
+  );
+};
+
+export default TableFilterList;
diff --git a/src/components/TableFilterListItem.js b/src/components/TableFilterListItem.js
deleted file mode 100644
index 7531cbf6..00000000
--- a/src/components/TableFilterListItem.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Chip } from '@mui/material';
-import PropTypes from 'prop-types';
-import React from 'react';
-import clsx from 'clsx';
-
-const TableFilterListItem = ({ label, onDelete, className, filterProps }) => {
-  filterProps = filterProps || {};
-  if (filterProps.className) {
-    className = clsx(className, filterProps.className);
-  }
-  return <Chip label={label} onDelete={onDelete} className={className} {...filterProps} />;
-};
-
-TableFilterListItem.propTypes = {
-  label: PropTypes.node,
-  onDelete: PropTypes.func.isRequired,
-  className: PropTypes.string.isRequired,
-};
-
-export default TableFilterListItem;
diff --git a/src/components/TableFilterListItem.tsx b/src/components/TableFilterListItem.tsx
new file mode 100644
index 00000000..9cfa948e
--- /dev/null
+++ b/src/components/TableFilterListItem.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Chip } from '@mui/material';
+import clsx from 'clsx';
+import type { ComponentProps } from 'react';
+import type { TableFilterListItemProps } from '../types/components';
+
+const TableFilterListItem = ({ label, onDelete, className, filterProps }: TableFilterListItemProps) => {
+  const mergedProps = (filterProps || {}) as ComponentProps<typeof Chip>;
+  let mergedClassName = className;
+  if (typeof mergedProps.className === 'string') {
+    mergedClassName = clsx(className, mergedProps.className);
+  }
+  return <Chip label={label} onDelete={onDelete} className={mergedClassName} {...mergedProps} />;
+};
+
+export default TableFilterListItem;
diff --git a/src/components/TableFooter.js b/src/components/TableFooter.tsx
similarity index 55%
rename from src/components/TableFooter.js
rename to src/components/TableFooter.tsx
index f9ca2314..48ceafed 100644
--- a/src/components/TableFooter.js
+++ b/src/components/TableFooter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Table as MuiTable } from '@mui/material';
 import TablePagination from './TablePagination';
 import { makeStyles } from 'tss-react/mui';
-import PropTypes from 'prop-types';
+import type { MUIDataTableOptions } from '../types/options';
 
 const useStyles = makeStyles({ name: 'MUIDataTableFooter' })(() => ({
   root: {
@@ -12,20 +12,29 @@ const useStyles = makeStyles({ name: 'MUIDataTableFooter' })(() => ({
   },
 }));
 
-const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }) => {
+export interface TableFooterProps {
+  options: MUIDataTableOptions;
+  rowCount: number;
+  page: number;
+  rowsPerPage: number;
+  changeRowsPerPage: (rowsPerPage: number) => void;
+  changePage: (page: number) => void;
+}
+
+const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage }: TableFooterProps) => {
   const { classes } = useStyles();
   const { customFooter, pagination = true } = options;
 
-  if (customFooter) {
+  if (customFooter && typeof customFooter === 'function') {
     return (
       <MuiTable className={classes.root}>
-        {options.customFooter(
+        {customFooter(
           rowCount,
           page,
           rowsPerPage,
           changeRowsPerPage,
           changePage,
-          options.textLabels.pagination,
+          options.textLabels?.pagination as never,
         )}
       </MuiTable>
     );
@@ -40,7 +49,6 @@ const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage,
           rowsPerPage={rowsPerPage}
           changeRowsPerPage={changeRowsPerPage}
           changePage={changePage}
-          component={'div'}
           options={options}
         />
       </MuiTable>
@@ -50,25 +58,4 @@ const TableFooter = ({ options, rowCount, page, rowsPerPage, changeRowsPerPage,
   return null;
 };
 
-TableFooter.propTypes = {
-  /** Total number of table rows */
-  rowCount: PropTypes.number.isRequired,
-  /** Options used to describe table */
-  options: PropTypes.shape({
-    customFooter: PropTypes.func,
-    pagination: PropTypes.bool,
-    textLabels: PropTypes.shape({
-      pagination: PropTypes.object,
-    }),
-  }),
-  /** Current page index */
-  page: PropTypes.number.isRequired,
-  /** Total number allowed of rows per page */
-  rowsPerPage: PropTypes.number.isRequired,
-  /** Callback to trigger rows per page change */
-  changeRowsPerPage: PropTypes.func.isRequired,
-  /** Callback to trigger page change */
-  changePage: PropTypes.func.isRequired,
-};
-
 export default TableFooter;
diff --git a/src/components/TableHead.js b/src/components/TableHead.tsx
similarity index 67%
rename from src/components/TableHead.js
rename to src/components/TableHead.tsx
index cf6062bf..21f2ef4f 100644
--- a/src/components/TableHead.js
+++ b/src/components/TableHead.tsx
@@ -1,10 +1,20 @@
+import React, { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import clsx from 'clsx';
 import { TableHead as MuiTableHead } from '@mui/material';
-import React, { useState } from 'react';
 import TableHeadCell from './TableHeadCell';
 import TableHeadRow from './TableHeadRow';
 import TableSelectCell from './TableSelectCell';
+import type { ComponentType } from 'react';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type {
+  MUIDataTableOptions,
+  MUIDataTableSelectedRows,
+  MUIDataTableExpandedRows,
+  MUIDataTableDisplayRow,
+  MUIDataTableSortOrder,
+} from '../types/options';
+import type { HeadCellRefs, ColumnDropTimers } from '../types/drag';
 
 const useStyles = makeStyles({ name: 'MUIDataTableHead' })((theme) => ({
   main: {},
@@ -23,6 +33,27 @@ const useStyles = makeStyles({ name: 'MUIDataTableHead' })((theme) => ({
   },
 }));
 
+export interface TableHeadProps {
+  columnOrder?: number[] | null;
+  columns: MUIDataTableColumnState[];
+  components?: { Tooltip?: ComponentType<unknown>; Checkbox?: ComponentType<unknown> };
+  count: number;
+  data: MUIDataTableDisplayRow[];
+  draggableHeadCellRefs?: HeadCellRefs;
+  expandedRows?: MUIDataTableExpandedRows;
+  options: MUIDataTableOptions;
+  selectedRows: MUIDataTableSelectedRows;
+  selectRowUpdate: (type: string, val: null) => void;
+  setCellRef?: (index: number, pos: number, el: HTMLTableCellElement | null) => void;
+  sortOrder?: Partial<MUIDataTableSortOrder>;
+  tableRef?: () => HTMLElement | null;
+  tableId?: string;
+  timers?: ColumnDropTimers;
+  toggleAllExpandableRows?: () => void;
+  toggleSort: (index: number) => void;
+  updateColumnOrder?: (columnOrder: number[], src: number, target: number) => void;
+}
+
 const TableHead = ({
   columnOrder = null,
   columns,
@@ -42,16 +73,17 @@ const TableHead = ({
   toggleAllExpandableRows,
   toggleSort,
   updateColumnOrder,
-}) => {
+}: TableHeadProps) => {
   const { classes } = useStyles();
 
-  if (columnOrder === null) {
-    columnOrder = columns ? columns.map((item, idx) => idx) : [];
+  let resolvedColumnOrder = columnOrder;
+  if (resolvedColumnOrder === null) {
+    resolvedColumnOrder = columns ? columns.map((_item, idx) => idx) : [];
   }
 
   const [dragging, setDragging] = useState(false);
 
-  const handleToggleColumn = (index) => {
+  const handleToggleColumn = (index: number) => {
     toggleSort(index);
   };
 
@@ -73,7 +105,7 @@ const TableHead = ({
   ) {
     if (isChecked) {
       for (let ii = 0; ii < data.length; ii++) {
-        if (!selectedRows.lookup[data[ii].dataIndex]) {
+        if (!selectedRows.lookup[data[ii]?.dataIndex as number]) {
           isChecked = false;
           isIndeterminate = true;
           break;
@@ -86,13 +118,11 @@ const TableHead = ({
     }
   }
 
-  let orderedColumns = columnOrder.map((colIndex, idx) => {
-    return {
-      column: columns[colIndex],
-      index: colIndex,
-      colPos: idx,
-    };
-  });
+  const orderedColumns = resolvedColumnOrder.map((colIndex, idx) => ({
+    column: columns[colIndex],
+    index: colIndex,
+    colPos: idx,
+  }));
 
   return (
     <MuiTableHead
@@ -108,14 +138,14 @@ const TableHead = ({
       <TableHeadRow>
         <TableSelectCell
           setHeadCellRef={setCellRef}
-          onChange={handleRowSelect.bind(null)}
+          onChange={handleRowSelect}
           indeterminate={isIndeterminate}
           checked={isChecked}
           isHeaderCell={true}
           expandedRows={expandedRows}
           expandableRowsHeader={options.expandableRowsHeader}
           expandableOn={options.expandableRows}
-          selectableOn={options.selectableRows}
+          selectableOn={options.selectableRows as string}
           fixedHeader={options.fixedHeader}
           fixedSelectColumn={options.fixedSelectColumn}
           selectableRowsHeader={options.selectableRowsHeader}
@@ -126,20 +156,19 @@ const TableHead = ({
         />
         {orderedColumns.map(
           ({ column, index, colPos }) =>
-            column.display === 'true' &&
+            column?.display === 'true' &&
             (column.customHeadRender ? (
-              <React.Fragment key={index}>
-                {column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder)}
-              </React.Fragment>
+              column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder as MUIDataTableSortOrder)
             ) : (
               <TableHeadCell
                 cellHeaderProps={
-                  columns[index].setCellHeaderProps ? columns[index].setCellHeaderProps({ index, ...column }) || {} : {}
+                  columns[index]?.setCellHeaderProps
+                    ? columns[index].setCellHeaderProps!({ index, ...column }) || {}
+                    : {}
                 }
                 key={index}
                 index={index}
                 colPosition={colPos}
-                type={'cell'}
                 setCellRef={setCellRef}
                 sort={column.sort}
                 sortDirection={column.name === sortOrder.name ? sortOrder.direction : 'none'}
@@ -150,7 +179,7 @@ const TableHead = ({
                 column={column}
                 columns={columns}
                 updateColumnOrder={updateColumnOrder}
-                columnOrder={columnOrder}
+                columnOrder={resolvedColumnOrder!}
                 timers={timers}
                 draggingHook={[dragging, setDragging]}
                 draggableHeadCellRefs={draggableHeadCellRefs}
diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.tsx
similarity index 63%
rename from src/components/TableHeadCell.js
rename to src/components/TableHeadCell.tsx
index fd91c086..887921b0 100644
--- a/src/components/TableHeadCell.js
+++ b/src/components/TableHeadCell.tsx
@@ -1,11 +1,14 @@
+import React, { useState } from 'react';
 import { Button, TableCell, TableSortLabel, Tooltip as MuiTooltip } from '@mui/material';
 import { Help as HelpIcon } from '@mui/icons-material';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import useColumnDrop from '../hooks/useColumnDrop.js';
+import useColumnDrop from '../hooks/useColumnDrop';
 import { makeStyles } from 'tss-react/mui';
 import { useDrag } from 'react-dnd';
+import type { ComponentProps, ReactNode, ComponentType, RefCallback } from 'react';
+import type { MUIDataTableColumnState, MUIDataTableSortDirection } from '../types/columns';
+import type { MUIDataTableOptions } from '../types/options';
+import type { HeadCellRefs, ColumnDropTimers, HeaderDragItem } from '../types/drag';
 
 const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })((theme) => ({
   root: {},
@@ -60,6 +63,30 @@ const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })((theme) => ({
   },
 }));
 
+interface TableHeadCellProps {
+  cellHeaderProps?: ComponentProps<typeof TableCell>;
+  children?: ReactNode;
+  colPosition?: number;
+  column?: MUIDataTableColumnState;
+  columns?: MUIDataTableColumnState[];
+  columnOrder?: number[];
+  components?: { Tooltip?: ComponentType<unknown> };
+  draggableHeadCellRefs?: HeadCellRefs | undefined;
+  draggingHook?: [boolean, (val: boolean) => void];
+  hint?: string | undefined;
+  index: number;
+  options: MUIDataTableOptions;
+  print: boolean;
+  setCellRef?: ((index: number, pos: number, el: HTMLTableCellElement | null) => void) | undefined;
+  sort: boolean;
+  sortDirection?: MUIDataTableSortDirection | undefined;
+  tableRef?: (() => HTMLElement | null) | undefined;
+  tableId?: string | undefined;
+  timers?: ColumnDropTimers | undefined;
+  toggleSort: (index: number) => void;
+  updateColumnOrder?: ((columnOrder: number[], src: number, target: number) => void) | undefined;
+}
+
 const TableHeadCell = ({
   cellHeaderProps = {},
   children,
@@ -82,13 +109,13 @@ const TableHeadCell = ({
   timers,
   toggleSort,
   updateColumnOrder,
-}) => {
+}: TableHeadCellProps) => {
   const [sortTooltipOpen, setSortTooltipOpen] = useState(false);
   const [hintTooltipOpen, setHintTooltipOpen] = useState(false);
 
   const { classes } = useStyles();
 
-  const handleKeyboardSortInput = (e) => {
+  const handleKeyboardSortInput = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       toggleSort(index);
     }
@@ -100,16 +127,32 @@ const TableHeadCell = ({
     toggleSort(index);
   };
 
-  const [dragging, setDragging] = draggingHook ? draggingHook : [];
+  const [dragging, setDragging] = draggingHook ? draggingHook : ([] as unknown as [boolean, (val: boolean) => void]);
 
-  const { className, ...otherProps } = cellHeaderProps;
-  const Tooltip = components.Tooltip || MuiTooltip;
+  const { className, ...otherProps } = cellHeaderProps as { className?: string; [key: string]: unknown };
+  const Tooltip = (components.Tooltip || MuiTooltip) as typeof MuiTooltip;
   const sortActive = sortDirection !== 'none' && sortDirection !== undefined;
   const ariaSortDirection = sortDirection === 'none' ? false : sortDirection;
 
   const isDraggingEnabled = () => {
     if (!draggingHook) return false;
-    return options.draggableColumns && options.draggableColumns.enabled && column.draggable !== false;
+    return (
+      options.draggableColumns &&
+      options.draggableColumns.enabled &&
+      (column as unknown as Record<string, unknown>)?.['draggable'] !== false
+    );
+  };
+
+  const setDragRefButton: RefCallback<HTMLButtonElement> = (node) => {
+    if (isDraggingEnabled()) {
+      dragRef(node);
+    }
+  };
+
+  const setDragRefDiv: RefCallback<HTMLDivElement> = (node) => {
+    if (isDraggingEnabled()) {
+      dragRef(node);
+    }
   };
 
   const sortLabelProps = {
@@ -117,24 +160,24 @@ const TableHeadCell = ({
     tabIndex: -1,
     active: sortActive,
     hideSortIcon: true,
-    ...(ariaSortDirection ? { direction: sortDirection } : {}),
+    ...(ariaSortDirection ? { direction: sortDirection as 'asc' | 'desc' } : {}),
   };
 
-  const [{ opacity }, dragRef, preview] = useDrag({
+  const [{ opacity }, dragRef] = useDrag({
     type: 'HEADER',
     item: () => {
       setTimeout(() => {
         setHintTooltipOpen(false);
         setSortTooltipOpen(false);
-        setDragging(true);
+        if (setDragging) setDragging(true);
       }, 0);
       return {
         colIndex: index,
         headCellRefs: draggableHeadCellRefs,
       };
     },
-    end: (item, monitor) => {
-      setDragging(false);
+    end: () => {
+      if (setDragging) setDragging(false);
     },
     collect: (monitor) => {
       return {
@@ -144,40 +187,37 @@ const TableHeadCell = ({
   });
 
   const [drop] = useColumnDrop({
-    drop: (item, mon) => {
+    drop: () => {
       setSortTooltipOpen(false);
       setHintTooltipOpen(false);
-      setDragging(false);
+      if (setDragging) setDragging(false);
     },
     index,
-    headCellRefs: draggableHeadCellRefs,
-    updateColumnOrder,
+    headCellRefs: draggableHeadCellRefs || {},
+    updateColumnOrder: updateColumnOrder || (() => {}),
     columnOrder,
-    columns,
-    transitionTime: options.draggableColumns ? options.draggableColumns.transitionTime : 300,
+    columns: columns || [],
+    transitionTime: options.draggableColumns ? options.draggableColumns.transitionTime! : 300,
     tableRef: tableRef ? tableRef() : null,
     tableId: tableId || 'none',
-    timers,
+    timers: timers || {},
   });
 
   const cellClass = clsx({
     [classes.root]: true,
     [classes.fixedHeader]: options.fixedHeader,
     'datatables-noprint': !print,
-    [className]: className,
+    [className as string]: !!className,
   });
-
-  const showHintTooltip = () => {
-    setSortTooltipOpen(false);
-    setHintTooltipOpen(true);
-  };
+  // ??
 
   const getTooltipTitle = () => {
     if (dragging) return '';
     if (!options.textLabels) return '';
-    return options.textLabels.body.columnHeaderTooltip
-      ? options.textLabels.body.columnHeaderTooltip(column)
-      : options.textLabels.body.toolTip;
+    if (column && options.textLabels.body?.columnHeaderTooltip) {
+      return (options.textLabels.body as { columnHeaderTooltip: (col: unknown) => string }).columnHeaderTooltip(column);
+    }
+    return options.textLabels.body?.toolTip || '';
   };
 
   const closeTooltip = () => {
@@ -186,13 +226,13 @@ const TableHeadCell = ({
 
   return (
     <TableCell
-      ref={(ref) => {
+      ref={(ref: HTMLTableCellElement | null) => {
         drop && drop(ref);
-        setCellRef && setCellRef(index + 1, colPosition + 1, ref);
+        setCellRef && setCellRef(index + 1, (colPosition || 0) + 1, ref);
       }}
       className={cellClass}
       scope={'col'}
-      sortDirection={ariaSortDirection}
+      sortDirection={ariaSortDirection || undefined}
       data-colindex={index}
       data-tableid={tableId}
       onMouseDown={closeTooltip}
@@ -210,12 +250,12 @@ const TableHeadCell = ({
               popper: classes.mypopper,
             }}>
             <Button
-              variant=""
+              variant={'text'}
               onKeyUp={handleKeyboardSortInput}
               onClick={handleSortClick}
               className={classes.toolButton}
               data-testid={`headcol-${index}`}
-              ref={isDraggingEnabled() ? dragRef : null}>
+              ref={setDragRefButton}>
               <div className={classes.sortAction}>
                 <div
                   className={clsx({
@@ -241,14 +281,14 @@ const TableHeadCell = ({
           )}
         </span>
       ) : (
-        <div className={hint ? classes.sortAction : null} ref={isDraggingEnabled() ? dragRef : null}>
+        <div className={hint ? classes.sortAction : undefined} ref={setDragRefDiv}>
           {children}
           {hint && (
             <Tooltip
               title={hint}
               placement={'bottom-end'}
               open={hintTooltipOpen}
-              onOpen={() => showHintTooltip()}
+              onOpen={() => setHintTooltipOpen(true)}
               onClose={() => setHintTooltipOpen(false)}
               classes={{
                 tooltip: classes.tooltip,
@@ -264,23 +304,4 @@ const TableHeadCell = ({
   );
 };
 
-TableHeadCell.propTypes = {
-  /** Options used to describe table */
-  options: PropTypes.object.isRequired,
-  /** Current sort direction */
-  sortDirection: PropTypes.oneOf(['asc', 'desc', 'none']),
-  /** Callback to trigger column sort */
-  toggleSort: PropTypes.func.isRequired,
-  /** Sort enabled / disabled for this column **/
-  sort: PropTypes.bool.isRequired,
-  /** Hint tooltip text */
-  hint: PropTypes.string,
-  /** Column displayed in print */
-  print: PropTypes.bool.isRequired,
-  /** Optional to be used with `textLabels.body.columnHeaderTooltip` */
-  column: PropTypes.object,
-  /** Injectable component structure **/
-  components: PropTypes.object,
-};
-
 export default TableHeadCell;
diff --git a/src/components/TableHeadRow.js b/src/components/TableHeadRow.tsx
similarity index 73%
rename from src/components/TableHeadRow.js
rename to src/components/TableHeadRow.tsx
index 36dc238a..8239af16 100644
--- a/src/components/TableHeadRow.js
+++ b/src/components/TableHeadRow.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { TableRow } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
+import type { ReactNode } from 'react';
 
 const useStyles = makeStyles({ name: 'MUIDataTableHeadRow' })(() => ({
   root: {},
 }));
 
-const TableHeadRow = ({ children }) => {
+interface TableHeadRowProps {
+  children?: ReactNode;
+}
+
+const TableHeadRow = ({ children }: TableHeadRowProps) => {
   const { classes } = useStyles();
 
   return (
@@ -21,8 +25,4 @@ const TableHeadRow = ({ children }) => {
   );
 };
 
-TableHeadRow.propTypes = {
-  children: PropTypes.node,
-};
-
 export default TableHeadRow;
diff --git a/src/components/TablePagination.js b/src/components/TablePagination.js
deleted file mode 100644
index 8b630e83..00000000
--- a/src/components/TablePagination.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  TableCell as MuiTableCell,
-  TableRow as MuiTableRow,
-  TableFooter as MuiTableFooter,
-  TablePagination as MuiTablePagination,
-} from '@mui/material';
-import JumpToPage from './JumpToPage';
-import { makeStyles } from 'tss-react/mui';
-import { getPageValue } from '../utils';
-
-const useStyles = makeStyles({ name: 'MUIDataTablePagination' })((theme) => ({
-  root: {},
-  tableCellContainer: {
-    padding: '0px 24px 0px 24px',
-  },
-  navContainer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  toolbar: {},
-  selectRoot: {},
-  '@media screen and (max-width: 400px)': {
-    toolbar: {
-      '& span:nth-of-type(2)': {
-        display: 'none',
-      },
-    },
-    selectRoot: {
-      marginRight: '8px',
-    },
-  },
-}));
-
-function TablePagination(props) {
-  const { classes } = useStyles();
-
-  const handleRowChange = (event) => {
-    props.changeRowsPerPage(event.target.value);
-  };
-
-  const handlePageChange = (_, page) => {
-    props.changePage(page);
-  };
-
-  const { count, options, rowsPerPage, page } = props;
-  const textLabels = options.textLabels.pagination;
-
-  return (
-    <MuiTableFooter>
-      <MuiTableRow>
-        <MuiTableCell colSpan="1000" className={classes.tableCellContainer}>
-          <div className={classes.navContainer}>
-            {options.jumpToPage ? (
-              <JumpToPage
-                count={count}
-                page={page}
-                rowsPerPage={rowsPerPage}
-                textLabels={options.textLabels}
-                changePage={props.changePage}
-                changeRowsPerPage={props.changeRowsPerPage}
-              />
-            ) : null}
-            <MuiTablePagination
-              component="div"
-              className={classes.root}
-              classes={{
-                caption: classes.caption,
-                toolbar: classes.toolbar,
-                selectRoot: classes.selectRoot,
-              }}
-              count={count}
-              rowsPerPage={rowsPerPage}
-              page={getPageValue(count, rowsPerPage, page)}
-              labelRowsPerPage={textLabels.rowsPerPage}
-              labelDisplayedRows={({ from, to, count }) => `${from}-${to} ${textLabels.displayRows} ${count}`}
-              slotProps={{
-                actions: {
-                  previousButton: {
-                    id: 'pagination-back',
-                    'data-testid': 'pagination-back',
-                    'aria-label': textLabels.previous,
-                    title: textLabels.previous || '',
-                  },
-                  nextButton: {
-                    id: 'pagination-next',
-                    'data-testid': 'pagination-next',
-                    'aria-label': textLabels.next,
-                    title: textLabels.next || '',
-                  },
-                },
-                select: {
-                  id: 'pagination-input',
-                  SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },
-                  MenuProps: {
-                    id: 'pagination-menu',
-                    'data-testid': 'pagination-menu',
-                    MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' },
-                  },
-                },
-              }}
-              rowsPerPageOptions={options.rowsPerPageOptions}
-              onPageChange={handlePageChange}
-              onRowsPerPageChange={handleRowChange}
-            />
-          </div>
-        </MuiTableCell>
-      </MuiTableRow>
-    </MuiTableFooter>
-  );
-}
-
-TablePagination.propTypes = {
-  /** Total number of table rows */
-  count: PropTypes.number.isRequired,
-  /** Options used to describe table */
-  options: PropTypes.object.isRequired,
-  /** Current page index */
-  page: PropTypes.number.isRequired,
-  /** Total number allowed of rows per page */
-  rowsPerPage: PropTypes.number.isRequired,
-  /** Callback to trigger rows per page change */
-  changeRowsPerPage: PropTypes.func.isRequired,
-};
-
-export default TablePagination;
diff --git a/src/components/TablePagination.tsx b/src/components/TablePagination.tsx
new file mode 100644
index 00000000..167fddd9
--- /dev/null
+++ b/src/components/TablePagination.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import {
+  TableCell as MuiTableCell,
+  TableRow as MuiTableRow,
+  TableFooter as MuiTableFooter,
+  TablePagination as MuiTablePagination,
+} from '@mui/material';
+import JumpToPage from './JumpToPage';
+import { makeStyles } from 'tss-react/mui';
+import { getPageValue } from '../utils';
+import type { MUIDataTableOptions } from '../types/options';
+
+const useStyles = makeStyles({ name: 'MUIDataTablePagination' })(() => ({
+  root: {},
+  tableCellContainer: {
+    padding: '0px 24px 0px 24px',
+  },
+  navContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  toolbar: {},
+  selectRoot: {},
+  '@media screen and (max-width: 400px)': {
+    toolbar: {
+      '& span:nth-of-type(2)': {
+        display: 'none',
+      },
+    },
+    selectRoot: {
+      marginRight: '8px',
+    },
+  },
+}));
+
+interface TablePaginationProps {
+  count: number;
+  options: MUIDataTableOptions;
+  page: number;
+  rowsPerPage: number;
+  changePage: (page: number) => void;
+  changeRowsPerPage: (rowsPerPage: number) => void;
+}
+
+function TablePagination(props: TablePaginationProps) {
+  const { classes } = useStyles();
+
+  const handleRowChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    props.changeRowsPerPage(Number(event.target.value));
+  };
+
+  const handlePageChange = (_: unknown, page: number) => {
+    props.changePage(page);
+  };
+
+  const { count, options, rowsPerPage, page } = props;
+  const textLabels = options.textLabels?.pagination;
+  const paginationSlotProps = {
+    actions: {
+      previousButton: {
+        id: 'pagination-back',
+        'data-testid': 'pagination-back',
+        'aria-label': textLabels?.previous,
+        title: textLabels?.previous || '',
+      },
+      nextButton: {
+        id: 'pagination-next',
+        'data-testid': 'pagination-next',
+        'aria-label': textLabels?.next,
+        title: textLabels?.next || '',
+      },
+    },
+    select: {
+      id: 'pagination-input',
+      SelectDisplayProps: { id: 'pagination-rows', 'data-testid': 'pagination-rows' },
+      MenuProps: {
+        id: 'pagination-menu',
+        'data-testid': 'pagination-menu',
+        MenuListProps: { id: 'pagination-menu-list', 'data-testid': 'pagination-menu-list' },
+      },
+    },
+  } as unknown as NonNullable<ComponentProps<typeof MuiTablePagination>['slotProps']>;
+
+  return (
+    <MuiTableFooter>
+      <MuiTableRow>
+        <MuiTableCell colSpan={1000} className={classes.tableCellContainer}>
+          <div className={classes.navContainer}>
+            {options.jumpToPage ? (
+              <JumpToPage
+                count={count}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                textLabels={options.textLabels as never}
+                changePage={props.changePage}
+              />
+            ) : null}
+            <MuiTablePagination
+              component="div"
+              className={classes.root}
+              classes={{
+                toolbar: classes.toolbar,
+                selectRoot: classes.selectRoot,
+              }}
+              count={count}
+              rowsPerPage={rowsPerPage}
+              page={getPageValue(count, rowsPerPage, page)}
+              labelRowsPerPage={textLabels?.rowsPerPage}
+              labelDisplayedRows={({ from, to, count: c }) => `${from}-${to} ${textLabels?.displayRows} ${c}`}
+              slotProps={paginationSlotProps}
+              rowsPerPageOptions={options.rowsPerPageOptions}
+              onPageChange={handlePageChange}
+              onRowsPerPageChange={handleRowChange}
+            />
+          </div>
+        </MuiTableCell>
+      </MuiTableRow>
+    </MuiTableFooter>
+  );
+}
+
+export default TablePagination;
diff --git a/src/components/TableResize.js b/src/components/TableResize.tsx
similarity index 57%
rename from src/components/TableResize.js
rename to src/components/TableResize.tsx
index cbeff9d4..dd14a7a3 100644
--- a/src/components/TableResize.js
+++ b/src/components/TableResize.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
+import type { MUIDataTableOptions } from '../types/options';
+import type { CSSObject } from 'tss-react';
 
 const defaultResizeStyles = {
   root: {
@@ -14,28 +15,52 @@ const defaultResizeStyles = {
     cursor: 'ew-resize',
     border: '0.1px solid rgba(224, 224, 224, 1)',
   },
-};
+} satisfies Record<string, CSSObject>;
 
-function getParentOffsetLeft(tableEl) {
-  let ii = 0,
-    parentOffsetLeft = 0,
-    offsetParent = tableEl.offsetParent;
+function getParentOffsetLeft(tableEl: HTMLElement): number {
+  let ii = 0;
+  let parentOffsetLeft = 0;
+  let offsetParent = tableEl.offsetParent as (HTMLElement & { scrollLeft?: number }) | null;
   while (offsetParent) {
     parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0) - (offsetParent.scrollLeft || 0);
-    offsetParent = offsetParent.offsetParent;
+    offsetParent = offsetParent.offsetParent as (HTMLElement & { scrollLeft?: number }) | null;
     ii++;
     if (ii > 1000) break;
   }
   return parentOffsetLeft;
 }
 
-class TableResize extends React.Component {
-  static propTypes = {
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
-  };
+interface ResizeCoord {
+  left: number;
+}
+
+interface TableResizeState {
+  resizeCoords: Record<string, ResizeCoord>;
+  priorPosition: Record<string, unknown>;
+  tableWidth: number | string;
+  tableHeight: number | string;
+  isResize?: boolean;
+  id?: string | null;
+  lastColumn?: number;
+  updateCoords?: boolean;
+}
+
+export interface TableResizeProps {
+  classes: Record<keyof typeof defaultResizeStyles, string>;
+  options: MUIDataTableOptions;
+  tableId?: string;
+  resizableColumns?: boolean | { roundWidthPercentages?: boolean; enabled?: boolean };
+  setResizeable: (fn: (cellsRef: Record<string, HTMLElement>, tableRef: HTMLElement) => void) => void;
+  updateDividers: (fn: () => void) => void;
+}
+
+class TableResize extends React.Component<TableResizeProps, TableResizeState> {
+  cellsRef: Record<string, HTMLElement> = {};
+  tableRef: HTMLElement | null = null;
+  minWidths: Record<string, number> = {};
+  windowWidth: number | null = null;
 
-  state = {
+  override state: TableResizeState = {
     resizeCoords: {},
     priorPosition: {},
     tableWidth: '100%',
@@ -49,43 +74,40 @@ class TableResize extends React.Component {
     }
   };
 
-  componentDidMount() {
-    this.minWidths = [];
+  override componentDidMount() {
+    this.minWidths = {};
     this.windowWidth = null;
     this.props.setResizeable(this.setCellRefs);
     this.props.updateDividers(() => this.setState({ updateCoords: true }, () => this.updateWidths));
     window.addEventListener('resize', this.handleResize, false);
   }
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize, false);
   }
 
-  setCellRefs = (cellsRef, tableRef) => {
+  setCellRefs = (cellsRef: Record<string, HTMLElement>, tableRef: HTMLElement) => {
     this.cellsRef = cellsRef;
     this.tableRef = tableRef;
     this.setDividers();
   };
 
   setDividers = () => {
-    const tableEl = this.tableRef;
+    const tableEl = this.tableRef!;
     const { width: tableWidth, height: tableHeight } = tableEl.getBoundingClientRect();
     const { resizeCoords } = this.state;
 
-    for (let prop in resizeCoords) {
+    for (const prop in resizeCoords) {
       delete resizeCoords[prop];
     }
 
-    let parentOffsetLeft = getParentOffsetLeft(tableEl);
-    let finalCells = Object.entries(this.cellsRef);
-    let cellMinusOne = finalCells.filter((_item, ix) => ix + 1 < finalCells.length);
+    const parentOffsetLeft = getParentOffsetLeft(tableEl);
+    const finalCells = Object.entries(this.cellsRef);
+    const cellMinusOne = finalCells.filter((_item, ix) => ix + 1 < finalCells.length);
 
-    cellMinusOne.forEach(([key, item], idx) => {
+    cellMinusOne.forEach(([key, item]) => {
       if (!item) return;
-      let elRect = item.getBoundingClientRect();
-      let left = elRect.left;
-      left = (left || 0) - parentOffsetLeft;
-      const elStyle = window.getComputedStyle(item, null);
+      const left = (item.getBoundingClientRect().left || 0) - parentOffsetLeft;
       resizeCoords[key] = { left: left + item.offsetWidth };
     });
     this.setState({ tableWidth, tableHeight, resizeCoords }, this.updateWidths);
@@ -96,7 +118,7 @@ class TableResize extends React.Component {
     const { resizeCoords, tableWidth } = this.state;
 
     Object.entries(resizeCoords).forEach(([key, item]) => {
-      let newWidth = Number(((item.left - lastPosition) / tableWidth) * 100);
+      let newWidth: number | string = Number(((item.left - lastPosition) / (tableWidth as number)) * 100);
 
       /*
         Using .toFixed(2) causes the columns to jitter when resized. On all browsers I (patrojk) have tested,
@@ -115,35 +137,35 @@ class TableResize extends React.Component {
     });
   };
 
-  onResizeStart = (id, e) => {
-    const tableEl = this.tableRef;
+  onResizeStart = (id: string, e: React.MouseEvent) => {
+    const tableEl = this.tableRef!;
     const originalWidth = tableEl.style.width;
     let lastColumn = 0;
     tableEl.style.width = '1px';
 
-    let finalCells = Object.entries(this.cellsRef);
-    finalCells.forEach(([key, item], idx) => {
-      let elRect = item ? item.getBoundingClientRect() : { width: 0, left: 0 };
+    const finalCells = Object.entries(this.cellsRef);
+    finalCells.forEach(([key, item]) => {
+      const elRect = item ? item.getBoundingClientRect() : { width: 0, left: 0 };
       this.minWidths[key] = elRect.width;
-      lastColumn = Math.max(key, lastColumn);
+      lastColumn = Math.max(Number(key), lastColumn);
     });
     tableEl.style.width = originalWidth;
 
     this.setState({ isResize: true, id, lastColumn });
   };
 
-  onResizeMove = (id, e) => {
+  onResizeMove = (id: string, e: React.MouseEvent) => {
     const { isResize, resizeCoords, lastColumn } = this.state;
 
-    const prevCol = (id) => {
-      let nextId = id - 1;
+    const prevCol = (colId: number) => {
+      let nextId = colId - 1;
       while (typeof resizeCoords[nextId] === 'undefined' && nextId >= 0) {
         nextId--;
       }
       return nextId;
     };
-    const nextCol = (id) => {
-      let nextId = id + 1;
+    const nextCol = (colId: number) => {
+      let nextId = colId + 1;
       let tries = 0;
       while (typeof resizeCoords[nextId] === 'undefined' && tries < 20) {
         nextId++;
@@ -152,18 +174,18 @@ class TableResize extends React.Component {
       return nextId;
     };
 
-    const fixedMinWidth1 = this.minWidths[id];
-    const fixedMinWidth2 = this.minWidths[nextCol(parseInt(id, 10))] || this.minWidths[id];
+    const fixedMinWidth1 = this.minWidths[id] ?? 0;
+    const fixedMinWidth2 = (this.minWidths[nextCol(parseInt(id, 10))] || this.minWidths[id]) ?? 0;
     const idNumber = parseInt(id, 10);
     const finalCells = Object.entries(this.cellsRef);
-    const tableEl = this.tableRef;
+    const tableEl = this.tableRef!;
     const { width: tableWidth, height: tableHeight } = tableEl.getBoundingClientRect();
     const { selectableRows } = this.props.options;
 
-    let parentOffsetLeft = getParentOffsetLeft(tableEl);
+    const parentOffsetLeft = getParentOffsetLeft(tableEl);
 
-    const nextCoord = (id) => {
-      let nextId = id + 1;
+    const nextCoord = (colId: number) => {
+      let nextId = colId + 1;
       let tries = 0;
       while (typeof resizeCoords[nextId] === 'undefined' && tries < 20) {
         nextId++;
@@ -171,8 +193,8 @@ class TableResize extends React.Component {
       }
       return resizeCoords[nextId];
     };
-    const prevCoord = (id) => {
-      let nextId = id - 1;
+    const prevCoord = (colId: number) => {
+      let nextId = colId - 1;
       while (typeof resizeCoords[nextId] === 'undefined' && nextId >= 0) {
         nextId--;
       }
@@ -182,59 +204,52 @@ class TableResize extends React.Component {
     if (isResize) {
       let leftPos = e.clientX - parentOffsetLeft;
 
-      const handleMoveRightmostBoundary = (leftPos, tableWidth, fixedMinWidth) => {
-        if (leftPos > tableWidth - fixedMinWidth) {
-          return tableWidth - fixedMinWidth;
-        }
-        return leftPos;
+      const handleMoveRightmostBoundary = (lp: number, tw: number, fw: number) => {
+        if (lp > tw - fw) return tw - fw;
+        return lp;
       };
 
-      const handleMoveLeftmostBoundary = (leftPos, fixedMinWidth) => {
-        if (leftPos < fixedMinWidth) {
-          return fixedMinWidth;
-        }
-        return leftPos;
+      const handleMoveLeftmostBoundary = (lp: number, fw: number) => {
+        if (lp < fw) return fw;
+        return lp;
       };
 
-      const handleMoveRight = (leftPos, resizeCoords, id, fixedMinWidth) => {
-        if (typeof nextCoord(id) === 'undefined') return leftPos;
-        if (leftPos > nextCoord(id).left - fixedMinWidth) {
-          return nextCoord(id).left - fixedMinWidth;
-        }
-        return leftPos;
+      const handleMoveRight = (lp: number, _rc: typeof resizeCoords, colId: number, fw: number) => {
+        const nextCoordinate = nextCoord(colId);
+        if (typeof nextCoordinate === 'undefined') return lp;
+        if (lp > nextCoordinate.left - fw) return nextCoordinate.left - fw;
+        return lp;
       };
 
-      const handleMoveLeft = (leftPos, resizeCoords, id, fixedMinWidth) => {
-        if (typeof prevCoord(id) === 'undefined') return leftPos;
-        if (leftPos < prevCoord(id).left + fixedMinWidth) {
-          return prevCoord(id).left + fixedMinWidth;
-        }
-        return leftPos;
+      const handleMoveLeft = (lp: number, _rc: typeof resizeCoords, colId: number, fw: number) => {
+        const previousCoordinate = prevCoord(colId);
+        if (typeof previousCoordinate === 'undefined') return lp;
+        if (lp < previousCoordinate.left + fw) return previousCoordinate.left + fw;
+        return lp;
       };
 
-      const isFirstColumn = (selectableRows, id) => {
+      const isFirstColumn = (sr: unknown, colId: number) => {
         let firstColumn = 1;
         while (!resizeCoords[firstColumn] && firstColumn < 20) {
           firstColumn++;
         }
-
-        return (selectableRows !== 'none' && id === 0) || (selectableRows === 'none' && id === firstColumn);
+        return (sr !== 'none' && colId === 0) || (sr === 'none' && colId === firstColumn);
       };
 
-      const isLastColumn = (id, finalCells) => {
-        return id === prevCol(lastColumn);
+      const isLastColumn = (colId: number) => {
+        return colId === prevCol(lastColumn!);
       };
 
-      if (isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber, finalCells)) {
+      if (isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber)) {
         leftPos = handleMoveLeftmostBoundary(leftPos, fixedMinWidth1);
         leftPos = handleMoveRightmostBoundary(leftPos, tableWidth, fixedMinWidth2);
-      } else if (!isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber, finalCells)) {
+      } else if (!isFirstColumn(selectableRows, idNumber) && isLastColumn(idNumber)) {
         leftPos = handleMoveRightmostBoundary(leftPos, tableWidth, fixedMinWidth2);
         leftPos = handleMoveLeft(leftPos, resizeCoords, idNumber, fixedMinWidth1);
-      } else if (isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber, finalCells)) {
+      } else if (isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber)) {
         leftPos = handleMoveLeftmostBoundary(leftPos, fixedMinWidth1);
         leftPos = handleMoveRight(leftPos, resizeCoords, idNumber, fixedMinWidth2);
-      } else if (!isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber, finalCells)) {
+      } else if (!isFirstColumn(selectableRows, idNumber) && !isLastColumn(idNumber)) {
         leftPos = handleMoveLeft(leftPos, resizeCoords, idNumber, fixedMinWidth1);
         leftPos = handleMoveRight(leftPos, resizeCoords, idNumber, fixedMinWidth2);
       }
@@ -245,11 +260,11 @@ class TableResize extends React.Component {
     }
   };
 
-  onResizeEnd = (id, e) => {
+  onResizeEnd = () => {
     this.setState({ isResize: false, id: null });
   };
 
-  render() {
+  override render() {
     const { classes, tableId } = this.props;
     const { id, isResize, resizeCoords, tableWidth, tableHeight } = this.state;
 
@@ -262,18 +277,18 @@ class TableResize extends React.Component {
               data-tableid={tableId}
               aria-hidden="true"
               key={key}
-              onMouseMove={this.onResizeMove.bind(null, key)}
-              onMouseUp={this.onResizeEnd.bind(null, key)}
+              onMouseMove={(e) => this.onResizeMove(key, e)}
+              onMouseUp={() => this.onResizeEnd()}
               style={{
                 width: isResize && id == key ? tableWidth : 'auto',
                 position: 'absolute',
-                height: tableHeight - 2,
+                height: (tableHeight as number) - 2,
                 cursor: 'ew-resize',
                 zIndex: 1000,
               }}>
               <div
                 aria-hidden="true"
-                onMouseDown={this.onResizeStart.bind(null, key)}
+                onMouseDown={(e) => this.onResizeStart(key, e)}
                 className={classes.resizer}
                 style={{ left: val.left }}
               />
diff --git a/src/components/TableSearch.js b/src/components/TableSearch.tsx
similarity index 71%
rename from src/components/TableSearch.js
rename to src/components/TableSearch.tsx
index 01227f03..563c8a33 100644
--- a/src/components/TableSearch.js
+++ b/src/components/TableSearch.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Grow, TextField, IconButton } from '@mui/material';
 import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
 import { makeStyles } from 'tss-react/mui';
+import type { MUIDataTableOptions } from '../types/options';
 
 const useStyles = makeStyles({ name: 'MUIDataTableSearch' })((theme) => ({
   main: {
@@ -23,14 +24,21 @@ const useStyles = makeStyles({ name: 'MUIDataTableSearch' })((theme) => ({
   },
 }));
 
-const TableSearch = ({ options, searchText, onSearch, onHide }) => {
+interface TableSearchProps {
+  options: MUIDataTableOptions;
+  searchText: string | null;
+  onSearch: (value: string) => void;
+  onHide: () => void;
+}
+
+const TableSearch = ({ options, searchText, onSearch, onHide }: TableSearchProps) => {
   const { classes } = useStyles();
 
-  const handleTextChange = (event) => {
+  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onSearch(event.target.value);
   };
 
-  const onKeyDown = (event) => {
+  const onKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
       onHide();
     }
@@ -46,11 +54,11 @@ const TableSearch = ({ options, searchText, onSearch, onHide }) => {
           className={classes.searchText}
           autoFocus={true}
           variant={'standard'}
-          InputProps={{
-            'data-test-id': options.textLabels.toolbar.search,
-          }}
-          inputProps={{
-            'aria-label': options.textLabels.toolbar.search,
+          slotProps={{
+            htmlInput: {
+              'aria-label': options.textLabels?.toolbar?.search,
+              'data-testid': options.textLabels?.toolbar?.search,
+            },
           }}
           value={searchText || ''}
           onKeyDown={onKeyDown}
diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.tsx
similarity index 70%
rename from src/components/TableSelectCell.js
rename to src/components/TableSelectCell.tsx
index 75916858..7ecca028 100644
--- a/src/components/TableSelectCell.js
+++ b/src/components/TableSelectCell.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Checkbox, TableCell } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import ExpandButton from './ExpandButton';
+import type { ReactNode, ComponentType } from 'react';
+import type { MUIDataTableExpandedRows, MUIDataTableOptions } from '../types/options';
 
 const useStyles = makeStyles({ name: 'MUIDataTableSelectCell' })((theme) => ({
   root: {
@@ -41,6 +42,29 @@ const useStyles = makeStyles({ name: 'MUIDataTableSelectCell' })((theme) => ({
   disabled: {},
 }));
 
+interface TableSelectCellProps {
+  fixedHeader?: boolean | undefined;
+  fixedSelectColumn?: boolean | undefined;
+  isHeaderCell?: boolean;
+  expandableOn?: boolean | undefined;
+  selectableOn?: string;
+  isRowExpanded?: boolean;
+  onExpand?: (() => void) | undefined;
+  isRowSelectable?: boolean;
+  selectableRowsHeader?: boolean | undefined;
+  hideExpandButton?: boolean | undefined;
+  expandableRowsHeader?: boolean | undefined;
+  expandedRows?: MUIDataTableExpandedRows | undefined;
+  areAllRowsExpanded?: () => boolean;
+  selectableRowsHideCheckboxes?: boolean | undefined;
+  setHeadCellRef?: ((index: number, pos: number, el: HTMLTableCellElement | null) => void) | undefined;
+  dataIndex?: number;
+  components?: { Checkbox?: ComponentType<unknown>; ExpandButton?: ComponentType<unknown> };
+  checked?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  [key: string]: unknown;
+}
+
 const TableSelectCell = ({
   fixedHeader,
   fixedSelectColumn,
@@ -60,7 +84,7 @@ const TableSelectCell = ({
   dataIndex,
   components = {},
   ...otherProps
-}) => {
+}: TableSelectCellProps) => {
   const { classes } = useStyles();
   const CheckboxComponent = components.Checkbox || Checkbox;
   const ExpandButtonComponent = components.ExpandButton || ExpandButton;
@@ -85,21 +109,21 @@ const TableSelectCell = ({
     [classes.hide]: isHeaderCell && !expandableRowsHeader,
     [classes.expanded]: isRowExpanded || (isHeaderCell && areAllRowsExpanded()),
   });
+
   const iconIndeterminateClass = clsx({
     [classes.icon]: true,
     [classes.hide]: isHeaderCell && !expandableRowsHeader,
   });
 
-  let refProp = {};
+  const refProp: Record<string, unknown> = {};
   if (setHeadCellRef) {
-    refProp.ref = (el) => {
+    refProp['ref'] = (el: HTMLTableCellElement | null) => {
       setHeadCellRef(0, 0, el);
     };
   }
 
   const renderCheckBox = () => {
     if (isHeaderCell && (selectableOn !== 'multiple' || selectableRowsHeader === false)) {
-      // only display the header checkbox for multiple selection.
       return null;
     }
     return (
@@ -125,13 +149,12 @@ const TableSelectCell = ({
           <ExpandButtonComponent
             isHeaderCell={isHeaderCell}
             areAllRowsExpanded={areAllRowsExpanded}
-            expandedRows={expandedRows}
-            onExpand={onExpand}
-            expandableRowsHeader={expandableRowsHeader}
+            expandedRows={expandedRows ?? { data: [], lookup: {} }}
+            onExpand={onExpand ?? (() => {})}
+            expandableRowsHeader={isHeaderCell ? (expandableRowsHeader ?? false) : true}
             buttonClass={buttonClass}
             iconIndeterminateClass={iconIndeterminateClass}
             iconClass={iconClass}
-            dataIndex={dataIndex}
           />
         )}
         {selectableOn !== 'none' && selectableRowsHideCheckboxes !== true && renderCheckBox()}
@@ -140,23 +163,4 @@ const TableSelectCell = ({
   );
 };
 
-TableSelectCell.propTypes = {
-  /** Select cell checked on/off */
-  checked: PropTypes.bool.isRequired,
-  /** Select cell part of fixed header */
-  fixedHeader: PropTypes.bool,
-  /** Callback to trigger cell update */
-  onChange: PropTypes.func,
-  /** Extend the style applied to components */
-  classes: PropTypes.object,
-  /** Is expandable option enabled */
-  expandableOn: PropTypes.bool,
-  /** Adds extra class, `expandDisabled` when the row is not expandable. */
-  hideExpandButton: PropTypes.bool,
-  /** Is selectable option enabled */
-  selectableOn: PropTypes.string,
-  /** Select cell disabled on/off */
-  isRowSelectable: PropTypes.bool,
-};
-
 export default TableSelectCell;
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.tsx
similarity index 62%
rename from src/components/TableToolbar.js
rename to src/components/TableToolbar.tsx
index f9d1f7f2..2e0bd4ac 100644
--- a/src/components/TableToolbar.js
+++ b/src/components/TableToolbar.tsx
@@ -15,96 +15,99 @@ import { useReactToPrint } from 'react-to-print';
 import find from 'lodash.find';
 import { withStyles } from 'tss-react/mui';
 import { createCSVDownload, downloadCSV } from '../utils';
-
-export const defaultToolbarStyles = (theme) => ({
-  root: {
-    '@media print': {
-      display: 'none',
+import type { ComponentType, ReactNode } from 'react';
+import type { CSSObject } from 'tss-react';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type { MUIDataTableOptions, MUIDataTableDisplayRow, MUIDataTableFilterList } from '../types/options';
+import type { Theme } from '@mui/material/styles';
+
+export const defaultToolbarStyles = (theme: Theme) =>
+  ({
+    root: {
+      '@media print': { display: 'none' },
+      [theme.breakpoints.down('sm')]: {
+        display: 'block',
+        '@media print': { display: 'none !important' },
+      },
     },
-  },
-  fullWidthRoot: {},
-  left: {
-    flex: '1 1 auto',
-  },
-  fullWidthLeft: {
-    flex: '1 1 auto',
-  },
-  actions: {
-    flex: '1 1 auto',
-    textAlign: 'right',
-  },
-  fullWidthActions: {
-    flex: '1 1 auto',
-    textAlign: 'right',
-  },
-  titleRoot: {},
-  titleText: {},
-  fullWidthTitleText: {
-    textAlign: 'left',
-  },
-  icon: {
-    '&:hover': {
-      color: theme.palette.primary.main,
+    fullWidthRoot: {},
+    leftContainer: {
+      flex: '1 1 auto',
+      [theme.breakpoints.down('md')]: {
+        padding: '8px 0px',
+      },
+      [theme.breakpoints.down('sm')]: {
+        padding: '8px 0px 0px 0px',
+      },
+    },
+    fullWidthLeftContainer: {
+      flex: '1 1 auto',
+    },
+    actions: {
+      flex: '1 1 auto',
+      textAlign: 'right',
+      [theme.breakpoints.down('sm')]: {
+        textAlign: 'center',
+      },
+    },
+    fullWidthActions: {
+      flex: '1 1 auto',
+      textAlign: 'right',
     },
-  },
-  iconActive: {
-    color: theme.palette.primary.main,
-  },
-  filterPaper: {
-    maxWidth: '50%',
-  },
-  filterCloseIcon: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    zIndex: 100,
-  },
-  searchIcon: {
-    display: 'inline-flex',
-    marginTop: '10px',
-    marginRight: '8px',
-  },
-  [theme.breakpoints.down('md')]: {
     titleRoot: {},
     titleText: {
-      fontSize: '16px',
-    },
-    spacer: {
-      display: 'none',
+      [theme.breakpoints.down('md')]: {
+        fontSize: '16px',
+      },
+      [theme.breakpoints.down('sm')]: {
+        textAlign: 'center',
+      },
     },
-    left: {
-      // flex: "1 1 40%",
-      padding: '8px 0px',
+    fullWidthTitleText: {
+      textAlign: 'left',
     },
-    actions: {
-      // flex: "1 1 60%",
-      textAlign: 'right',
+    spacer: {
+      [theme.breakpoints.down('md')]: {
+        display: 'none',
+      },
     },
-  },
-  [theme.breakpoints.down('sm')]: {
-    root: {
-      display: 'block',
-      '@media print': {
-        display: 'none !important',
+    icon: {
+      '&:hover': {
+        color: theme.palette.primary.main,
       },
     },
-    left: {
-      padding: '8px 0px 0px 0px',
+    iconActive: {
+      color: theme.palette.primary.main,
+    },
+    filterPaper: {
+      maxWidth: '50%',
     },
-    titleText: {
-      textAlign: 'center',
+    filterCloseIcon: {
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      zIndex: 100,
     },
-    actions: {
-      textAlign: 'center',
+    searchIcon: {
+      display: 'inline-flex',
+      marginTop: '10px',
+      marginRight: '8px',
     },
-  },
-  '@media screen and (max-width: 480px)': {},
-});
+  }) satisfies Record<string, CSSObject>;
 
 const RESPONSIVE_FULL_WIDTH_NAME = 'scrollFullHeightFullWidth';
 
-const PrintButton = ({ getContent, classes, IconComponent, options, print, Tooltip }) => {
-  const contentRef = React.useRef(null);
+interface PrintButtonProps {
+  getContent: () => HTMLElement | null;
+  classes: Record<string, string>;
+  IconComponent: ComponentType;
+  options: MUIDataTableOptions;
+  print: string;
+  Tooltip: typeof MuiTooltip;
+}
+
+const PrintButton = ({ getContent, classes, IconComponent, options, print, Tooltip }: PrintButtonProps) => {
+  const contentRef = React.useRef<HTMLElement | null>(null);
   const handlePrint = useReactToPrint({ contentRef });
   const onClick = () => {
     contentRef.current = getContent();
@@ -117,15 +120,64 @@ const PrintButton = ({ getContent, classes, IconComponent, options, print, Toolt
         aria-label={print}
         disabled={options.print === 'disabled'}
         onClick={onClick}
-        classes={{ root: classes.icon }}>
+        {...(classes['icon'] && { classes: { root: classes['icon'] } })}>
         <IconComponent />
       </IconButton>
     </Tooltip>
   );
 };
 
-class TableToolbar extends React.Component {
-  state = {
+export interface TableToolbarProps {
+  columns: MUIDataTableColumnState[];
+  columnOrder?: number[];
+  data: MUIDataTableDisplayRow[];
+  displayData: MUIDataTableDisplayRow[];
+  filterData: string[][];
+  filterList: MUIDataTableFilterList;
+  filterUpdate: (
+    index: number,
+    value: string | string[],
+    column: string | MUIDataTableColumnState,
+    type: string,
+  ) => void;
+  options: MUIDataTableOptions;
+  resetFilters: () => void;
+  searchClose: () => void;
+  searchText?: string | null;
+  searchTextUpdate: (value: string) => void;
+  setTableAction: (action: string) => void;
+  tableRef: () => HTMLElement | null;
+  title: ReactNode;
+  toggleViewColumn: (index: number) => void;
+  updateColumns: (columns: MUIDataTableColumnState[]) => void;
+  updateFilterByType: (
+    filterList: MUIDataTableFilterList,
+    index: number,
+    value: string | string[],
+    type: string,
+    customUpdate: unknown,
+  ) => void;
+  classes: Record<keyof ReturnType<typeof defaultToolbarStyles>, string>;
+  components?: {
+    Tooltip?: ComponentType<unknown>;
+    TableViewCol?: ComponentType<unknown>;
+    TableFilter?: ComponentType<unknown>;
+    icons?: Record<string, ComponentType>;
+  };
+}
+
+interface TableToolbarState {
+  iconActive: string | null | undefined;
+  showSearch: boolean;
+  searchText: string | null;
+  hideFilterPopover?: boolean;
+  prevIconActive?: string | null;
+}
+
+class TableToolbar extends React.Component<TableToolbarProps, TableToolbarState> {
+  searchButton: HTMLButtonElement | null = null;
+
+  override state: TableToolbarState = {
     iconActive: null,
     showSearch: Boolean(
       this.props.searchText ||
@@ -136,24 +188,24 @@ class TableToolbar extends React.Component {
     searchText: this.props.searchText || null,
   };
 
-  componentDidUpdate(prevProps) {
+  override componentDidUpdate(prevProps: TableToolbarProps) {
     if (this.props.searchText !== prevProps.searchText) {
-      this.setState({ searchText: this.props.searchText });
+      this.setState({ searchText: this.props.searchText || null });
     }
   }
 
   handleCSVDownload = () => {
     const { data, displayData, columns, options, columnOrder } = this.props;
-    let dataToDownload = []; //cloneDeep(data);
-    let columnsToDownload = [];
+    let dataToDownload: { index?: number; data: unknown[] }[] = [];
+    let columnsToDownload: MUIDataTableColumnState[] = [];
     let columnOrderCopy = Array.isArray(columnOrder) ? columnOrder.slice(0) : [];
 
     if (columnOrderCopy.length === 0) {
-      columnOrderCopy = columns.map((item, idx) => idx);
+      columnOrderCopy = columns.map((_item, idx) => idx);
     }
 
     data.forEach((row) => {
-      let newRow = { index: row.index, data: [] };
+      const newRow: { index: number; data: unknown[] } = { index: row.index, data: [] };
       columnOrderCopy.forEach((idx) => {
         newRow.data.push(row.data[idx]);
       });
@@ -161,30 +213,25 @@ class TableToolbar extends React.Component {
     });
 
     columnOrderCopy.forEach((idx) => {
-      columnsToDownload.push(columns[idx]);
+      const column = columns[idx];
+      if (column !== undefined) {
+        columnsToDownload.push(column);
+      }
     });
 
     if (options.downloadOptions && options.downloadOptions.filterOptions) {
-      // check rows first:
       if (options.downloadOptions.filterOptions.useDisplayedRowsOnly) {
-        let filteredDataToDownload = displayData.map((row, index) => {
+        const filteredDataToDownload = displayData.map((row, index) => {
           let i = -1;
-
-          // Help to preserve sort order in custom render columns
-          row.index = index;
-
+          (row as unknown as Record<string, unknown>)['index'] = index;
           return {
             data: row.data.map((column) => {
               i += 1;
-
-              // if we have a custom render, which will appear as a react element, we must grab the actual value from data
-              // that matches the dataIndex and column
-              // TODO: Create a utility function for checking whether or not something is a react object
               let val =
                 typeof column === 'object' && column !== null && !Array.isArray(column)
-                  ? find(data, (d) => d.index === row.dataIndex).data[i]
+                  ? find(data, (d) => d.index === row.dataIndex)?.data[i]
                   : column;
-              val = typeof val === 'function' ? find(data, (d) => d.index === row.dataIndex).data[i] : val;
+              val = typeof val === 'function' ? find(data, (d) => d.index === row.dataIndex)?.data[i] : val;
               return val;
             }),
           };
@@ -192,7 +239,7 @@ class TableToolbar extends React.Component {
 
         dataToDownload = [];
         filteredDataToDownload.forEach((row) => {
-          let newRow = { index: row.index, data: [] };
+          const newRow: { index?: number; data: unknown[] } = { data: [] };
           columnOrderCopy.forEach((idx) => {
             newRow.data.push(row.data[idx]);
           });
@@ -200,29 +247,29 @@ class TableToolbar extends React.Component {
         });
       }
 
-      // now, check columns:
       if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
         columnsToDownload = columnsToDownload.filter((_) => _.display === 'true');
-
         dataToDownload = dataToDownload.map((row) => {
-          row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === 'true');
+          row.data = row.data.filter((_, index) => {
+            const columnIndex = columnOrderCopy[index];
+            return columnIndex !== undefined && columns[columnIndex]?.display === 'true';
+          });
           return row;
         });
       }
     }
-    createCSVDownload(columnsToDownload, dataToDownload, options, downloadCSV);
+    createCSVDownload(columnsToDownload, dataToDownload as unknown as MUIDataTableDisplayRow[], options, downloadCSV);
   };
 
-  setActiveIcon = (iconName) => {
+  setActiveIcon = (iconName?: string) => {
     this.setState(
       (prevState) => ({
         showSearch: this.isSearchShown(iconName),
         iconActive: iconName,
-        prevIconActive: prevState.iconActive,
+        prevIconActive: prevState.iconActive ?? null,
       }),
       () => {
         const { iconActive, prevIconActive } = this.state;
-
         if (iconActive === 'filter') {
           this.props.setTableAction('onFilterDialogOpen');
           if (this.props.options.onFilterDialogOpen) {
@@ -239,11 +286,8 @@ class TableToolbar extends React.Component {
     );
   };
 
-  isSearchShown = (iconName) => {
-    if (this.props.options.searchAlwaysOpen) {
-      return true;
-    }
-
+  isSearchShown = (iconName?: string): boolean => {
+    if (this.props.options.searchAlwaysOpen) return true;
     let nextVal = false;
     if (this.state.showSearch) {
       if (this.state.searchText) {
@@ -260,36 +304,30 @@ class TableToolbar extends React.Component {
     return nextVal;
   };
 
-  getActiveIcon = (styles, iconName) => {
+  getActiveIcon = (styles: Record<string, string>, iconName: string): string => {
     let isActive = this.state.iconActive === iconName;
     if (iconName === 'search') {
       const { showSearch, searchText } = this.state;
-      isActive = isActive || showSearch || searchText;
+      isActive = isActive || showSearch || !!searchText;
     }
-    return isActive ? styles.iconActive : styles.icon;
+    return isActive ? styles['iconActive']! : styles['icon']!;
   };
 
-  showSearch = () => {
+  showSearch = (): boolean => {
     this.props.setTableAction('onSearchOpen');
-    !!this.props.options.onSearchOpen && this.props.options.onSearchOpen();
+    this.props.options.onSearchOpen && this.props.options.onSearchOpen();
     return true;
   };
 
   hideSearch = () => {
     const { onSearchClose } = this.props.options;
-
     this.props.setTableAction('onSearchClose');
     if (onSearchClose) onSearchClose();
     this.props.searchClose();
-
-    this.setState(() => ({
-      iconActive: null,
-      showSearch: false,
-      searchText: null,
-    }));
+    this.setState(() => ({ iconActive: null, showSearch: false, searchText: null }));
   };
 
-  handleSearch = (value) => {
+  handleSearch = (value: string) => {
     this.setState({ searchText: value });
     this.props.searchTextUpdate(value);
   };
@@ -303,7 +341,7 @@ class TableToolbar extends React.Component {
     }
   };
 
-  render() {
+  override render() {
     const {
       data,
       options,
@@ -321,15 +359,21 @@ class TableToolbar extends React.Component {
     } = this.props;
     const { icons = {} } = components;
 
-    const Tooltip = components.Tooltip || MuiTooltip;
-    const TableViewColComponent = components.TableViewCol || TableViewCol;
-    const TableFilterComponent = components.TableFilter || TableFilter;
-    const SearchIconComponent = icons.SearchIcon || SearchIcon;
-    const DownloadIconComponent = icons.DownloadIcon || DownloadIcon;
-    const PrintIconComponent = icons.PrintIcon || PrintIcon;
-    const ViewColumnIconComponent = icons.ViewColumnIcon || ViewColumnIcon;
-    const FilterIconComponent = icons.FilterIcon || FilterIcon;
-    const { search, downloadCsv, print, viewColumns, filterTable } = options.textLabels.toolbar;
+    const Tooltip = (components.Tooltip || MuiTooltip) as typeof MuiTooltip;
+    const TableViewColComponent = (components.TableViewCol || TableViewCol) as ComponentType<Record<string, unknown>>;
+    const TableFilterComponent = (components.TableFilter || TableFilter) as ComponentType<Record<string, unknown>>;
+    const SearchIconComponent = icons['SearchIcon'] || SearchIcon;
+    const DownloadIconComponent = icons['DownloadIcon'] || DownloadIcon;
+    const PrintIconComponent = icons['PrintIcon'] || PrintIcon;
+    const ViewColumnIconComponent = icons['ViewColumnIcon'] || ViewColumnIcon;
+    const FilterIconComponent = icons['FilterIcon'] || FilterIcon;
+    const {
+      search = '',
+      downloadCsv = '',
+      print = '',
+      viewColumns = '',
+      filterTable = '',
+    } = options.textLabels?.toolbar ?? {};
     const { showSearch, searchText } = this.state;
 
     const filterPopoverExit = () => {
@@ -346,9 +390,12 @@ class TableToolbar extends React.Component {
         className={options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.root : classes.fullWidthRoot}
         role={'toolbar'}
         aria-label={'Table Toolbar'}>
-        <div className={options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.left : classes.fullWidthLeft}>
+        <div
+          className={
+            options.responsive !== RESPONSIVE_FULL_WIDTH_NAME ? classes.leftContainer : classes.fullWidthLeftContainer
+          }>
           {showSearch === true ? (
-            options.customSearchRender ? (
+            options.customSearchRender && typeof options.customSearchRender === 'function' ? (
               options.customSearchRender(searchText, this.handleSearch, this.hideSearch, options)
             ) : (
               <TableSearch
@@ -378,7 +425,9 @@ class TableToolbar extends React.Component {
               <IconButton
                 aria-label={search}
                 data-testid={search + '-iconButton'}
-                ref={(el) => (this.searchButton = el)}
+                ref={(el) => {
+                  this.searchButton = el;
+                }}
                 classes={{ root: this.getActiveIcon(classes, 'search') }}
                 disabled={options.search === 'disabled'}
                 onClick={this.handleSearchIconClick}>
@@ -412,7 +461,7 @@ class TableToolbar extends React.Component {
           )}
           {!(options.viewColumns === false || options.viewColumns === 'false') && (
             <Popover
-              refExit={this.setActiveIcon.bind(null)}
+              refExit={() => this.setActiveIcon()}
               classes={{ closeIcon: classes.filterCloseIcon }}
               hide={options.viewColumns === 'disabled'}
               trigger={
@@ -422,7 +471,7 @@ class TableToolbar extends React.Component {
                     aria-label={viewColumns}
                     classes={{ root: this.getActiveIcon(classes, 'viewcolumns') }}
                     disabled={options.viewColumns === 'disabled'}
-                    onClick={this.setActiveIcon.bind(null, 'viewcolumns')}>
+                    onClick={() => this.setActiveIcon('viewcolumns')}>
                     <ViewColumnIconComponent />
                   </IconButton>
                 </Tooltip>
@@ -451,7 +500,7 @@ class TableToolbar extends React.Component {
                     aria-label={filterTable}
                     classes={{ root: this.getActiveIcon(classes, 'filter') }}
                     disabled={options.filter === 'disabled'}
-                    onClick={this.setActiveIcon.bind(null, 'filter')}>
+                    onClick={() => this.setActiveIcon('filter')}>
                     <FilterIconComponent />
                   </IconButton>
                 </Tooltip>
diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js
deleted file mode 100644
index 6bac3779..00000000
--- a/src/components/TableToolbarSelect.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Paper, IconButton, Typography, Tooltip as MuiTooltip } from '@mui/material';
-import { Delete as DeleteIcon } from '@mui/icons-material';
-import { withStyles } from 'tss-react/mui';
-
-const defaultToolbarSelectStyles = (theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.default,
-    flex: '1 1 100%',
-    display: 'flex',
-    position: 'relative',
-    zIndex: 120,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
-    paddingBottom: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
-    '@media print': {
-      display: 'none',
-    },
-  },
-  title: {
-    paddingLeft: '26px',
-  },
-  iconButton: {
-    marginRight: '24px',
-  },
-  deleteIcon: {},
-});
-
-class TableToolbarSelect extends React.Component {
-  static propTypes = {
-    /** Options used to describe table */
-    options: PropTypes.object.isRequired,
-    /** Current row selected or not */
-    rowSelected: PropTypes.bool,
-    /** Callback to trigger selected rows delete */
-    onRowsDelete: PropTypes.func,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
-  };
-
-  /**
-   * @param {number[]} selectedRows Array of rows indexes that are selected, e.g. [0, 2] will select first and third rows in table
-   */
-  handleCustomSelectedRows = (selectedRows) => {
-    if (!Array.isArray(selectedRows)) {
-      throw new TypeError(`"selectedRows" must be an "array", but it's "${typeof selectedRows}"`);
-    }
-
-    if (selectedRows.some((row) => typeof row !== 'number')) {
-      throw new TypeError(`Array "selectedRows" must contain only numbers`);
-    }
-
-    const { options } = this.props;
-    if (selectedRows.length > 1 && options.selectableRows === 'single') {
-      throw new Error('Can not select more than one row when "selectableRows" is "single"');
-    }
-    this.props.selectRowUpdate('custom', selectedRows);
-  };
-
-  render() {
-    const { classes, onRowsDelete, selectedRows, options, displayData, components = {} } = this.props;
-    const textLabels = options.textLabels.selectedRows;
-    const Tooltip = components.Tooltip || MuiTooltip;
-
-    return (
-      <Paper className={classes.root}>
-        <div>
-          <Typography variant="subtitle1" className={classes.title}>
-            {selectedRows.data.length} {textLabels.text}
-          </Typography>
-        </div>
-        {options.customToolbarSelect ? (
-          options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)
-        ) : (
-          <Tooltip title={textLabels.delete}>
-            <IconButton className={classes.iconButton} onClick={onRowsDelete} aria-label={textLabels.deleteAria}>
-              <DeleteIcon className={classes.deleteIcon} />
-            </IconButton>
-          </Tooltip>
-        )}
-      </Paper>
-    );
-  }
-}
-
-export default withStyles(TableToolbarSelect, defaultToolbarSelectStyles, { name: 'MUIDataTableToolbarSelect' });
diff --git a/src/components/TableToolbarSelect.tsx b/src/components/TableToolbarSelect.tsx
new file mode 100644
index 00000000..a9f5ece0
--- /dev/null
+++ b/src/components/TableToolbarSelect.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Paper, IconButton, Typography, Tooltip as MuiTooltip } from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
+import { withStyles } from 'tss-react/mui';
+import type { ComponentType } from 'react';
+import type { CSSObject } from 'tss-react';
+import type { MUIDataTableOptions, MUIDataTableSelectedRows, MUIDataTableDisplayRow } from '../types/options';
+import type { Theme } from '@mui/material/styles';
+
+const defaultToolbarSelectStyles = (theme: Theme) =>
+  ({
+    root: {
+      backgroundColor: theme.palette.background.default,
+      flex: '1 1 100%',
+      display: 'flex',
+      position: 'relative',
+      zIndex: 120,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      '@media print': {
+        display: 'none',
+      },
+    },
+    title: {
+      paddingLeft: '26px',
+    },
+    iconButton: {
+      marginRight: '24px',
+    },
+    deleteIcon: {},
+  }) satisfies Record<string, CSSObject>;
+
+export interface TableToolbarSelectProps {
+  options: MUIDataTableOptions;
+  selectedRows: MUIDataTableSelectedRows;
+  displayData: MUIDataTableDisplayRow[];
+  onRowsDelete: () => void;
+  selectRowUpdate: (type: string, rows: number[]) => void;
+  classes: Record<keyof ReturnType<typeof defaultToolbarSelectStyles>, string>;
+  components?: { Tooltip?: ComponentType<unknown> };
+}
+
+class TableToolbarSelect extends React.Component<TableToolbarSelectProps> {
+  handleCustomSelectedRows = (selectedRows: number[]) => {
+    if (!Array.isArray(selectedRows)) {
+      throw new TypeError(`"selectedRows" must be an "array", but it's "${typeof selectedRows}"`);
+    }
+
+    if (selectedRows.some((row) => typeof row !== 'number')) {
+      throw new TypeError(`Array "selectedRows" must contain only numbers`);
+    }
+
+    const { options } = this.props;
+    if (selectedRows.length > 1 && options.selectableRows === 'single') {
+      throw new Error('Can not select more than one row when "selectableRows" is "single"');
+    }
+    this.props.selectRowUpdate('custom', selectedRows);
+  };
+
+  override render() {
+    const { classes, onRowsDelete, selectedRows, options, displayData, components = {} } = this.props;
+    const textLabels = options.textLabels?.selectedRows;
+    const Tooltip = (components.Tooltip || MuiTooltip) as typeof MuiTooltip;
+
+    return (
+      <Paper className={classes.root}>
+        <div>
+          <Typography variant="subtitle1" className={classes.title}>
+            {selectedRows.data.length} {textLabels?.text}
+          </Typography>
+        </div>
+        {options.customToolbarSelect ? (
+          options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)
+        ) : (
+          <Tooltip title={textLabels?.delete || ''}>
+            <IconButton className={classes.iconButton} onClick={onRowsDelete} aria-label={textLabels?.deleteAria}>
+              <DeleteIcon className={classes.deleteIcon} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(TableToolbarSelect, defaultToolbarSelectStyles, { name: 'MUIDataTableToolbarSelect' });
diff --git a/src/components/TableViewCol.js b/src/components/TableViewCol.tsx
similarity index 77%
rename from src/components/TableViewCol.js
rename to src/components/TableViewCol.tsx
index 08d0e97f..c6086d97 100644
--- a/src/components/TableViewCol.js
+++ b/src/components/TableViewCol.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Checkbox, Typography, FormControl, FormGroup, FormControlLabel } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
+import type { ComponentType } from 'react';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type { MUIDataTableOptions } from '../types/options';
 
 const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })((theme) => ({
   root: {
@@ -34,19 +36,27 @@ const useStyles = makeStyles({ name: 'MUIDataTableViewCol' })((theme) => ({
   },
 }));
 
-const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
+interface TableViewColProps {
+  columns: MUIDataTableColumnState[];
+  options: MUIDataTableOptions;
+  components?: { Checkbox?: ComponentType<unknown> };
+  onColumnUpdate: (index: number) => void;
+  updateColumns?: (columns: MUIDataTableColumnState[]) => void;
+}
+
+const TableViewCol = ({ columns, options, components = {}, onColumnUpdate }: TableViewColProps) => {
   const { classes } = useStyles();
-  const textLabels = options.textLabels.viewColumns;
+  const textLabels = options.textLabels?.viewColumns;
   const CheckboxComponent = components.Checkbox || Checkbox;
 
-  const handleColChange = (index) => {
+  const handleColChange = (index: number) => {
     onColumnUpdate(index);
   };
 
   return (
-    <FormControl component={'fieldset'} className={classes.root} aria-label={textLabels.titleAria}>
+    <FormControl component={'fieldset'} className={classes.root} aria-label={textLabels?.titleAria}>
       <Typography variant="caption" className={classes.title}>
-        {textLabels.title}
+        {textLabels?.title}
       </Typography>
       <FormGroup className={classes.formGroup}>
         {columns.map((column, index) => {
@@ -83,15 +93,4 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
   );
 };
 
-TableViewCol.propTypes = {
-  /** Columns used to describe table */
-  columns: PropTypes.array.isRequired,
-  /** Options used to describe table */
-  options: PropTypes.object.isRequired,
-  /** Callback to trigger View column update */
-  onColumnUpdate: PropTypes.func,
-  /** Extend the style applied to components */
-  classes: PropTypes.object,
-};
-
 export default TableViewCol;
diff --git a/src/hooks/useColumnDrop.js b/src/hooks/useColumnDrop.js
deleted file mode 100644
index e28ca07d..00000000
--- a/src/hooks/useColumnDrop.js
+++ /dev/null
@@ -1,184 +0,0 @@
-/*
-  This hook handles the dragging and dropping effects that occur for columns.
-*/
-
-import { useDrop } from 'react-dnd';
-
-const getColModel = (headCellRefs, columnOrder, columns) => {
-  let colModel = [];
-  let leftMostCell = headCellRefs[0] ? headCellRefs[0] : null; // left most cell is the select cell, if it exists
-
-  if (leftMostCell === null) {
-    leftMostCell = { offsetLeft: Infinity };
-    let headCells = Object.entries(headCellRefs);
-    headCells.forEach(([key, item], idx) => {
-      if (item && item.offsetLeft < leftMostCell.offsetLeft) {
-        leftMostCell = item;
-      }
-    });
-
-    if (leftMostCell.offsetLeft === Infinity) {
-      leftMostCell = { offsetParent: 0, offsetWidth: 0, offsetLeft: 0 };
-    }
-  }
-
-  let ii = 0,
-    parentOffsetLeft = 0,
-    offsetParent = leftMostCell.offsetParent;
-  while (offsetParent) {
-    parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0) - (offsetParent.scrollLeft || 0);
-    offsetParent = offsetParent.offsetParent;
-    ii++;
-    if (ii > 1000) break;
-  }
-
-  // if the select cell is present, make sure it is apart of the column model
-  if (headCellRefs[0]) {
-    colModel[0] = {
-      left: parentOffsetLeft + leftMostCell.offsetLeft,
-      width: leftMostCell.offsetWidth,
-      columnIndex: null,
-      ref: leftMostCell,
-    };
-  }
-
-  columnOrder.forEach((colIdx, idx) => {
-    let col = headCellRefs[colIdx + 1];
-    let cmIndx = colModel.length - 1;
-    if (!(columns[colIdx] && columns[colIdx].display !== 'true')) {
-      let prevLeft =
-        cmIndx !== -1 ? colModel[cmIndx].left + colModel[cmIndx].width : parentOffsetLeft + leftMostCell.offsetLeft;
-      colModel.push({
-        left: prevLeft,
-        width: col.offsetWidth,
-        columnIndex: colIdx,
-        ref: col,
-      });
-    }
-  });
-
-  return colModel;
-};
-
-const reorderColumns = (prevColumnOrder, columnIndex, newPosition) => {
-  let columnOrder = prevColumnOrder.slice();
-  let srcIndex = columnOrder.indexOf(columnIndex);
-  let targetIndex = columnOrder.indexOf(newPosition);
-
-  if (srcIndex !== -1 && targetIndex !== -1) {
-    let newItem = columnOrder[srcIndex];
-    columnOrder = [...columnOrder.slice(0, srcIndex), ...columnOrder.slice(srcIndex + 1)];
-    columnOrder = [...columnOrder.slice(0, targetIndex), newItem, ...columnOrder.slice(targetIndex)];
-  }
-  return columnOrder;
-};
-
-const handleHover = (opts) => {
-  const {
-    item,
-    mon,
-    index,
-    headCellRefs,
-    updateColumnOrder,
-    columnOrder,
-    transitionTime = 300,
-    tableRef,
-    tableId,
-    timers,
-    columns,
-  } = opts;
-
-  let hoverIdx = mon.getItem().colIndex;
-
-  if (headCellRefs !== mon.getItem().headCellRefs) return;
-
-  if (hoverIdx !== index) {
-    let reorderedCols = reorderColumns(columnOrder, mon.getItem().colIndex, index);
-    let newColModel = getColModel(headCellRefs, reorderedCols, columns);
-
-    let newX = mon.getClientOffset().x;
-    let modelIdx = -1;
-    for (let ii = 0; ii < newColModel.length; ii++) {
-      if (newX > newColModel[ii].left && newX < newColModel[ii].left + newColModel[ii].width) {
-        modelIdx = newColModel[ii].columnIndex;
-        break;
-      }
-    }
-
-    if (modelIdx === mon.getItem().colIndex) {
-      clearTimeout(timers.columnShift);
-
-      let curColModel = getColModel(headCellRefs, columnOrder, columns);
-
-      let transitions = [];
-      newColModel.forEach((item) => {
-        transitions[item.columnIndex] = item.left;
-      });
-      curColModel.forEach((item) => {
-        transitions[item.columnIndex] = transitions[item.columnIndex] - item.left;
-      });
-
-      for (let idx = 1; idx < columnOrder.length; idx++) {
-        let colIndex = columnOrder[idx];
-        if (columns[colIndex] && columns[colIndex].display !== 'true') {
-          // skip
-        } else {
-          if (headCellRefs[idx]) headCellRefs[idx].style.transition = '280ms';
-          if (headCellRefs[idx]) headCellRefs[idx].style.transform = 'translateX(' + transitions[idx - 1] + 'px)';
-        }
-      }
-
-      let allElms = [];
-      let dividers = [];
-      for (let ii = 0; ii < columnOrder.length; ii++) {
-        let elms = tableRef
-          ? tableRef.querySelectorAll('[data-colindex="' + ii + '"][data-tableid="' + tableId + '"]')
-          : [];
-        for (let jj = 0; jj < elms.length; jj++) {
-          elms[jj].style.transition = transitionTime + 'ms';
-          elms[jj].style.transform = 'translateX(' + transitions[ii] + 'px)';
-          allElms.push(elms[jj]);
-        }
-
-        let divider = tableRef
-          ? tableRef.querySelectorAll('[data-divider-index="' + (ii + 1) + '"][data-tableid="' + tableId + '"]')
-          : [];
-        for (let jj = 0; jj < divider.length; jj++) {
-          divider[jj].style.transition = transitionTime + 'ms';
-          divider[jj].style.transform = 'translateX(' + transitions[columnOrder[ii]] + 'px)';
-          dividers.push(divider[jj]);
-        }
-      }
-
-      let newColIndex = mon.getItem().colIndex;
-      timers.columnShift = setTimeout(() => {
-        allElms.forEach((item) => {
-          item.style.transition = '0s';
-          item.style.transform = 'translateX(0)';
-        });
-        dividers.forEach((item) => {
-          item.style.transition = '0s';
-          item.style.transform = 'translateX(0)';
-        });
-        updateColumnOrder(reorderedCols, newColIndex, index);
-      }, transitionTime);
-    }
-  }
-};
-
-const useColumnDrop = (opts) => {
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: 'HEADER',
-    drop: opts.drop,
-    hover: (item, mon) => handleHover(Object.assign({}, opts, { item, mon })),
-    collect: (mon) => ({
-      isOver: !!mon.isOver(),
-      canDrop: !!mon.canDrop(),
-    }),
-  });
-
-  return [drop];
-};
-
-export { getColModel, reorderColumns, handleHover };
-export default useColumnDrop;
diff --git a/src/hooks/useColumnDrop.tsx b/src/hooks/useColumnDrop.tsx
new file mode 100644
index 00000000..f973b49d
--- /dev/null
+++ b/src/hooks/useColumnDrop.tsx
@@ -0,0 +1,201 @@
+import { useDrop } from 'react-dnd';
+import type { DropTargetMonitor } from 'react-dnd';
+import type { MUIDataTableColumnState } from '../types/columns';
+import type {
+  HeaderDragItem,
+  HeadCellRefs,
+  ColumnModelItem,
+  ColumnDropTimers,
+  UseColumnDropOptions,
+  HeadCellElement,
+  HoverOptions,
+} from '../types/drag';
+
+const getColModel = (
+  headCellRefs: HeadCellRefs,
+  columnOrder: number[],
+  columns: MUIDataTableColumnState[],
+): ColumnModelItem[] => {
+  const colModel: ColumnModelItem[] = [];
+  let leftMostCell: HeadCellElement | null = (headCellRefs[0] as HeadCellElement) || null;
+
+  if (leftMostCell === null) {
+    leftMostCell = { offsetLeft: Infinity } as HeadCellElement;
+    const headCells = Object.entries(headCellRefs);
+    headCells.forEach(([, item]) => {
+      const el = item as HeadCellElement | null;
+      if (el && el.offsetLeft < leftMostCell!.offsetLeft) {
+        leftMostCell = el;
+      }
+    });
+
+    if (leftMostCell!.offsetLeft === Infinity) {
+      leftMostCell = { offsetParent: null, offsetWidth: 0, offsetLeft: 0 } as unknown as HeadCellElement;
+    }
+  }
+
+  let ii = 0;
+  let parentOffsetLeft = 0;
+  let offsetParent = leftMostCell!.offsetParent as (HTMLElement & { scrollLeft?: number }) | null;
+  while (offsetParent) {
+    parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0) - (offsetParent.scrollLeft || 0);
+    offsetParent = offsetParent.offsetParent as (HTMLElement & { scrollLeft?: number }) | null;
+    ii++;
+    if (ii > 1000) break;
+  }
+
+  if (headCellRefs[0]) {
+    colModel[0] = {
+      left: parentOffsetLeft + leftMostCell!.offsetLeft,
+      width: leftMostCell!.offsetWidth,
+      columnIndex: null,
+      ref: leftMostCell as unknown as HTMLElement,
+    };
+  }
+
+  columnOrder.forEach((colIdx) => {
+    const col = headCellRefs[colIdx + 1] as HeadCellElement;
+    const cmIndx = colModel.length - 1;
+    if (!(columns[colIdx] && columns[colIdx].display !== 'true')) {
+      const previousCol = cmIndx !== -1 ? colModel[cmIndx] : undefined;
+      const prevLeft = previousCol ? previousCol.left + previousCol.width : parentOffsetLeft + leftMostCell!.offsetLeft;
+      colModel.push({
+        left: prevLeft,
+        width: col.offsetWidth,
+        columnIndex: colIdx,
+        ref: col as unknown as HTMLElement,
+      });
+    }
+  });
+
+  return colModel;
+};
+
+const reorderColumns = (prevColumnOrder: number[], columnIndex: number, newPosition: number): number[] => {
+  let columnOrder = prevColumnOrder.slice();
+  const srcIndex = columnOrder.indexOf(columnIndex);
+  const targetIndex = columnOrder.indexOf(newPosition);
+
+  if (srcIndex !== -1 && targetIndex !== -1) {
+    const newItem = columnOrder[srcIndex]!;
+    columnOrder = [...columnOrder.slice(0, srcIndex), ...columnOrder.slice(srcIndex + 1)];
+    columnOrder = [...columnOrder.slice(0, targetIndex), newItem, ...columnOrder.slice(targetIndex)];
+  }
+  return columnOrder;
+};
+
+const handleHover = (opts: HoverOptions): void => {
+  const {
+    mon,
+    index,
+    headCellRefs,
+    updateColumnOrder,
+    columnOrder,
+    transitionTime = 300,
+    tableRef,
+    tableId,
+    timers,
+    columns,
+  } = opts;
+
+  const hoverIdx = mon.getItem().colIndex;
+
+  if (headCellRefs !== mon.getItem().headCellRefs) return;
+
+  if (hoverIdx !== index) {
+    const reorderedCols = reorderColumns(columnOrder, mon.getItem().colIndex, index);
+    const newColModel = getColModel(headCellRefs, reorderedCols, columns);
+
+    const newX = mon.getClientOffset()!.x;
+    let modelIdx = -1;
+    for (let ii = 0; ii < newColModel.length; ii++) {
+      const column = newColModel[ii];
+      if (column && newX > column.left && newX < column.left + column.width) {
+        modelIdx = column.columnIndex as number;
+        break;
+      }
+    }
+
+    if (modelIdx === mon.getItem().colIndex) {
+      clearTimeout(timers.columnShift);
+
+      const curColModel = getColModel(headCellRefs, columnOrder, columns);
+
+      const transitions: number[] = [];
+      newColModel.forEach((item) => {
+        transitions[item.columnIndex as number] = item.left;
+      });
+      curColModel.forEach((item) => {
+        transitions[item.columnIndex as number] = transitions[item.columnIndex as number]! - item.left;
+      });
+
+      for (let idx = 1; idx < columnOrder.length; idx++) {
+        const colIndex = columnOrder[idx];
+        const isHidden = colIndex !== undefined && columns[colIndex]?.display !== 'true';
+
+        if (!isHidden) {
+          const headCellRef = headCellRefs[idx];
+          if (headCellRef) {
+            headCellRef.style.transition = '280ms';
+            headCellRef.style.transform = `translateX(${transitions[idx - 1]}px)`;
+          }
+        }
+      }
+
+      const allElms: HTMLElement[] = [];
+      const dividers: HTMLElement[] = [];
+      for (let ii = 0; ii < columnOrder.length; ii++) {
+        const elms = tableRef
+          ? tableRef.querySelectorAll<HTMLElement>('[data-colindex="' + ii + '"][data-tableid="' + tableId + '"]')
+          : [];
+        for (const elm of elms) {
+          elm.style.transition = transitionTime + 'ms';
+          elm.style.transform = 'translateX(' + transitions[ii] + 'px)';
+          allElms.push(elm);
+        }
+
+        const divider = tableRef
+          ? tableRef.querySelectorAll<HTMLElement>(
+              '[data-divider-index="' + (ii + 1) + '"][data-tableid="' + tableId + '"]',
+            )
+          : [];
+        for (const item of divider) {
+          item.style.transition = transitionTime + 'ms';
+          item.style.transform = 'translateX(' + transitions[columnOrder[ii] as number] + 'px)';
+          dividers.push(item);
+        }
+      }
+
+      const newColIndex = mon.getItem().colIndex;
+      timers.columnShift = setTimeout(() => {
+        allElms.forEach((item) => {
+          item.style.transition = '0s';
+          item.style.transform = 'translateX(0)';
+        });
+        dividers.forEach((item) => {
+          item.style.transition = '0s';
+          item.style.transform = 'translateX(0)';
+        });
+        updateColumnOrder(reorderedCols, newColIndex, index);
+      }, transitionTime);
+    }
+  }
+};
+
+const useColumnDrop = (opts: UseColumnDropOptions) => {
+  const [, drop] = useDrop({
+    accept: 'HEADER',
+    drop: opts.drop!,
+    hover: (item: HeaderDragItem, mon: DropTargetMonitor<HeaderDragItem, unknown>) =>
+      handleHover({ ...opts, item, mon }),
+    collect: (mon) => ({
+      isOver: !!mon.isOver(),
+      canDrop: !!mon.canDrop(),
+    }),
+  });
+
+  return [drop] as const;
+};
+
+export { getColModel, reorderColumns, handleHover };
+export default useColumnDrop;
diff --git a/src/index.js b/src/index.tsx
similarity index 94%
rename from src/index.js
rename to src/index.tsx
index cea6de1a..752d207a 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -18,3 +18,5 @@ export { default as TableToolbarSelect } from './components/TableToolbarSelect';
 export { default as TableViewCol } from './components/TableViewCol';
 export { default as ExpandButton } from './components/ExpandButton';
 export { debounceSearchRender, DebounceTableSearch } from './plug-ins/DebounceSearchRender';
+export type * from './types';
+export type { MUIDataTableProps } from './MUIDataTable';
diff --git a/src/localStorage/index.js b/src/localStorage/index.tsx
similarity index 100%
rename from src/localStorage/index.js
rename to src/localStorage/index.tsx
diff --git a/src/localStorage/load.js b/src/localStorage/load.js
deleted file mode 100644
index e5ca4754..00000000
--- a/src/localStorage/load.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
-
-export const load = (storageKey) => {
-  if (isBrowser) {
-    return JSON.parse(window.localStorage.getItem(storageKey));
-  } else if (storageKey !== undefined) {
-    console.warn('storageKey support only on browser');
-    return undefined;
-  }
-};
diff --git a/src/localStorage/load.tsx b/src/localStorage/load.tsx
new file mode 100644
index 00000000..5970a1f3
--- /dev/null
+++ b/src/localStorage/load.tsx
@@ -0,0 +1,15 @@
+import type { StoredTableState } from '../types/options';
+
+const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
+export const load = (storageKey: string | undefined): Partial<StoredTableState> | undefined => {
+  if (isBrowser && storageKey) {
+    const item = window.localStorage.getItem(storageKey);
+    if (item === null) return undefined;
+    return JSON.parse(item) as Partial<StoredTableState>;
+  } else if (storageKey !== undefined && !isBrowser) {
+    console.warn('storageKey support only on browser');
+    return undefined;
+  }
+  return undefined;
+};
diff --git a/src/localStorage/save.js b/src/localStorage/save.tsx
similarity index 50%
rename from src/localStorage/save.js
rename to src/localStorage/save.tsx
index c6a573e9..b77c1201 100644
--- a/src/localStorage/save.js
+++ b/src/localStorage/save.tsx
@@ -1,4 +1,6 @@
-export const save = (storageKey, state) => {
+import type { MUIDataTableState } from '../types/options';
+
+export const save = (storageKey: string, state: MUIDataTableState): void => {
   const { selectedRows, data, displayData, ...savedState } = state;
 
   window.localStorage.setItem(storageKey, JSON.stringify(savedState));
diff --git a/src/plug-ins/DebounceSearchRender.js b/src/plug-ins/DebounceSearchRender.tsx
similarity index 54%
rename from src/plug-ins/DebounceSearchRender.js
rename to src/plug-ins/DebounceSearchRender.tsx
index 4817c8fd..8b264a66 100644
--- a/src/plug-ins/DebounceSearchRender.js
+++ b/src/plug-ins/DebounceSearchRender.tsx
@@ -2,24 +2,24 @@ import React from 'react';
 import { Grow, TextField, IconButton } from '@mui/material';
 import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
 import { withStyles } from 'tss-react/mui';
+import type { MUIDataTableOptions } from '../types/options';
 
-function debounce(func, wait, immediate) {
-  var timeout;
-  return function () {
-    var context = this,
-      args = arguments;
-    var later = function () {
+function debounce<T extends (...args: never[]) => void>(func: T, wait: number, immediate?: boolean) {
+  let timeout: ReturnType<typeof setTimeout> | null;
+  return function (this: unknown, ...args: Parameters<T>) {
+    const context = this;
+    const later = function () {
       timeout = null;
       if (!immediate) func.apply(context, args);
     };
-    var callNow = immediate && !timeout;
-    clearTimeout(timeout);
+    const callNow = immediate && !timeout;
+    if (timeout) clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
 }
 
-const defaultStyles = (theme) => ({
+const defaultStyles = (theme: { palette: { text: { secondary: string }; error: { main: string } } }) => ({
   main: {
     display: 'flex',
     flex: '1 0 auto',
@@ -39,31 +39,42 @@ const defaultStyles = (theme) => ({
   },
 });
 
-class _DebounceTableSearch extends React.Component {
-  handleTextChangeWrapper = (debouncedSearch) => {
-    return function (event) {
+interface DebounceSearchProps {
+  classes: Record<keyof ReturnType<typeof defaultStyles>, string>;
+  options: MUIDataTableOptions;
+  onSearch: (value: string) => void;
+  onHide: () => void;
+  searchText: string | null;
+  debounceWait: number;
+}
+
+class _DebounceTableSearch extends React.Component<DebounceSearchProps> {
+  searchField: HTMLInputElement | null = null;
+
+  handleTextChangeWrapper = (debouncedSearch: (value: string) => void) => {
+    return function (event: React.ChangeEvent<HTMLInputElement>) {
       debouncedSearch(event.target.value);
     };
   };
 
-  componentDidMount() {
+  override componentDidMount() {
     document.addEventListener('keydown', this.onKeyDown, false);
   }
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     document.removeEventListener('keydown', this.onKeyDown, false);
   }
 
-  onKeyDown = (event) => {
+  onKeyDown = (event: KeyboardEvent) => {
     if (event.keyCode === 27) {
       this.props.onHide();
     }
   };
 
-  render() {
+  override render() {
     const { classes, options, onHide, searchText, debounceWait } = this.props;
 
-    const debouncedSearch = debounce((value) => {
+    const debouncedSearch = debounce((value: string) => {
       this.props.onSearch(value);
     }, debounceWait);
 
@@ -77,14 +88,18 @@ class _DebounceTableSearch extends React.Component {
             variant={'standard'}
             className={classes.searchText}
             autoFocus={true}
-            InputProps={{
-              'data-test-id': options.textLabels.toolbar.search,
-              'aria-label': options.textLabels.toolbar.search,
+            slotProps={{
+              htmlInput: {
+                'data-testid': options.textLabels?.toolbar?.search,
+                'aria-label': options.textLabels?.toolbar?.search,
+              },
             }}
             defaultValue={searchText}
             onChange={this.handleTextChangeWrapper(debouncedSearch)}
             fullWidth={true}
-            inputRef={(el) => (this.searchField = el)}
+            inputRef={(el: HTMLInputElement | null) => {
+              this.searchField = el;
+            }}
             placeholder={options.searchPlaceholder}
             {...(options.searchProps ? options.searchProps : {})}
           />
@@ -97,11 +112,18 @@ class _DebounceTableSearch extends React.Component {
   }
 }
 
-var DebounceTableSearch = withStyles(_DebounceTableSearch, defaultStyles, { name: 'MUIDataTableSearch' });
+const DebounceTableSearch = withStyles(_DebounceTableSearch, defaultStyles, {
+  name: 'MUIDataTableSearch',
+}) as unknown as React.ComponentType<Omit<DebounceSearchProps, 'classes'>>;
 export { DebounceTableSearch };
 
 export function debounceSearchRender(debounceWait = 200) {
-  return (searchText, handleSearch, hideSearch, options) => {
+  return (
+    searchText: string,
+    handleSearch: (text: string) => void,
+    hideSearch: () => void,
+    options: MUIDataTableOptions,
+  ) => {
     return (
       <DebounceTableSearch
         searchText={searchText}
diff --git a/src/textLabels.js b/src/textLabels.tsx
similarity index 78%
rename from src/textLabels.js
rename to src/textLabels.tsx
index 34472780..21dd0bd8 100644
--- a/src/textLabels.js
+++ b/src/textLabels.tsx
@@ -1,10 +1,13 @@
 /*
  * Default text labels.
  */
-const getTextLabels = () => ({
+import type { MUIDataTableTextLabels } from './types/text-labels';
+
+const getTextLabels = (): MUIDataTableTextLabels => ({
   body: {
     noMatch: 'Sorry, no matching records found',
     toolTip: 'Sort',
+    columnHeaderTooltip: (column: { label: string }) => `Sort for ${column.label}`,
   },
   pagination: {
     next: 'Next Page',
diff --git a/src/types/callbacks.ts b/src/types/callbacks.ts
new file mode 100644
index 00000000..eb524fb3
--- /dev/null
+++ b/src/types/callbacks.ts
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { MUIDataTableOptions } from './options';
+
+export type SearchTextHandler = (searchText: string) => void;
+
+export type HideSearchHandler = () => void;
+
+export type CustomSearchRender = (
+  searchText: string,
+  handleSearch: SearchTextHandler,
+  hideSearch: HideSearchHandler,
+  options: MUIDataTableOptions,
+) => ReactNode;
diff --git a/src/types/columns.ts b/src/types/columns.ts
new file mode 100644
index 00000000..8c3f1e66
--- /dev/null
+++ b/src/types/columns.ts
@@ -0,0 +1,116 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { TableCell } from '@mui/material';
+import type { MUIDataTableCellValue, MUIDataTableMeta } from './data';
+import type { MUIDataTableFilterList, MUIDataTableSortOrder } from './options';
+
+export type MUIDataTableColumnDisplay = 'true' | 'false' | 'excluded' | 'always' | true | false;
+
+export type MUIDataTableFilterType = 'dropdown' | 'checkbox' | 'multiselect' | 'textField' | 'custom';
+
+export type MUIDataTableSortDirection = 'asc' | 'desc' | 'none';
+
+export interface MUIDataTableColumnState {
+  name: string;
+  label: string;
+  display: MUIDataTableColumnDisplay;
+  empty: boolean;
+  filter: boolean;
+  sort: boolean;
+  print: boolean;
+  searchable: boolean;
+  download: boolean;
+  viewColumns: boolean;
+  sortDirection: MUIDataTableSortDirection;
+  sortCompare: ((order: 'asc' | 'desc') => (a: { data: unknown }, b: { data: unknown }) => number) | null;
+  sortThirdClickReset: boolean;
+  sortDescFirst: boolean;
+  customHeadRender?: (
+    columnMeta: MUIDataTableColumnState & { index: number },
+    updateDirection: (columnIndex: number) => void,
+    sortOrder: MUIDataTableSortOrder,
+  ) => ReactNode;
+  customBodyRender?: (
+    value: MUIDataTableCellValue,
+    tableMeta: MUIDataTableMeta,
+    updateValue: (value: MUIDataTableCellValue) => void,
+  ) => ReactNode;
+  customBodyRenderLite?: (dataIndex: number, rowIndex: number) => ReactNode;
+  customHeadLabelRender?: (columnMeta: MUIDataTableColumnState & { index: number; colPos: number }) => ReactNode;
+  customFilterListOptions?: MUIDataTableCustomFilterListOptions;
+  customFilterListRender?: (value: string) => ReactNode;
+  setCellProps?: (
+    cellValue: MUIDataTableCellValue,
+    rowIndex: number,
+    columnIndex: number,
+  ) => ComponentProps<typeof TableCell>;
+  setCellHeaderProps?: (columnMeta: MUIDataTableColumnState & { index: number }) => ComponentProps<typeof TableCell>;
+  filterList?: string[];
+  filterOptions?: MUIDataTableColumnFilterOptions;
+  filterType?: MUIDataTableFilterType;
+  hint?: string;
+}
+
+export interface MUIDataTableColumnDef {
+  name: string;
+  label?: string;
+  options?: MUIDataTableColumnOptions;
+}
+
+export type MUIDataTableColumn = string | MUIDataTableColumnDef;
+
+export interface MUIDataTableColumnOptions {
+  display?: MUIDataTableColumnDisplay;
+  empty?: boolean;
+  filter?: boolean;
+  sort?: boolean;
+  print?: boolean;
+  searchable?: boolean;
+  download?: boolean;
+  viewColumns?: boolean;
+  filterList?: string[];
+  filterOptions?: readonly string[] | MUIDataTableColumnFilterOptions;
+  filterType?: MUIDataTableFilterType;
+  customHeadRender?: (
+    columnMeta: MUIDataTableColumnState & { index: number },
+    updateDirection: (columnIndex: number) => void,
+    sortOrder: MUIDataTableSortOrder,
+  ) => ReactNode;
+  customBodyRender?: (
+    value: MUIDataTableCellValue,
+    tableMeta: MUIDataTableMeta,
+    updateValue: (value: MUIDataTableCellValue) => void,
+  ) => ReactNode;
+  customBodyRenderLite?: (dataIndex: number, rowIndex: number) => ReactNode;
+  customHeadLabelRender?: (columnMeta: MUIDataTableColumnState & { index: number; colPos: number }) => ReactNode;
+  customFilterListOptions?: MUIDataTableCustomFilterListOptions;
+  customFilterListRender?: (value: string) => ReactNode;
+  setCellProps?: (
+    cellValue: MUIDataTableCellValue,
+    rowIndex: number,
+    columnIndex: number,
+  ) => ComponentProps<typeof TableCell>;
+  setCellHeaderProps?: (columnMeta: MUIDataTableColumnState & { index: number }) => ComponentProps<typeof TableCell>;
+  sortThirdClickReset?: boolean;
+  sortDescFirst?: boolean;
+  sortCompare?: (order: 'asc' | 'desc') => (a: { data: unknown }, b: { data: unknown }) => number;
+  sortDirection?: MUIDataTableSortDirection | null;
+  hint?: string;
+}
+
+export interface MUIDataTableColumnFilterOptions {
+  names?: readonly string[];
+  logic?: (value: MUIDataTableCellValue, filters: string[], row?: MUIDataTableCellValue[]) => boolean;
+  display?: (
+    filterList: MUIDataTableFilterList,
+    onChange: (value: string | string[], index: number, column: string) => void,
+    index: number,
+    column: MUIDataTableColumnState,
+  ) => ReactNode;
+  renderValue?: (value: string) => string;
+  fullWidth?: boolean;
+}
+
+export interface MUIDataTableCustomFilterListOptions {
+  render?: (value: string) => ReactNode;
+  update?: (filterList: MUIDataTableFilterList, filterPos: number, index: number) => MUIDataTableFilterList;
+}
diff --git a/src/types/components.ts b/src/types/components.ts
new file mode 100644
index 00000000..dab615d5
--- /dev/null
+++ b/src/types/components.ts
@@ -0,0 +1,40 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
+import type { TooltipProps } from '@mui/material/Tooltip';
+import type { CSSObject } from 'tss-react';
+import type { TableBodyProps } from '../components/TableBody';
+import type { TableFilterProps } from '../components/TableFilter';
+import type { TableFilterListProps } from '../components/TableFilterList';
+import type { TableFooterProps } from '../components/TableFooter';
+import type { TableHeadProps } from '../components/TableHead';
+import type { TableResizeProps } from '../components/TableResize';
+import type { TableToolbarProps } from '../components/TableToolbar';
+import type { TableToolbarSelectProps } from '../components/TableToolbarSelect';
+
+export type WithStyles<TStyleFn extends (...args: never[]) => Record<string, CSSObject>> = {
+  classes: Record<keyof ReturnType<TStyleFn>, string>;
+};
+
+export interface MUIDataTableComponents {
+  TableBody: ComponentType<TableBodyProps>;
+  TableFilter: ComponentType<TableFilterProps>;
+  TableFilterList: ComponentType<TableFilterListProps>;
+  TableFooter: ComponentType<TableFooterProps>;
+  TableHead: ComponentType<TableHeadProps>;
+  TableResize: ComponentType<TableResizeProps>;
+  TableToolbar: ComponentType<TableToolbarProps>;
+  TableToolbarSelect: ComponentType<TableToolbarSelectProps>;
+  Tooltip: ComponentType<TooltipProps>;
+  icons: Record<string, ComponentType<SvgIconProps>>;
+}
+
+export interface TableFilterListItemProps {
+  label: ReactNode;
+  onDelete: () => void;
+  className: string;
+  filterProps?: Record<string, unknown>;
+  itemKey?: number;
+  index?: number;
+  data?: string | string[];
+  columnNames?: Array<{ name: string; filterType: string }>;
+}
diff --git a/src/types/data.ts b/src/types/data.ts
new file mode 100644
index 00000000..8247e23c
--- /dev/null
+++ b/src/types/data.ts
@@ -0,0 +1,28 @@
+export type MUIDataTablePrimitive = string | number | boolean | null | undefined;
+
+export type MUIDataTableCellValue = MUIDataTablePrimitive | ReactNode | Date | readonly MUIDataTablePrimitive[];
+
+export type MUIDataTableArrayRow = readonly MUIDataTableCellValue[];
+
+export type MUIDataTableObjectRow = Record<string, MUIDataTableCellValue>;
+
+export type MUIDataTableData = readonly MUIDataTableArrayRow[] | readonly MUIDataTableObjectRow[];
+
+export interface MUIDataTableDisplayRow {
+  data: MUIDataTableCellValue[];
+  dataIndex: number;
+  index: number;
+}
+
+export interface MUIDataTableMeta<TValue = MUIDataTableCellValue> {
+  rowIndex: number;
+  columnIndex: number;
+  columnData: unknown;
+  rowData: MUIDataTableCellValue[];
+  tableData: MUIDataTableDisplayRow[];
+  tableState: MUIDataTableState;
+  currentTableData: MUIDataTableDisplayRow[];
+}
+
+import type { ReactNode } from 'react';
+import type { MUIDataTableState } from './options';
diff --git a/src/types/drag.ts b/src/types/drag.ts
new file mode 100644
index 00000000..178b2ae9
--- /dev/null
+++ b/src/types/drag.ts
@@ -0,0 +1,56 @@
+import type { ConnectDropTarget, DropTargetMonitor } from 'react-dnd';
+import type { MUIDataTableColumnState } from './columns';
+
+export interface HeaderDragItem {
+  type: 'HEADER';
+  colIndex: number;
+  headCellRefs: HeadCellRefs;
+}
+
+export type HeadCellRefs = Record<number, HTMLTableCellElement | null>;
+
+export interface ColumnModelItem {
+  left: number;
+  width: number;
+  columnIndex: number | null;
+  ref: HTMLElement;
+}
+
+export interface ColumnDropTimers {
+  columnShift?: ReturnType<typeof setTimeout>;
+}
+
+export interface HeadCellElement extends HTMLElement {
+  offsetLeft: number;
+  offsetWidth: number;
+  offsetParent: HTMLElement | null;
+}
+
+export interface HoverOptions {
+  item: HeaderDragItem;
+  mon: DropTargetMonitor<HeaderDragItem, unknown>;
+  index: number;
+  headCellRefs: HeadCellRefs;
+  updateColumnOrder: (columnOrder: number[], sourceColumnIndex: number, targetColumnIndex: number) => void;
+  columnOrder: number[];
+  transitionTime?: number;
+  tableRef: HTMLElement | null;
+  tableId: string;
+  timers: ColumnDropTimers;
+  columns: MUIDataTableColumnState[];
+}
+
+export interface UseColumnDropOptions {
+  index: number;
+  columnOrder: number[];
+  columns: MUIDataTableColumnState[];
+  headCellRefs: HeadCellRefs;
+  tableRef: HTMLElement | null;
+  tableId: string;
+  timers: ColumnDropTimers;
+  transitionTime?: number;
+  drop?: (item: HeaderDragItem, monitor: DropTargetMonitor<HeaderDragItem, unknown>) => void;
+  updateColumnOrder: (columnOrder: number[], sourceColumnIndex: number, targetColumnIndex: number) => void;
+}
+
+export type UseColumnDropResult = [ConnectDropTarget];
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..aa921513
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,59 @@
+export type {
+  MUIDataTablePrimitive,
+  MUIDataTableCellValue,
+  MUIDataTableArrayRow,
+  MUIDataTableObjectRow,
+  MUIDataTableData,
+  MUIDataTableDisplayRow,
+  MUIDataTableMeta,
+} from './data';
+export type {
+  MUIDataTableColumnDisplay,
+  MUIDataTableFilterType,
+  MUIDataTableSortDirection,
+  MUIDataTableColumnState,
+  MUIDataTableColumnDef,
+  MUIDataTableColumn,
+  MUIDataTableColumnOptions,
+  MUIDataTableColumnFilterOptions,
+  MUIDataTableCustomFilterListOptions,
+} from './columns';
+export type {
+  MUIDataTableFilterList,
+  MUIDataTableResponsive,
+  MUIDataTableFeatureFlag,
+  MUIDataTableSelectableRows,
+  MUIDataTableSelectToolbarPlacement,
+  MUIDataTableTableAction,
+  MUIDataTableOptions,
+  MUIDataTableDownloadOptions,
+  MUIDataTableDraggableColumns,
+  MUIDataTableResizableColumns,
+  MUIDataTableRowMeta,
+  MUIDataTableCellMeta,
+  MUIDataTableSelectedRow,
+  MUIDataTableSelectedRows,
+  MUIDataTableExpandedRows,
+  MUIDataTableSortOrder,
+  MUIDataTableState,
+  StoredTableState,
+} from './options';
+export type {
+  MUIDataTableTextLabels,
+  MUIDataTableBodyTextLabels,
+  MUIDataTablePaginationTextLabels,
+  MUIDataTableToolbarTextLabels,
+  MUIDataTableFilterTextLabels,
+  MUIDataTableViewColumnsTextLabels,
+  MUIDataTableSelectedRowsTextLabels,
+} from './text-labels';
+export type {
+  HeaderDragItem,
+  HeadCellRefs,
+  ColumnModelItem,
+  ColumnDropTimers,
+  UseColumnDropOptions,
+  UseColumnDropResult,
+} from './drag';
+export type { WithStyles, MUIDataTableComponents, TableFilterListItemProps } from './components';
+export type { SearchTextHandler, HideSearchHandler, CustomSearchRender } from './callbacks';
diff --git a/src/types/options.ts b/src/types/options.ts
new file mode 100644
index 00000000..19b6fb13
--- /dev/null
+++ b/src/types/options.ts
@@ -0,0 +1,246 @@
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { Table, TableRow } from '@mui/material';
+import type { MUIDataTableCellValue, MUIDataTableDisplayRow } from './data';
+export type { MUIDataTableCellValue, MUIDataTableDisplayRow } from './data';
+import type { MUIDataTableColumnFilterOptions, MUIDataTableColumnState, MUIDataTableFilterType } from './columns';
+import type { MUIDataTableTextLabels } from './text-labels';
+
+export type MUIDataTableFilterList = string[][];
+
+export type MUIDataTableResponsive =
+  | 'standard'
+  | 'vertical'
+  | 'verticalAlways'
+  | 'simple'
+  | 'stacked'
+  | 'stackedFullWidth'
+  | 'scrollMaxHeight'
+  | 'scrollFullHeight'
+  | 'scrollFullHeightFullWidth';
+
+export type MUIDataTableFeatureFlag = boolean | 'true' | 'false' | 'disabled';
+
+export type MUIDataTableSelectableRows = boolean | 'none' | 'single' | 'multiple';
+
+export type MUIDataTableSelectToolbarPlacement = 'replace' | 'above' | 'none' | 'always';
+
+export type MUIDataTableTableAction =
+  | 'changePage'
+  | 'changeRowsPerPage'
+  | 'sort'
+  | 'filterChange'
+  | 'search'
+  | 'searchClose'
+  | 'searchOpen'
+  | 'viewColumnsChange'
+  | 'rowSelectionChange'
+  | 'rowExpansionChange'
+  | 'columnOrderChange'
+  | 'propsUpdate'
+  | 'tableInitialized'
+  | 'onFilterDialogOpen'
+  | 'onFilterDialogClose'
+  | 'onSearchClose'
+  | 'onSearchOpen';
+
+export interface MUIDataTableOptions {
+  caseSensitive?: boolean;
+  columnOrder?: number[];
+  count?: number;
+  confirmFilters?: boolean;
+  consoleWarnings?: boolean;
+  customFilterDialogFooter?: (currentFilterList: MUIDataTableFilterList, applyFilters: () => void) => ReactNode;
+  customFooter?:
+    | ReactElement
+    | ((
+        count: number,
+        page: number,
+        rowsPerPage: number,
+        changeRowsPerPage: (rowsPerPage: number) => void,
+        changePage: (page: number) => void,
+        textLabels: MUIDataTableTextLabels['pagination'],
+      ) => ReactNode);
+  customRowRender?: (data: MUIDataTableCellValue[], dataIndex: number, rowIndex: number) => ReactNode;
+  customSearch?: (
+    searchQuery: string,
+    currentRow: MUIDataTableCellValue[],
+    columns: MUIDataTableColumnState[],
+  ) => boolean;
+  customSearchRender?:
+    | ReactElement
+    | ((
+        searchText: string | null,
+        handleSearch: (text: string) => void,
+        hideSearch: () => void,
+        options: MUIDataTableOptions,
+      ) => ReactNode);
+  customSort?: (data: MUIDataTableDisplayRow[], colIndex: number, order: 'asc' | 'desc') => MUIDataTableDisplayRow[];
+  customToolbar?: (data: { displayData: MUIDataTableDisplayRow[] }) => ReactNode;
+  customToolbarSelect?: (
+    selectedRows: MUIDataTableSelectedRows,
+    displayData: MUIDataTableDisplayRow[],
+    setSelectedRows: (rows: number[]) => void,
+  ) => ReactNode;
+  draggableColumns?: MUIDataTableDraggableColumns;
+  enableNestedDataAccess?: string;
+  expandableRows?: boolean;
+  expandableRowsHeader?: boolean;
+  expandableRowsOnClick?: boolean;
+  disableToolbarSelect?: boolean;
+  download?: MUIDataTableFeatureFlag;
+  downloadOptions?: MUIDataTableDownloadOptions;
+  elevation?: number;
+  filter?: MUIDataTableFeatureFlag;
+  filterOptions?: MUIDataTableColumnFilterOptions;
+  filterArrayFullMatch?: boolean;
+  filterType?: MUIDataTableFilterType;
+  fixedHeader?: boolean;
+  fixedSelectColumn?: boolean;
+  fixedHeaderOptions?: { xAxis?: boolean; yAxis?: boolean };
+  getTextLabels?: () => MUIDataTableTextLabels;
+  isRowExpandable?: (dataIndex: number, expandedRows: MUIDataTableExpandedRows) => boolean;
+  isRowSelectable?: (dataIndex: number, selectedRows: MUIDataTableSelectedRows) => boolean;
+  jumpToPage?: boolean;
+  onCellClick?: (cellData: MUIDataTableCellValue | ReactNode, cellMeta: MUIDataTableCellMeta) => void;
+  onDownload?: (
+    buildHead: (columns: MUIDataTableColumnState[]) => string,
+    buildBody: (data: MUIDataTableDisplayRow[]) => string,
+    columns: MUIDataTableColumnState[],
+    data: MUIDataTableDisplayRow[],
+  ) => string | false;
+  onFilterChange?: (
+    changedColumn: string | null,
+    filterList: MUIDataTableFilterList,
+    type: string,
+    changedColumnIndex?: number,
+    displayData?: MUIDataTableDisplayRow[],
+  ) => void;
+  onFilterChipClose?: (index: number, removedFilter: string, filterList: MUIDataTableFilterList) => void;
+  onFilterConfirm?: (filterList: MUIDataTableFilterList) => void;
+  onFilterDialogOpen?: () => void;
+  onFilterDialogClose?: () => void;
+  onRowClick?: (rowData: MUIDataTableCellValue[], rowMeta: MUIDataTableRowMeta) => void;
+  onRowsExpand?: (currentRowsExpanded: MUIDataTableExpandedRows, allRowsExpanded: MUIDataTableExpandedRows) => void;
+  onRowExpansionChange?: (
+    currentRowsExpanded: MUIDataTableExpandedRows,
+    allRowsExpanded: MUIDataTableExpandedRows,
+    rowsExpanded: number[],
+  ) => void;
+  onRowsSelect?: (currentRowsSelected: MUIDataTableSelectedRows, allRowsSelected: MUIDataTableSelectedRows) => void;
+  onRowSelectionChange?: (
+    currentRowsSelected: MUIDataTableSelectedRows,
+    allRowsSelected: MUIDataTableSelectedRows,
+    rowsSelected: number[],
+  ) => void;
+  onTableChange?: (action: MUIDataTableTableAction, tableState: MUIDataTableState) => void;
+  onTableInit?: (action: string, tableState: MUIDataTableState) => void;
+  onSearchClose?: () => void;
+  onSearchOpen?: () => void;
+  page?: number;
+  pagination?: boolean;
+  print?: MUIDataTableFeatureFlag;
+  searchProps?: Record<string, unknown>;
+  selectableRows?: MUIDataTableSelectableRows;
+  selectableRowsHeader?: boolean;
+  selectableRowsHideCheckboxes?: boolean;
+  selectableRowsOnClick?: boolean;
+  selectToolbarPlacement?: MUIDataTableSelectToolbarPlacement;
+  serverSide?: boolean;
+  serverSideFilterList?: string[][] | null;
+  tableId?: string;
+  tableBodyHeight?: string;
+  tableBodyMaxHeight?: string | null;
+  renderExpandableRow?: (rowData: MUIDataTableCellValue[], rowMeta: MUIDataTableRowMeta) => ReactNode;
+  resizableColumns?: boolean | MUIDataTableResizableColumns;
+  responsive?: MUIDataTableResponsive;
+  rowHover?: boolean;
+  rowsExpanded?: number[];
+  rowsPerPage?: number;
+  rowsPerPageOptions?: number[];
+  rowsSelected?: number[];
+  search?: MUIDataTableFeatureFlag;
+  searchOpen?: boolean;
+  searchAlwaysOpen?: boolean;
+  searchPlaceholder?: string;
+  searchText?: string;
+  setFilterChipProps?: (columnIndex: number, columnName: string, filterValue: string) => Record<string, unknown>;
+  setRowProps?: (row: MUIDataTableCellValue[], dataIndex: number, rowIndex: number) => ComponentProps<typeof TableRow>;
+  setTableProps?: () => ComponentProps<typeof Table>;
+  sort?: boolean;
+  sortOrder?: MUIDataTableSortOrder;
+  sortFilterList?: boolean;
+  storageKey?: string;
+  textLabels?: Partial<MUIDataTableTextLabels>;
+  viewColumns?: MUIDataTableFeatureFlag;
+}
+
+export interface MUIDataTableDownloadOptions {
+  filename?: string;
+  separator?: string;
+  filterOptions?: {
+    useDisplayedColumnsOnly?: boolean;
+    useDisplayedRowsOnly?: boolean;
+  };
+}
+
+export interface MUIDataTableDraggableColumns {
+  enabled?: boolean;
+  transitionTime?: number;
+}
+
+export interface MUIDataTableResizableColumns {
+  enabled?: boolean;
+}
+
+export interface MUIDataTableRowMeta {
+  dataIndex: number;
+  rowIndex: number;
+}
+
+export interface MUIDataTableCellMeta extends MUIDataTableRowMeta {
+  colIndex: number;
+  event: React.MouseEvent<HTMLElement>;
+}
+
+export interface MUIDataTableSelectedRow {
+  index: number;
+  dataIndex: number;
+}
+
+export interface MUIDataTableSelectedRows {
+  data: MUIDataTableSelectedRow[];
+  lookup: Record<number, boolean>;
+}
+
+export type MUIDataTableExpandedRows = MUIDataTableSelectedRows;
+
+export interface MUIDataTableSortOrder {
+  name: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface MUIDataTableState {
+  activeColumn: number | null;
+  announceText: string | null;
+  count: number;
+  columns: MUIDataTableColumnState[];
+  columnOrder: number[];
+  data: MUIDataTableDisplayRow[];
+  displayData: MUIDataTableDisplayRow[];
+  expandedRows: MUIDataTableExpandedRows;
+  filterData: string[][];
+  filterList: MUIDataTableFilterList;
+  page: number;
+  previousSelectedRow: MUIDataTableSelectedRow | null;
+  rowsPerPage: number;
+  searchProps: Record<string, unknown>;
+  searchText: string | null;
+  selectedRows: MUIDataTableSelectedRows;
+  showResponsive: boolean;
+  sortOrder: Partial<MUIDataTableSortOrder>;
+}
+
+export type StoredTableState = Pick<
+  MUIDataTableState,
+  'columns' | 'columnOrder' | 'filterList' | 'rowsPerPage' | 'sortOrder' | 'page' | 'selectedRows' | 'expandedRows'
+>;
diff --git a/src/types/text-labels.ts b/src/types/text-labels.ts
new file mode 100644
index 00000000..4367da49
--- /dev/null
+++ b/src/types/text-labels.ts
@@ -0,0 +1,47 @@
+export interface MUIDataTableTextLabels {
+  body: MUIDataTableBodyTextLabels;
+  pagination: MUIDataTablePaginationTextLabels;
+  toolbar: MUIDataTableToolbarTextLabels;
+  filter: MUIDataTableFilterTextLabels;
+  viewColumns: MUIDataTableViewColumnsTextLabels;
+  selectedRows: MUIDataTableSelectedRowsTextLabels;
+}
+
+export interface MUIDataTableBodyTextLabels {
+  noMatch: string | React.ReactNode;
+  toolTip: string;
+  columnHeaderTooltip: (column: { label: string }) => string;
+}
+
+export interface MUIDataTablePaginationTextLabels {
+  next: string;
+  previous: string;
+  rowsPerPage: string;
+  displayRows: string;
+  jumpToPage: string;
+}
+
+export interface MUIDataTableToolbarTextLabels {
+  search: string;
+  downloadCsv: string;
+  print: string;
+  viewColumns: string;
+  filterTable: string;
+}
+
+export interface MUIDataTableFilterTextLabels {
+  all: string;
+  title: string;
+  reset: string;
+}
+
+export interface MUIDataTableViewColumnsTextLabels {
+  title: string;
+  titleAria: string;
+}
+
+export interface MUIDataTableSelectedRowsTextLabels {
+  text: string;
+  delete: string;
+  deleteAria: string;
+}
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index 67d0b9d7..00000000
--- a/src/utils.js
+++ /dev/null
@@ -1,161 +0,0 @@
-function buildMap(rows) {
-  if (!rows || !Array.isArray(rows)) return {};
-  return rows.reduce((accum, row) => {
-    if (row != null && row.dataIndex !== undefined) {
-      accum[row.dataIndex] = true;
-    }
-    return accum;
-  }, {});
-}
-
-function escapeDangerousCSVCharacters(data) {
-  if (typeof data === 'string') {
-    // Places single quote before the appearance of dangerous characters if they
-    // are the first in the data string.
-    return data.replace(/^\+|^\-|^\=|^\@/g, "'$&");
-  }
-
-  return data;
-}
-
-function warnDeprecated(warning, consoleWarnings = true) {
-  let consoleWarn = typeof consoleWarnings === 'function' ? consoleWarnings : console.warn;
-  if (consoleWarnings) {
-    consoleWarn(`Deprecation Notice:  ${warning}`);
-  }
-}
-
-function warnInfo(warning, consoleWarnings = true) {
-  let consoleWarn = typeof consoleWarnings === 'function' ? consoleWarnings : console.warn;
-  if (consoleWarnings) {
-    consoleWarn(`${warning}`);
-  }
-}
-
-function getPageValue(count, rowsPerPage, page) {
-  const totalPages = count <= rowsPerPage ? 1 : Math.ceil(count / rowsPerPage);
-
-  // `page` is 0-indexed
-  return page >= totalPages ? totalPages - 1 : page;
-}
-
-function getCollatorComparator() {
-  if (!!Intl) {
-    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
-    return collator.compare;
-  }
-
-  const fallbackComparator = (a, b) => a.localeCompare(b);
-  return fallbackComparator;
-}
-
-function sortCompare(order) {
-  return (a, b) => {
-    if (a == null || b == null) return 0;
-    var aData = a.data === null || typeof a.data === 'undefined' ? '' : a.data;
-    var bData = b.data === null || typeof b.data === 'undefined' ? '' : b.data;
-    return (
-      (typeof aData.localeCompare === 'function' ? aData.localeCompare(bData) : aData - bData) *
-      (order === 'asc' ? 1 : -1)
-    );
-  };
-}
-
-function buildCSV(columns, data, options) {
-  const replaceDoubleQuoteInString = (columnData) =>
-    typeof columnData === 'string' ? columnData.replace(/\"/g, '""') : columnData;
-
-  const buildHead = (columns) => {
-    return (
-      columns
-        .reduce(
-          (soFar, column) =>
-            column.download
-              ? soFar +
-                '"' +
-                escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name)) +
-                '"' +
-                options.downloadOptions.separator
-              : soFar,
-          '',
-        )
-        .slice(0, -1) + '\r\n'
-    );
-  };
-  const CSVHead = buildHead(columns);
-
-  const buildBody = (data) => {
-    if (!data.length) return '';
-    return data
-      .reduce(
-        (soFar, row) =>
-          soFar +
-          '"' +
-          row.data
-            .filter((_, index) => columns[index].download)
-            .map((columnData) => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
-            .join('"' + options.downloadOptions.separator + '"') +
-          '"\r\n',
-        '',
-      )
-      .trim();
-  };
-  const CSVBody = buildBody(data);
-
-  const csv = options.onDownload
-    ? options.onDownload(buildHead, buildBody, columns, data)
-    : `${CSVHead}${CSVBody}`.trim();
-
-  return csv;
-}
-
-function downloadCSV(csv, filename) {
-  const blob = new Blob([csv], { type: 'text/csv' });
-
-  /* taken from react-csv */
-  if (navigator && navigator.msSaveOrOpenBlob) {
-    navigator.msSaveOrOpenBlob(blob, filename);
-  } else {
-    const dataURI = `data:text/csv;charset=utf-8,${csv}`;
-
-    const URL = window.URL || window.webkitURL;
-    let downloadURI = dataURI;
-    if (URL && typeof URL.createObjectURL === 'function') {
-      try {
-        downloadURI = URL.createObjectURL(blob);
-      } catch (err) {
-        downloadURI = dataURI;
-      }
-    }
-
-    let link = document.createElement('a');
-    link.setAttribute('href', downloadURI);
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-}
-
-function createCSVDownload(columns, data, options, downloadCSV) {
-  const csv = buildCSV(columns, data, options);
-
-  if (options.onDownload && csv === false) {
-    return;
-  }
-
-  downloadCSV(csv, options.downloadOptions.filename);
-}
-
-export {
-  buildMap,
-  getPageValue,
-  getCollatorComparator,
-  sortCompare,
-  createCSVDownload,
-  buildCSV,
-  downloadCSV,
-  warnDeprecated,
-  warnInfo,
-  escapeDangerousCSVCharacters,
-};
diff --git a/src/utils.tsx b/src/utils.tsx
new file mode 100644
index 00000000..e4d32850
--- /dev/null
+++ b/src/utils.tsx
@@ -0,0 +1,181 @@
+import type { MUIDataTableColumnState } from './types/columns';
+import type { MUIDataTableDisplayRow } from './types/data';
+import type { MUIDataTableOptions, MUIDataTableSelectedRow } from './types/options';
+
+interface LegacyNavigator extends Navigator {
+  msSaveOrOpenBlob?: (blob: Blob, defaultName?: string) => boolean;
+}
+
+function buildMap(rows?: readonly MUIDataTableSelectedRow[] | null): Record<number, boolean> {
+  if (!rows || !Array.isArray(rows)) return {};
+  return rows.reduce((accum: Record<number, boolean>, row) => {
+    if (row != null && row.dataIndex !== undefined) {
+      accum[row.dataIndex] = true;
+    }
+    return accum;
+  }, {});
+}
+
+function escapeDangerousCSVCharacters<T>(data: T): T | string {
+  if (typeof data === 'string') {
+    return data.replace(/^\+|^\-|^\=|^\@/g, "'$&");
+  }
+
+  return data;
+}
+
+function warnDeprecated(warning: string, consoleWarnings: boolean | ((message: string) => void) = true): void {
+  const consoleWarn = typeof consoleWarnings === 'function' ? consoleWarnings : console.warn;
+  if (consoleWarnings) {
+    consoleWarn(`Deprecation Notice:  ${warning}`);
+  }
+}
+
+function warnInfo(warning: string, consoleWarnings: boolean | ((message: string) => void) = true): void {
+  const consoleWarn = typeof consoleWarnings === 'function' ? consoleWarnings : console.warn;
+  if (consoleWarnings) {
+    consoleWarn(`${warning}`);
+  }
+}
+
+function getPageValue(count: number, rowsPerPage: number, page: number): number {
+  const totalPages = count <= rowsPerPage ? 1 : Math.ceil(count / rowsPerPage);
+
+  return page >= totalPages ? totalPages - 1 : page;
+}
+
+function getCollatorComparator(): (a: string, b: string) => number {
+  if (typeof Intl !== 'undefined') {
+    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+    return collator.compare;
+  }
+
+  const fallbackComparator = (a: string, b: string) => a.localeCompare(b);
+  return fallbackComparator;
+}
+
+function sortCompare(order: 'asc' | 'desc'): (a: { data: unknown }, b: { data: unknown }) => number {
+  return (a, b) => {
+    if (a == null || b == null) return 0;
+    const aData = a.data === null || typeof a.data === 'undefined' ? '' : a.data;
+    const bData = b.data === null || typeof b.data === 'undefined' ? '' : b.data;
+    return (
+      (typeof (aData as string).localeCompare === 'function'
+        ? (aData as string).localeCompare(bData as string)
+        : (aData as number) - (bData as number)) * (order === 'asc' ? 1 : -1)
+    );
+  };
+}
+
+function buildCSV(
+  columns: MUIDataTableColumnState[],
+  data: MUIDataTableDisplayRow[],
+  options: Pick<MUIDataTableOptions, 'downloadOptions' | 'onDownload'>,
+): string | false {
+  const replaceDoubleQuoteInString = (columnData: unknown) =>
+    typeof columnData === 'string' ? columnData.replace(/\"/g, '""') : columnData;
+
+  const buildHead = (cols: MUIDataTableColumnState[]) => {
+    return (
+      cols
+        .reduce(
+          (soFar: string, column) =>
+            column.download
+              ? soFar +
+                '"' +
+                escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name) as string) +
+                '"' +
+                options.downloadOptions!.separator
+              : soFar,
+          '',
+        )
+        .slice(0, -1) + '\r\n'
+    );
+  };
+  const CSVHead = buildHead(columns);
+
+  const buildBody = (rows: MUIDataTableDisplayRow[]) => {
+    if (!rows.length) return '';
+    return rows
+      .reduce(
+        (soFar: string, row) =>
+          soFar +
+          '"' +
+          row.data
+            .filter((_, index) => columns[index]?.download)
+            .map((columnData) => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
+            .join('"' + options.downloadOptions!.separator + '"') +
+          '"\r\n',
+        '',
+      )
+      .trim();
+  };
+  const CSVBody = buildBody(data);
+
+  const csv = options.onDownload
+    ? options.onDownload(
+        buildHead as unknown as (columns: MUIDataTableColumnState[]) => string,
+        buildBody as unknown as (data: MUIDataTableDisplayRow[]) => string,
+        columns,
+        data,
+      )
+    : `${CSVHead}${CSVBody}`.trim();
+
+  return csv;
+}
+
+function downloadCSV(csv: string, filename: string): void {
+  const blob = new Blob([csv], { type: 'text/csv' });
+
+  const legacyNavigator = navigator as LegacyNavigator;
+  if (legacyNavigator && legacyNavigator.msSaveOrOpenBlob) {
+    legacyNavigator.msSaveOrOpenBlob(blob, filename);
+  } else {
+    const dataURI = `data:text/csv;charset=utf-8,${csv}`;
+
+    const URL = window.URL || (window as unknown as { webkitURL: typeof window.URL }).webkitURL;
+    let downloadURI = dataURI;
+    if (URL && typeof URL.createObjectURL === 'function') {
+      try {
+        downloadURI = URL.createObjectURL(blob);
+      } catch {
+        downloadURI = dataURI;
+      }
+    }
+
+    const link = document.createElement('a');
+    link.setAttribute('href', downloadURI);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
+function createCSVDownload(
+  columns: MUIDataTableColumnState[],
+  data: MUIDataTableDisplayRow[],
+  options: Pick<MUIDataTableOptions, 'downloadOptions' | 'onDownload'>,
+  downloadCSVFn: (csv: string, filename: string) => void,
+): void {
+  const csv = buildCSV(columns, data, options);
+
+  if (options.onDownload && csv === false) {
+    return;
+  }
+
+  downloadCSVFn(csv as string, options.downloadOptions!.filename!);
+}
+
+export {
+  buildMap,
+  getPageValue,
+  getCollatorComparator,
+  sortCompare,
+  createCSVDownload,
+  buildCSV,
+  downloadCSV,
+  warnDeprecated,
+  warnInfo,
+  escapeDangerousCSVCharacters,
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..15416fd5
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "es2020",
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "types": [],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  },
+  "include": [
+    "./src/"
+  ]
+}
\ No newline at end of file
diff --git a/vitest.config.mts b/vitest.config.mts
index 1411dea3..b05ddba0 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -2,20 +2,9 @@ import swc from 'unplugin-swc';
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  oxc: false,
   plugins: [
-    swc.vite({
-      jsc: {
-        parser: {
-          syntax: 'ecmascript',
-          jsx: true,
-        },
-        transform: {
-          react: {
-            runtime: 'automatic',
-          },
-        },
-      },
-    }),
+    swc.vite(),
   ],
   test: {
     environment: 'jsdom',
diff --git a/webpack.config.js b/webpack.config.js
index 470a9a47..cf2a46a3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,12 +19,30 @@ module.exports = {
     hot: true,
     port: process.env.PORT || 5050,
   },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+  },
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules/,
-        use: ['swc-loader'],
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
       },
       {
         test: /\.css$/i,