diff --git a/.changeset/quiet-rockets-throw.md b/.changeset/quiet-rockets-throw.md
new file mode 100644
index 0000000000..a73dbeb51b
--- /dev/null
+++ b/.changeset/quiet-rockets-throw.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new DataTable component.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index d8f289d019..e138c9bdd6 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -100,7 +100,7 @@
   display: flex;
 }
 
-.canon-TablePagination {
+.canon-DataTablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
   justify-content: space-between;
@@ -108,19 +108,23 @@
   display: flex;
 }
 
-.canon-TablePagination--left {
+.canon-DataTablePagination--left {
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-.canon-TablePagination--right {
+.canon-DataTablePagination--right {
   justify-content: space-between;
   align-items: center;
   gap: var(--canon-space-2);
   display: flex;
 }
 
+.canon-DataTablePagination--select {
+  min-width: 168px;
+}
+
 .canon-Flex {
   display: flex;
 }
diff --git a/packages/canon/css/datatable.css b/packages/canon/css/datatable.css
index 1773f6b980..081bc11ce9 100644
--- a/packages/canon/css/datatable.css
+++ b/packages/canon/css/datatable.css
@@ -1,4 +1,4 @@
-.canon-TablePagination {
+.canon-DataTablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
   justify-content: space-between;
@@ -6,15 +6,19 @@
   display: flex;
 }
 
-.canon-TablePagination--left {
+.canon-DataTablePagination--left {
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-.canon-TablePagination--right {
+.canon-DataTablePagination--right {
   justify-content: space-between;
   align-items: center;
   gap: var(--canon-space-2);
   display: flex;
 }
+
+.canon-DataTablePagination--select {
+  min-width: 168px;
+}
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 395b8ccde8..46fd6f05d1 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9324,7 +9324,7 @@
   display: flex;
 }
 
-.canon-TablePagination {
+.canon-DataTablePagination {
   padding-top: var(--canon-space-3);
   border-top: 1px solid var(--canon-border);
   justify-content: space-between;
@@ -9332,19 +9332,23 @@
   display: flex;
 }
 
-.canon-TablePagination--left {
+.canon-DataTablePagination--left {
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-.canon-TablePagination--right {
+.canon-DataTablePagination--right {
   justify-content: space-between;
   align-items: center;
   gap: var(--canon-space-2);
   display: flex;
 }
 
+.canon-DataTablePagination--select {
+  min-width: 168px;
+}
+
 .canon-Flex {
   display: flex;
 }
diff --git a/packages/canon/src/components/DataTable/DataTable.stories.tsx b/packages/canon/src/components/DataTable/DataTable.stories.tsx
index 9bcdc23ad3..3119821d92 100644
--- a/packages/canon/src/components/DataTable/DataTable.stories.tsx
+++ b/packages/canon/src/components/DataTable/DataTable.stories.tsx
@@ -16,7 +16,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { DataTable } from '.';
-import { data, Component } from './mocked-components';
+import { data, DataProps } from './mocked-components';
 import { columns } from './mocked-columns';
 import {
   flexRender,
@@ -34,7 +34,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => {
-    const table = useReactTable<Component>({
+    const table = useReactTable<DataProps>({
       data,
       columns,
       getCoreRowModel: getCoreRowModel(),
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx
index 7a45b111b9..a2f931aed6 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx
@@ -23,7 +23,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { data, Component } from '../mocked-components';
+import { data, DataProps } from '../mocked-components';
 import { columns } from '../mocked-columns';
 import { DataTable } from '../DataTable';
 
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => {
-    const table = useReactTable<Component>({
+    const table = useReactTable<DataProps>({
       data,
       columns,
       getCoreRowModel: getCoreRowModel(),
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
index 0117552401..ff2e8e232c 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css
@@ -1,4 +1,4 @@
-.canon-TablePagination {
+.canon-DataTablePagination {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6,15 +6,19 @@
   border-top: 1px solid var(--canon-border);
 }
 
-.canon-TablePagination--left {
+.canon-DataTablePagination--left {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.canon-TablePagination--right {
+.canon-DataTablePagination--right {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--canon-space-2);
 }
+
+.canon-DataTablePagination--select {
+  min-width: 168px;
+}
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index c85b90f743..ef74d12db6 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
@@ -36,10 +36,10 @@ const DataTablePagination = forwardRef(
     return (
       <div
         ref={ref}
-        className={clsx('canon-TablePagination', className)}
+        className={clsx('canon-DataTablePagination', className)}
         {...rest}
       >
-        <div className="canon-TablePagination--left">
+        <div className="canon-DataTablePagination--left">
           <Select
             name="pageSize"
             size="small"
@@ -55,9 +55,10 @@ const DataTablePagination = forwardRef(
             onValueChange={value => {
               table?.setPageSize(Number(value));
             }}
+            className="canon-DataTablePagination--select"
           />
         </div>
-        <div className="canon-TablePagination--right">
+        <div className="canon-DataTablePagination--right">
           <Text variant="body">{`${(pageIndex ?? 0) * (pageSize ?? 10) + 1} - ${
             ((pageIndex ?? 0) + 1) * (pageSize ?? 10)
           } of ${table?.getRowCount()}`}</Text>
diff --git a/packages/canon/src/components/DataTable/mocked-columns.tsx b/packages/canon/src/components/DataTable/mocked-columns.tsx
index 34bfb49863..e140f41702 100644
--- a/packages/canon/src/components/DataTable/mocked-columns.tsx
+++ b/packages/canon/src/components/DataTable/mocked-columns.tsx
@@ -15,11 +15,11 @@
  */
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Component } from './mocked-components';
+import { DataProps } from './mocked-components';
 import { Checkbox } from '../Checkbox';
 import { Text } from '../Text';
 
-export const columns: ColumnDef<Component>[] = [
+export const columns: ColumnDef<DataProps>[] = [
   {
     id: 'select',
     header: ({ table }) => (
diff --git a/packages/canon/src/components/DataTable/mocked-components.ts b/packages/canon/src/components/DataTable/mocked-components.ts
index 35b43d887f..dc1c0a0e88 100644
--- a/packages/canon/src/components/DataTable/mocked-components.ts
+++ b/packages/canon/src/components/DataTable/mocked-components.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export interface Component {
+export interface DataProps {
   name: string;
   owner: string;
   type: 'documentation' | 'library' | 'service' | 'website' | 'other';
@@ -21,7 +21,7 @@ export interface Component {
   tags?: string[];
 }
 
-export const data: Component[] = [
+export const data: DataProps[] = [
   {
     name: 'authentication-and-authorization-service',
     owner: 'security-team',