feat: add overrides for filter and sorter #154

Kuechlin · May 25, 2023 · 1222fa4 · 1222fa4
1 parent 83055cd
commit 1222fa4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>;
 };