Merge pull request #11792 from danangarbansa/master

Fix the missing filter in the toolbar when passing a custom component in the core-components Table

.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

packages/core-components/src/components/Table/Table.test.tsx

@@ -160,4 +160,55 @@ describe('<Table />', () => {
     );
     expect(rendered.getByText('EMPTY')).toBeInTheDocument();
   });
+
+  describe('with custom components', () => {
+    const CustomRow = ({ data }: any) => {
+      return (
+        <tr>
+          <td>customised cell {data.col1}</td>
+          <td>customised cell {data.col2}</td>
+        </tr>
+      );
+    };
+
+    it('should not override the toolbar implementation', async () => {
+      const rendered = await renderInTestApp(
+        <Table
+          subtitle="subtitle"
+          emptyContent={<div>EMPTY</div>}
+          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(
+        <Table
+          subtitle="subtitle"
+          emptyContent={<div>EMPTY</div>}
+          columns={minProps.columns}
+          data={minProps.data}
+          components={{
+            Row: CustomRow,
+          }}
+        />,
+      );
+
+      expect(
+        rendered.getByText('customised cell first value, first row'),
+      ).toBeInTheDocument();
+    });
+  });
 });

packages/core-components/src/components/Table/Table.tsx

@@ -303,6 +303,7 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
     initialState,
     emptyContent,
     onStateChange,
+    components,
     ...restProps
   } = props;
   const tableClasses = useTableStyles();
@@ -493,6 +494,7 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
           Header: StyledMTableHeader,
           Toolbar,
           Body,
+          ...components,
         }}
         options={{ ...defaultOptions, ...options }}
         columns={MTColumns}