+ );
+ },
+);
+
+DataTablePagination.displayName = 'DataTablePagination';
+
+export { DataTablePagination };
diff --git a/packages/canon/src/components/DataTable/Pagination/types.ts b/packages/canon/src/components/DataTable/Pagination/types.ts
new file mode 100644
index 0000000000..b2a895c465
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Pagination/types.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @public */
+export interface DataTablePaginationProps
+ extends React.HTMLAttributes {}
diff --git a/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css b/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
new file mode 100644
index 0000000000..6cdd5fb390
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Root/DataTableRoot.styles.css
@@ -0,0 +1,5 @@
+.canon-DataTableRoot {
+ display: flex;
+ flex-direction: column;
+ gap: var(--canon-space-3);
+}
diff --git a/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx b/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
new file mode 100644
index 0000000000..8207fe4412
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Root/DataTableRoot.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef, createContext, useContext } from 'react';
+import clsx from 'clsx';
+import { DataTableRootProps } from './types';
+import { Table } from '@tanstack/react-table';
+
+type DataTableContextType = {
+ table: Table;
+};
+
+/** @public */
+export const DataTableContext = createContext | null>(
+ null,
+);
+
+/** @public */
+const DataTableRoot = forwardRef(
+ (
+ props: DataTableRootProps,
+ ref: React.ForwardedRef,
+ ) => {
+ const { className, table, ...rest } = props;
+
+ return (
+
+
+
+ );
+ },
+);
+
+DataTableRoot.displayName = 'DataTableRoot';
+
+export { DataTableRoot };
+
+/** @public */
+export function useDataTable() {
+ const context = useContext(DataTableContext);
+ if (!context) {
+ throw new Error('useDataTable must be used within a DataTableRoot');
+ }
+ return context as DataTableContextType;
+}
diff --git a/packages/canon/src/components/DataTable/Root/types.ts b/packages/canon/src/components/DataTable/Root/types.ts
new file mode 100644
index 0000000000..0a14f81fb3
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Root/types.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Table } from '@tanstack/react-table';
+
+/** @public */
+export interface DataTableRootProps
+ extends React.HTMLAttributes {
+ /**
+ * The table instance.
+ */
+ table: Table;
+}
diff --git a/packages/canon/src/components/DataTable/Table/DataTableTable.tsx b/packages/canon/src/components/DataTable/Table/DataTableTable.tsx
new file mode 100644
index 0000000000..6b0fafa67d
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Table/DataTableTable.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { DataTableTableProps } from './types';
+import { Table } from '../../Table';
+import { useDataTable } from '../Root/DataTableRoot';
+import { flexRender } from '@tanstack/react-table';
+
+/** @public */
+const DataTableTable = forwardRef(
+ (props: DataTableTableProps, ref: React.ForwardedRef) => {
+ const { className, ...rest } = props;
+ const { table } = useDataTable();
+
+ return (
+
+
+ {table.getHeaderGroups().map(headerGroup => (
+
+ {headerGroup.headers.map(header => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map(row => (
+
+ {row.getVisibleCells().map(cell => (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+ );
+ },
+);
+
+DataTableTable.displayName = 'DataTableRoot';
+
+export { DataTableTable };
diff --git a/packages/canon/src/components/DataTable/Table/types.ts b/packages/canon/src/components/DataTable/Table/types.ts
new file mode 100644
index 0000000000..a4ef96c732
--- /dev/null
+++ b/packages/canon/src/components/DataTable/Table/types.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @public */
+export interface DataTableTableProps
+ extends React.HTMLAttributes {}
diff --git a/packages/canon/src/components/DataTable/index.ts b/packages/canon/src/components/DataTable/index.ts
new file mode 100644
index 0000000000..9d8c9becbb
--- /dev/null
+++ b/packages/canon/src/components/DataTable/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './DataTable';
+export * from './Root/types';
+export * from './Pagination/types';
+export * from './Table/types';
diff --git a/packages/canon/src/components/DataTable/mocked-columns.tsx b/packages/canon/src/components/DataTable/mocked-columns.tsx
new file mode 100644
index 0000000000..9f2ce72378
--- /dev/null
+++ b/packages/canon/src/components/DataTable/mocked-columns.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ColumnDef } from '@tanstack/react-table';
+import { DataProps } from './mocked-components';
+import { Checkbox } from '../Checkbox';
+import { DataTable } from './DataTable';
+
+export const columns: ColumnDef[] = [
+ {
+ id: 'select',
+ header: ({ table }) => (
+
+ table.toggleAllPageRowsSelected(checked)
+ }
+ aria-label="Select all"
+ />
+ ),
+ cell: ({ row }) => (
+
+
+Every component has a unique prefix `.canon-` followed by the component name. Component props
+are represented using the `data-` attribute. That way, class names are easily identifiable.
+
## Available CSS variables
+### Base colors
+
+These colors are used for special purposes like ring, scrollbar, ...
+
+