Skip to content

Commit 377d515

Browse files
author
Gianmarco Manni
committed
add withoutHeaderFilters prop
1 parent 308f420 commit 377d515

2 files changed

Lines changed: 84 additions & 76 deletions

File tree

‎src/lib/ReactDataTable/ReactDataTable.tsx‎

Lines changed: 79 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
2424
onEnter,
2525
totalRecords = table.getCoreRowModel().rows.length,
2626
withoutHeaders = false,
27+
withoutHeaderFilters = false,
2728
} = props;
2829

2930
const { pagination } = table.getState();
@@ -82,87 +83,89 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
8283
</th>
8384
))}
8485
</tr>
85-
<tr key={`${headerGroup.id}-col-filters`}>
86-
{headerGroup.headers.map((header) => {
87-
const {
88-
column: {
89-
columnDef: { meta },
90-
},
91-
} = header;
86+
{!withoutHeaderFilters && (
87+
<tr key={`${headerGroup.id}-col-filters`}>
88+
{headerGroup.headers.map((header) => {
89+
const {
90+
column: {
91+
columnDef: { meta },
92+
},
93+
} = header;
94+
95+
return (
96+
<th key={`${header.id}-col-filter`}>
97+
{header.index === 0 && (
98+
<>
99+
{onEnter && (
100+
<FontAwesomeIcon
101+
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
102+
icon={faSearch}
103+
onClick={() => onEnter(table.getState().columnFilters)}
104+
/>
105+
)}
92106

93-
return (
94-
<th key={`${header.id}-col-filter`}>
95-
{header.index === 0 && (
96-
<>
97-
{onEnter && (
98107
<FontAwesomeIcon
99108
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
100-
icon={faSearch}
101-
onClick={() => onEnter(table.getState().columnFilters)}
102-
/>
103-
)}
104-
105-
<FontAwesomeIcon
106-
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
107-
icon={faTimes}
108-
onClick={() => {
109-
if (onEnter) {
110-
onEnter([]);
111-
}
112-
113-
table.resetColumnFilters(true);
114-
}}
115-
/>
116-
</>
117-
)}
118-
119-
{header.column.getCanFilter() && (
120-
<>
121-
{meta?.customFilter ? (
122-
meta?.customFilter(header.column.getFilterValue(), header.column.setFilterValue)
123-
) : meta?.dropdownFilter ? (
124-
<Input
125-
type="select"
126-
onChange={(e) => {
127-
header.column.setFilterValue(
128-
meta.dropdownFilter?.options[(e.target as any as HTMLSelectElement).selectedIndex]?.value ??
129-
e.target.value,
130-
);
131-
}}
132-
onKeyUp={({ key }) => {
133-
if (key === "Enter" && onEnter) {
134-
onEnter(table.getState().columnFilters);
135-
}
136-
}}
137-
bsSize="sm"
138-
>
139-
{meta.dropdownFilter.options.map(({ label, value, disabled }, i) => (
140-
<option key={i} value={value} disabled={disabled}>
141-
{label}
142-
</option>
143-
))}
144-
</Input>
145-
) : (
146-
<Input
147-
type="text"
148-
value={(header.column.getFilterValue() as string) ?? ""}
149-
onChange={(e) => {
150-
header.column.setFilterValue(e.target.value);
151-
}}
152-
onKeyUp={({ key }) => {
153-
if (key === "Enter" && onEnter) {
154-
onEnter(table.getState().columnFilters);
109+
icon={faTimes}
110+
onClick={() => {
111+
if (onEnter) {
112+
onEnter([]);
155113
}
114+
115+
table.resetColumnFilters(true);
156116
}}
157-
bsSize="sm"
158-
></Input>
159-
)}
160-
</>
161-
)}
162-
</th>
163-
);
164-
})}
165-
</tr>
117+
/>
118+
</>
119+
)}
120+
121+
{header.column.getCanFilter() && (
122+
<>
123+
{meta?.customFilter ? (
124+
meta?.customFilter(header.column.getFilterValue(), header.column.setFilterValue)
125+
) : meta?.dropdownFilter ? (
126+
<Input
127+
type="select"
128+
onChange={(e) => {
129+
header.column.setFilterValue(
130+
meta.dropdownFilter?.options[(e.target as any as HTMLSelectElement).selectedIndex]?.value ??
131+
e.target.value,
132+
);
133+
}}
134+
onKeyUp={({ key }) => {
135+
if (key === "Enter" && onEnter) {
136+
onEnter(table.getState().columnFilters);
137+
}
138+
}}
139+
bsSize="sm"
140+
>
141+
{meta.dropdownFilter.options.map(({ label, value, disabled }, i) => (
142+
<option key={i} value={value} disabled={disabled}>
143+
{label}
144+
</option>
145+
))}
146+
</Input>
147+
) : (
148+
<Input
149+
type="text"
150+
value={(header.column.getFilterValue() as string) ?? ""}
151+
onChange={(e) => {
152+
header.column.setFilterValue(e.target.value);
153+
}}
154+
onKeyUp={({ key }) => {
155+
if (key === "Enter" && onEnter) {
156+
onEnter(table.getState().columnFilters);
157+
}
158+
}}
159+
bsSize="sm"
160+
></Input>
161+
)}
162+
</>
163+
)}
164+
</th>
165+
);
166+
})}
167+
</tr>
168+
)}
166169
</Fragment>
167170
))}
168171
</thead>

‎src/lib/ReactDataTable/ReactDataTableProps.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,9 @@ export interface ReactDataTableProps<TData> {
6565
* To draw the table without headers (titles + filters)
6666
*/
6767
withoutHeaders?: boolean;
68+
69+
/**
70+
* To draw the table without headers filters
71+
*/
72+
withoutHeaderFilters?: boolean;
6873
}

0 commit comments

Comments
 (0)