Skip to content

Commit c3b208e

Browse files
neotobneotob
committed
update filter
1 parent 0ad3ac8 commit c3b208e

10 files changed

Lines changed: 116 additions & 54 deletions

‎src/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
export * from "./lib/translations/translations";
2-
export * from "./lib/useReactDataTableState.ts/useReactDataTableState";
2+
export * from "./lib/useReactDataTableState/useReactDataTableState";
33
export * from "./lib/useReactDataTable/useReactDataTable";
44
export * from "./lib/ReactDataTable/ReactDataTable";
55
export * from "./lib/utils/getStronglyTypedColumnFilter";
66
export * from "./lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable";
77
export * from "./lib/utils/createReactDataTableColumnHelper";
8+
export * from "./lib/utils/getModelFromColumFilter";
9+
export * from "./lib/utils/getColumFilterFromModel";

‎src/lib/ReactDataTable/ReactDataTable.tsx‎

Lines changed: 61 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,12 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
2020
rowStyle,
2121
pageSizes,
2222
showPaging,
23+
onEnter,
2324
totalRecords = table.getCoreRowModel().rows.length,
2425
} = props;
2526

2627
const { pagination } = table.getState();
2728

28-
console.log(table.getFooterGroups());
29-
3029
return (
3130
<>
3231
{!isLoading && isFetching && (
@@ -66,58 +65,72 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
6665
} = header;
6766

6867
return (
69-
<>
70-
<th>
71-
{header.index === 0 && (
72-
<>
68+
<th key={header.id}>
69+
{header.index === 0 && (
70+
<>
71+
{onEnter && (
7372
<FontAwesomeIcon
7473
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
7574
icon={faSearch}
76-
onClick={() => {
77-
// onSearch();
78-
}}
75+
onClick={() => onEnter(table.getState().columnFilters)}
7976
/>
77+
)}
8078

81-
<FontAwesomeIcon
82-
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
83-
icon={faTimes}
84-
onClick={() => {
85-
table.resetColumnFilters();
86-
}}
87-
/>
88-
</>
89-
)}
79+
<FontAwesomeIcon
80+
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
81+
icon={faTimes}
82+
onClick={() => {
83+
if (onEnter) {
84+
onEnter([]);
85+
}
9086

91-
{header.column.getCanFilter() && (
92-
<>
93-
{meta?.dropdownFilter ? (
94-
<Input
95-
type="select"
96-
onChange={(e) => {
97-
header.column.setFilterValue(e.target.value);
98-
}}
99-
bsSize="sm"
100-
>
101-
{meta.dropdownFilter.options.map(({ label, value }, i) => (
102-
<option key={i} value={value}>
103-
{label}
104-
</option>
105-
))}
106-
</Input>
107-
) : (
108-
<Input
109-
type="text"
110-
value={(header.column.getFilterValue() as string) ?? ""}
111-
onChange={(e) => {
112-
header.column.setFilterValue(e.target.value);
113-
}}
114-
bsSize="sm"
115-
></Input>
116-
)}
117-
</>
118-
)}
119-
</th>
120-
</>
87+
table.resetColumnFilters(true);
88+
}}
89+
/>
90+
</>
91+
)}
92+
93+
{header.column.getCanFilter() && (
94+
<>
95+
{meta?.customFilter ? (
96+
meta?.customFilter(header.column.getFilterValue(), header.column.setFilterValue)
97+
) : meta?.dropdownFilter ? (
98+
<Input
99+
type="select"
100+
onChange={(e) => {
101+
header.column.setFilterValue(e.target.value);
102+
}}
103+
onKeyUp={({ key }) => {
104+
if (key === "Enter" && onEnter) {
105+
onEnter(table.getState().columnFilters);
106+
}
107+
}}
108+
bsSize="sm"
109+
>
110+
{meta.dropdownFilter.options.map(({ label, value }, i) => (
111+
<option key={i} value={value}>
112+
{label}
113+
</option>
114+
))}
115+
</Input>
116+
) : (
117+
<Input
118+
type="text"
119+
value={(header.column.getFilterValue() as string) ?? ""}
120+
onChange={(e) => {
121+
header.column.setFilterValue(e.target.value);
122+
}}
123+
onKeyUp={({ key }) => {
124+
if (key === "Enter" && onEnter) {
125+
onEnter(table.getState().columnFilters);
126+
}
127+
}}
128+
bsSize="sm"
129+
></Input>
130+
)}
131+
</>
132+
)}
133+
</th>
121134
);
122135
})}
123136
</tr>

‎src/lib/ReactDataTable/ReactDataTableProps.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Table } from "@tanstack/react-table";
1+
import { ColumnFiltersState, Table } from "@tanstack/react-table";
22
import { CSSProperties } from "react";
33

44
/**
@@ -55,4 +55,9 @@ export interface ReactDataTableProps<TData> {
5555
* boolean flag to indicate if the paging should be displayed
5656
*/
5757
showPaging?: boolean;
58+
59+
/**
60+
* callback that gets trigger by pressing enter or clicking the search icon
61+
*/
62+
onEnter?: (columnFilters: ColumnFiltersState) => void;
5863
}

‎src/lib/useReactDataTable/useReactDataTable.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
2-
import { useReactDataTableState } from "../useReactDataTableState.ts/useReactDataTableState";
2+
import { useReactDataTableState } from "../useReactDataTableState/useReactDataTableState";
33
import Skeleton from "react-loading-skeleton";
44
import { useReactDataTableProps } from "./useReactDataTableProps";
55
import { useReactDataTableResult } from "./useReactDataTableResult";
@@ -51,13 +51,25 @@ const useReactDataTable = <TData,>(props: useReactDataTableProps<TData>): useRea
5151
}));
5252
const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({} as TData));
5353

54+
// add this so we dont have local filtering
55+
columns.filter((x) => !x.filterFn).forEach((x) => (x.filterFn = () => true));
56+
5457
const table = useReactTable<TData>({
5558
data: isLoading ? skeletonData : data,
5659
columns: isLoading ? skeletonColumns : columns,
5760

58-
onColumnFiltersChange: effectiveOnColumnFiltersChange,
59-
onPaginationChange: effectiveOnPaginationChange,
60-
onSortingChange: effectiveOnSortingChange,
61+
onColumnFiltersChange: (filtersOrUpdaterFn) => {
62+
const newFilter = typeof filtersOrUpdaterFn !== "function" ? filtersOrUpdaterFn : filtersOrUpdaterFn(effectiveColumnFilters);
63+
return effectiveOnColumnFiltersChange(newFilter);
64+
},
65+
onPaginationChange: (paginationOrUpdaterFn) => {
66+
const newFilter = typeof paginationOrUpdaterFn !== "function" ? paginationOrUpdaterFn : paginationOrUpdaterFn(effectivePagination);
67+
return effectiveOnPaginationChange(newFilter);
68+
},
69+
onSortingChange: (sortingOrUpdaterFn) => {
70+
const newFilter = typeof sortingOrUpdaterFn !== "function" ? sortingOrUpdaterFn : sortingOrUpdaterFn(effectiveSorting);
71+
return effectiveOnSortingChange(newFilter);
72+
},
6173

6274
state: {
6375
columnFilters: effectiveColumnFilters,

src/lib/useReactDataTableState.ts/useReactDataTableState.ts renamed to src/lib/useReactDataTableState/useReactDataTableState.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const useReactDataTableState = (props: useReactDataTableStateProps = {}): useRea
1111
const { initialColumnFilters, initialSorting, initialPagination } = props;
1212

1313
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(initialColumnFilters ?? []);
14+
const [enteredColumnFilters, setEnteredColumnFilters] = useState<ColumnFiltersState>(initialColumnFilters ?? []);
1415
const [sorting, setSorting] = useState<SortingState>(initialSorting ?? []);
1516
const [pagination, setPagination] = useState<PaginationState>({
1617
pageIndex: initialPagination?.pageIndex ?? 0,
@@ -21,9 +22,11 @@ const useReactDataTableState = (props: useReactDataTableStateProps = {}): useRea
2122
sorting,
2223
pagination,
2324
columnFilters,
25+
enteredColumnFilters,
2426
setSorting,
2527
setColumnFilters,
2628
setPagination,
29+
setEnteredColumnFilters,
2730
};
2831
};
2932

src/lib/useReactDataTableState.ts/useReactDataTableStateProps.ts renamed to src/lib/useReactDataTableState/useReactDataTableStateProps.ts

File renamed without changes.

src/lib/useReactDataTableState.ts/useReactDataTableStateResult.ts renamed to src/lib/useReactDataTableState/useReactDataTableStateResult.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ export interface useReactDataTableStateResult {
2020
*/
2121
columnFilters: ColumnFiltersState;
2222

23+
/**
24+
* the entered column filters state
25+
*/
26+
enteredColumnFilters: ColumnFiltersState;
27+
2328
/**
2429
* the setter for the sorting state
2530
*/
@@ -34,4 +39,9 @@ export interface useReactDataTableStateResult {
3439
* the setter for the column filters state
3540
*/
3641
setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
42+
43+
/**
44+
* the setter for the column entered filters state
45+
*/
46+
setEnteredColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
3747
}

‎src/lib/utils/getColumFilterFromModel.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ColumnFiltersState } from "@tanstack/react-table";
2+
3+
const getColumFilterFromModel = <TFilter extends { [k: string]: any }>(filter: TFilter): ColumnFiltersState => {
4+
return Object.entries(filter).map(([id, value]) => {
5+
return { id, value };
6+
});
7+
};
8+
9+
export { getColumFilterFromModel };

‎src/lib/utils/getModelFromColumFilter.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ColumnFilter, ColumnFiltersState } from "@tanstack/react-table";
2+
3+
const getModelFromColumFilter = <TFilter extends { [k: string]: any }>(filter: ColumnFiltersState): TFilter => {
4+
return Object.fromEntries(filter.map(({ id, value }: ColumnFilter) => [id, value])) as TFilter;
5+
};
6+
7+
export { getModelFromColumFilter };

‎src/react-table.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@ declare module "@tanstack/table-core" {
2424
parseValueAs?: "number" | "date";
2525
cellStyle?: CSSProperties;
2626
enumValues?: EnumValue[];
27+
customFilter?: (filterValue: any, setFilterValue: (filterValue: any) => void) => JSX.Element;
2728
}
2829
}

0 commit comments

Comments
 (0)