diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
index d9d8e0e..1a0b9f2 100644
--- a/src/ColumnFilter.tsx
+++ b/src/ColumnFilter.tsx
@@ -12,7 +12,7 @@ export interface ColumnFilterProps {
   color: string;
 }
 
-export const ColumnFilter = function ColumnFilter({ column, className, color, filterFn }: ColumnFilterProps) {
+export const DefaultColumnFilter = function ColumnFilter({ column, className, color, filterFn }: ColumnFilterProps) {
   const [state, setState] = useSetState({ open: false, value: null as unknown });
 
   const handleOpen = () =>
diff --git a/src/ColumnSorter.tsx b/src/ColumnSorter.tsx
index b7443d8..cddd5c6 100644
--- a/src/ColumnSorter.tsx
+++ b/src/ColumnSorter.tsx
@@ -8,7 +8,7 @@ export interface ColumnSorterProps {
   color: string;
 }
 
-export const ColumnSorter = ({ column, className, color }: ColumnSorterProps) => {
+export const DefaultColumnSorter = ({ column, className, color }: ColumnSorterProps) => {
   const sorted = column.getIsSorted();
   return (
     <ActionIcon
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 86989cf..80827c6 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -22,8 +22,8 @@ import {
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Fragment, RefCallback, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { ColumnFilter } from './ColumnFilter';
-import { ColumnSorter } from './ColumnSorter';
+import { DefaultColumnFilter } from './ColumnFilter';
+import { DefaultColumnSorter } from './ColumnSorter';
 import useStyles from './DataGrid.styles';
 import { GlobalFilter, globalFilterFn } from './GlobalFilter';
 import { DEFAULT_INITIAL_SIZE, Pagination as DefaultPagination } from './Pagination';
@@ -96,7 +96,17 @@ export function DataGrid<TData extends RowData>({
   empty,
   locale,
   // component overrides
-  components: { headerWrapper, headerRow, headerCell, bodyWrapper, bodyRow, bodyCell, pagination } = {},
+  components: {
+    headerWrapper,
+    headerRow,
+    headerCell,
+    bodyWrapper,
+    bodyRow,
+    bodyCell,
+    pagination,
+    columnFilter,
+    columnSorter,
+  } = {},
   // table option ovverides
   options,
   // rest
@@ -109,6 +119,8 @@ export function DataGrid<TData extends RowData>({
   const BodyRow = bodyRow ?? DefaultBodyRow;
   const BodyCell = bodyCell ?? DefaultBodyCell;
   const Pagination = pagination ?? DefaultPagination;
+  const ColumnFilter = columnFilter ?? DefaultColumnFilter;
+  const ColumnSorter = columnSorter ?? DefaultColumnSorter;
   const { classes, theme, cx } = useStyles(
     {
       height,
diff --git a/src/types.ts b/src/types.ts
index c7e8d22..df331f5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,6 +16,8 @@ import {
   TableState,
 } from '@tanstack/react-table';
 import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import { ColumnFilterProps } from './ColumnFilter';
+import { ColumnSorterProps } from './ColumnSorter';
 import useStyles from './DataGrid.styles';
 import { PaginationProps } from './Pagination';
 import {
@@ -229,4 +231,6 @@ export type DataGridComponents<TData> = {
   bodyRow: ComponentType<DataGridBodyRowProps<TData>>;
   bodyCell: ComponentType<DataGridBodyCellProps<TData>>;
   pagination: ComponentType<PaginationProps<TData>>;
+  columnFilter: ComponentType<ColumnFilterProps>;
+  columnSorter: ComponentType<ColumnSorterProps>;
 };