diff --git a/.changeset/smart-melons-think.md b/.changeset/smart-melons-think.md
new file mode 100644
index 0000000000..2af8b1671f
--- /dev/null
+++ b/.changeset/smart-melons-think.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix the missing filter in the toolbar when passing a custom component in the core-components Table
diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx
index 12431dea59..ff17409502 100644
--- a/packages/core-components/src/components/Table/Table.test.tsx
+++ b/packages/core-components/src/components/Table/Table.test.tsx
@@ -160,4 +160,55 @@ describe('
', () => {
);
expect(rendered.getByText('EMPTY')).toBeInTheDocument();
});
+
+ describe('with custom components', () => {
+ const CustomRow = ({ data }: any) => {
+ return (
+
+ | customised cell {data.col1} |
+ customised cell {data.col2} |
+
+ );
+ };
+
+ it('should not override the toolbar implementation', async () => {
+ const rendered = await renderInTestApp(
+ EMPTY}
+ columns={minProps.columns}
+ data={minProps.data}
+ filters={[
+ {
+ column: column1.title,
+ type: 'select',
+ },
+ ]}
+ components={{
+ Row: CustomRow,
+ }}
+ />,
+ );
+
+ expect(rendered.getByText('Filters (0)')).toBeInTheDocument();
+ });
+
+ it('should render the provided custom row component correctly', async () => {
+ const rendered = await renderInTestApp(
+ EMPTY}
+ columns={minProps.columns}
+ data={minProps.data}
+ components={{
+ Row: CustomRow,
+ }}
+ />,
+ );
+
+ expect(
+ rendered.getByText('customised cell first value, first row'),
+ ).toBeInTheDocument();
+ });
+ });
});
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index 84e88ae01e..65edb5b69b 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/packages/core-components/src/components/Table/Table.tsx
@@ -303,6 +303,7 @@ export function Table(props: TableProps) {
initialState,
emptyContent,
onStateChange,
+ components,
...restProps
} = props;
const tableClasses = useTableStyles();
@@ -493,6 +494,7 @@ export function Table(props: TableProps) {
Header: StyledMTableHeader,
Toolbar,
Body,
+ ...components,
}}
options={{ ...defaultOptions, ...options }}
columns={MTColumns}