From 758e20eb8749b51311eabf525ea9ee80e3dbe335 Mon Sep 17 00:00:00 2001
From: Danang <danang@canva.com>
Date: Thu, 2 Jun 2022 17:20:05 +1000
Subject: [PATCH] Fix the missing filter in the toolbar when passing a custom
 component in the core-components Table"

Signed-off-by: Danang <danang@canva.com>
---
 .../src/components/Table/Table.test.tsx       | 51 +++++++++++++++++++
 .../src/components/Table/Table.tsx            |  2 +
 2 files changed, 53 insertions(+)

diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx
index 12431dea59..2582be8506 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('<Table />', () => {
     );
     expect(rendered.getByText('EMPTY')).toBeInTheDocument();
   });
+
+  describe('with custom components', () => {
+    const CustomRow = ({ data }) => {
+      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();
+    });
+  });
 });
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<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}