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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
"use client"
import * as React from "react"
import type {
DataTableAdvancedFilterField,
DataTableFilterField,
DataTableRowAction,
} from "@/types/table"
import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { useFeatureFlags } from "./feature-flags-provider"
import { getColumns } from "./vendorTypes-table-columns"
import { ItemsTableToolbarActions } from "./vendorTypes-table-toolbar-actions"
import { UpdateTypeSheet } from "./update-vendorTypes-sheet"
import { getVendorTypes } from "../service"
import { VendorTypes } from "@/db/schema"
import { DeleteVendorTypesDialog } from "./delete-vendorTypes-dialog"
interface ItemsTableProps {
promises: Promise<
[
Awaited<ReturnType<typeof getVendorTypes>>,
]
>
}
export function VendorTypesTable({ promises }: ItemsTableProps) {
const { featureFlags } = useFeatureFlags()
const [{ data, pageCount }] =
React.use(promises)
console.log(data)
const [rowAction, setRowAction] =
React.useState<DataTableRowAction<VendorTypes> | null>(null)
const columns = React.useMemo(
() => getColumns({ setRowAction }),
[setRowAction]
)
/**
* This component can render either a faceted filter or a search filter based on the `options` prop.
*
* @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered.
*
* Each `option` object has the following properties:
* @prop {string} label - The label for the filter option.
* @prop {string} value - The value for the filter option.
* @prop {React.ReactNode} [icon] - An optional icon to display next to the label.
* @prop {boolean} [withCount] - An optional boolean to display the count of the filter option.
*/
const filterFields: DataTableFilterField<VendorTypes>[] = [
]
/**
* Advanced filter fields for the data table.
* These fields provide more complex filtering options compared to the regular filterFields.
*
* Key differences from regular filterFields:
* 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
* 2. Enhanced flexibility: Allows for more precise and varied filtering options.
* 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
* 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
*/
const advancedFilterFields: DataTableAdvancedFilterField<VendorTypes>[] = [
{
id: "nameKo",
label: "업체 유형(한글)",
type: "text",
},
{
id: "nameEn",
label: "업체 유형(En)",
type: "text",
},
]
const { table } = useDataTable({
data,
columns,
pageCount,
filterFields,
enablePinning: true,
enableAdvancedFilter: true,
initialState: {
sorting: [{ id: "createdAt", desc: true }],
columnPinning: { right: ["actions"] },
},
getRowId: (originalRow) => String(originalRow.id),
shallow: false,
clearOnDefault: true,
})
return (
<>
<DataTable
table={table}
>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
shallow={false}
>
<ItemsTableToolbarActions table={table} />
</DataTableAdvancedToolbar>
</DataTable>
<UpdateTypeSheet
open={rowAction?.type === "update"}
onOpenChange={() => setRowAction(null)}
vendorType={rowAction?.row.original ?? null}
/>
<DeleteVendorTypesDialog
open={rowAction?.type === "delete"}
onOpenChange={() => setRowAction(null)}
vendorTypes={rowAction?.row.original ? [rowAction?.row.original] : []}
showTrigger={false}
onSuccess={() => rowAction?.row.toggleSelected(false)}
/>
</>
)
}
|
