1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
"use client"
import * as React from "react"
import type { DataTableAdvancedFilterField } from "@/types/table"
import { type Table } from "@tanstack/react-table"
import { cn } from "@/lib/utils"
import { DataTableFilterList } from "@/components/data-table/data-table-filter-list"
import { DataTableSortList } from "@/components/data-table/data-table-sort-list"
import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
import { DataTablePinList } from "./data-table-pin"
import { PinLeftButton } from "./data-table-pin-left"
import { PinRightButton } from "./data-table-pin-right"
import { DataTableGlobalFilter } from "./data-table-grobal-filter"
import { DataTableGroupList } from "./data-table-group-list"
interface DataTableAdvancedToolbarProps<TData>
extends React.HTMLAttributes<HTMLDivElement> {
/**
* The table instance returned from useDataTable hook with pagination, sorting, filtering, etc.
* @type Table<TData>
*/
table: Table<TData>
/**
* An array of filter field configurations for the data table.
* @type DataTableAdvancedFilterField<TData>[]
* @example
* const filterFields = [
* {
* id: 'name',
* label: 'Name',
* type: 'text',
* placeholder: 'Filter by name...'
* },
* {
* id: 'status',
* label: 'Status',
* type: 'select',
* options: [
* { label: 'Active', value: 'active', count: 10 },
* { label: 'Inactive', value: 'inactive', count: 5 }
* ]
* }
* ]
*/
filterFields: DataTableAdvancedFilterField<TData>[]
/**
* Debounce time (ms) for filter updates to enhance performance during rapid input.
* @default 300
*/
debounceMs?: number
/**
* Shallow mode keeps query states client-side, avoiding server calls.
* Setting to `false` triggers a network request with the updated querystring.
* @default true
*/
shallow?: boolean
}
export function DataTableAdvancedToolbar<TData>({
table,
filterFields = [],
debounceMs = 300,
shallow = true,
children,
className,
...props
}: DataTableAdvancedToolbarProps<TData>) {
return (
<div
className={cn(
"flex w-full items-center justify-between gap-2 overflow-auto p-1",
className
)}
{...props}
>
<div className="flex items-center gap-2">
<DataTableViewOptions table={table} />
<DataTableFilterList
table={table}
filterFields={filterFields}
debounceMs={debounceMs}
shallow={shallow}
/>
<DataTableSortList
table={table}
debounceMs={debounceMs}
shallow={shallow}
/>
<DataTableGroupList table={table} debounceMs={debounceMs}/>
<PinLeftButton table={table}/>
<PinRightButton table={table}/>
<DataTableGlobalFilter />
</div>
<div className="flex items-center gap-2">
{children}
</div>
</div>
)
}
|
