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('
', () => {
);
expect(rendered.getByText('EMPTY')).toBeInTheDocument();
});
+
+ describe('with custom components', () => {
+ const CustomRow = ({ data }) => {
+ 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}