Skip to content

Commit 8f45387

Browse files
izadoesdevizadoesdev
committed
fix: table sort and search
1 parent e11bcca commit 8f45387

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+166
-10268
lines changed

‎apps/dashboard/components/table/data-table.tsx‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ interface DataTableProps<TData extends { name: string | number }, TValue> {
4343
onAddFilter?: (field: string, value: string, tableTitle?: string) => void;
4444
onRowAction?: (row: TData) => void;
4545
minHeight?: string | number;
46-
showSearch?: boolean;
4746
getSubRows?: (row: TData) => TData[] | undefined;
4847
renderSubRow?: (
4948
subRow: TData,
@@ -95,17 +94,16 @@ export function DataTable<TData extends { name: string | number }, TValue>({
9594
className,
9695
onRowClick,
9796
minHeight = DEFAULT_MIN_HEIGHT,
98-
showSearch = true,
9997
getSubRows,
10098
renderSubRow,
10199
expandable = false,
102100
onAddFilter,
103101
onRowAction,
104102
}: DataTableProps<TData, TValue>) {
105-
const [sorting, setSorting] = useState<SortingState>([]);
106-
const [globalFilter, setGlobalFilter] = useState('');
107103
const [activeTab, setActiveTab] = useState(tabs?.[0]?.id || '');
108104
const [isTransitioning, setIsTransitioning] = useState(false);
105+
const [sorting, setSorting] = useState<SortingState>([]);
106+
const [globalFilter, setGlobalFilter] = useState('');
109107

110108
const { fullScreen, setFullScreen, hasMounted, modalRef } = useFullScreen();
111109

@@ -131,13 +129,14 @@ export function DataTable<TData extends { name: string | number }, TValue>({
131129
},
132130
state: {
133131
sorting,
134-
globalFilter: showSearch ? globalFilter : '',
132+
globalFilter,
135133
},
136134
onSortingChange: setSorting,
137135
onGlobalFilterChange: setGlobalFilter,
138136
getCoreRowModel: getCoreRowModel(),
139137
getFilteredRowModel: getFilteredRowModel(),
140138
getSortedRowModel: getSortedRowModel(),
139+
globalFilterFn: 'includesString',
141140
});
142141

143142
const handleTabChange = (tabId: string) => {
@@ -146,10 +145,10 @@ export function DataTable<TData extends { name: string | number }, TValue>({
146145
}
147146

148147
setIsTransitioning(true);
148+
setSorting([]);
149+
setGlobalFilter('');
149150
setTimeout(() => {
150151
setActiveTab(tabId);
151-
setGlobalFilter('');
152-
setSorting([]);
153152
setIsTransitioning(false);
154153
}, 150);
155154
};
@@ -168,11 +167,6 @@ export function DataTable<TData extends { name: string | number }, TValue>({
168167
<Skeleton className="h-5 w-32 rounded" />
169168
{description && <Skeleton className="mt-0.5 h-3 w-48 rounded" />}
170169
</div>
171-
{showSearch && (
172-
<div className="flex-shrink-0">
173-
<Skeleton className="h-7 w-36 rounded" />
174-
</div>
175-
)}
176170
</div>
177171

178172
{tabs && tabs.length > 1 && (
@@ -203,10 +197,9 @@ export function DataTable<TData extends { name: string | number }, TValue>({
203197
{/* Toolbar */}
204198
<TableToolbar
205199
description={description}
206-
globalFilter={globalFilter}
207200
onFullScreenToggle={() => setFullScreen(true)}
208-
onGlobalFilterChange={setGlobalFilter}
209-
showSearch={showSearch}
201+
onSearchChange={setGlobalFilter}
202+
searchValue={globalFilter}
210203
title={title}
211204
/>
212205

@@ -242,10 +235,8 @@ export function DataTable<TData extends { name: string | number }, TValue>({
242235
emptyMessage={emptyMessage}
243236
expandable={expandable}
244237
getSubRows={getSubRows}
245-
globalFilter={globalFilter}
246238
minHeight={minHeight}
247239
onAddFilter={onAddFilter}
248-
onGlobalFilterChange={setGlobalFilter}
249240
onRowAction={onRowAction}
250241
onRowClick={onRowClick}
251242
renderSubRow={renderSubRow}
@@ -278,15 +269,14 @@ export function DataTable<TData extends { name: string | number }, TValue>({
278269
description={description}
279270
expandable={expandable}
280271
getSubRows={getSubRows}
281-
globalFilter={globalFilter}
282272
onAddFilter={onAddFilter}
283273
onClose={() => setFullScreen(false)}
284-
onGlobalFilterChange={setGlobalFilter}
285274
onRowAction={onRowAction}
286275
onRowClick={onRowClick}
276+
onSearchChange={setGlobalFilter}
287277
onTabChange={handleTabChange}
288278
renderSubRow={renderSubRow}
289-
showSearch={showSearch}
279+
searchValue={globalFilter}
290280
table={table}
291281
tabs={tabs}
292282
title={title}

‎apps/dashboard/components/table/fullscreen-modal.tsx‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ interface FullScreenModalProps<TData extends { name: string | number }> {
1717
title?: string;
1818
description?: string;
1919
onClose: () => void;
20-
showSearch?: boolean;
21-
globalFilter: string;
22-
onGlobalFilterChange: (value: string) => void;
2320
tabs?: TabConfig<TData>[];
2421
activeTab?: string;
2522
onTabChange?: (tabId: string) => void;
@@ -33,19 +30,20 @@ interface FullScreenModalProps<TData extends { name: string | number }> {
3330
onAddFilter?: (field: string, value: string, tableTitle?: string) => void;
3431
onRowAction?: (row: TData) => void;
3532
onRowClick?: (field: string, value: string | number) => void;
33+
searchValue?: string;
34+
onSearchChange?: (value: string) => void;
3635
}
3736

3837
export function FullScreenModal<TData extends { name: string | number }>({
3938
table,
4039
title,
4140
description,
4241
onClose,
43-
showSearch = true,
44-
globalFilter,
45-
onGlobalFilterChange,
4642
tabs,
4743
activeTab,
4844
onTabChange,
45+
searchValue,
46+
onSearchChange,
4947
expandable = false,
5048
getSubRows,
5149
renderSubRow,
@@ -68,17 +66,31 @@ export function FullScreenModal<TData extends { name: string | number }>({
6866
</p>
6967
)}
7068
</div>
71-
<button
72-
aria-label="Close full screen"
73-
className="ml-2 flex items-center justify-center rounded bg-sidebar-accent/60 p-2 text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
74-
onClick={onClose}
75-
style={{ minWidth: 40, minHeight: 40 }}
76-
tabIndex={0}
77-
title="Close"
78-
type="button"
79-
>
80-
<XIcon size={20} />
81-
</button>
69+
<div className="flex items-center gap-2">
70+
{onSearchChange && (
71+
<div className="relative">
72+
<MagnifyingGlassIcon className="-translate-y-1/2 absolute top-1/2 left-2.5 h-4 w-4 text-muted-foreground" />
73+
<Input
74+
className="h-8 w-64 pl-8 text-sm"
75+
onChange={(e) => onSearchChange(e.target.value)}
76+
placeholder="Search..."
77+
type="search"
78+
value={searchValue}
79+
/>
80+
</div>
81+
)}
82+
<button
83+
aria-label="Close full screen"
84+
className="ml-2 flex items-center justify-center rounded bg-sidebar-accent/60 p-2 text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
85+
onClick={onClose}
86+
style={{ minWidth: 40, minHeight: 40 }}
87+
tabIndex={0}
88+
title="Close"
89+
type="button"
90+
>
91+
<XIcon size={20} />
92+
</button>
93+
</div>
8294
</div>
8395

8496
{tabs && tabs.length > 1 && (
@@ -91,40 +103,13 @@ export function FullScreenModal<TData extends { name: string | number }>({
91103
</div>
92104
)}
93105

94-
{showSearch && (
95-
<div className="flex items-center px-3 py-2">
96-
<div className="relative w-full max-w-xs">
97-
<Input
98-
aria-label="Search table"
99-
className="h-8 w-full border-sidebar-border bg-sidebar-accent/30 pr-2 pl-7 text-sidebar-foreground text-xs"
100-
onChange={(event) => onGlobalFilterChange(event.target.value)}
101-
placeholder="Filter data..."
102-
value={globalFilter ?? ''}
103-
/>
104-
<MagnifyingGlassIcon className="-translate-y-1/2 absolute top-1/2 left-2 h-3 w-3 transform text-sidebar-foreground/50" />
105-
{globalFilter && (
106-
<button
107-
aria-label="Clear search"
108-
className="-translate-y-1/2 absolute top-1/2 right-2 rounded p-1 hover:bg-sidebar-accent/60"
109-
onClick={() => onGlobalFilterChange('')}
110-
type="button"
111-
>
112-
<XIcon className="h-3 w-3 text-sidebar-foreground/60" />
113-
</button>
114-
)}
115-
</div>
116-
</div>
117-
)}
118-
119106
<div className="flex-1 overflow-auto px-3 pb-3">
120107
<TableContent
121108
activeTab={activeTab}
122109
expandable={expandable}
123110
getSubRows={getSubRows}
124-
globalFilter={globalFilter}
125111
minHeight="100%"
126112
onAddFilter={onAddFilter}
127-
onGlobalFilterChange={onGlobalFilterChange}
128113
onRowAction={onRowAction}
129114
onRowClick={onRowClick}
130115
renderSubRow={renderSubRow}

0 commit comments

Comments
 (0)