diff --git a/packages/canon/src/components/DataTable/DataTable.stories.tsx b/packages/canon/src/components/DataTable/DataTable.stories.tsx
index 975a68c165..c9f8654f18 100644
--- a/packages/canon/src/components/DataTable/DataTable.stories.tsx
+++ b/packages/canon/src/components/DataTable/DataTable.stories.tsx
@@ -23,6 +23,7 @@ import {
   getCoreRowModel,
   getPaginationRowModel,
   useReactTable,
+  PaginationState,
 } from '@tanstack/react-table';
 import { useState } from 'react';
 
@@ -100,7 +101,7 @@ export const Uncontrolled: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [pagination, setPagination] = useState({
+    const [pagination, setPagination] = useState<PaginationState>({
       pageIndex: 4,
       pageSize: 5,
     });
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index 692bd13f76..c1c73ee13c 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
@@ -40,24 +40,26 @@ const DataTablePagination = forwardRef(
         {...rest}
       >
         <div className="canon-DataTablePagination--left">
-          <Select
-            name="pageSize"
-            size="small"
-            placeholder="Show 10 results"
-            options={[
-              { label: 'Show 5 results', value: '5' },
-              { label: 'Show 10 results', value: '10' },
-              { label: 'Show 20 results', value: '20' },
-              { label: 'Show 30 results', value: '30' },
-              { label: 'Show 40 results', value: '40' },
-              { label: 'Show 50 results', value: '50' },
-            ]}
-            value={pageSize?.toString()}
-            onValueChange={value => {
-              table?.setPageSize(Number(value));
-            }}
-            className="canon-DataTablePagination--select"
-          />
+          {!table.options.manualPagination && (
+            <Select
+              name="pageSize"
+              size="small"
+              placeholder="Show 10 results"
+              options={[
+                { label: 'Show 5 results', value: '5' },
+                { label: 'Show 10 results', value: '10' },
+                { label: 'Show 20 results', value: '20' },
+                { label: 'Show 30 results', value: '30' },
+                { label: 'Show 40 results', value: '40' },
+                { label: 'Show 50 results', value: '50' },
+              ]}
+              value={pageSize?.toString()}
+              onValueChange={value => {
+                table?.setPageSize(Number(value));
+              }}
+              className="canon-DataTablePagination--select"
+            />
+          )}
         </div>
         <div className="canon-DataTablePagination--right">
           <Text variant="body">{`${(pageIndex ?? 0) * (pageSize ?? 10) + 1} - ${