Skip to content

Commit 4234567

Browse files
neotobneotob
committed
add features
1 parent 7a43371 commit 4234567

3 files changed

Lines changed: 109 additions & 100 deletions

File tree

‎src/lib/ReactDataTable/ReactDataTable.tsx‎

Lines changed: 102 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
2323
showPaging,
2424
onEnter,
2525
totalRecords = table.getCoreRowModel().rows.length,
26+
withoutHeaders = false,
2627
} = props;
2728

2829
const { pagination } = table.getState();
@@ -56,111 +57,113 @@ const ReactDataTable = <TData,>(props: ReactDataTableProps<TData>) => {
5657
: tableStyle
5758
}
5859
>
59-
<thead>
60-
{table.getHeaderGroups().map((headerGroup) => (
61-
<Fragment key={headerGroup.id}>
62-
<tr key={`${headerGroup.id}-col-header`}>
63-
{headerGroup.headers.map((header) => (
64-
<th
65-
key={header.id}
66-
onClick={header.column.getToggleSortingHandler()}
67-
style={header.column.getCanSort() ? { cursor: "pointer" } : {}}
68-
>
69-
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
60+
{!withoutHeaders && (
61+
<thead>
62+
{table.getHeaderGroups().map((headerGroup) => (
63+
<Fragment key={headerGroup.id}>
64+
<tr key={`${headerGroup.id}-col-header`}>
65+
{headerGroup.headers.map((header) => (
66+
<th
67+
key={header.id}
68+
onClick={header.column.getToggleSortingHandler()}
69+
style={header.column.getCanSort() ? { cursor: "pointer" } : {}}
70+
>
71+
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
7072

71-
{header.column.getIsSorted() === "desc" ? (
72-
<FontAwesomeIcon icon={faSortDown} className="ms-1" />
73-
) : header.column.getIsSorted() === "asc" ? (
74-
<FontAwesomeIcon icon={faSortUp} className="ms-1" />
75-
) : header.column.getCanSort() ? (
76-
<FontAwesomeIcon icon={faSort} className="ms-1" />
77-
) : (
78-
""
79-
)}
80-
</th>
81-
))}
82-
</tr>
83-
<tr key={`${headerGroup.id}-col-filters`}>
84-
{headerGroup.headers.map((header) => {
85-
const {
86-
column: {
87-
columnDef: { meta },
88-
},
89-
} = header;
73+
{header.column.getIsSorted() === "desc" ? (
74+
<FontAwesomeIcon icon={faSortDown} className="ms-1" />
75+
) : header.column.getIsSorted() === "asc" ? (
76+
<FontAwesomeIcon icon={faSortUp} className="ms-1" />
77+
) : header.column.getCanSort() ? (
78+
<FontAwesomeIcon icon={faSort} className="ms-1" />
79+
) : (
80+
""
81+
)}
82+
</th>
83+
))}
84+
</tr>
85+
<tr key={`${headerGroup.id}-col-filters`}>
86+
{headerGroup.headers.map((header) => {
87+
const {
88+
column: {
89+
columnDef: { meta },
90+
},
91+
} = header;
92+
93+
return (
94+
<th key={`${header.id}-col-filter`}>
95+
{header.index === 0 && (
96+
<>
97+
{onEnter && (
98+
<FontAwesomeIcon
99+
style={{ cursor: "pointer", marginBottom: "4px", marginRight: "5px" }}
100+
icon={faSearch}
101+
onClick={() => onEnter(table.getState().columnFilters)}
102+
/>
103+
)}
90104

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

‎src/lib/ReactDataTable/ReactDataTableProps.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,9 @@ export interface ReactDataTableProps<TData> {
6060
* callback that gets trigger by pressing enter or clicking the search icon
6161
*/
6262
onEnter?: (columnFilters: ColumnFiltersState) => void;
63+
64+
/**
65+
* To draw the table without headers (titles + filters)
66+
*/
67+
withoutHeaders?: boolean;
6368
}

‎src/react-table.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CSSProperties } from "react";
66
interface DropdownColumnFilterOption {
77
label: string;
88
value: string | number;
9+
disabled?: boolean;
910
}
1011

1112
interface DropdownColumnFilter {
@@ -24,6 +25,6 @@ declare module "@tanstack/table-core" {
2425
parseValueAs?: "number" | "date";
2526
cellStyle?: CSSProperties;
2627
enumValues?: EnumValue[];
27-
customFilter?: (filterValue: any, setFilterValue: (filterValue: any) => void) => JSX.Element;
28+
customFilter?: <T>(filterValue: T, setFilterValue: (filterValue: T) => void) => JSX.Element;
2829
}
2930
}

0 commit comments

Comments
 (0)