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 ( + + + + + ); + }; + + it('should not override the toolbar implementation', async () => { + const rendered = await renderInTestApp( +
customised cell {data.col1}customised cell {data.col2}
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}