diff --git a/packages/canon/package.json b/packages/canon/package.json
index b5d2d715f6..fc47bd89d4 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -56,6 +56,7 @@
"@storybook/react": "^8.6.8",
"@storybook/react-webpack5": "^8.6.8",
"@storybook/test": "^8.6.8",
+ "@tanstack/react-table": "^8.21.2",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"chalk": "^5.4.1",
diff --git a/packages/canon/src/components/DataTable/DataTable.tsx b/packages/canon/src/components/DataTable/DataTable.tsx
new file mode 100644
index 0000000000..335e4d73e4
--- /dev/null
+++ b/packages/canon/src/components/DataTable/DataTable.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 React from 'react';
+
+export const DataTable = () => {
+ return
DataTable
;
+};
diff --git a/packages/canon/src/components/DataTable/index.ts b/packages/canon/src/components/DataTable/index.ts
new file mode 100644
index 0000000000..cbbb2babe5
--- /dev/null
+++ b/packages/canon/src/components/DataTable/index.ts
@@ -0,0 +1,17 @@
+/*
+ * 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';
diff --git a/packages/canon/src/components/Table/Table.stories.tsx b/packages/canon/src/components/Table/Table.stories.tsx
index c4c08be527..8c94249a79 100644
--- a/packages/canon/src/components/Table/Table.stories.tsx
+++ b/packages/canon/src/components/Table/Table.stories.tsx
@@ -14,73 +14,34 @@
* limitations under the License.
*/
-const invoices = [
- {
- invoice: 'INV001',
- paymentStatus: 'Paid',
- totalAmount: '$250.00',
- paymentMethod: 'Credit Card',
- },
- {
- invoice: 'INV002',
- paymentStatus: 'Pending',
- totalAmount: '$150.00',
- paymentMethod: 'PayPal',
- },
- {
- invoice: 'INV003',
- paymentStatus: 'Unpaid',
- totalAmount: '$350.00',
- paymentMethod: 'Bank Transfer',
- },
- {
- invoice: 'INV004',
- paymentStatus: 'Paid',
- totalAmount: '$450.00',
- paymentMethod: 'Credit Card',
- },
- {
- invoice: 'INV005',
- paymentStatus: 'Paid',
- totalAmount: '$550.00',
- paymentMethod: 'PayPal',
- },
- {
- invoice: 'INV006',
- paymentStatus: 'Pending',
- totalAmount: '$200.00',
- paymentMethod: 'Bank Transfer',
- },
- {
- invoice: 'INV007',
- paymentStatus: 'Unpaid',
- totalAmount: '$300.00',
- paymentMethod: 'Credit Card',
- },
-];
-
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from '../Table';
+import { components } from './mocked-data/components';
import {
- Table,
- TableBody,
- TableCell,
- TableFooter,
- TableHead,
- TableHeader,
- TableRow,
-} from '../Table';
+ // ColumnFiltersState,
+ // SortingState,
+ // VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from '@tanstack/react-table';
+import { columns } from './mocked-data/columns';
+import { TablePagination } from '../TablePagination';
const meta = {
title: 'Components/Table',
- component: Table,
+ component: Table.Root,
subcomponents: {
- TableBody: TableBody as React.ComponentType,
- TableCell: TableCell as React.ComponentType,
- TableFooter: TableFooter as React.ComponentType,
- TableHead: TableHead as React.ComponentType,
- TableHeader: TableHeader as React.ComponentType,
- TableRow: TableRow as React.ComponentType,
+ Body: Table.Body as React.ComponentType,
+ Cell: Table.Cell as React.ComponentType,
+ Pagination: TablePagination as React.ComponentType,
+ Head: Table.Head as React.ComponentType,
+ Header: Table.Header as React.ComponentType,
+ Row: Table.Row as React.ComponentType,
},
} satisfies Meta;
@@ -88,32 +49,79 @@ export default meta;
type Story = StoryObj;
export const Default: Story = {
- render: () => (
-
+ );
+ },
+);
+TablePagination.displayName = 'TablePagination';
+
+export { TablePagination };
diff --git a/packages/canon/src/components/TablePagination/index.ts b/packages/canon/src/components/TablePagination/index.ts
new file mode 100644
index 0000000000..2a2d462f84
--- /dev/null
+++ b/packages/canon/src/components/TablePagination/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 './TablePagination';
+export * from './types';
diff --git a/packages/canon/src/components/TablePagination/types.ts b/packages/canon/src/components/TablePagination/types.ts
new file mode 100644
index 0000000000..79628de2bd
--- /dev/null
+++ b/packages/canon/src/components/TablePagination/types.ts
@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+export interface TablePaginationProps
+ extends React.HTMLAttributes {
+ /**
+ * The current page index.
+ */
+ pageIndex: number;
+ /**
+ * The current page size.
+ */
+ pageSize: number;
+ /**
+ * The total number of rows.
+ */
+ totalRows: number;
+ /**
+ * The function to call when the previous button is clicked.
+ */
+ onClickPrevious: () => void;
+ /**
+ * The function to call when the next button is clicked.
+ */
+ onClickNext: () => void;
+ /**
+ * Whether the previous button is disabled.
+ */
+ canPrevious: boolean;
+ /**
+ * Whether the next button is disabled.
+ */
+ canNext: boolean;
+ /**
+ * The function to call when the page size is changed.
+ */
+ setPageSize: (pageSize: number) => void;
+}
diff --git a/yarn.lock b/yarn.lock
index baf0dd3925..9e19cc722f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3789,6 +3789,7 @@ __metadata:
"@storybook/react": ^8.6.8
"@storybook/react-webpack5": ^8.6.8
"@storybook/test": ^8.6.8
+ "@tanstack/react-table": ^8.21.2
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
chalk: ^5.4.1
@@ -19117,6 +19118,25 @@ __metadata:
languageName: node
linkType: hard
+"@tanstack/react-table@npm:^8.21.2":
+ version: 8.21.2
+ resolution: "@tanstack/react-table@npm:8.21.2"
+ dependencies:
+ "@tanstack/table-core": 8.21.2
+ peerDependencies:
+ react: ">=16.8"
+ react-dom: ">=16.8"
+ checksum: 3cda97794c10777d48d01de29d087a33edd8af153b3096ac9798c7ebddd31bd34f2b7838ecf4bddaf469d661a777556bd8021e15a41f692eb2e3dd79dd0e5c3b
+ languageName: node
+ linkType: hard
+
+"@tanstack/table-core@npm:8.21.2":
+ version: 8.21.2
+ resolution: "@tanstack/table-core@npm:8.21.2"
+ checksum: 21573388b26cef9c6fcabe3785640c470ea072a6d6ec34543e7eaf54ee742bf5fb12f8a04b172d7e08bd828a35afd7133add5adb4729dd4f94eaf4745b1cab14
+ languageName: node
+ linkType: hard
+
"@techdocs/cli@workspace:*, @techdocs/cli@workspace:packages/techdocs-cli":
version: 0.0.0-use.local
resolution: "@techdocs/cli@workspace:packages/techdocs-cli"