- );
- },
-);
-
-DataTablePagination.displayName = 'DataTablePagination';
-
-export { DataTablePagination };
diff --git a/packages/ui/src/components/DataTable/Root/DataTableRoot.styles.css b/packages/ui/src/components/DataTable/Root/DataTableRoot.styles.css
deleted file mode 100644
index 21b9be4eb8..0000000000
--- a/packages/ui/src/components/DataTable/Root/DataTableRoot.styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.bui-DataTableRoot {
- display: flex;
- flex-direction: column;
- gap: var(--bui-space-3);
-}
diff --git a/packages/ui/src/components/DataTable/Root/DataTableRoot.tsx b/packages/ui/src/components/DataTable/Root/DataTableRoot.tsx
deleted file mode 100644
index 2e3f7a7c6d..0000000000
--- a/packages/ui/src/components/DataTable/Root/DataTableRoot.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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/ui/src/components/DataTable/Table/DataTableTable.tsx b/packages/ui/src/components/DataTable/Table/DataTableTable.tsx
deleted file mode 100644
index 954cf9f703..0000000000
--- a/packages/ui/src/components/DataTable/Table/DataTableTable.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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/ui/src/components/DataTable/Table/types.ts b/packages/ui/src/components/DataTable/Table/types.ts
deleted file mode 100644
index a4ef96c732..0000000000
--- a/packages/ui/src/components/DataTable/Table/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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/ui/src/components/DataTable/mocked-columns.tsx b/packages/ui/src/components/DataTable/mocked-columns.tsx
deleted file mode 100644
index c44a434d6a..0000000000
--- a/packages/ui/src/components/DataTable/mocked-columns.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 }) => (
-
- );
-});
-TableCaption.displayName = 'TableCaption';
-
-/**
- * Table component for displaying tabular data
- * @public
- */
-export const Table = {
- Root: TableRoot,
- Header: TableHeader,
- Body: TableBody,
- Head: TableHead,
- Row: TableRow,
- Cell: TableCell,
- CellText: TableCellText,
- CellLink: TableCellLink,
- CellProfile: TableCellProfile,
- Caption: TableCaption,
-};
diff --git a/packages/ui/src/components/Table/TableCell/TableCell.stories.tsx b/packages/ui/src/components/Table/TableCell/TableCell.stories.tsx
deleted file mode 100644
index 123dca6e39..0000000000
--- a/packages/ui/src/components/Table/TableCell/TableCell.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 type { Meta, StoryObj } from '@storybook/react';
-import { TableCell } from './TableCell';
-
-const meta = {
- title: 'Components/Table/TableCell',
- component: TableCell,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- children: 'Hello world',
- },
-};
diff --git a/packages/ui/src/components/Table/TableCell/TableCell.styles.css b/packages/ui/src/components/Table/TableCell/TableCell.styles.css
deleted file mode 100644
index dd3857d6f8..0000000000
--- a/packages/ui/src/components/Table/TableCell/TableCell.styles.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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.
- */
-
-.bui-TableCell {
- padding: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
-}
diff --git a/packages/ui/src/components/Table/TableCellLink/TableCellLink.stories.tsx b/packages/ui/src/components/Table/TableCellLink/TableCellLink.stories.tsx
deleted file mode 100644
index bc9b66f18a..0000000000
--- a/packages/ui/src/components/Table/TableCellLink/TableCellLink.stories.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * 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 type { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { TableCellLink } from './TableCellLink';
-import { MemoryRouter } from 'react-router-dom';
-
-const meta = {
- title: 'Components/Table/TableCellLink',
- component: TableCellLink,
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- title: 'I am a link',
- href: 'https://ui.backstage.io',
- },
-};
-
-export const WithDescription: Story = {
- args: {
- ...Default.args,
- description: 'This is a description',
- },
-};
diff --git a/packages/ui/src/components/Table/TableCellLink/TableCellLink.styles.css b/packages/ui/src/components/Table/TableCellLink/TableCellLink.styles.css
deleted file mode 100644
index d4e10631fe..0000000000
--- a/packages/ui/src/components/Table/TableCellLink/TableCellLink.styles.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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.
- */
-
-.bui-TableCellLink {
- display: flex;
- flex-direction: column;
- gap: var(--bui-space-0_5);
-}
diff --git a/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx b/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx
deleted file mode 100644
index e27a37977f..0000000000
--- a/packages/ui/src/components/Table/TableCellLink/TableCellLink.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 { TableCellLinkProps } from './types';
-import { Text } from '../../Text/Text';
-import { Link } from '../../Link/Link';
-import { useStyles } from '../../../hooks/useStyles';
-
-/** @public */
-const TableCellLink = forwardRef(
- ({ className, title, description, href, render, ...props }, ref) => {
- const { classNames } = useStyles('Table');
-
- return (
-
- );
- },
-);
-TableCellLink.displayName = 'TableCellLink';
-
-export { TableCellLink };
diff --git a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.stories.tsx b/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.stories.tsx
deleted file mode 100644
index 230fc0e3d1..0000000000
--- a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 type { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { TableCellProfile } from './TableCellProfile';
-import { MemoryRouter } from 'react-router-dom';
-
-const meta = {
- title: 'Components/Table/TableCellProfile',
- component: TableCellProfile,
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- src: 'https://avatars.githubusercontent.com/u/1540635?v=4',
- name: 'Charles de Dreuille',
- },
-};
-
-export const Fallback: Story = {
- args: {
- ...Default.args,
- src: 'https://avatars.githubusercontent.com/u/15406AAAAAAAAA',
- },
-};
-
-export const WithLink: Story = {
- args: {
- ...Default.args,
- to: 'https://www.google.com',
- },
-};
diff --git a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.styles.css b/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.styles.css
deleted file mode 100644
index 4ec0f74899..0000000000
--- a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.styles.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * 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.
- */
-
-.bui-TableCellProfile {
- display: flex;
- flex-direction: row;
- gap: var(--bui-space-2);
- align-items: center;
-}
-
-.bui-TableCellProfileAvatar {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- vertical-align: middle;
- border-radius: 100%;
- user-select: none;
- font-weight: 500;
- color: var(--bui-fg-primary);
- background-color: var(--bui-bg-surface-2);
- font-size: 1rem;
- line-height: 1;
- overflow: hidden;
- height: 1.25rem;
- width: 1.25rem;
-}
-
-.bui-TableCellProfileAvatarImage {
- object-fit: cover;
- height: 100%;
- width: 100%;
-}
-
-.bui-TableCellProfileAvatarFallback {
- align-items: center;
- display: flex;
- justify-content: center;
- height: 100%;
- width: 100%;
- font-size: var(--bui-font-size-2);
- font-weight: var(--bui-font-weight-regular);
- box-shadow: inset 0 0 0 1px var(--bui-border);
- border-radius: var(--bui-radius-full);
-}
diff --git a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx b/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx
deleted file mode 100644
index bb2371bd6d..0000000000
--- a/packages/ui/src/components/Table/TableCellProfile/TableCellProfile.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { TableCellProfileProps } from './types';
-import { Text } from '../../Text/Text';
-import { Link } from '../../Link/Link';
-import { Avatar } from '@base-ui-components/react/avatar';
-import { useStyles } from '../../../hooks/useStyles';
-
-/** @public */
-const TableCellProfile = forwardRef(
- ({ className, src, name, to, withImage = true, ...rest }, ref) => {
- const { classNames } = useStyles('Table');
-
- return (
-
- );
- },
-);
-TableCellProfile.displayName = 'TableCellProfile';
-
-export { TableCellProfile };
diff --git a/packages/ui/src/components/Table/TableCellProfile/types.ts b/packages/ui/src/components/Table/TableCellProfile/types.ts
deleted file mode 100644
index d5a7b18cc2..0000000000
--- a/packages/ui/src/components/Table/TableCellProfile/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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.
- */
-
-/** @public */
-export interface TableCellProfileProps
- extends React.HTMLAttributes {
- src?: string;
- name?: string;
- to?: string;
- withImage?: boolean;
-}
diff --git a/packages/ui/src/components/Table/TableCellText/TableCellText.stories.tsx b/packages/ui/src/components/Table/TableCellText/TableCellText.stories.tsx
deleted file mode 100644
index 3756dd2544..0000000000
--- a/packages/ui/src/components/Table/TableCellText/TableCellText.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * 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 type { Meta, StoryObj } from '@storybook/react';
-import { TableCellText } from './TableCellText';
-
-const meta = {
- title: 'Components/Table/TableCellText',
- component: TableCellText,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- title: 'Hello world',
- },
-};
-
-export const WithDescription: Story = {
- args: {
- ...Default.args,
- description: 'This is a description',
- },
-};
diff --git a/packages/ui/src/components/Table/TableCellText/TableCellText.styles.css b/packages/ui/src/components/Table/TableCellText/TableCellText.styles.css
deleted file mode 100644
index f38f8b3689..0000000000
--- a/packages/ui/src/components/Table/TableCellText/TableCellText.styles.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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.
- */
-
-.bui-TableCellText {
- display: flex;
- flex-direction: column;
- gap: var(--bui-space-0_5);
-}
diff --git a/packages/ui/src/components/Table/TableCellText/TableCellText.tsx b/packages/ui/src/components/Table/TableCellText/TableCellText.tsx
deleted file mode 100644
index ee8db20ada..0000000000
--- a/packages/ui/src/components/Table/TableCellText/TableCellText.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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 { TableCellTextProps } from './types';
-import { Text } from '../../Text/Text';
-import { useStyles } from '../../../hooks/useStyles';
-
-/** @public */
-const TableCellText = forwardRef(
- ({ className, title, description, ...props }, ref) => {
- const { classNames } = useStyles('Table');
-
- return (
-
- );
- },
-);
-TableCellText.displayName = 'TableCellText';
-
-export { TableCellText };
diff --git a/packages/ui/src/components/Table/TableCellText/types.ts b/packages/ui/src/components/Table/TableCellText/types.ts
deleted file mode 100644
index 99a27ad248..0000000000
--- a/packages/ui/src/components/Table/TableCellText/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-
-/** @public */
-export interface TableCellTextProps
- extends React.HTMLAttributes {
- title: string;
- description?: string;
-}
diff --git a/packages/ui/src/components/Table/components/Cell.tsx b/packages/ui/src/components/Table/components/Cell.tsx
new file mode 100644
index 0000000000..d511ed21cb
--- /dev/null
+++ b/packages/ui/src/components/Table/components/Cell.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 clsx from 'clsx';
+import { Text } from '../../Text';
+import { Link } from '../../Link';
+import { Cell as ReactAriaCell } from 'react-aria-components';
+import type { CellProps } from '../types';
+import { useStyles } from '../../../hooks/useStyles';
+
+/** @public */
+const Cell = (props: CellProps) => {
+ const {
+ className,
+ title,
+ description,
+ color = 'primary',
+ leadingIcon,
+ href,
+ ...rest
+ } = props;
+
+ const { classNames } = useStyles('Table');
+
+ return (
+
+
+
+ );
+};
+
+Cell.displayName = 'Cell';
+
+export { Cell };
diff --git a/packages/ui/src/components/Table/components/CellProfile.tsx b/packages/ui/src/components/Table/components/CellProfile.tsx
new file mode 100644
index 0000000000..4e4906046d
--- /dev/null
+++ b/packages/ui/src/components/Table/components/CellProfile.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 clsx from 'clsx';
+import { CellProfileProps } from '../types';
+import { Text } from '../../Text/Text';
+import { Link } from '../../Link/Link';
+import { Avatar } from '@base-ui-components/react/avatar';
+import { useStyles } from '../../../hooks/useStyles';
+import { Cell as ReactAriaCell } from 'react-aria-components';
+
+/** @public */
+export const CellProfile = (props: CellProfileProps) => {
+ const {
+ className,
+ src,
+ name,
+ href,
+ description,
+ color = 'primary',
+ ...rest
+ } = props;
+ const { classNames } = useStyles('Table');
+
+ return (
+
+
+
+ );
+};
diff --git a/packages/ui/src/components/Table/components/Column.tsx b/packages/ui/src/components/Table/components/Column.tsx
new file mode 100644
index 0000000000..1df279b92f
--- /dev/null
+++ b/packages/ui/src/components/Table/components/Column.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 {
+ Column as ReactAriaColumn,
+ type ColumnProps,
+} from 'react-aria-components';
+import { Icon } from '../../Icon';
+import { useStyles } from '../../../hooks/useStyles';
+
+/** @public */
+export const Column = (
+ props: Omit & { children?: React.ReactNode },
+) => {
+ const { classNames } = useStyles('Table');
+
+ return (
+
+ {({ allowsSorting, sortDirection }) => (
+ <>
+ {props.children}
+ {allowsSorting && (
+
+ {sortDirection === 'ascending' ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ )}
+
+ );
+};
diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx
new file mode 100644
index 0000000000..e0d5bcc34d
--- /dev/null
+++ b/packages/ui/src/components/Table/components/Row.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 {
+ Row as ReactAriaRow,
+ RowProps,
+ useTableOptions,
+ Cell,
+ Collection,
+ Checkbox,
+ RouterProvider,
+} from 'react-aria-components';
+import { useStyles } from '../../../hooks/useStyles';
+import { useNavigate } from 'react-router-dom';
+import { useHref } from 'react-router-dom';
+import { isExternalLink } from '../../../utils/isExternalLink';
+
+/** @public */
+export function Row({
+ id,
+ columns,
+ children,
+ href,
+ ...otherProps
+}: RowProps) {
+ const { classNames } = useStyles('Table');
+ const navigate = useNavigate();
+ const isExternal = isExternalLink(href);
+
+ let { selectionBehavior } = useTableOptions();
+
+ const content = (
+ <>
+ {selectionBehavior === 'toggle' && (
+
+
+
+ )}
+ {children}
+
+ );
+
+ if (isExternal) {
+ return (
+
+ {content}
+
+ );
+ }
+
+ return (
+
+
+ {content}
+
+
+ );
+}
diff --git a/packages/ui/src/components/Table/TableCell/TableCell.tsx b/packages/ui/src/components/Table/components/Table.tsx
similarity index 64%
rename from packages/ui/src/components/Table/TableCell/TableCell.tsx
rename to packages/ui/src/components/Table/components/Table.tsx
index cbd025178c..0ad22a85b8 100644
--- a/packages/ui/src/components/Table/TableCell/TableCell.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,21 +14,21 @@
* limitations under the License.
*/
-import { forwardRef } from 'react';
-import clsx from 'clsx';
import { useStyles } from '../../../hooks/useStyles';
+import {
+ Table as ReactAriaTable,
+ type TableProps,
+} from 'react-aria-components';
/** @public */
-const TableCell = forwardRef<
- HTMLTableCellElement,
- React.TdHTMLAttributes
->(({ className, ...props }, ref) => {
+export const Table = (props: TableProps) => {
const { classNames } = useStyles('Table');
return (
-
+
);
-});
-TableCell.displayName = 'TableCell';
-
-export { TableCell };
+};
diff --git a/packages/ui/src/components/DataTable/Pagination/types.ts b/packages/ui/src/components/Table/components/TableBody.tsx
similarity index 63%
rename from packages/ui/src/components/DataTable/Pagination/types.ts
rename to packages/ui/src/components/Table/components/TableBody.tsx
index b2a895c465..64e960167b 100644
--- a/packages/ui/src/components/DataTable/Pagination/types.ts
+++ b/packages/ui/src/components/Table/components/TableBody.tsx
@@ -14,6 +14,15 @@
* limitations under the License.
*/
+import {
+ TableBody as ReactAriaTableBody,
+ type TableBodyProps,
+} from 'react-aria-components';
+import { useStyles } from '../../../hooks/useStyles';
+
/** @public */
-export interface DataTablePaginationProps
- extends React.HTMLAttributes {}
+export const TableBody = (props: TableBodyProps) => {
+ const { classNames } = useStyles('Table');
+
+ return ;
+};
diff --git a/packages/ui/src/components/Table/components/TableHeader.tsx b/packages/ui/src/components/Table/components/TableHeader.tsx
new file mode 100644
index 0000000000..7802cd0327
--- /dev/null
+++ b/packages/ui/src/components/Table/components/TableHeader.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 {
+ TableHeader as ReactAriaTableHeader,
+ type TableHeaderProps,
+ Checkbox,
+} from 'react-aria-components';
+import { Collection, useTableOptions } from 'react-aria-components';
+import { Column } from './Column';
+import { useStyles } from '../../../hooks/useStyles';
+
+/** @public */
+export const TableHeader = ({
+ columns,
+ children,
+}: TableHeaderProps) => {
+ let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+
+ const { classNames } = useStyles('Table');
+
+ return (
+
+ {/* Add extra columns for drag and drop and selection. */}
+ {allowsDragging && }
+ {selectionBehavior === 'toggle' && (
+
+ {selectionMode === 'multiple' && }
+
+ )}
+ {children}
+
+ );
+};
diff --git a/packages/ui/src/components/Table/hooks/types.ts b/packages/ui/src/components/Table/hooks/types.ts
new file mode 100644
index 0000000000..8c93d678fc
--- /dev/null
+++ b/packages/ui/src/components/Table/hooks/types.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 type { TablePaginationProps } from '../../TablePagination/types';
+
+/** @public */
+export interface UseTablePaginationConfig {
+ /** Total number of rows in the dataset - only needed when data is not provided at the top level */
+ rowCount?: number;
+
+ // Controlled pagination with offset/pageSize (Backstage style)
+ /** Current offset. When provided, pagination is controlled */
+ offset?: number;
+ /** Current page size. When provided, pagination is controlled */
+ pageSize?: number;
+ /** Callback when offset changes */
+ onOffsetChange?: (offset: number) => void;
+ /** Callback when page size changes */
+ onPageSizeChange?: (pageSize: number) => void;
+
+ // Uncontrolled pagination defaults
+ /** Default page size for uncontrolled mode */
+ defaultPageSize?: number;
+ /** Default offset for uncontrolled mode */
+ defaultOffset?: number;
+
+ // Analytics callbacks
+ /** Callback when next page is clicked */
+ onNextPage?: () => void;
+ /** Callback when previous page is clicked */
+ onPreviousPage?: () => void;
+
+ // UI options
+ /** Whether to show page size options */
+ showPageSizeOptions?: boolean;
+}
+
+/** @public */
+export interface UseTablePagination {
+ /** Props to pass to TablePagination component */
+ paginationProps: TablePaginationProps;
+ /** Current offset */
+ offset: number;
+ /** Current page size */
+ pageSize: number;
+ /** Sliced data for current page - only available when data is provided to useTable */
+ data?: T[];
+ /** Go to next page */
+ nextPage: () => void;
+ /** Go to previous page */
+ previousPage: () => void;
+ /** Set specific offset */
+ setOffset: (offset: number) => void;
+ /** Set page size */
+ setPageSize: (pageSize: number) => void;
+}
+
+/** @public */
+export interface UseTableConfig {
+ /** Full dataset - when provided, rowCount is calculated automatically and sliced data is returned */
+ data?: T[];
+ /** Pagination configuration */
+ pagination?: UseTablePaginationConfig;
+}
+
+/** @public */
+export interface UseTableResult {
+ /** Sliced data for current page */
+ data?: T[];
+ /** Props to pass to TablePagination component */
+ paginationProps: TablePaginationProps;
+ /** Pagination utilities */
+ pagination: UseTablePagination;
+}
diff --git a/packages/ui/src/components/Table/hooks/useTable.ts b/packages/ui/src/components/Table/hooks/useTable.ts
new file mode 100644
index 0000000000..2759fcde41
--- /dev/null
+++ b/packages/ui/src/components/Table/hooks/useTable.ts
@@ -0,0 +1,166 @@
+/*
+ * 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 { useState, useMemo, useCallback } from 'react';
+import type { TablePaginationProps } from '../../TablePagination/types';
+import type {
+ UseTableConfig,
+ UseTableResult,
+ UseTablePagination,
+} from './types';
+
+/**
+ * Hook for managing table state including pagination and future features like sorting.
+ * Supports both controlled and uncontrolled modes using offset/pageSize pattern (Backstage style).
+ *
+ * @public
+ */
+export function useTable(
+ config: UseTableConfig = {},
+): UseTableResult {
+ const { data, pagination: paginationConfig = {} } = config;
+
+ const {
+ rowCount: providedRowCount,
+ offset: controlledOffset,
+ pageSize: controlledPageSize,
+ onOffsetChange,
+ onPageSizeChange,
+ defaultPageSize = 10,
+ defaultOffset = 0,
+ onNextPage,
+ onPreviousPage,
+ showPageSizeOptions = true,
+ } = paginationConfig;
+
+ // Determine if we're in controlled mode
+ const isControlled =
+ controlledOffset !== undefined || controlledPageSize !== undefined;
+
+ // Calculate row count from data or use provided value
+ const rowCount = data?.length ?? providedRowCount ?? 0;
+
+ // Internal state for uncontrolled mode
+ const [internalOffset, setInternalOffset] = useState(defaultOffset);
+ const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+
+ // Calculate current values
+ const currentOffset = controlledOffset ?? internalOffset;
+ const currentPageSize = controlledPageSize ?? internalPageSize;
+
+ // Calculate sliced data if data array is provided
+ const currentData = useMemo(() => {
+ if (!data) return undefined;
+ return data.slice(currentOffset, currentOffset + currentPageSize);
+ }, [data, currentOffset, currentPageSize]);
+
+ // Update functions
+ const setOffset = useCallback(
+ (newOffset: number) => {
+ if (isControlled) {
+ onOffsetChange?.(newOffset);
+ } else {
+ setInternalOffset(newOffset);
+ }
+ },
+ [isControlled, onOffsetChange],
+ );
+
+ const setPageSize = useCallback(
+ (newPageSize: number) => {
+ // When changing page size, reset to first page to avoid showing empty results
+ const newOffset = 0;
+
+ if (isControlled) {
+ onPageSizeChange?.(newPageSize);
+ onOffsetChange?.(newOffset);
+ } else {
+ setInternalPageSize(newPageSize);
+ setInternalOffset(newOffset);
+ }
+ },
+ [isControlled, onPageSizeChange, onOffsetChange],
+ );
+
+ const nextPage = useCallback(() => {
+ const nextOffset = currentOffset + currentPageSize;
+ if (nextOffset < rowCount) {
+ onNextPage?.();
+ setOffset(nextOffset);
+ }
+ }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);
+
+ const previousPage = useCallback(() => {
+ if (currentOffset > 0) {
+ onPreviousPage?.();
+ const prevOffset = Math.max(0, currentOffset - currentPageSize);
+ setOffset(prevOffset);
+ }
+ }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);
+
+ // Pagination props for TablePagination component
+ const paginationProps: TablePaginationProps = useMemo(
+ () => ({
+ offset: currentOffset,
+ pageSize: currentPageSize,
+ rowCount,
+ setOffset,
+ setPageSize,
+ onNextPage,
+ onPreviousPage,
+ showPageSizeOptions,
+ }),
+ [
+ currentOffset,
+ currentPageSize,
+ rowCount,
+ setOffset,
+ setPageSize,
+ onNextPage,
+ onPreviousPage,
+ showPageSizeOptions,
+ ],
+ );
+
+ const pagination: UseTablePagination = useMemo(
+ () => ({
+ paginationProps,
+ offset: currentOffset,
+ pageSize: currentPageSize,
+ data: currentData,
+ nextPage,
+ previousPage,
+ setOffset,
+ setPageSize,
+ }),
+ [
+ paginationProps,
+ currentOffset,
+ currentPageSize,
+ currentData,
+ nextPage,
+ previousPage,
+ setOffset,
+ setPageSize,
+ ],
+ );
+
+ return {
+ data: currentData,
+ paginationProps,
+ pagination,
+ };
+}
diff --git a/packages/ui/src/components/Table/index.ts b/packages/ui/src/components/Table/index.ts
index 5c7f3da195..945621b26c 100644
--- a/packages/ui/src/components/Table/index.ts
+++ b/packages/ui/src/components/Table/index.ts
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,7 +14,19 @@
* limitations under the License.
*/
-export * from './Table';
-export * from './TableCellText/types';
-export * from './TableCellLink/types';
-export * from './TableCellProfile/types';
+export { Table } from './components/Table';
+export { TableHeader } from './components/TableHeader';
+export { TableBody } from './components/TableBody';
+export { Column } from './components/Column';
+export { Row } from './components/Row';
+export { Cell } from './components/Cell';
+export { CellProfile } from './components/CellProfile';
+export { useTable } from './hooks/useTable';
+
+export type { CellProps, CellProfileProps } from './types';
+export type {
+ UseTableConfig,
+ UseTableResult,
+ UseTablePagination,
+ UseTablePaginationConfig,
+} from './hooks/types';
diff --git a/packages/ui/src/components/DataTable/mocked-components.ts b/packages/ui/src/components/Table/mocked-data1.ts
similarity index 92%
rename from packages/ui/src/components/DataTable/mocked-components.ts
rename to packages/ui/src/components/Table/mocked-data1.ts
index 40d790de78..ea5a9f2db8 100644
--- a/packages/ui/src/components/DataTable/mocked-components.ts
+++ b/packages/ui/src/components/Table/mocked-data1.ts
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
export interface DataProps {
name: string;
owner: {
@@ -23,6 +24,7 @@ export interface DataProps {
type: 'documentation' | 'library' | 'service' | 'website' | 'other';
description?: string;
tags?: string[];
+ lifecycle: 'experimental' | 'production';
}
export const data: DataProps[] = [
@@ -37,6 +39,7 @@ export const data: DataProps[] = [
description:
'A comprehensive service handling user authentication and role-based access control across all applications.',
tags: ['security', 'authentication', 'authorization'],
+ lifecycle: 'production',
},
{
name: 'user-interface-dashboard-and-analytics-platform',
@@ -49,6 +52,7 @@ export const data: DataProps[] = [
description:
'Interactive dashboard providing real-time analytics and data visualization for business metrics.',
tags: ['analytics', 'visualization', 'dashboard'],
+ lifecycle: 'production',
},
{
name: 'payment-gateway',
@@ -61,6 +65,7 @@ export const data: DataProps[] = [
description:
'Secure payment processing system supporting multiple payment methods and currencies.',
tags: ['payments', 'security', 'finance'],
+ lifecycle: 'production',
},
{
name: 'real-time-analytics-processing-and-visualization-engine',
@@ -73,6 +78,7 @@ export const data: DataProps[] = [
description:
'High-performance engine for processing and visualizing streaming data analytics.',
tags: ['analytics', 'real-time', 'data-processing'],
+ lifecycle: 'experimental',
},
{
name: 'notification-center',
@@ -85,6 +91,7 @@ export const data: DataProps[] = [
description:
'Centralized system for managing and delivering notifications across multiple channels.',
tags: ['notifications', 'messaging'],
+ lifecycle: 'production',
},
{
name: 'administrative-control-panel-and-user-management-interface',
@@ -97,6 +104,7 @@ export const data: DataProps[] = [
description:
'Admin interface for managing users, permissions, and system configurations.',
tags: ['admin', 'user-management', 'configuration'],
+ lifecycle: 'production',
},
{
name: 'search-indexer',
@@ -109,6 +117,7 @@ export const data: DataProps[] = [
description:
'Service responsible for indexing and updating searchable content across the platform.',
tags: ['search', 'indexing'],
+ lifecycle: 'production',
},
{
name: 'cross-platform-mobile-application-framework',
@@ -121,6 +130,7 @@ export const data: DataProps[] = [
description:
'Framework enabling development of cross-platform mobile applications with shared codebase.',
tags: ['mobile', 'framework', 'cross-platform'],
+ lifecycle: 'experimental',
},
{
name: 'database-migration',
@@ -133,6 +143,7 @@ export const data: DataProps[] = [
description:
'Tools and scripts for managing database schema migrations and data transformations.',
tags: ['database', 'migration', 'devops'],
+ lifecycle: 'production',
},
{
name: 'api-gateway',
@@ -145,6 +156,7 @@ export const data: DataProps[] = [
description:
'Central entry point for all API requests, handling routing, authentication, and rate limiting.',
tags: ['api', 'gateway', 'security', 'routing'],
+ lifecycle: 'production',
},
{
name: 'content-management',
@@ -157,6 +169,7 @@ export const data: DataProps[] = [
description:
'System for managing and delivering digital content across multiple channels.',
tags: ['content', 'management', 'delivery'],
+ lifecycle: 'production',
},
{
name: 'enterprise-reporting-and-analytics-dashboard',
@@ -169,6 +182,7 @@ export const data: DataProps[] = [
description:
'Comprehensive business intelligence platform for enterprise-wide reporting and analytics.',
tags: ['analytics', 'reporting', 'business-intelligence'],
+ lifecycle: 'production',
},
{
name: 'image-processing-and-optimization-service',
@@ -181,6 +195,7 @@ export const data: DataProps[] = [
description:
'Service for processing, optimizing, and delivering images across different devices and networks.',
tags: ['media', 'optimization', 'processing'],
+ lifecycle: 'production',
},
{
name: 'customer-portal',
@@ -193,6 +208,7 @@ export const data: DataProps[] = [
description:
'Self-service portal for customers to manage their accounts and access services.',
tags: ['customer', 'self-service'],
+ lifecycle: 'production',
},
{
name: 'log-aggregator',
@@ -205,6 +221,7 @@ export const data: DataProps[] = [
description:
'Centralized logging system for collecting, processing, and analyzing application logs.',
tags: ['logging', 'monitoring', 'devops'],
+ lifecycle: 'production',
},
{
name: 'identity-provider',
@@ -217,6 +234,7 @@ export const data: DataProps[] = [
description:
'Service managing user identities and authentication across the organization.',
tags: ['identity', 'security', 'authentication'],
+ lifecycle: 'production',
},
{
name: 'document-storage',
@@ -229,6 +247,7 @@ export const data: DataProps[] = [
description:
'Secure and scalable document storage system with version control and access management.',
tags: ['storage', 'documents', 'version-control'],
+ lifecycle: 'production',
},
{
name: 'workflow-engine',
@@ -241,6 +260,7 @@ export const data: DataProps[] = [
description:
'Engine for defining and executing business processes and workflows.',
tags: ['workflow', 'automation'],
+ lifecycle: 'experimental',
},
{
name: 'mobile-backend',
@@ -253,6 +273,7 @@ export const data: DataProps[] = [
description:
'Backend services supporting mobile applications with optimized APIs and data synchronization.',
tags: ['mobile', 'backend', 'api'],
+ lifecycle: 'production',
},
{
name: 'system-monitoring-and-alerting-dashboard',
@@ -265,6 +286,7 @@ export const data: DataProps[] = [
description:
'Real-time monitoring and alerting system for infrastructure and application health.',
tags: ['monitoring', 'alerting', 'devops', 'infrastructure'],
+ lifecycle: 'production',
},
{
name: 'email-service',
@@ -277,6 +299,7 @@ export const data: DataProps[] = [
description:
'Reliable email delivery service with templates and tracking capabilities.',
tags: ['email', 'communication'],
+ lifecycle: 'production',
},
{
name: 'data-pipeline',
@@ -289,6 +312,7 @@ export const data: DataProps[] = [
description:
'ETL pipeline for processing and transforming large volumes of data.',
tags: ['data', 'etl', 'pipeline'],
+ lifecycle: 'production',
},
{
name: 'configuration-manager',
@@ -301,6 +325,7 @@ export const data: DataProps[] = [
description:
'Centralized system for managing application configurations across environments.',
tags: ['configuration', 'management'],
+ lifecycle: 'production',
},
{
name: 'testing-framework',
@@ -313,6 +338,7 @@ export const data: DataProps[] = [
description:
'Comprehensive testing framework supporting various types of automated tests.',
tags: ['testing', 'automation', 'qa'],
+ lifecycle: 'production',
},
{
name: 'cache-service',
@@ -325,6 +351,7 @@ export const data: DataProps[] = [
description:
'Distributed caching service for improving application performance.',
tags: ['caching', 'performance'],
+ lifecycle: 'production',
},
{
name: 'billing-system',
@@ -337,6 +364,7 @@ export const data: DataProps[] = [
description:
'System for managing customer billing, invoicing, and payment processing.',
tags: ['billing', 'finance', 'payments'],
+ lifecycle: 'production',
},
{
name: 'comprehensive-product-documentation-and-api-reference',
@@ -349,6 +377,7 @@ export const data: DataProps[] = [
description:
'Complete documentation covering product features, APIs, and integration guides.',
tags: ['documentation', 'api', 'reference'],
+ lifecycle: 'production',
},
{
name: 'queue-manager',
@@ -361,6 +390,7 @@ export const data: DataProps[] = [
description:
'Message queue system for asynchronous processing and event handling.',
tags: ['queue', 'messaging', 'async'],
+ lifecycle: 'production',
},
{
name: 'security-scanner',
@@ -373,6 +403,7 @@ export const data: DataProps[] = [
description:
'Automated security scanning tool for identifying vulnerabilities in code and infrastructure.',
tags: ['security', 'scanning', 'vulnerability'],
+ lifecycle: 'experimental',
},
{
name: 'user-profile',
@@ -385,6 +416,7 @@ export const data: DataProps[] = [
description:
'User profile management interface with personalization features.',
tags: ['user', 'profile', 'personalization'],
+ lifecycle: 'production',
},
{
name: 'data-warehouse',
@@ -397,6 +429,7 @@ export const data: DataProps[] = [
description:
'Centralized data repository for business intelligence and analytics.',
tags: ['data', 'warehouse', 'analytics'],
+ lifecycle: 'production',
},
{
name: 'deployment-automation',
@@ -409,6 +442,7 @@ export const data: DataProps[] = [
description:
'Automated deployment pipeline for continuous integration and delivery.',
tags: ['deployment', 'automation', 'ci-cd', 'devops'],
+ lifecycle: 'production',
},
{
name: 'chat-service',
@@ -421,6 +455,7 @@ export const data: DataProps[] = [
description:
'Real-time chat service supporting text, file sharing, and group conversations.',
tags: ['chat', 'communication', 'real-time'],
+ lifecycle: 'experimental',
},
{
name: 'analytics-dashboard',
@@ -433,6 +468,7 @@ export const data: DataProps[] = [
description:
'Interactive dashboard for visualizing and analyzing business metrics.',
tags: ['analytics', 'dashboard', 'visualization'],
+ lifecycle: 'production',
},
{
name: 'file-uploader',
@@ -445,6 +481,7 @@ export const data: DataProps[] = [
description:
'Service for handling secure file uploads with progress tracking and validation.',
tags: ['storage', 'upload', 'files'],
+ lifecycle: 'production',
},
{
name: 'search-service',
@@ -457,6 +494,7 @@ export const data: DataProps[] = [
description:
'Full-text search service with advanced filtering and ranking capabilities.',
tags: ['search', 'full-text'],
+ lifecycle: 'production',
},
{
name: 'mobile-sdk',
@@ -469,6 +507,7 @@ export const data: DataProps[] = [
description:
'Software development kit for building mobile applications with native features.',
tags: ['mobile', 'sdk', 'development'],
+ lifecycle: 'production',
},
{
name: 'performance-monitor',
@@ -481,6 +520,7 @@ export const data: DataProps[] = [
description:
'System for monitoring and analyzing application performance metrics.',
tags: ['performance', 'monitoring', 'metrics'],
+ lifecycle: 'production',
},
{
name: 'content-delivery',
@@ -493,6 +533,7 @@ export const data: DataProps[] = [
description:
'CDN service for optimized content delivery across global networks.',
tags: ['cdn', 'content', 'delivery'],
+ lifecycle: 'production',
},
{
name: 'user-authentication',
@@ -505,6 +546,7 @@ export const data: DataProps[] = [
description:
'Service handling user login, session management, and authentication flows.',
tags: ['authentication', 'security', 'user'],
+ lifecycle: 'production',
},
{
name: 'data-export',
@@ -517,6 +559,7 @@ export const data: DataProps[] = [
description:
'Service for exporting data in various formats with scheduling capabilities.',
tags: ['data', 'export', 'scheduling'],
+ lifecycle: 'production',
},
{
name: 'admin-api',
@@ -529,6 +572,7 @@ export const data: DataProps[] = [
description:
'API endpoints for administrative functions and system management.',
tags: ['api', 'admin', 'management'],
+ lifecycle: 'production',
},
{
name: 'testing-dashboard',
@@ -540,6 +584,7 @@ export const data: DataProps[] = [
type: 'website',
description: 'Dashboard for monitoring test results and quality metrics.',
tags: ['testing', 'dashboard', 'qa'],
+ lifecycle: 'production',
},
{
name: 'message-broker',
@@ -552,6 +597,7 @@ export const data: DataProps[] = [
description:
'Message broker service for reliable event-driven communication between services.',
tags: ['messaging', 'broker', 'event-driven'],
+ lifecycle: 'production',
},
{
name: 'payment-processor',
@@ -564,6 +610,7 @@ export const data: DataProps[] = [
description:
'Service for processing financial transactions and payment methods.',
tags: ['payments', 'finance', 'processing'],
+ lifecycle: 'production',
},
{
name: 'document-viewer',
@@ -575,6 +622,7 @@ export const data: DataProps[] = [
type: 'website',
description: 'Web-based document viewer supporting multiple file formats.',
tags: ['documents', 'viewer'],
+ lifecycle: 'production',
},
{
name: 'load-balancer',
@@ -587,6 +635,7 @@ export const data: DataProps[] = [
description:
'Service for distributing network traffic across multiple servers.',
tags: ['load-balancing', 'networking', 'infrastructure'],
+ lifecycle: 'production',
},
{
name: 'security-audit',
@@ -599,6 +648,7 @@ export const data: DataProps[] = [
description:
'Tools and processes for conducting security audits and compliance checks.',
tags: ['security', 'audit', 'compliance'],
+ lifecycle: 'production',
},
{
name: 'user-settings',
@@ -611,6 +661,7 @@ export const data: DataProps[] = [
description:
'Interface for users to manage their preferences and account settings.',
tags: ['user', 'settings', 'preferences'],
+ lifecycle: 'production',
},
{
name: 'data-import',
@@ -623,6 +674,7 @@ export const data: DataProps[] = [
description:
'Service for importing and validating data from external sources.',
tags: ['data', 'import', 'validation'],
+ lifecycle: 'production',
},
{
name: 'infrastructure-monitor',
@@ -635,6 +687,7 @@ export const data: DataProps[] = [
description:
'Monitoring system for infrastructure components and resources.',
tags: ['monitoring', 'infrastructure', 'devops'],
+ lifecycle: 'production',
},
{
name: 'notification-manager',
@@ -647,6 +700,7 @@ export const data: DataProps[] = [
description:
'Service for managing and delivering notifications across multiple channels.',
tags: ['notifications', 'management'],
+ lifecycle: 'production',
},
{
name: 'analytics-processor',
@@ -659,6 +713,7 @@ export const data: DataProps[] = [
description:
'Service for processing and analyzing business data and metrics.',
tags: ['analytics', 'processing', 'metrics'],
+ lifecycle: 'production',
},
{
name: 'file-manager',
@@ -670,6 +725,7 @@ export const data: DataProps[] = [
type: 'website',
description: 'Web interface for managing files and storage resources.',
tags: ['files', 'storage', 'management'],
+ lifecycle: 'production',
},
{
name: 'search-index',
@@ -681,6 +737,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for maintaining and updating search indices.',
tags: ['search', 'indexing'],
+ lifecycle: 'production',
},
{
name: 'mobile-authentication',
@@ -693,6 +750,7 @@ export const data: DataProps[] = [
description:
'Authentication service specifically designed for mobile applications.',
tags: ['mobile', 'authentication', 'security'],
+ lifecycle: 'experimental',
},
{
name: 'system-monitor',
@@ -705,6 +763,7 @@ export const data: DataProps[] = [
description:
'Monitoring service for system health and performance metrics.',
tags: ['monitoring', 'system', 'metrics'],
+ lifecycle: 'production',
},
{
name: 'media-processor',
@@ -716,6 +775,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for processing and optimizing media files.',
tags: ['media', 'processing', 'optimization'],
+ lifecycle: 'production',
},
{
name: 'user-management',
@@ -727,6 +787,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for managing user accounts and permissions.',
tags: ['user', 'management', 'security'],
+ lifecycle: 'production',
},
{
name: 'data-transformer',
@@ -739,6 +800,7 @@ export const data: DataProps[] = [
description:
'Service for transforming data between different formats and structures.',
tags: ['data', 'transformation'],
+ lifecycle: 'production',
},
{
name: 'admin-dashboard',
@@ -751,6 +813,7 @@ export const data: DataProps[] = [
description:
'Administrative interface for system management and monitoring.',
tags: ['admin', 'dashboard', 'management'],
+ lifecycle: 'production',
},
{
name: 'test-automation',
@@ -762,6 +825,7 @@ export const data: DataProps[] = [
type: 'other',
description: 'Tools and frameworks for automating testing processes.',
tags: ['testing', 'automation', 'qa'],
+ lifecycle: 'production',
},
{
name: 'event-bus',
@@ -773,6 +837,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Event-driven communication system between services.',
tags: ['events', 'messaging', 'communication'],
+ lifecycle: 'production',
},
{
name: 'invoice-generator',
@@ -784,6 +849,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for generating and managing invoices.',
tags: ['invoices', 'finance'],
+ lifecycle: 'production',
},
{
name: 'document-editor',
@@ -795,6 +861,7 @@ export const data: DataProps[] = [
type: 'website',
description: 'Web-based document editing interface.',
tags: ['documents', 'editor'],
+ lifecycle: 'experimental',
},
{
name: 'service-discovery',
@@ -806,6 +873,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for discovering and registering available services.',
tags: ['discovery', 'services', 'devops'],
+ lifecycle: 'production',
},
{
name: 'security-monitor',
@@ -817,6 +885,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for monitoring security events and threats.',
tags: ['security', 'monitoring', 'threats'],
+ lifecycle: 'production',
},
{
name: 'user-preferences',
@@ -828,6 +897,7 @@ export const data: DataProps[] = [
type: 'website',
description: 'Interface for managing user preferences and settings.',
tags: ['user', 'preferences'],
+ lifecycle: 'production',
},
{
name: 'data-validator',
@@ -839,6 +909,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for validating data integrity and format.',
tags: ['data', 'validation'],
+ lifecycle: 'production',
},
{
name: 'infrastructure-automation',
@@ -851,6 +922,7 @@ export const data: DataProps[] = [
description:
'Tools for automating infrastructure provisioning and management.',
tags: ['infrastructure', 'automation', 'devops'],
+ lifecycle: 'production',
},
{
name: 'notification-dispatcher',
@@ -863,6 +935,7 @@ export const data: DataProps[] = [
description:
'Service for dispatching notifications to appropriate channels.',
tags: ['notifications', 'dispatch'],
+ lifecycle: 'production',
},
{
name: 'analytics-collector',
@@ -874,6 +947,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for collecting and aggregating analytics data.',
tags: ['analytics', 'collection', 'aggregation'],
+ lifecycle: 'production',
},
{
name: 'file-processor',
@@ -885,6 +959,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for processing and managing files.',
tags: ['files', 'processing'],
+ lifecycle: 'production',
},
{
name: 'search-analyzer',
@@ -896,6 +971,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for analyzing search queries and results.',
tags: ['search', 'analysis'],
+ lifecycle: 'experimental',
},
{
name: 'mobile-notifications',
@@ -907,6 +983,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for sending notifications to mobile devices.',
tags: ['mobile', 'notifications'],
+ lifecycle: 'experimental',
},
{
name: 'system-alerts',
@@ -918,6 +995,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for managing and dispatching system alerts.',
tags: ['alerts', 'system', 'monitoring'],
+ lifecycle: 'production',
},
{
name: 'media-encoder',
@@ -929,6 +1007,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for encoding and processing media files.',
tags: ['media', 'encoding'],
+ lifecycle: 'production',
},
{
name: 'user-authorization',
@@ -940,6 +1019,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for managing user permissions and access control.',
tags: ['authorization', 'security', 'user'],
+ lifecycle: 'production',
},
{
name: 'data-aggregator',
@@ -951,6 +1031,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for aggregating data from multiple sources.',
tags: ['data', 'aggregation'],
+ lifecycle: 'production',
},
{
name: 'admin-authentication',
@@ -962,6 +1043,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Authentication service for administrative access.',
tags: ['admin', 'authentication', 'security'],
+ lifecycle: 'production',
},
{
name: 'test-coverage',
@@ -973,6 +1055,7 @@ export const data: DataProps[] = [
type: 'other',
description: 'Tools for measuring and reporting test coverage.',
tags: ['testing', 'coverage', 'qa'],
+ lifecycle: 'production',
},
{
name: 'event-processor',
@@ -984,6 +1067,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for processing and handling events.',
tags: ['events', 'processing'],
+ lifecycle: 'production',
},
{
name: 'payment-validator',
@@ -995,6 +1079,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for validating payment transactions.',
tags: ['payments', 'validation', 'finance'],
+ lifecycle: 'production',
},
{
name: 'document-converter',
@@ -1006,6 +1091,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for converting documents between different formats.',
tags: ['documents', 'conversion'],
+ lifecycle: 'experimental',
},
{
name: 'service-health',
@@ -1017,6 +1103,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for monitoring and reporting service health status.',
tags: ['health', 'monitoring', 'services'],
+ lifecycle: 'production',
},
{
name: 'security-logger',
@@ -1028,6 +1115,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for logging security-related events and activities.',
tags: ['security', 'logging'],
+ lifecycle: 'production',
},
{
name: 'user-analytics',
@@ -1040,6 +1128,7 @@ export const data: DataProps[] = [
description:
'Analytics dashboard for user behavior and engagement metrics.',
tags: ['analytics', 'user', 'metrics'],
+ lifecycle: 'experimental',
},
{
name: 'data-cleaner',
@@ -1051,6 +1140,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for cleaning and standardizing data.',
tags: ['data', 'cleaning'],
+ lifecycle: 'production',
},
{
name: 'infrastructure-deployer',
@@ -1062,6 +1152,7 @@ export const data: DataProps[] = [
type: 'other',
description: 'Tools for deploying and managing infrastructure resources.',
tags: ['infrastructure', 'deployment', 'devops'],
+ lifecycle: 'production',
},
{
name: 'notification-queue',
@@ -1073,6 +1164,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Queue system for managing notification delivery.',
tags: ['notifications', 'queue'],
+ lifecycle: 'production',
},
{
name: 'analytics-exporter',
@@ -1084,6 +1176,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for exporting analytics data in various formats.',
tags: ['analytics', 'export'],
+ lifecycle: 'production',
},
{
name: 'file-validator',
@@ -1095,6 +1188,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for validating file integrity and format.',
tags: ['files', 'validation'],
+ lifecycle: 'production',
},
{
name: 'search-optimizer',
@@ -1106,6 +1200,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for optimizing search performance and relevance.',
tags: ['search', 'optimization'],
+ lifecycle: 'experimental',
},
{
name: 'mobile-analytics',
@@ -1117,6 +1212,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Analytics service specifically for mobile applications.',
tags: ['mobile', 'analytics'],
+ lifecycle: 'experimental',
},
{
name: 'system-logger',
@@ -1128,6 +1224,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for logging system events and activities.',
tags: ['logging', 'system'],
+ lifecycle: 'production',
},
{
name: 'media-validator',
@@ -1139,6 +1236,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for validating media files and formats.',
tags: ['media', 'validation'],
+ lifecycle: 'production',
},
{
name: 'user-audit',
@@ -1150,6 +1248,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for auditing user activities and access.',
tags: ['audit', 'user', 'security'],
+ lifecycle: 'production',
},
{
name: 'data-normalizer',
@@ -1161,6 +1260,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Service for normalizing data formats and structures.',
tags: ['data', 'normalization'],
+ lifecycle: 'production',
},
{
name: 'admin-authorization',
@@ -1172,6 +1272,7 @@ export const data: DataProps[] = [
type: 'service',
description: 'Authorization service for administrative functions.',
tags: ['admin', 'authorization', 'security'],
+ lifecycle: 'production',
},
{
name: 'test-reporting',
@@ -1183,60 +1284,6 @@ export const data: DataProps[] = [
type: 'other',
description: 'Tools for generating and managing test reports.',
tags: ['testing', 'reporting', 'qa'],
- },
- {
- name: 'event-aggregator',
- owner: {
- name: 'platform-team',
- profilePicture: 'https://github.com/platform-team.png',
- link: 'https://github.com/orgs/company/teams/platform-team',
- },
- type: 'service',
- description: 'Service for aggregating and processing events.',
- tags: ['events', 'aggregation'],
- },
- {
- name: 'payment-reconciler',
- owner: {
- name: 'finance-team',
- profilePicture: 'https://github.com/finance-team.png',
- link: 'https://github.com/orgs/company/teams/finance-team',
- },
- type: 'service',
- description: 'Service for reconciling payment transactions.',
- tags: ['payments', 'reconciliation', 'finance'],
- },
- {
- name: 'document-validator',
- owner: {
- name: 'frontend-team',
- profilePicture: 'https://github.com/frontend-team.png',
- link: 'https://github.com/orgs/company/teams/frontend-team',
- },
- type: 'service',
- description: 'Service for validating document formats and content.',
- tags: ['documents', 'validation'],
- },
- {
- name: 'service-monitor',
- owner: {
- name: 'devops-team',
- profilePicture: 'https://github.com/devops-team.png',
- link: 'https://github.com/orgs/company/teams/devops-team',
- },
- type: 'service',
- description: 'Service for monitoring service health and performance.',
- tags: ['monitoring', 'services', 'health'],
- },
- {
- name: 'security-validator',
- owner: {
- name: 'security-team',
- profilePicture: 'https://github.com/security-team.png',
- link: 'https://github.com/orgs/company/teams/security-team',
- },
- type: 'service',
- description: 'Service for validating security configurations and policies.',
- tags: ['security', 'validation'],
+ lifecycle: 'production',
},
];
diff --git a/packages/ui/src/components/Table/mocked-data2.ts b/packages/ui/src/components/Table/mocked-data2.ts
new file mode 100644
index 0000000000..30ca36a689
--- /dev/null
+++ b/packages/ui/src/components/Table/mocked-data2.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { createElement } from 'react';
+import { RiCactusLine } from '@remixicon/react';
+
+export interface DataProps {
+ name: string;
+ description?: string;
+ icon?: React.ReactNode;
+}
+
+export const data: DataProps[] = [
+ {
+ name: 'Cell with title only',
+ },
+ {
+ name: 'Cell with title and description',
+ description:
+ 'A comprehensive service handling user authentication and role-based access control across all applications.',
+ },
+ {
+ name: 'Cell with title and icon',
+ icon: createElement(RiCactusLine),
+ },
+ {
+ name: 'Cell with title, description and icon',
+
+ description:
+ 'A comprehensive service handling user authentication and role-based access control across all applications.',
+ icon: createElement(RiCactusLine),
+ },
+];
diff --git a/packages/ui/src/components/Table/mocked-data3.ts b/packages/ui/src/components/Table/mocked-data3.ts
new file mode 100644
index 0000000000..d209a0b5b4
--- /dev/null
+++ b/packages/ui/src/components/Table/mocked-data3.ts
@@ -0,0 +1,59 @@
+/*
+ * 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 DataProps {
+ name: string;
+ profilePicture?: string;
+ link?: string;
+ description?: string;
+}
+
+export const data: DataProps[] = [
+ {
+ name: 'John Lennon',
+ profilePicture:
+ 'https://upload.wikimedia.org/wikipedia/commons/8/85/John_Lennon_1969_%28cropped%29.jpg',
+ },
+ {
+ name: 'Paul McCartney',
+ profilePicture:
+ 'https://d2kdkfqxnvpuu9.cloudfront.net/images/giant/51895.jpg?1341834484',
+ },
+ {
+ name: 'Paul McCartney (Broken image link - fallback instead)',
+ profilePicture:
+ 'https://d2kdkfqxnvpuu9.clont.net/images/giant/51895.jpg?1341834484',
+ },
+ {
+ name: 'George Harrison (with link)',
+ profilePicture:
+ 'https://www.who2.com/wp-content/uploads/2015/10/georgeharrison-6-scaled.jpg',
+ link: 'https://en.wikipedia.org/wiki/George_Harrison',
+ },
+ {
+ name: 'Ringo Starr (with description)',
+ profilePicture:
+ 'https://ntvb.tmsimg.com/assets/assets/1686_v9_bb.jpg?w=360&h=480',
+ description: 'Ringo Starr is a drummer and singer.',
+ },
+ {
+ name: 'Ringo Starr (with everything)',
+ profilePicture:
+ 'https://ntvb.tmsimg.com/assets/assets/1686_v9_bb.jpg?w=360&h=480',
+ description: 'Ringo Starr is a drummer and singer.',
+ link: 'https://en.wikipedia.org/wiki/George_Harrison',
+ },
+];
diff --git a/packages/ui/src/components/Table/mocked-data4.ts b/packages/ui/src/components/Table/mocked-data4.ts
new file mode 100644
index 0000000000..b86d4c903f
--- /dev/null
+++ b/packages/ui/src/components/Table/mocked-data4.ts
@@ -0,0 +1,223 @@
+/*
+ * 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 RockBandDataProps {
+ name: string;
+ image: string;
+ description: string;
+ genre: string;
+ yearFormed: number;
+ country: string;
+ members: string[];
+ albums: number;
+ awards: string[];
+ influence: string;
+ activeYears: string;
+ website?: string;
+}
+
+export const data: RockBandDataProps[] = [
+ {
+ name: 'The Beatles',
+ image:
+ 'https://upload.wikimedia.org/wikipedia/en/thumb/4/42/Beatles_-_Abbey_Road.jpg/250px-Beatles_-_Abbey_Road.jpg',
+ description:
+ 'The most influential band in rock history, revolutionizing popular music with their innovative songwriting, studio techniques, and cultural impact.',
+ genre: 'Rock, Pop, Psychedelic Rock',
+ yearFormed: 1960,
+ country: 'United Kingdom',
+ members: [
+ 'John Lennon',
+ 'Paul McCartney',
+ 'George Harrison',
+ 'Ringo Starr',
+ ],
+ albums: 13,
+ awards: [
+ 'Grammy Lifetime Achievement Award',
+ 'Rock and Roll Hall of Fame',
+ 'Multiple Grammy Awards',
+ ],
+ influence:
+ 'Revolutionized popular music, influenced countless artists across all genres',
+ activeYears: '1960-1970',
+ website: 'https://www.thebeatles.com',
+ },
+ {
+ name: 'Led Zeppelin',
+ image:
+ 'data:image/jpeg;base64,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',
+ description:
+ 'Pioneers of hard rock and heavy metal, known for their powerful riffs, mystical lyrics, and epic live performances.',
+ genre: 'Hard Rock, Heavy Metal, Blues Rock',
+ yearFormed: 1968,
+ country: 'United Kingdom',
+ members: ['Jimmy Page', 'Robert Plant', 'John Paul Jones', 'John Bonham'],
+ albums: 9,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Lifetime Achievement Award'],
+ influence:
+ 'Defined hard rock and heavy metal, influenced generations of rock musicians',
+ activeYears: '1968-1980',
+ website: 'https://www.ledzeppelin.com',
+ },
+ {
+ name: 'Pink Floyd',
+ image:
+ 'https://upload.wikimedia.org/wikipedia/en/d/d6/Pink_Floyd_-_all_members.jpg',
+ description:
+ 'Masters of progressive rock and concept albums, creating immersive sonic experiences and thought-provoking lyrics.',
+ genre: 'Progressive Rock, Psychedelic Rock, Art Rock',
+ yearFormed: 1965,
+ country: 'United Kingdom',
+ members: [
+ 'Roger Waters',
+ 'David Gilmour',
+ 'Nick Mason',
+ 'Richard Wright',
+ 'Syd Barrett',
+ ],
+ albums: 15,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence:
+ 'Pioneered progressive rock, influenced concept album development',
+ activeYears: '1965-1995, 2005, 2014',
+ website: 'https://www.pinkfloyd.com',
+ },
+ {
+ name: 'The Rolling Stones',
+ image:
+ 'data:image/jpeg;base64,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',
+ description:
+ 'The "World\'s Greatest Rock and Roll Band" with over 60 years of blues-based rock and unforgettable performances.',
+ genre: 'Rock, Blues Rock, Hard Rock',
+ yearFormed: 1962,
+ country: 'United Kingdom',
+ members: [
+ 'Mick Jagger',
+ 'Keith Richards',
+ 'Charlie Watts',
+ 'Ronnie Wood',
+ 'Bill Wyman',
+ ],
+ albums: 30,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Lifetime Achievement Award'],
+ influence: 'Defined rock and roll attitude, influenced fashion and culture',
+ activeYears: '1962-Present',
+ website: 'https://www.rollingstones.com',
+ },
+ {
+ name: 'Queen',
+ image: 'https://i.scdn.co/image/af2b8e57f6d7b5d43a616bd1e27ba552cd8bfd42',
+ description:
+ "Revolutionary band blending rock, opera, and pop with Freddie Mercury's incredible vocals and Brian May's distinctive guitar sound.",
+ genre: 'Rock, Hard Rock, Glam Rock',
+ yearFormed: 1970,
+ country: 'United Kingdom',
+ members: ['Freddie Mercury', 'Brian May', 'Roger Taylor', 'John Deacon'],
+ albums: 15,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence: 'Pioneered stadium rock, influenced vocal and guitar techniques',
+ activeYears: '1970-1991, 2004-Present',
+ website: 'https://www.queenonline.com',
+ },
+ {
+ name: 'The Who',
+ image:
+ 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQoKRCDsHx1DyrnXBxOgpPUHZZIwebCq91Ge8oQylUJXlWzlOwtzQtepNBzfbT_497Ymm1sU1Oq2OV0qGmxa6igziOxHJX4Eo8oyk088RpF',
+ description:
+ "Pioneers of rock opera and power chords, known for their explosive live shows and Pete Townshend's windmill guitar style.",
+ genre: 'Rock, Hard Rock, Mod Rock',
+ yearFormed: 1964,
+ country: 'United Kingdom',
+ members: [
+ 'Roger Daltrey',
+ 'Pete Townshend',
+ 'John Entwistle',
+ 'Keith Moon',
+ ],
+ albums: 12,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Lifetime Achievement Award'],
+ influence: 'Pioneered rock opera, influenced punk and hard rock',
+ activeYears: '1964-1983, 1989-Present',
+ website: 'https://www.thewho.com',
+ },
+ {
+ name: 'Black Sabbath',
+ image:
+ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8qFdD0l8GNdMw30NkViSV7BNfUab-7wZXWs1jC3qYIt6llh-WVpJ9MLmgv4QKo9Gq-FOOYJ3-aOr9jQjDhcToYWj2VO9LbBIh7MO6e34PNw',
+ description:
+ 'The fathers of heavy metal, creating dark, heavy riffs and occult themes that defined a new genre of music.',
+ genre: 'Heavy Metal, Doom Metal, Hard Rock',
+ yearFormed: 1968,
+ country: 'United Kingdom',
+ members: ['Ozzy Osbourne', 'Tony Iommi', 'Geezer Butler', 'Bill Ward'],
+ albums: 19,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence: 'Invented heavy metal, influenced all metal subgenres',
+ activeYears: '1968-2017',
+ website: 'https://www.blacksabbath.com',
+ },
+ {
+ name: 'The Doors',
+ image:
+ 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQVPqssHHK-u-EaYkVo8YuiCBINkJYVsAkqIlhojm2swhdc1Xn9lWkzokObi1_lAcr1CZ_dEbKnBTD9hfkUcPJ9vrwg-ARlgurH2rA5I4iwXQ',
+ description:
+ "Psychedelic rock pioneers with Jim Morrison's poetic lyrics and Ray Manzarek's innovative keyboard work.",
+ genre: 'Psychedelic Rock, Blues Rock, Acid Rock',
+ yearFormed: 1965,
+ country: 'United States',
+ members: ['Jim Morrison', 'Ray Manzarek', 'Robby Krieger', 'John Densmore'],
+ albums: 9,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence:
+ 'Pioneered psychedelic rock, influenced alternative and indie rock',
+ activeYears: '1965-1973',
+ website: 'https://www.thedoors.com',
+ },
+ {
+ name: 'Jimi Hendrix Experience',
+ image:
+ 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQkDuNxy0xKisGP4lUk7N0QqrOQpyHNy9U2lpQhKBH5BqnRn6drBm8HYWVwcFfea1brVTxs7jSSVH1hjyrwTlzGRZCgfC91C-YgEStSzuvMwg',
+ description:
+ 'Revolutionary guitarist Jimi Hendrix redefined electric guitar playing with innovative techniques and psychedelic rock.',
+ genre: 'Psychedelic Rock, Blues Rock, Hard Rock',
+ yearFormed: 1966,
+ country: 'United States',
+ members: ['Jimi Hendrix', 'Noel Redding', 'Mitch Mitchell'],
+ albums: 3,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence:
+ 'Revolutionized electric guitar playing, influenced all rock guitarists',
+ activeYears: '1966-1970',
+ website: 'https://www.jimihendrix.com',
+ },
+ {
+ name: 'Cream',
+ image:
+ 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGBoYGRgYGB0XGhodGhcXFxcdGRgaHiggGB0lGxgYITEhJSkrLi4uGh8zODMtNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIALcBFAMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgQHAAIDAQj/xAA/EAABAgQEAwYDCAIBAgcBAAABAhEAAwQhBRIxQQZRYRMicYGRoQcysRRCUsHR4fDxI2IWU6IkMzRDRHKyF//EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwAlV4xnUSm3m0Da7EUgEG5Hh7mF2uxm7JBvYk6wOTVAuTb3JeAMzq9GUlS7GwEB62uCu7cjkLDzJ3iPPmJFspcX2AjlUZiB3SX0/m8AawbGJKRkVLSQOjnreDdQUyimdKPcUWKf1hew2SmnR2kwZpig6U/h5ExGm4kpZbMEOfSAaqnGJcwORtfn4QCk4gEqBJAJ1HK/9RlM5Uy2J1CxorxjtW4P94A9QesA0UdehUrurS/59YZcIrzkZmPTSKuoxlLeGjw6YPiSUsSG2LwDZRYktKmNwPKGCmr0qhORVJV8uvS39x2TPIuGcHzgHlJj2I1Gt0JPSO5MB7AzFsYlyR3jfYCMxLEMoISxV9PGEWtnqWs951M6l8nfSAnV3FExRZNuQH7XjlT1izeYoWDtqRyd4Bzq2XKLJLqOj8yHBJiCawiWpzc3J8NYA9WY8EghLliz8yenK0c1YqEh1Eg+Jt06mE04mElg5O5015fzSOdXWTVDMyUpGj+zB2/uAdRxRMT8pLdf3gvhfFhXqb8jb05xTypyz8xUU/6gv/POJuH4jKll0yVK2da+WjszeDmAupePlIfUfvE2nxkHlFXorMycyWlga5SWIF9FCJUviGUkOFt0LsfNoCxp2JKN0B9j/UBq6tn5TuL7NAPBsd7RJVpcszN5h4PU9ao6F+adx4c4ABPrZirAMrx1bl16Rzn4mUtmNyQD0P8AcHauUlQKmuDe1x1DQicQzFSyQrKS/e6/hPQ6QB//AJHmsSwFucdp2P8AduoDVyduUVlIxElTA/UfnHWZXldlajQtYwDyeIjnzBbhtIKYdjqlr12ZoqgVRK+6bDfaGnBavIkXuq4L9d4C2sIW6nd7fxoPIhBwfEcqQxDn7x/mkPFGXSLuYCUBGR6IyA+PRiBdhBjC6JayCx56c7RC4OwwzqlKWcC5i78K4fSlLsHf6QCdR4B3MygM2ge+XrGtTgqmD947bCLLGGjlbwj1dAlrjSApDEXSshYN7+HhEOmuoMwP3XZvAvDzxhhySoM1x/PeEcpax2MATRLUpRSUhChe3yny2g3h1aFDKb2b02eA+G1+ZJlqdx3knfqI6005KFlOxVmv1gN59NmXmQSPxAlm8+UF5FQMrZhb8Jf9jEZS0JfQuN9NN4DqqkhVgBfbT94BwpArLmChby9oKS6gljv1DGFg1qclrkjb9YlYbiCkkA94PaAtCgq2QATEPEeIUpdKWJvp0+g6wl1+OFMs5DdlEnYAa/31hGreJZjlKH6nc+PIdIB2xTiJrFQCXc9Tf+NtCzUY7MWciDlBNxqb8+sA5BUogrJMxVgCLIG5bnyiSqYJScsvvLIueT7DrAZWVOU8iLku5c6frHGdPWoJcs4MdZGHZiQW0zKJ2Yf2Yj4nND2By6DZ20YbCA3TMALAFh6nwjAlc0upVh6AX9TtHGikqX31gJCdBt19PrE6oKUnIksEgW5kh/eA0OQCwZPM6n8z9Ik0NOlQKilkjSzdXflA5EkrWl+g6XIAgjjWIFLpT3QLWGwtbrADsVrVqOUem9+mwt5xF7FYQUvYEC+gJd/pEnDmSRMNyo2HU8+Z0iUkBQPJ2bmdz5WgC/DeaUBd0bjn5cxrDpQpCklctRUBs7keI/OEbDVlMzIN7j1D225wYw2pXJmKUjQEFtilQdj4G3lAH5NW5UEuCLF/HrrCLxiDmJmF1E7eFriLBNOiekTZasr+j8i3X6QkcVYbNQFKUXBfKAXfSzne8Ah9oXygteJilrSDd1EX5geEQ1ylJAWNXLHw+t40plrzBg5J994DvTKWo5QCx1tDGiYJZCQrYWO0RKOpQGBUytLAfWNKlAzOltXfk3WAaqLEFuGudRsB67Q+8O8QKAaZc6vpFQ0lQc1j69fHrB2gxYhkJJcfNs+2vKAuVHEErctGRXdNjCcrZQW1L/tHsAk/CSQ9Qo/6xedMkBLRR3whm99Y3tF6UibB4D1IMaVEtTW1ialIjZSAYCr+N6dQUCE23OvWECdSla+4Rn3SSz72P5ReOP4N2oZ2in+KMCMqbADqrD5iUpUzKTqG28IhKrDnzaGCCMWUhGVaiWte9uTmB85KVkqTz/ggJ8mqz2OsbJlqfvDu+/7RGprDkfaJPapBIU/XrAczMIUQLX0P5QbpVZXubByoNZ7nzv7wuqSkHMlyH8Wjeoqj2YB0J7zWzAaOfGAl1tbnJN8pYeQ0/WIktGdQRJSMx3Op5noBHCjSZyr+XIf1DHRolUcszFEKWQyR01PqW9IDmvD+zGVJdTDMd9DYeNzHOXQ9jMJJCrP0FiSSfLXpHKXXqKHUe8pbq8wH9BaOGO4iCpSU/Kf+5mYeFoDtV16CjKPl15FXU/68h1iGkpSDMVfpoE+fP3iIqaAHd1FPu+p5ty0jgqYZhAJZKTpzO56k84Av9oBT2irJDMNi10j19hETDZKlrJPzKc6aPqY3z5hpYBkp2H6mJ0hIQQ5Ys55trARUz8qybMOnLSI2KLClBWymP89faMxioGgIcjTlENNS6HVZiwP1gJBUUpBF7FmO5LP0tEmVUgBIGrW8SdW8oHSKoKdO5unx6RIoLKc/sGgGCnAlhKn75UD4XEF8PqUqm9mVauB4Akp87n0hTm1Lrz3azHYc7xCRiikzlLBuF5h5O/8AOsBZ2F1/YrKVOxJH9/UGOuLze4op7yVbgsfMFwqFWRjaZlwNRpyYXHhHcYiycuo5A3G501gBfEElAloAIHfUSAlKctkhrWOhPnCzWU5llKg/MFm6xNr67/IVEnVgCHy32JjnVTjMsolntz9ICBLSp7wWo0FnUH5dYhrpTLPe0EETNeUCMxI2a0B0ky+85Ntn+jx0lYhkLgMef0jSZWyuzSnIQvUqBP0iGs9HHv5wB6kkKWnNn16tHsc6KvyoACj6CMgJHwhXLliZNmFgC1/aLFmcdSA4Cgw3e0Uhh8qZ9jJQ7FZdojqw6cQe6pwCo2sB1PPpAXPM+JNOC2d35CC+D8ZSpxYKHrHzgmSo6A89ILcPT5iJ0tnZSgm3UtAfRC8cQV5X2eEri6dKmKJUpiNImcRcMLlyFTpSzmSl2PQXilKvFJi1OVEwBqsmIch3jhQlKFH8JgGuoUdY2RUQDWlaD/Nf3iHiOVixci46iB0ueSloiT56nDwE/D68BTH5SbvEmslJKmQ7E2bTz/SBtPhkyYnPLGcD5kpupN906t1EMWEUKyHSgSkjVawSfU/SA1lICVJALZUuS25P9RErJ5nLB2+VI5AQQx0oQCkKuWJV0Y5f50iHgi0JSFki2nkXP5QG2LzwhfZJ0QkAn/fU/wD6gMqcTdt7eH9GOVZXFUxbksSfcvHKXO0G+0BNIJOUcmj2T3bk/rEZM0gO+8b0ySSnxgDmFd8uBYecT1U65s05Q+UeF+UdsEwwsTnygn84cMKn00hDWJ5loCt8cwlaSCxJe5ZmtAyokpTTkk9/MwHT7xizMZxymynMgN/NIXpdbhs0FClFJVa4sPPaAV8IwRc1IXte/hEqTQzJa2mS1EHkHB6iH/hnC5MpJyTgtB2sb8x5Qco6NOZSkkMn6wCDW4SpclMyWkswDMWfTSEOaopUQdQbx9NSJSFIuxilvidgYlT+1lhkqd+TwADCKllDlBmbUM5HL+4U6dZEF6Sozam7f1AR61ehs/Qfy8e0s5h3nJOh5RrOlEnxFvWO0qRoHHnAd5s0lICi42iZhGICWCDe9v0jmqjOU3fe0bYRhqllmJ8BARq6YVqUo78oyjngHvaQWxfCMic0Ly1DSAMrSglwsgGPIHInBt4yAtL4Z4QldAhwLkn3iRjvDc8LzyDlJFwdD4coj/CrFAKVCH6e5EPa57nlAV9K4bqG/wAqpbaMkFzBzD+GJacuZKQ12YawzLCUubPEGmrHU2rmAKYtLenUDplL+kUP/wATCyoJbciPoCvDylDofpFSYROH2lSQ+pgEmvwLs0uZaj1Fx7aQKp6HMe6CIveZhKVaecDZmDyU6pD+EBWNNg5QCoi0AK9LFotPH1y0y2AiqsTX3z4wBDApYzBRmZALsLk+ABt5wUrMTzqUVOUBXdD2ADDQed4V6MnMAPOOsyeQL/zlASa3EjNzHcq9gGHtEIzlANsIm8M0nbLUj73zN9Y1x2hMpYS2odoAdMuXjwRsmUoaiNkJfm8Bsg2hh4cw5SyFAWGkDsMoysgNvFtcLYQkBL2GmkApVtYZQZaSBC7V8RqLhILmL2qOHpE0ATJaVeIhfxbg6UhQmS5CVAfdTY+VoCk66qUq6kt0e+m4/OIqG5RYfEGEyJy85lTUqZiEpZ25hjfqGjrwzwUmbMKjKmBHJbAdG3gF/hGimrmASyT4GLRxaWulpMrFzdSuu94KcPcIy6UhSR3oNcW4aqoop8lFlqlqCfFnHvAUwr4iLR3UhwOcZM4qTXS1yZqAFEd1Q2O0JeK0C5KglTuUhWnP67jyjKCc12uICMzEjcWghIAa+kQAoqUTzL+8EKmeyAlhd3/L6+0B0RNzKH86QVpsORnuXhbppzG4eD+H1jkWvANuG4alSFvytEnA8MXKfKM3QEC3R7RArcQXKQlWUsQ1x6QJHFtQn5CAOTPAPVdgvbSy6QjxIcluloq7GaIyZhSfKCqOJqgllzG8Rb0jTiNKpktMwsoP8w6wC7n6R7GmSMgCfC2OKkJYHQn3ixsK4uzh1RSlPN2EPXA+E/aDZTAG8BaIxRcwMgOG1ELdb8R5NMUyEoUVILLJG738YcaJMillncgX3cxVvFNAiqnrmS0Mo3tv+sA4V/xQp+ytctpCpgONionBSUsoEk+B0hEnYVND9xTDW0PfwwTKlqUJllK3P0gH6XigGsDcTxYMb+cSMbwsqSVSSH1MV5iQmpPeJgOWO1xUVQl1CnVB6rXaF2ZMZUBMw+U2ZXIN6t+TxGqJo19OggpKrAJKgwc2SwZzufIfy8CpySBdiYDpgmJmnnonC+U3HMGyh6RalVw3LxFMuokzBla25G5SRzEUyowX4b4hqKReaSsgH5km6VeI59YBgx7AjImKcqb/AGFz6QDopZVMCQLkwYxvi9VSO8gAnzuwFoH8NozT5Y5qHteAsTAMDSlAIF936w34cgjKwsI8oqU9mGETqSjKS5Pj+cAXpakGJoIMBZCSNb9YJUyoDFUgVqPbWOolpQLMI2XMYPC/i2JjOkFQSh79fOAPy5gVpHdOkBFY5SywM05A6Zh9Iky8epzpNT6wFW8UYHMRNUJkjt0Z1FKg2ZIJJAO8V5xFh5p1BLNnct0BsI+jqkIWokKBsHa/80ijvi4B9uCRomUn3Kj+kAqUaXvyiZNpsyCp77DnE7BsMURobsPUtDQOFVEM9vCAryVTqfQwy8JUSu3Q4cOHhooOEkgZlAmDuCYOEmw3gD/FfDaZ9IlKAAUlJty0MIkvhNMlYK8x6ZXA8TFyyEPLSOgjqqmSRcCAqb/iNNPmZk5iSPkTYPzPIRLxPgXsaOakKe2YdGvFny5aRoAPKIGPqAkTH/CfpAfMpjIxZubbxkAuyjeLBwCpVSALSf8AzEuR4Qgy5Z1a3OH+skhciVMQzBLH+bQHSdxhVKCwmQVDmAbRAwzF8RzPKkqLl+6kGJmHSqoI/wALH94GVUvEUKzCXMSf9d/IQBfEOI8SWCn7EUAjvf4TfqXEA5OMTELBVJUC2gG72LR0VVYspwpNQedjG2E0dYpdpKgdyoX94BmwPjVQIStJCSWL2Ie0dsflCY5S2kBMdw6ZLAz6n2grS0p7EqUdt4BExNTEsekBQrvc4n4grvEdYidhcMYArhaAsh02HUt6aeUQ8TcqOw5RKkVRCcocP7RGqkn2gBZESKGSVKCRqbRqUwzfD6g7WqAIskPAR8UwUyUJUX73tZ4I8ASQupS+wLRY/F+AImSfldhy03tCHwfJMmqUDbx8YC6KFACRE9AG0BsPqwUi8FJU02Zm3/m0B2cuwTyvtHfM2unOPZXgGiQpDwEQoMw2cJ+sRMe4el1EkylOncKGoPPrHTE8YlyRdQHmIHHi2nSM02ehA6m/kNYCq8e+G8ySFzDMC23Yv5wCwCjnz1iQlRSAHcubPtFqYjx/QLHZd9SFd0zAGA6sbn0jlQYhhypwRTTAZiQ4swIGoB3IF2gCWFyBTUwQFE/iUrUneKXxuu+1VsyYbgqYf/VPdHqz+cWj8SMSEikmKGqmSm+6rW8A58opXC5zLBPOAsvh+nKlJUQGSzDqLOYdqOnKr7Qm4FNsG35Q9YWhw0BNVSJCLQJoFoSQtawkBZs+sMiZGYMYqrjnhiaZylJmHIS4F7c4C5qatlEAhaWOlxEiRNBfKoEdC8fOWHS5+dMoqWz5dTF7cF4MimpwlJJKu8okuSTAF52kJ3GdaRTzsp0QfpDlOTYxXfH8zJTTE7qtAUsEmMjuERkAQrqCXLp0y8veK1F/VvpAOTWlA7Mu3KLF4jwQqkpWLKSSfQl4Q8bw4gBY3gLH4QxqQmSHZ0/WDtXxPJ+UMTbyeKFkVakGxIjFYosFwoudYC8qnjCVLcaveJMniWnUAqzNc8niglYksi5JjpLxRaQADblAWZxfj0orAQoEa87wrY1xUVS+zQIWBPJudTGqZTmAlYbh8yepkpKlE7QRpEopzNRUSiZjd0HY84tX4ZYJKRTImBlKU5UdweXSDHE3CFPVsZiWUNFCx/eAoCUXUw3P5xPxaiUQWD5ACttnFreRPlFtYD8L6aWsLUpayDZyw/eGap4XlZ86EgBUvs1pYd4Bwk31IClC/OA+YFGLP+CuGuZ048wgeQc/WBmLfDmb2j04JSqbMQAoMU5FZb9LEv4Ra/BnDwo5CZQ1F1HmTrAFKimduW4bWK641wnslJmoDNYt1i1UyrQF4koBNllJG0BXWEY6zObi0NmHYySRsOTi8VTjFIqSop22idg2NZWCngLnpcQsCD5R4cWKiUuB53hRwbHkqDD00PW0MaKRM4XAt6uPCAhV/C9PUOZ+db6d4oI8MrPC9P4EwlbgTZwUP9ySOjHUw8DD5jd1rDkxH6whcV8JVSiZkqWSrcg38oAPXfClSnNLVoWNkrsfAlP6QoLoavD6hHaSyFJLpI7yTqLEW5xInUtdIUX7VHqH84YpOJLXTkVC3LedruTAAuPscXORTSj91HaEdVWT6JH/AHQrUyrx0xSr7aapexskckgMn2Eb0aQ+kA78IYkQoJMWlhM0BtYqXAZyEkKa4h5w/FXcPaAbarHQh7gAWeF/EMfpSHnTkjoLn0EC5OFJmzM09ZUl7JdvpePKnD8MlFzJY9XUPeAk0/EGFA9o68ydm16w04dx7QlLIm5T+FQI9IR5OO4clX/okE88oMPHDlbSTQCmnQnqUAeloBqoq5E5AUgggxTvxMxN5ikDQFv1i06dcuWshAYHYaRUHH8xE2rMuUB3dW3UdYAJhYlZP8iXL82sw/eMi7eCeHBJo5aJ0qUpd1EsFFlFw5I1vHsBFThHaJWldg5b6veEDiPAhJzIJzC5SdPERatNOJJBhe43w4zJRUgXTfx5wHzzXU2VZfR4jECGDGKcOS0CFoHKAgTCI8SmJhljlG6ZUByRLjqnu3jqmXHtNQTahWSTLUshnYWD2BUo2SOpIgLU+CtcVS50vUJIUOjxZE1BMVRwLKOGzFdqtKysBxKOYDRhmIAPzDp1i2J2KSkmShTpVPAyAAm5G/IdYDemtEHiLFZskyEyhLzTZmR5j5QMpVtuWtBaUZYmdmT32zNzHMDk5gdxVhqZ0q6M+QlWQ6KsXHjuOoEARRKGpYnm0a9neAfANb2lMEEKGRsuZnKDdBLE3A7p6pMMi0QGZbRHqKdwYmoTHikwFWcZ4JmJIDxWFbSZFaNH0NjVGFQgY9w2lb7QFbU09aC6SYb+HeNFSy0z1hcxTClyj0gQqbeAvjDuNJZ19Xhgk8QSVJfMI+cKacQQyiIdsK4LxGakLHdBDgrVlcG4tqIC1Z1VT1CSnuqG/SKW+LEyTJUKeTqrvL/1D2A5Al7dI6Y7VV1AQicCl/lIuFeChY/WEKumzJ8xcxRKlG5JgIcrWCqKcgAwMpqdS1hCElSibAaw4UVDMSOzmoKFgOx3EAIp55SYKUuJKcMq8Qq+jymIiC0BaGAI7axUz9YcKThWQR3zm8YpfCsbmSS6TDJI46nNAWhSYBSJLCUjxa8G0YNJbuhvCKY/5fN1zGC+GcW1MyySYB+rqaYcyKcAr0zEsEPuf2hJ/wD53WypnaDJNcuSlTG5vZTRY3CkkiTmV8yy5P8APODiRAQ6NU1SASgS9spOY2G5FoyJ4EZAKeG1ecJUxAWkEOGfy25x0xWR2iCgFs1oCY5xOino/tKxcMAgG+c6J6X9o84H4iVWSkzJiAklRZtxqk+n0gK242wE083K7hQcH6iEqfKaL8+JeFCdSlYHelHN5fe9r+UUtIwybUTOzkIVMUT90aPzOiR1MAGTLiZTUylqCEJUpR0ADk+QiyuH/hCsgKq5uQf9OWxPms2Hk8WVgnDlNSJaRKSl2dWqi3NRvAVbwx8KZk1l1ilSkf8ATS2c+JuEj1PhB/i6gpqSmTR08sIStQdjctclRJzLLPryiyMsIXxKpWVJnEsgKyENpmSpObUaPvs/OARqanM2clCZikhSkJY2IcgDzPd03i5ZtbJE1Ehjn0T3VMGD2WzAsNHG0VdhakyKwKKgpl5iLF0HL3ksByQphtpFiq4iRL7k0BBKVLlqBdEwAP3Dza7HrrACOJKycVidJkTCZLtODHdlJMpwpSbEP7wz4diCZ0tMxNgpKVB/9khX5t5QCqcRM+np6qVYqUApOZu6p0zGcOopDlmctChxbNrO0lmhkTkokgZTkUm4GV8pHecOCGe8A210gUdSmpDiTMOSYHOVBUfmyizFTEk6X5mG6WoEAguIR8K4iFdTrp5yTT1SkKGRaSl3Hzywsd4dLke8bcB41/8ADVKyTJIZd99Ab3Vm1fqOcA9iNFxpnjhMqdWBtAcK7rCxi6mL7QdqVKOunjCvjgUxvaATuIpgUDziu6uT3rQ14ytTnUwDkyCtWkAb+HuA9vUS83ygufK5j6JQLMNIrr4W0ASlc1uSQfc/l6xYIWWtAV78bMdTKpRTAArn3vfKlJDkdSbDzikAsiWWbvW1v6RYfxwlNUylkuVSyG5ZVbesJNTgcxFMKhQDKUAL3DuzpaAMfDaZSS5kxdRNEs5WSSPVrawa4u4rpJhlIp0qOU3mqDODsBrrCDJw6cqWqamWrs0h1KawGmsNHBnAy65ImdoEIz5TZyANTrYvYCA6VNJnBPOF2ppikxZGKcMLo2Tmzo0CyGPgRzhexSgcPAKiBHeU8brkMYkU0l4DtQ0ylG0WDgeHZAkAX3hdwqUEM9yYeaCYEyzMVokE+0B0oeNewrTImEdgwS/4F7nw5iLKlLBuI+WZ1Ypc1SzqpRV6mLm+H/GKFy5cib3VJAQlWx2D8uUBYjxkax5AfPPG2KSp1AQgkE1JN9CA+VudiDG3wvx9CP8AEtQSQoW5gnukeCrEcjAXjFXaCVKTlupSzlYXygOw08OkTOCeA500pnTGSM3+JKrdo3zKO4QPc+4XvUBCwQohlJLjpu/6wJwSpoZSuwkKloJZkggFXg91GEnG+IDKlfZUKzF3mrQfnUSxSlTfKlgH3ZrR3wOX9hNNOrEjtJ6iAVf+ylhtsouH5CAs949eNEKSwIIY3BdwX0bnrHQCAyAnF1B21NMTuzjy19oO5Y0WgHaAoudMQqnC1ghScwKmICW+ZGYfdUoWewdW7GJ9FP8At1IKW+cf5KZRUxP45b82Nn1tpaJfE9OKWtXLPdlVSQAcrhKg+UhLMSCwOtrb3FTqg9lLWJYSUn5kM0sgAyyAL5goKYfhcXIDBvwcaxK0qBqBSyipKjLSFEH5lAoUCSHLmxIdosTFlTKiSj7JPl9qRmGeyZiWILM5DP8Ad0Ni0cuEMaTMQtBZFR86wLAkgDtUjkbO2hvvHLDa5NTTzZapGdcmapMwIZMwXOWcgczckDcKZ9CHvEc6mT2AqUlKc4SibtLmAuO+C6C6WfTV44cS0cn7TKVLnS0VZy9zNlVOQ+njYsYTKmlVU/8AhlVCxlX3O2KgklTsm93N73D8nu3pwtCpkmZX0k4TacJCJiM01ByF0k9m6tbsp/HWAdKGqExL5SkiyknUFn2sbEaRtNQ8K+MzZlNVy6tz9lWgJWLpY97vKSdCxs4GhGrQ3SVhSQpOhAI216HSAEVyikQkY5XAlosTE5Kciio5QASTyADkxUNLiCKpauzCgzOFi7HQ2MAOr0BR0jlJw5g7Q4UfD6iXYARrWUffypGnpAZwridTTz0UypYVTzAFJUBdJUNSdxmBB5RZVLdA8IrHAElWLyWKyg0aZmUEhKSXBJDsXLXD6iG3hzG/80yjmghUtaky1nRaQXSH/Fl9WgFj444ZmppU8B+zmMfBX7gRWvEvE6KiVLky5SpSEsVjM4UQBbwF2i/eOMGNVRTpKSApQBBOgIUCPpHz9xZwpMo8hUUqSpxmT+IXNjpYwHPEOJVLkimlJySgGN7qALjN+kMXw444lUEqbLnS1rzKC05G1ZiC5HIR0+HvCUtaDU1DFLEoSbC2/XTSAODYBUYlUTOxQhOqlFsktPIWBYnl4wBvij4lTaoIQmUmUhK8x72YqZwASwYXjaXUiagKTofWFHHsJXS1EyRMYqQWcaGzgh9oe6niOlqZcmVTSJiFy5YCiyWYAA6F1X36wC7V0/KOCJagQwgpNN7xIpcgLmAIYNQrIClQQ4xxDsqXsx8y7eW8dqesGUFmAhN4mqzMXrYbQEXh+iE6oRLP3vXy6xcdJwnLk1EifLITLSwWFaWFj0JPPdopPDp65cxMxBZSSFA9RpFkzOPJ66YpMi0wFJmXyuR3sobXo9oCz5+PU6FFKpoBGo5RkUxSz1FO56xkBy4C4cNZMNbNAElDS5aHvMVYd4jRLm51P1ZeOcZ+yp7FNpi0s6bdnLe+U81nlpblGRkAK4WwiWhMysnB5FOSoJFytYygOCdE+6i8NOP05xCTQ5XTLnHOpRCSUvLJ8XYqZt2J0jIyAYcGwpVORJCiuUzpKiMySGGVmuLghuRgvLSrMrMzfdI16gjxjyMgO2WPCiMjICrfjfKKZUiaNQsj2zD6H1gJSkz6chBexVMb7ic2d0hYAV3nOr2trGRkBDwqonWnBf8AmlHMk6Ol150qGjES1H152tHhyQmZUKq5bhFVToPIhUtRSoePfF+kZGQEHE+FpyqCaifPM9ctRmyln5wlL91SjYkpcbXMMHBlaZ9JKWp8zFJe5OUlIJO5IAPnHkZAFK+gROQqXMSFJVqD6g+IN4HYGhaQuRMY9mQEEaqQQMpVyLghukZGQHnFtCZlHUpT8ypKwL2+UmKi+FuEzlVSlobsRaY5vldg3XMPQHnGRkBbWNzkU9PNmAfIhSgG5BxAXAuHZiM6ps0ThMAWhWXIRmBdOVywulrmMjIDhw/gBkVkuZMvM7Jco5VdwBIlGWkDe2cu2vlC/wAdSlSa3tEFjMSJqCCRdLi7cmfxjIyAeeG8cFVTBSwywEpmACzqsCOhPpFMfE/E5cyYinlgnsMwUo/eV0HRtYyMgBcniucJPZZU2RkQoWKbMot94kekS+CuMV4fLnJRKStcwghSiQAwa4HzD0j2MgAWN1kyomKnzGzKN2DD0jng8+ZLmpmSlZVpuOvMEbg8oyMgDCsYE6YSpCZebZD5Qd2G14J0WHFREZGQB+tpChIRuYVsVpCkttGRkAyUvC0nsaGao3mzMq03ZQdxcacofOK/s9PTdgadIlLSoJIA7q2sw1HjGRkAg4T2aUNMzu7hm0YNGRkZAf/Z',
+ description:
+ 'The first supergroup, featuring Eric Clapton, Jack Bruce, and Ginger Baker, pioneering blues rock and power trios.',
+ genre: 'Blues Rock, Hard Rock, Psychedelic Rock',
+ yearFormed: 1966,
+ country: 'United Kingdom',
+ members: ['Eric Clapton', 'Jack Bruce', 'Ginger Baker'],
+ albums: 4,
+ awards: ['Rock and Roll Hall of Fame', 'Grammy Hall of Fame'],
+ influence: 'Pioneered power trio format, influenced blues rock development',
+ activeYears: '1966-1968',
+ website: 'https://www.ericclapton.com',
+ },
+];
diff --git a/packages/ui/src/components/Table/styles.css b/packages/ui/src/components/Table/styles.css
deleted file mode 100644
index 63502eaa51..0000000000
--- a/packages/ui/src/components/Table/styles.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.bui-TableRoot {
- width: 100%;
- caption-side: bottom;
- border-collapse: collapse;
-}
-
-.bui-TableHead {
- text-align: left;
- padding: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
- color: var(--bui-fg-primary);
-}
-
-.bui-TableBody {
- color: var(--bui-fg-primary);
-}
-
-.bui-TableRow {
- border-bottom: 1px solid var(--bui-border);
- transition: color 0.2s ease-in-out;
-}
-
-.bui-TableBody .bui-TableRow:hover {
- background-color: var(--bui-gray-2);
-}
diff --git a/packages/ui/src/components/Table/TableCellLink/types.ts b/packages/ui/src/components/Table/types.ts
similarity index 61%
rename from packages/ui/src/components/Table/TableCellLink/types.ts
rename to packages/ui/src/components/Table/types.ts
index 51df3724cf..6cdc339d18 100644
--- a/packages/ui/src/components/Table/TableCellLink/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -14,13 +14,22 @@
* limitations under the License.
*/
-import type { useRender } from '@base-ui-components/react/use-render';
+import { CellProps as ReactAriaCellProps } from 'react-aria-components';
/** @public */
-export interface TableCellLinkProps
- extends React.HTMLAttributes {
+export interface CellProps extends ReactAriaCellProps {
title: string;
description?: string;
- href: string;
- render?: useRender.ComponentProps<'a'>['render'];
+ color?: 'primary' | 'secondary';
+ leadingIcon?: React.ReactNode | null;
+ href?: string;
+}
+
+/** @public */
+export interface CellProfileProps extends ReactAriaCellProps {
+ src?: string;
+ name?: string;
+ href?: string;
+ description?: string;
+ color?: 'primary' | 'secondary';
}
diff --git a/packages/ui/src/components/TablePagination/TablePagination.stories.tsx b/packages/ui/src/components/TablePagination/TablePagination.stories.tsx
new file mode 100644
index 0000000000..3a80302b70
--- /dev/null
+++ b/packages/ui/src/components/TablePagination/TablePagination.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TablePagination } from './TablePagination';
+
+const meta = {
+ title: 'Components/TablePagination',
+ component: TablePagination,
+ argTypes: {
+ offset: { control: 'number' },
+ pageSize: { control: 'radio', options: [5, 10, 20, 30, 40, 50] },
+ rowCount: { control: 'number' },
+ showPageSizeOptions: { control: 'boolean', defaultValue: true },
+ setOffset: { action: 'setOffset' },
+ setPageSize: { action: 'setPageSize' },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ offset: 0,
+ pageSize: 10,
+ rowCount: 100,
+ },
+ render: args => {
+ const [{}, updateArgs] = useArgs();
+
+ return (
+ {
+ updateArgs({ offset: value });
+ }}
+ setPageSize={value => {
+ updateArgs({ pageSize: value });
+ }}
+ />
+ );
+ },
+};
diff --git a/packages/ui/src/components/DataTable/Pagination/DataTablePagination.styles.css b/packages/ui/src/components/TablePagination/TablePagination.styles.css
similarity index 100%
rename from packages/ui/src/components/DataTable/Pagination/DataTablePagination.styles.css
rename to packages/ui/src/components/TablePagination/TablePagination.styles.css
diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx
new file mode 100644
index 0000000000..e7827e6ab9
--- /dev/null
+++ b/packages/ui/src/components/TablePagination/TablePagination.tsx
@@ -0,0 +1,120 @@
+/*
+ * 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 clsx from 'clsx';
+import { Text, ButtonIcon, Select, Icon } from '../..';
+import type { TablePaginationProps } from './types';
+
+/**
+ * Pagination controls for Table components with page navigation and size selection.
+ *
+ * @public
+ */
+export function TablePagination(props: TablePaginationProps) {
+ const {
+ className,
+ offset,
+ pageSize,
+ rowCount,
+ onNextPage,
+ onPreviousPage,
+ onPageSizeChange,
+ setOffset,
+ setPageSize,
+ showPageSizeOptions = true,
+ ...rest
+ } = props;
+
+ const currentOffset = offset ?? 0;
+ const currentPageSize = pageSize ?? 10;
+
+ const fromCount = currentOffset + 1;
+ const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);
+
+ const nextPage = () => {
+ const totalRows = rowCount ?? 0;
+ const nextOffset = currentOffset + currentPageSize;
+
+ // Check if there are more items to navigate to
+ if (nextOffset < totalRows) {
+ onNextPage?.(); // Analytics tracking
+ setOffset?.(nextOffset); // Navigate to next page
+ }
+ };
+
+ const previousPage = () => {
+ // Check if we can go to previous page
+ if (currentOffset > 0) {
+ onPreviousPage?.(); // Analytics tracking
+ const prevOffset = Math.max(0, currentOffset - currentPageSize);
+ setOffset?.(prevOffset); // Navigate to previous page
+ }
+ };
+
+ return (
+